/* 自前ビデオ会議の試作：共通の見た目（個別相談・レッスン）2026年09月
   もとは index.html の中にあったもの。レッスンだけの見た目は lesson/lesson.css にある。 */
:root{--bg:#fbf6f3;--card:#fff;--ink:#2a2528;--sub:#6b6166;--line:#e8dcd6;--pri:#c0476f;--pri-d:#9e3558;--ok:#2f8a57;--ng:#c43d3d;--room:#1e1b22;--room2:#2b2730;--lineg:#06c755;--gold:#f5c400}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;font-size:18px;line-height:1.6;-webkit-text-size-adjust:100%;overflow-x:hidden}
button{font:inherit;cursor:pointer;color:inherit}
button:disabled{opacity:.45;cursor:default}
h1,h2,h3{line-height:1.35}
/* 上の帯 */
#hdr{background:#fff;border-bottom:1px solid var(--line);padding:8px 16px;display:flex;align-items:center;gap:8px}
#hdr .ttl{flex:1;min-width:0;font-size:16px}
#hdr .ttl b{color:var(--pri)}
.trial{font-size:12px;border:1px solid var(--ng);color:var(--ng);border-radius:4px;padding:0 6px;white-space:nowrap}
/* ふつうのページ */
.page{max-width:720px;margin:0 auto;padding:16px 16px 48px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px}
.h1{font-size:26px;margin:8px 0 14px;text-align:center}
.note{font-size:15px;color:var(--sub)}
.btn{display:block;width:100%;min-height:60px;border:0;border-radius:14px;background:var(--pri);color:#fff;font-size:20px;font-weight:bold;padding:10px 16px;margin:8px 0}
.btn:active{transform:translateY(1px)}
.btn.sub{background:#fff;color:var(--ink);border:2px solid var(--line);font-weight:normal}
.btn.sub.sel{border-color:var(--ok);background:#eaf6ee;font-weight:bold}
.btn.line{background:var(--lineg)}
.btn.big{min-height:72px;font-size:22px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2 .btn{margin:0}
.linkbtn{background:none;border:0;color:var(--pri-d);text-decoration:underline;font-size:17px;display:block;margin:4px auto;min-height:44px}
.qt{font-weight:bold;font-size:19px;margin-bottom:8px}
label.f{display:block;font-weight:bold;margin:10px 0 4px}
input.t,textarea.t{width:100%;font:inherit;font-size:19px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
input.t:focus,textarea.t:focus{outline:3px solid #f1c6d4;border-color:var(--pri)}
.err{border:2px solid var(--ng);background:#fff3f3;color:#8a1f1f;border-radius:14px;padding:12px 16px;margin:10px 0;font-size:18px}
.err b{font-size:20px}
.err:empty{display:none}
/* 📊 今月の利用状況（セールスだけ・2026年09月）：80%で黄、100%で赤 */
.usage{border-width:2px}
.usage.ok{border-color:#9fd3b2}
.usage.warn{border-color:#e0a800;background:#fffaf0}
.usage.bad{border-color:var(--ng);background:#fff3f3}
.usage .qt{margin-bottom:2px}
.ubar{position:relative;height:22px;background:#eee;border-radius:11px;overflow:hidden;margin:10px 0 6px}
.ubar i{display:block;height:100%;background:var(--ok);border-radius:11px}
.usage.warn .ubar i{background:#e0a800}
.usage.bad .ubar i{background:var(--ng)}
.ubar .uproj{position:absolute;top:0;bottom:0;width:3px;margin-left:-2px;background:#555;opacity:.55}
.unum{font-size:18px;overflow-wrap:anywhere}
.unum b{font-size:24px;font-variant-numeric:tabular-nums}
.usub{font-size:16px;margin-top:2px;overflow-wrap:anywhere}
.usub.udata .note{font-size:14px}
.ualert{border-radius:12px;padding:8px 12px;margin:8px 0;font-weight:bold;font-size:18px}
.ualert span{font-weight:normal;font-size:15px}
.ualert.warn{background:#fff1c2;color:#6b4e00}
.ualert.bad{background:var(--ng);color:#fff}
.utbl{width:100%;border-collapse:collapse;font-size:15px}
.utbl td{border-top:1px solid var(--line);padding:6px 4px;vertical-align:top;overflow-wrap:anywhere}
.utbl td:first-child{white-space:nowrap;color:var(--sub);width:1%}
.utbl td.num{text-align:right;white-space:nowrap;width:1%}
.uroom{font-size:16px;color:var(--ink);margin:4px 0}
.uroom.warn b{color:#8a6400}
.uroom.bad b{color:var(--ng)}
.okbox{border:2px solid var(--ok);background:#eef8f1;border-radius:14px;padding:12px 16px;margin:10px 0}
.linkbox{width:100%;font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#faf7f5;word-break:break-all;margin:6px 0}
/* LINEの中で開いたときの案内 */
.linewarn{border:3px solid var(--lineg);background:#effbf3;border-radius:16px;padding:14px 16px;margin-bottom:14px}
.linewarn h2{margin:0 0 6px;font-size:22px}
.linewarn .big{font-size:20px}
/* ただいまの日時 */
.nowclock{text-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 10px;margin-bottom:12px}
.nowclock .nd{font-size:20px;font-weight:bold}
.nowclock .nt{font-size:40px;font-weight:bold;letter-spacing:2px;line-height:1.2;font-variant-numeric:tabular-nums}
.nowclock .nl{font-size:14px;color:#777}
/* カメラ確認 */
.meter{height:18px;background:#eee;border-radius:9px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--ok);transition:width .08s}
/* マイクに音が来ないときの案内（2026年09月） */
.micnote{margin-top:10px;padding:10px 12px;border:2px solid #e0a800;background:#fffaf0;border-radius:12px;font-size:17px;line-height:1.6}
.micnote ol{margin:6px 0 0;padding-left:1.3em}
#micPick{margin-top:10px}
select.t{width:100%;min-width:0;font:inherit;font-size:17px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.prev{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#f6a5c0,#b86b9a);max-width:480px;margin:0 auto 6px}
.prev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prev .face{position:absolute;inset:0;display:grid;place-items:center;font-size:80px;opacity:.6}
.prevmsg{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;text-align:center;font-size:16px;padding:6px}
.prevmsg:empty{display:none}
.help{border:2px solid #f0a2a2;background:#fff7f7}
.help h3{margin:0 0 6px}
.help ol{padding-left:1.4em;margin:6px 0 12px}
.help li{margin-bottom:8px}
/* 相談中（通話の画面） */
.room{position:fixed;inset:0;display:flex;background:var(--room);color:#fff;overflow:hidden}
.rmain{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.status{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;font-size:15px;align-items:center}
.pill{background:rgba(255,255,255,.14);border-radius:999px;padding:2px 12px;white-space:nowrap}
.pill.ok{background:#1f5e3a}
.pill.wait{background:#5a4a12;color:#ffe680}
.stage{flex:1;position:relative;min-height:0;background:#000}
.remote{position:absolute;inset:0;border:4px solid transparent;transition:border-color .2s}
.remote.spk{border-color:#7ee08f}
.remote video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.remote .nm{position:absolute;left:10px;bottom:10px;font-size:18px;background:rgba(0,0,0,.55);padding:2px 10px;border-radius:8px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camoff{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:#3a3440;font-size:20px;padding:10px}
.camoff .ic{font-size:64px;display:block}
.self{position:absolute;right:10px;bottom:10px;width:min(30%,220px);aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#3a3440;border:2px solid rgba(255,255,255,.6);z-index:3;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.self video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.self .nm{position:absolute;left:4px;bottom:4px;font-size:13px;background:rgba(0,0,0,.55);padding:0 6px;border-radius:6px}
.self .camoff{font-size:14px}.self .camoff .ic{font-size:30px}
.waiting{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 20px 30%;gap:10px;z-index:2;background:radial-gradient(circle at 50% 35%,#3b3542,#1e1b22)}
.waiting .ic{font-size:56px}
/* 待ち画面のロゴ：暗い背景でも見えるよう明るい丸の上に置く */
.waitlogo{width:150px;height:150px;border-radius:50%;background:#faf6f3;padding:6px;box-sizing:border-box;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.waiting .big{font-size:24px;font-weight:bold}
.waiting .btn{max-width:360px}
.banner{position:absolute;left:10px;right:10px;top:10px;z-index:8;border-radius:14px;padding:12px 16px;font-size:19px;font-weight:bold;text-align:center;max-width:620px;margin:0 auto}
.banner.warn{background:var(--gold);color:#222}
.banner.bad{background:var(--ng);color:#fff}
.banner .btn{margin:8px 0 0}
.soundbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;min-height:80px;font-size:24px;padding:12px 28px;border:0;border-radius:18px;background:var(--gold);color:#222;font-weight:bold;box-shadow:0 6px 30px rgba(0,0,0,.6);max-width:calc(100% - 32px)}
.ovl{position:absolute;left:10px;right:10px;top:10px;z-index:7;display:flex;flex-direction:column;gap:8px;max-width:560px;margin:0 auto}
.custcard{background:#fff;color:var(--ink);border-radius:16px;padding:14px 16px;border:4px solid var(--pri);font-size:20px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.custcard .ttl{font-size:22px;font-weight:bold}
.custcard .btn{margin:8px 0 0}
.ctrl{display:flex;justify-content:center;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#141217;flex-wrap:wrap}
.cb{min-width:88px;min-height:68px;border:0;border-radius:12px;background:#35303a;color:#fff;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 8px;line-height:1.2}
.cb .ic{font-size:26px;line-height:1}
.cb.off{background:#8a2d2d}
.cb.on{background:var(--pri)}
.cb.end{background:var(--ng)}
/* 録画（2026年09月） */
.cb .sm{font-size:11px;opacity:.75;white-space:nowrap}
.cb.recon{background:#d42a2a}
.cb.recon .sm{display:none}
.pill.recpill{background:#d42a2a;color:#fff;font-weight:bold;font-variant-numeric:tabular-nums;animation:recblink 2s infinite}
.pill.recpill.warn{background:#8a1f1f}
.pill.recnote{background:#d42a2a;color:#fff;font-weight:bold;white-space:normal}
@keyframes recblink{50%{opacity:.75}}
.recnow{color:#c02020;font-weight:bold;font-size:15px;margin:6px 0;word-break:break-all}
.recres{font-size:15px;margin:6px 0 10px}
.recres dd{font-weight:normal;word-break:break-all}
.fn{word-break:break-all}
.recwarn{border:2px solid #e0a800;background:#fffaf0}
.recitem{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
/* 画面共有（2026年09月）：共有中は共有画面を大きく、ふたりのカメラは右下に縦並びの小窓 */
.share{position:absolute;inset:0;background:#111;z-index:1}
.share video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111}
.share .nm{position:absolute;left:10px;top:10px;font-size:16px;background:rgba(0,0,0,.6);padding:2px 10px;border-radius:8px;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share .zoom{position:absolute;left:10px;bottom:10px;min-height:52px;border:0;border-radius:12px;background:rgba(255,255,255,.92);color:#222;font-size:17px;font-weight:bold;padding:6px 14px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.share .unzoom{display:none}
.share:fullscreen .zoom{display:none}
.share:fullscreen .unzoom{display:block;left:auto;right:16px;top:16px;bottom:auto}
.stage.sharing{--pw:220px}
.stage.sharing .remote{inset:auto;right:10px;bottom:calc(18px + var(--pw) * .75);width:var(--pw);aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#3a3440;border:2px solid rgba(255,255,255,.6);z-index:3;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.stage.sharing .remote video{object-fit:cover}
.stage.sharing .remote .nm{font-size:13px;left:4px;bottom:4px;padding:0 6px;max-width:calc(100% - 8px)}
.stage.sharing .remote .camoff{font-size:13px}.stage.sharing .remote .camoff .ic{font-size:28px}
.stage.sharing .self{width:var(--pw);aspect-ratio:4/3}
.sharebar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#1f5e3a;color:#fff;font-weight:bold;font-size:17px;padding:6px 10px;text-align:center}
.sharebar button{border:0;border-radius:10px;background:#fff;color:#1f5e3a;font-weight:bold;min-height:44px;padding:4px 16px;font-size:16px}
/* 招待リンクの取り違え防止（2026年09月） */
.roombig{font-size:24px;font-weight:bold;text-align:center;background:#fff;border:3px solid var(--pri);border-radius:14px;padding:10px 12px;margin:8px 0;line-height:1.4;word-break:break-all}
.roombig small{display:block;font-size:15px;font-weight:normal;color:var(--sub)}
.invfor{font-weight:bold;font-size:17px;margin-top:6px}
.oldinv{border:3px solid #e0a800;background:#fffaf0;border-radius:16px;padding:14px 16px;margin-bottom:14px;font-size:19px}
/* セールスの横の欄 */
.panel{width:360px;background:#fff;color:var(--ink);display:flex;flex-direction:column;border-left:1px solid #000;min-height:0}
.panel[hidden]{display:none}
.phd{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);font-weight:bold}
.phd .x{margin-left:auto;background:#f1e8e4;border:0;border-radius:10px;min-width:48px;min-height:44px;font-size:16px}
.pbody{flex:1;overflow:auto;padding:10px 14px;min-height:0}
.kv{font-size:14px;color:var(--sub);margin-top:12px;font-weight:bold}
.okline{color:var(--ok);font-weight:bold;font-size:16px;margin:4px 0}
.log{list-style:none;padding:0;margin:4px 0;font-size:16px}
.log li{padding:3px 0;border-bottom:1px solid #f1e8e4}
.log .tm{font-variant-numeric:tabular-nums;color:var(--sub);margin-right:8px}
.rec{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:17px}
.rec dt{color:var(--sub)}.rec dd{margin:0;font-weight:bold;font-variant-numeric:tabular-nums}
@media(max-width:760px){
 .panel{position:fixed;left:0;right:0;bottom:0;width:auto;height:74vh;height:74dvh;z-index:40;border-radius:18px 18px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.4);border:0;padding-bottom:env(safe-area-inset-bottom)}
 .vv .panel{bottom:var(--vvb,0px);max-height:calc(var(--vvh,100vh) - 16px)}
 .ctrl{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
 .cb{min-width:0;font-size:14px}
 .cb .sm{display:none}
 .self{width:min(32%,150px)}
 .stage.sharing{--pw:min(30vw,130px)}
 .share .zoom{font-size:15px;min-height:48px;padding:4px 10px}
}
@media(min-width:761px){.self{aspect-ratio:4/3;width:min(26%,260px)}}
/* ===== 機種ごとの並び（2026年09月） ===== */
/* iPhone の切り欠き・丸い角：左右と上下の余白を足す */
.page{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
#hdr{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top))}
.room{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.status{padding-top:max(8px,env(safe-area-inset-top))}
/* アドレスバーの出入り・キーボード：見えている範囲にそろえる（JS が --vvh を入れたときだけ） */
.vv .room{bottom:auto;top:var(--vvt,0px);height:var(--vvh,100%)}
/* 端末の文字を大きくしている人でも、はみ出さない（2行になってもよい） */
.pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cb{max-width:100%}
.cb .lb{white-space:normal;overflow-wrap:anywhere;text-align:center}
.cb .sm.warnsm{display:block;white-space:normal;opacity:1;color:#ffe680;font-size:11px;max-width:120px}
.btn{overflow-wrap:anywhere}
.row2>*{min-width:0}
details.others{margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
details.others summary{min-height:44px;display:flex;align-items:center;color:var(--pri-d);text-decoration:underline;cursor:pointer}
/* マイクが消えているときの🔇・話している人の緑のふち */
.mute{position:absolute;right:8px;bottom:8px;z-index:2;background:rgba(0,0,0,.6);border-radius:8px;padding:0 6px;font-size:20px;line-height:1.4}
.self{transition:border-color .2s}
.self.spk{border-color:#7ee08f}
.self .mute{font-size:15px;right:4px;bottom:4px}
/* 電波が弱い・カメラが止まったときの案内（上に出す） */
.netwarn{order:-1;background:var(--gold);color:#222;border-radius:14px;padding:10px 14px;font-size:18px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.netwarn .btn{min-height:52px;font-size:18px;margin:8px 0 0}
.netwarn .row2 .btn{margin:8px 0 0}
/* 「並べる」：2人を同じ大きさで。横長なら左右、縦長（.gv）なら上下 */
.stage.gal .remote,.stage.gal .waiting{inset:auto;left:6px;top:6px;width:calc(50% - 9px);height:calc(100% - 12px);border-radius:12px;overflow:hidden;background:#2b2730}
.stage.gal .waiting{padding:12px}
.stage.gal .self{inset:auto;right:6px;top:6px;width:calc(50% - 9px);height:calc(100% - 12px);aspect-ratio:auto;border:4px solid transparent;border-radius:12px;box-shadow:none;z-index:1;background:#2b2730}
.stage.gal .self.spk{border-color:#7ee08f}
.stage.gal.gv .remote,.stage.gal.gv .waiting{width:calc(100% - 12px);height:calc(50% - 9px)}
.stage.gal.gv .self{right:auto;left:6px;top:auto;bottom:6px;width:calc(100% - 12px);height:calc(50% - 9px)}
.stage.gal .remote video,.stage.gal .self video{object-fit:contain;background:#000}
.stage.gal .self .nm{font-size:18px;left:10px;bottom:10px;padding:2px 10px;border-radius:8px}
.stage.gal .self .mute{font-size:20px;right:8px;bottom:8px}
.stage.gal .self .camoff{font-size:20px}.stage.gal .self .camoff .ic{font-size:56px}
.stage.gal .waitlogo{width:min(150px,30vmin);height:min(150px,30vmin)}
.stage.gal .waiting .big{font-size:21px}
/* 💬 チャット（2026年09月） */
.cb{position:relative}
.cb .badge{position:absolute;top:4px;right:6px;min-width:24px;height:24px;border-radius:12px;background:#e02424;color:#fff;font-size:14px;font-weight:bold;line-height:24px;padding:0 6px;box-shadow:0 0 0 2px #141217}
.chatp .phd{font-size:18px}
.chatp .pbody{background:#fbf8f6}
.msg{margin:8px 0;display:flex;flex-direction:column;align-items:flex-start}
.msg.me{align-items:flex-end}
.msg .who{font-size:14px;color:var(--sub);font-weight:bold;margin:0 4px 2px}
.msg .who .mt{font-weight:normal;color:#999;font-size:13px}
.msg .tx{background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:18px;line-height:1.5;max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
.msg.me .tx{background:#fde3ec;border-color:#f1c6d4;border-radius:14px 14px 4px 14px}
.msg .tx a{color:#0b57d0;text-decoration:underline;word-break:break-all}
.rxs{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.msg.me .rxs{justify-content:flex-end}
.rxc,.rxadd{border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 10px;min-height:44px;min-width:44px;font-size:15px}
.rxc.on{border-color:var(--pri);background:#fde3ec;font-weight:bold}
.rxadd{border-style:dashed;color:#8a7d82;font-size:14px}
.rxpick{display:inline-flex;gap:4px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:4px;margin-top:4px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.rxpick button{border:0;background:#f7f1ee;border-radius:10px;min-width:48px;min-height:48px;font-size:24px}
.cfoot{border-top:1px solid var(--line);padding:6px 10px calc(8px + env(safe-area-inset-bottom));background:#fff}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.quick button{min-height:44px;border:2px solid var(--line);background:#fff;border-radius:12px;font-size:15px;padding:2px 6px;line-height:1.3}
.cin{display:flex;gap:6px;align-items:flex-end}
.cin textarea{flex:1;min-width:0;font:inherit;font-size:18px;min-height:48px;max-height:130px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;resize:none;color:var(--ink);background:#fff}
.cin textarea:focus{outline:3px solid #f1c6d4;border-color:var(--pri)}
.cin button{min-height:48px;min-width:72px;border:0;border-radius:12px;background:var(--pri);color:#fff;font-weight:bold;font-size:18px}
.cpop{position:absolute;right:10px;top:10px;z-index:9;max-width:min(360px,calc(100% - 20px));background:#fff;color:var(--ink);border:0;border-left:6px solid var(--pri);border-radius:12px;padding:8px 12px;font-size:17px;text-align:left;box-shadow:0 6px 20px rgba(0,0,0,.45);line-height:1.45;animation:popin .25s ease-out;min-height:44px}
.cpop small{display:block;color:var(--sub);font-size:13px}
@keyframes popin{from{transform:translateY(-8px);opacity:0}}
/* スマホ：下から出る欄（メモ・送る／チャット）は、下のボタン列の上まで（ボタンを隠さない） */
@media(max-width:760px){
 .room .panel{bottom:var(--ctrlh,0px);height:auto;top:max(12vh,60px);padding-bottom:0}
 .vv .room .panel{bottom:calc(var(--vvb,0px) + var(--ctrlh,0px));max-height:none}
 .room .panel.chatp{top:max(22vh,90px)}
 .quick{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
 .quick button{white-space:nowrap;flex:none;padding:2px 12px}
}
/* タブレット縦・縦長の画面：セールスの欄は横ではなく下に（映像を細くしない） */
html.tabport .room{flex-direction:column}
 html.tabport .room .panel{width:auto;height:42%;flex:none;border-left:0;border-top:2px solid #000}
/* 横長の画面：セールスの欄の幅を画面に合わせて */
@media(min-width:761px){
 html:not(.tabport) .panel{width:clamp(300px,28vw,380px)}
}
/* 向きは JS（app.js の orientFit）が <html> に付ける印で決める：html.land＝スマホ横（高さ520以下）、html.tabport＝タブレット縦。
   キーボードが出て見えている範囲が縮んでも向きは変えない（2026年09月 iPhone の LINE の中で崩れた件） */
/* スマホを横にしたとき：映像を左、ボタンを右に縦並び */
html.land .rmain{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr)}
 html.land .status{grid-column:1;grid-row:1;padding:max(4px,env(safe-area-inset-top)) 8px 4px;font-size:13px;gap:4px}
 html.land .pill{padding:0 8px}
 html.land .sharebar{grid-column:1;grid-row:2;font-size:14px;padding:2px 8px}
 html.land .stage{grid-column:1;grid-row:3}
 html.land .ctrl{grid-column:2;grid-row:1/span 3;display:grid;grid-template-columns:repeat(var(--lcols,1),minmax(64px,78px));grid-auto-rows:minmax(48px,auto);align-content:center;gap:6px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));overflow-y:auto}
 html.land .cb{min-width:0;min-height:48px;font-size:12px;padding:2px 4px;gap:0}
 html.land .cb .ic{font-size:20px}
 html.land .cb .sm{display:none}
 html.land .cb .sm.warnsm{display:block;font-size:9px}
 html.land .self{width:min(22%,150px);aspect-ratio:4/3}
 html.land .waiting{padding:8px;justify-content:safe center;overflow:auto;gap:4px}
 html.land .waitlogo,html.land .stage.gal .waitlogo{width:72px;height:72px}
 html.land .waiting .big,html.land .stage.gal .waiting .big{font-size:18px}
 html.land .waiting .btn{min-height:48px;font-size:16px;margin:2px 0;padding:6px 10px}
 html.land .room .panel,html.land .room .panel.chatp{position:fixed;top:0;bottom:0;right:calc(var(--ctrlw,0px) + env(safe-area-inset-right));left:auto;width:min(380px,calc(100vw - var(--ctrlw,0px) - 140px));height:auto;border-radius:16px 0 0 16px;z-index:40;box-shadow:-6px 0 30px rgba(0,0,0,.4);border:0;padding-bottom:0}
 html.land .quick{grid-template-columns:1fr 1fr}
 html.land .quick button{min-height:44px;font-size:13px}
 html.land .cin textarea{min-height:44px;font-size:16px;padding:6px 10px}
 html.land .cin button{min-height:44px}
 html.land .chatp .phd{padding:2px 10px}
 html.land .vv .room .panel{bottom:var(--vvb,0px)}
 html.land .ovl{max-width:440px}
 html.land .custcard{font-size:16px;padding:8px 12px}
 html.land .custcard .ttl{font-size:17px}
 html.land .banner{font-size:16px;padding:8px 12px}
 html.land .netwarn{font-size:15px;padding:6px 10px}
 html.land .netwarn .btn{min-height:44px;font-size:15px;margin-top:4px}
 html.land .stage.sharing{--pw:min(22vw,140px)}
 html.land .soundbtn{min-height:60px;font-size:19px}
 html.land .stage.gal .remote .nm,html.land .stage.gal .self .nm{font-size:15px}
 html.land .h1{font-size:22px}
/* 退出後 */
.bigok{font-size:54px;text-align:center;margin-top:10px}
.endlogo{width:160px;height:auto;display:block;margin:0 auto}
/* 下から出る窓 */
#sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center;z-index:60}
#sheet.show{display:flex}
#sheet .box{background:#fff;color:var(--ink);width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:85vh;max-height:85dvh;overflow:auto;overscroll-behavior:contain}
#sheet h3{margin:0 0 10px}
@media(min-width:601px){#sheet{align-items:center}#sheet .box{border-radius:18px}}
#toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:#222;color:#fff;padding:12px 20px;border-radius:12px;font-size:18px;z-index:80;opacity:0;transition:opacity .3s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
#toast.show{opacity:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* スマホ（縦）でチャットを開いたら、画面いっぱいのチャット画面にする（2026年09月）
   上に見出しと「閉じる」、下に宛先・入力欄・「送る」。キーボードが出たら、見えている範囲（--vvt・--vvh）に合わせて入力欄をキーボードのすぐ上に。
   映像と声は裏でそのまま続く */
@media(max-width:760px){
 html:not(.land) .room .panel.chatp{position:fixed;left:0;right:0;top:0;bottom:0;height:auto;max-height:none;width:auto;z-index:50;border-radius:0;box-shadow:none;padding-bottom:0}
 html.vv:not(.land) .room .panel.chatp{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100%)}
 html:not(.land) .room .panel.chatp .phd{padding-top:max(8px,env(safe-area-inset-top))}
 html:not(.land) .room .panel.chatp .cfoot{padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .panel.chatp .tor{flex-wrap:nowrap;white-space:nowrap}
 .panel.chatp .cin textarea{white-space:pre-wrap}
}
/* スマホを横にしたときも、チャットは画面いっぱい（キーボードが出ると見えている高さが150px ほどになり、横の欄では入力欄が隠れるため） */
html.land .room .panel.chatp{left:0;right:0;top:0;bottom:0;width:auto;height:auto;z-index:50;border-radius:0;box-shadow:none}
html.vv.land .room .panel.chatp{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100%)}
html.land .room .panel.chatp .quick{display:flex;flex-wrap:nowrap;overflow-x:auto}
html.land.typing .room .panel.chatp .quick,html.land.typing .room .panel.chatp .pzbar,html.land.typing .room .panel.chatp .tor{display:none}
html.land .room .panel.chatp .quick button{flex:none;white-space:nowrap}
/* 自分の映像の向き（2026年09月）：html.mirror のときだけ、自分の映像（カメラ確認・自分の小窓・自分の四角）を鏡にする。
   相手の映像・録画は、どの画面でも反転しない。鏡にしている自分の映像には小さく「鏡」の印 */
html.mirror .prev video,html.mirror .self video,html.mirror #self video{transform:scaleX(-1)}
html.mirror .prev::before,html.mirror .self::before,html.mirror #self::before{content:"鏡";position:absolute;top:4px;left:4px;z-index:4;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:bold;line-height:1.5;border-radius:6px;padding:0 6px;pointer-events:none}

/* 録画の画質の選択（2026年09月） */
.recq{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0}
.recq .btn{margin:0;min-height:72px;text-align:left;line-height:1.35}
.recq .btn.on{outline:3px solid var(--pri,#c2185b);background:#fff4f8;color:#222}
.recq .btn .sm{font-size:14px;font-weight:normal}