/* JICHO: People (friends, follows) and Live discussions. Compact and bold, with touch
   targets of at least 44px on phones. Status labels reuse the site's red blinking Online / grey Offline. */
.sl-tabs{display:flex;gap:4px;overflow-x:auto;padding:6px 10px;scrollbar-width:none;position:sticky;top:0;z-index:4;background:#fff;border-bottom:1px solid var(--line)}
.sl-tabs::-webkit-scrollbar{display:none}
.sl-tab{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--wine);font-weight:900;font-size:13px;border-radius:99px;padding:7px 11px;min-height:38px;white-space:nowrap}
.sl-tab.active{background:var(--wine);color:#fff;border-color:var(--wine)}
.sl-tab .sl-badge[hidden]{display:none}
.sl-tab .sl-badge{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:99px;background:#ff3b3b;color:#fff;font-size:11px;line-height:18px;text-align:center}
.sl-bar{display:flex;gap:6px;padding:7px 10px;align-items:center}
.sl-bar .field{flex:1;min-width:0;margin:0}
.sl-list{list-style:none;margin:0;padding:2px 8px 10px;display:flex;flex-direction:column;gap:3px}
.sl-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border:1px solid var(--line);border-radius:11px;background:#fff;min-height:48px}
.sl-ava{position:relative;flex:0 0 36px;width:36px;height:36px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#f4e4cb,#a8825d);color:#fff;font-weight:900;display:grid;place-items:center;border:0;padding:0}
.sl-ava img{width:100%;height:100%;object-fit:cover;display:block}
.sl-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left;background:none;border:0;padding:0;color:inherit}
.sl-who strong{font-size:14.5px;font-weight:900;color:var(--wine);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-who small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-st{font-size:11.5px;font-weight:900;letter-spacing:.2px}
.sl-st.on{color:#ff3b3b;animation:mr-blink 1.1s steps(1,end) infinite}
.sl-st.off{color:#8a8a8a}
@media(prefers-reduced-motion:reduce){.sl-st.on{animation:none}}
.sl-acts{display:flex;gap:4px;flex:0 0 auto}
.sl-btn{border:1px solid var(--wine);background:#fff;color:var(--wine);font-weight:900;font-size:12.5px;border-radius:9px;padding:6px 9px;min-height:36px;white-space:nowrap}
.sl-btn.primary{background:var(--wine);color:#fff}
.sl-btn.quiet{border-color:var(--line);color:#704456}
.sl-btn.danger{border-color:#b91c1c;color:#b91c1c}
.sl-btn:disabled{opacity:.55}
.sl-pager{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px 14px}
.sl-pager span{font-size:12.5px;font-weight:800;color:var(--muted)}
.sl-empty{padding:22px 14px;text-align:center;color:var(--muted);font-weight:700}
.sl-note{margin:6px 10px;padding:9px 11px;border-radius:11px;background:#fff6e5;border:1px solid #f6d58f;color:#6b4a00;font-size:13px;font-weight:800}
.sl-social{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.sl-social .sl-counts{font-size:12.5px;font-weight:800;color:var(--muted);margin-right:auto}
@media(pointer:coarse){.sl-btn,.sl-tab{min-height:44px}.sl-row{min-height:52px}}

/* ---- Live ---- */
.lv-new{display:flex;gap:6px;padding:8px 10px}
.lv-new .field{flex:1;min-width:0;margin:0}
.lv-music-chip{display:inline-flex;align-items:center;gap:5px;flex:none;padding:0 10px;border:1px solid var(--line,#efe3d0);border-radius:999px;font-size:13px;font-weight:700;color:var(--wine,#5b3417);cursor:pointer;white-space:nowrap}
.lv-music-chip input{accent-color:#c07326;margin:0}
.lv-room-card{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--line);border-radius:12px;background:#fff}
.lv-room-card .sl-who strong{white-space:normal}
.lv-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff3b3b;margin-right:5px;animation:mr-blink 1.1s steps(1,end) infinite}
.lv-room{position:relative;background:#140c06;color:#fff;min-height:calc(100vh - 140px);display:flex;flex-direction:column}
.lv-top{display:flex;align-items:center;gap:6px;padding:7px 9px;background:#1f130a}
.lv-top h2{flex:1;min-width:0;margin:0;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-top .sl-btn{background:transparent;color:#fff;border-color:#ffffff55}
.lv-viewers{font-size:12px;font-weight:800;color:#fef1dd}
.lv-stage{display:grid;gap:4px;padding:4px;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);aspect-ratio:1/1;max-height:62vh;width:100%;max-width:640px;margin:0 auto}
.lv-stage.host{grid-template-columns:1fr 1fr 1fr;grid-template-rows:2fr 1fr}
.lv-stage.host .lv-tile:first-child{grid-column:1 / 4}
.lv-tile{position:relative;overflow:hidden;border-radius:10px;background:#3a2515;border:2px solid transparent;min-height:0;padding:0;color:#fff;font:inherit;text-align:left}
.lv-tile.speaking{border-color:#7cf0b0}
.lv-tile.offered{border-color:#ffd166}
.lv-tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.lv-tile .lv-face{position:absolute;inset:0;display:grid;place-items:center}
.lv-tile .lv-face img{width:46%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:2px solid #fef1dd}
.lv-tile .lv-face span{width:46%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:900;background:#a8825d}
.lv-name{position:absolute;left:5px;right:5px;bottom:5px;display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:900;text-shadow:0 1px 2px #000}
.lv-name b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-mic{font-size:12px;padding:1px 6px;border-radius:99px;background:#000a}
.lv-mic.live{background:#0f7a43}
.lv-tag{position:absolute;top:5px;left:5px;font-size:10.5px;font-weight:900;padding:1px 6px;border-radius:99px;background:#000a}
.lv-tile .sl-st{position:absolute;top:5px;right:5px;background:#000a;border-radius:99px;padding:1px 6px}
.lv-strip{display:flex;gap:4px;overflow-x:auto;padding:2px 6px 4px;max-width:640px;margin:0 auto;width:100%}
.lv-strip .lv-tile{flex:0 0 76px;height:76px}
.lv-strip-label{font-size:11.5px;font-weight:800;color:#fef1dd;padding:2px 8px;max-width:640px;margin:0 auto;width:100%}
.lv-controls{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:6px 8px}
.lv-controls .sl-btn{background:#ffffff14;color:#fff;border-color:#ffffff44}
.lv-controls .sl-btn.primary{background:#ecaa48;border-color:#ecaa48}
.lv-controls .sl-btn.danger{border-color:#ff8a8a;color:#ffb3b3}
.lv-status{text-align:center;font-size:12.5px;font-weight:800;color:#ffd166;padding:2px 10px;min-height:18px}
.lv-status.err{color:#ff9b9b}
.lv-mod{margin:4px 8px;border-radius:12px;background:#ffffff0f;padding:6px}
.lv-mod summary{font-weight:900;font-size:13px;cursor:pointer;padding:4px}
.lv-mod .sl-row{background:#ffffff10;border-color:#ffffff22}
.lv-mod .sl-who strong{color:#fff}
.lv-mod .sl-btn{background:transparent;color:#fff;border-color:#ffffff55}
/* Comments: rising, fading bubbles over the lower stage; history underneath. */
.lv-stage-wrap{position:relative;width:100%;max-width:640px;margin:0 auto}
.lv-stage.few{aspect-ratio:16/10}
.lv-float{position:absolute;left:8px;right:28%;bottom:8px;height:55%;pointer-events:none;overflow:hidden;z-index:5}
.lv-bubble{position:absolute;left:0;bottom:0;max-width:100%;padding:4px 9px;border-radius:12px;font-size:13.5px;line-height:1.3;font-weight:700;color:#2a180b;box-shadow:0 2px 8px #0005;opacity:.92;animation:lv-rise 6s ease-out forwards;word-break:break-word}
.lv-bubble b{font-weight:900;margin-right:4px}
@keyframes lv-rise{0%{transform:translateY(0);opacity:0}8%{opacity:.96}70%{opacity:.9}100%{transform:translateY(-160px);opacity:0}}
@media(prefers-reduced-motion:reduce){.lv-float{display:none}}
.lv-compose{position:sticky;bottom:0;display:flex;gap:5px;padding:5px 7px calc(5px + env(safe-area-inset-bottom));background:#1f130a;z-index:6}
.lv-compose input{flex:1;min-width:0;height:36px;border-radius:99px;border:1px solid #ffffff44;background:#ffffff12;color:#fff;padding:0 12px;font-size:16px}
.lv-compose input::placeholder{color:#fef1ddaa}
.lv-compose .sl-btn{min-height:36px;background:#ecaa48;border-color:#ecaa48;color:#fff}
.lv-history{max-height:28vh;overflow:auto;padding:4px 10px;font-size:13.5px;display:flex;flex-direction:column;gap:3px}
.lv-history p{margin:0;line-height:1.35;word-break:break-word}
.lv-history p b{font-weight:900;margin-right:4px}
.lv-history .del{border:0;background:none;color:#ff9b9b;font-size:11px;font-weight:800;margin-left:6px}
.lv-sheet{position:fixed;inset:0;z-index:40;background:#000a;display:flex;align-items:flex-end;justify-content:center}
.lv-sheet>div{background:#fff;color:var(--ink);width:min(100%,480px);border-radius:18px 18px 0 0;padding:12px 12px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.lv-sheet h3{margin:0 0 4px;color:var(--wine);font-size:17px;font-weight:900}
.lv-sheet .sl-btn{min-height:44px;font-size:14px}
body.live-mode .bottom-nav{display:none}
body.live-mode main{padding-bottom:0}


/* Keep the entire room on one dark surface; the former fixed vh subtraction left
   white app space below the room on mobile browser toolbars. */
body.live-mode,body.live-mode .app,body.live-mode main{background:#140c06}
body.live-mode .app{min-height:100dvh}
body.live-mode main{display:flex;flex-direction:column;padding-bottom:0;flex:1}
body.live-mode #roomView{flex:1;display:flex;flex-direction:column}
body.live-mode .lv-room{flex:1;min-height:0}
body.live-mode .lv-history{flex:1;min-height:52px;max-height:32dvh}
body.live-mode .lv-compose{margin-top:auto;position:sticky;bottom:0}
.lv-stage.few:has(.lv-tile:only-child){grid-template-columns:1fr;aspect-ratio:16/9;max-height:38dvh}
.lv-confirm{position:sticky;top:0;z-index:8;display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:#fff1f2;color:#b91c1c;border:2px solid #ef4444;padding:9px 12px;box-shadow:0 4px 16px #0005}
.lv-confirm strong{flex:1 1 180px;font-size:14px}
.lv-confirm .sl-btn{min-height:44px}
.lv-status.err{color:#ffb4b4;background:#5b2b07;border:1px solid #ffba53;padding:8px;margin:4px 8px;border-radius:8px}
.lv-service-note{padding:7px 12px;color:#ffe6a3;background:#352416;font-size:13px;font-weight:700}
.mr-feature-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 24px;margin:12px 14px;padding:12px 18px 8px;border:0;border-radius:26px;background:linear-gradient(110deg,#673610,#a2580d);color:white;box-shadow:0 5px 18px #5b341714;font-size:13px}
.mr-feature-intro{display:flex;align-items:center;gap:10px;min-height:30px}
.mr-feature-heart{font-size:27px;line-height:1;color:#fff5bc;font-weight:400}
.mr-feature-banner strong{font-family:Georgia,'Times New Roman',serif;font-size:20px;font-style:italic;font-weight:400;letter-spacing:.2px}
.mr-feature-banner nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mr-feature-banner button{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:16px;color:#fff5bc;background:transparent;padding:8px 0;min-height:44px;font:inherit;font-weight:500;box-shadow:none;cursor:pointer}
.mr-feature-banner button span{font-size:12px;opacity:.7}
.mr-feature-banner button:hover{text-decoration:underline;text-underline-offset:5px}
.mr-feature-banner button:focus-visible{outline:2px solid #fff5bc;outline-offset:4px}
body.live-mode .mr-feature-banner{margin-bottom:0}

/* Channel discovery and passive broadcasts between profile cards. */
#liveView{padding-bottom:24px;background:#fcfbf8}
#liveList{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;padding:16px}
.lv-channel{list-style:none;min-width:0}
.lv-channel-cover{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/10;overflow:hidden;border:0;border-radius:20px;background:linear-gradient(145deg,#302013,#7a4f24);color:#fff;cursor:pointer}
.lv-channel-cover>img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.65}
.lv-channel-initial{font:italic 64px Georgia;opacity:.45}
.lv-channel-badge{font-size:11px;font-weight:700;letter-spacing:1px;border-radius:99px;background:#b96e24;color:white;padding:5px 9px}
.lv-channel-cover .lv-channel-badge{position:absolute;top:12px;left:12px}
.lv-channel-watch{position:absolute;top:14px;right:12px;font-size:11px;background:#0008;border-radius:99px;padding:4px 8px}
.lv-channel-play{position:absolute;font-size:48px;font-weight:400}
.lv-channel-caption{padding:12px 4px}
.lv-channel-caption h3{margin:0 0 5px;font-size:17px}
.lv-channel-caption button{border:0;background:none;padding:0;text-align:left;color:#613e23;font:inherit;cursor:pointer}
.lv-channel-caption p{margin:0;font-size:12px;color:#775d70}
.lv-profile-link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:12px 0;padding:12px 16px;border-radius:18px;text-align:left;white-space:normal}
.lv-profile-link span{font-size:12px;font-weight:400}
.lv-home-tab{flex:1;min-width:0;border:1px solid #ffffff40;border-radius:99px;background:transparent;color:#fef5e8;font-weight:700;font-size:14px;cursor:pointer}
.lv-home-tab:focus-visible{outline:3px solid #f4dcb7;outline-offset:1px}
.lv-feed-live{display:block;background:radial-gradient(ellipse at 50% 30%,#6c5034,#18110b 75%);color:white;cursor:pointer}
.lv-preview-media{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);gap:3px}
.lv-preview-media[data-videos="1"]{grid-template-columns:1fr}
.lv-preview-media video{width:100%;height:100%;min-height:0;object-fit:cover}
.lv-preview-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding-bottom:120px;color:#fff7ec}
.lv-preview-face .sl-ava{width:120px;height:120px;flex-basis:120px;font-size:44px;border:1px solid #ffffff44;box-shadow:0 0 0 20px #ffffff06,0 0 0 40px #ffffff03}
.lv-preview-media:not([data-videos="0"])+.lv-preview-face{display:none}
.lv-preview-copy{position:absolute;bottom:0;left:0;right:0;padding:65px 22px 28px;background:linear-gradient(transparent,#160e07ed);z-index:2}
.lv-preview-copy h2{margin:15px 0 8px;font-size:25px;color:white}
.lv-preview-copy p{font-size:13px;color:#f4ede2;line-height:1.5}
.lv-preview-copy .sl-btn{min-height:44px;border-radius:99px;margin:4px 4px 0 0}
.lv-join-invite{margin-top:14px;padding:14px 16px;border-radius:18px;background:#b96a1c;color:#fff;box-shadow:0 8px 24px #0003;cursor:default}
.lv-join-invite[hidden]{display:none}
.lv-join-invite strong{display:block;font-size:17px;font-weight:650}
.lv-join-invite>span{display:block;font-size:13px;margin-top:4px;color:#fff}
.lv-join-invite>div{display:flex;gap:10px;margin-top:10px}
.lv-join-invite button{border:1px solid #ffffff80;border-radius:99px;background:transparent;color:#fff;min-height:44px;padding:8px 22px;font:inherit;cursor:pointer}
.lv-join-invite button:first-child{background:#fff;color:#a86019;border-color:#fff;font-weight:700}
.lv-home-channel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:0;background:linear-gradient(145deg,#382415,#7a4f24);color:#fff;padding:22px 12px;min-height:180px;cursor:pointer;scroll-snap-align:start}
.lv-home-channel>.sl-ava{width:64px;height:64px;flex-basis:64px;font-size:26px}
.lv-home-channel>.lv-channel-badge{position:absolute;top:8px;left:8px}
.lv-home-channel>strong{font-size:16px}.lv-home-channel>span:last-child{font-size:12px;opacity:.8}
@media(min-width:900px){
 body.live-mode #roomRoot{display:grid;grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:auto auto auto auto auto 1fr;gap:0 14px;max-width:1200px;width:100%}
 #roomRoot>.lv-top{grid-column:1/-1;grid-row:1}
 #roomRoot>.lv-stage-wrap{grid-column:1;grid-row:2}
 #roomRoot>.lv-strip-label{grid-column:1;grid-row:3}
 #roomRoot>.lv-strip{grid-column:1;grid-row:4}
 #roomRoot>.lv-status{grid-column:1;grid-row:5}
 #roomRoot>.lv-primary{grid-column:1;grid-row:6;align-self:start}
 #roomRoot>.lv-room-nav{grid-column:1;grid-row:7}
 body.live-mode #roomRoot>.lv-history{grid-column:2;grid-row:2/7;max-height:65vh;min-height:320px;padding:18px;background:#ffffff07;border-radius:18px 18px 0 0;margin:10px 0 0;width:100%}
 #roomRoot>.lv-history:before{content:'Live chat';font-size:17px;margin-bottom:18px;color:#fef5e6}
 body.live-mode #roomRoot>.lv-compose{grid-column:2;grid-row:7;position:static;align-self:end;border-radius:0 0 18px 18px;flex-wrap:wrap}
 #roomRoot>.lv-compose input{width:100%}
 #roomRoot>.lv-service-note{grid-column:1/-1}
}

/* Discussion-first stage; secondary actions live in the settings drawer. */
.lv-room{max-width:900px;margin:auto;min-height:calc(100dvh - 100px);background:radial-gradient(ellipse at top,#392617,#140c06 65%)}
.lv-top{gap:10px;padding:10px 12px;border-bottom:1px solid #ffffff18}
.lv-menu{position:relative;font-size:24px;line-height:1;min-width:44px;min-height:44px}
.lv-request-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffd166;right:7px;top:7px}
.lv-stage-wrap{max-width:760px;padding:10px 10px 0;box-sizing:border-box;touch-action:pan-x}
.lv-stage{max-width:none;width:100%;max-height:58dvh;aspect-ratio:1.25;gap:8px;padding:0;box-sizing:border-box}
.lv-stage.few{aspect-ratio:1.6}
.lv-stage[data-count="1"]{grid-template-columns:1fr;grid-template-rows:1fr;max-width:520px;aspect-ratio:1.45}
.lv-stage[data-count="1"] .lv-tile:first-child{grid-column:auto}
.lv-stage.host[data-count="2"]{grid-template-columns:2fr 1fr;grid-template-rows:1fr}
.lv-stage.host[data-count="2"] .lv-tile:first-child{grid-column:auto}
.lv-stage.host[data-count="3"]{grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr}
.lv-stage.host[data-count="3"] .lv-tile:first-child{grid-column:1 / 3}
.lv-tile{border-radius:16px;background:linear-gradient(145deg,#583c27,#291b11);border-color:#ffffff18}
.lv-video{position:absolute;inset:0}
.lv-tile .lv-face img,.lv-tile .lv-face span{width:40%;max-width:120px}
.lv-tile .sl-st.on{color:#ff9292}
.lv-name{padding:18px 8px 5px;left:0;right:0;bottom:0;background:linear-gradient(transparent,#000b)}
.lv-strip{box-sizing:border-box;padding:6px 10px;max-width:760px}
.lv-strip .lv-tile{flex-basis:84px;height:88px}
.lv-strip .lv-tile .sl-st,.lv-strip .lv-tile .lv-tag,.lv-strip .lv-name .lv-mic{display:none}
.lv-strip .lv-name{font-size:11px;padding:15px 5px 5px}
.lv-strip .lv-face{bottom:16px}
.lv-strip-label{box-sizing:border-box;padding:8px 10px 0;max-width:760px}
.lv-primary{gap:6px;padding:8px 10px}
.lv-primary .sl-btn{min-height:44px;border-radius:99px}
.lv-room-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 10px 8px;font-size:11px;color:#e4d4bd}
.lv-room-nav .sl-btn{background:#ffffff0a;color:#fff;border-color:#ffffff22;min-height:40px}
.lv-status{padding:6px 12px;line-height:1.4}
.lv-history{flex:1;min-height:40px;max-height:20dvh;padding:8px 12px;border-top:1px solid #ffffff14}
.lv-compose{border-top:1px solid #ffffff18;padding:7px 10px calc(7px + env(safe-area-inset-bottom))}
.lv-settings{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,540px);max-height:80dvh;box-sizing:border-box;overflow-y:auto;border:1px solid #ffffff30;border-radius:22px 22px 0 0;background:#291b11;color:#fff;padding:16px 12px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -12px 50px #0008}
.lv-settings::backdrop{background:#0009}
.lv-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.lv-drawer-head h3{margin:0;font-size:18px}
.lv-settings-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lv-settings .sl-btn{background:#ffffff10;color:#fff;border-color:#ffffff40;min-height:44px;white-space:normal}
.lv-settings .sl-btn.primary{background:#bd7226;border-color:#e6af5d}
.lv-settings .sl-btn.danger{color:#ffb3b3;border-color:#ff8a8a}
.lv-settings .lv-mod{margin:0 0 12px}
.lv-settings .sl-row{flex-wrap:wrap}
.lv-settings .sl-acts{flex-wrap:wrap}
@media(min-width:700px){.lv-stage{aspect-ratio:1.6}.lv-history{max-width:760px;width:100%;box-sizing:border-box;margin:auto}.lv-compose{width:100%;box-sizing:border-box;max-width:780px;margin:auto}}
@media(max-width:420px){.lv-top h2{font-size:14px}.lv-room-nav span{font-size:10px}.lv-stage[data-count="1"]{aspect-ratio:1.15}.lv-stage.few[data-count="2"]{aspect-ratio:1.15}}
/* Comments rise through their own lane, fading before the profile boundary. */
.lv-comment-stream{position:relative;flex:1;min-height:160px;max-height:280px;width:100%;max-width:640px;margin:0 auto;overflow:hidden}
.lv-comment-stream .lv-float{inset:0 10px;height:auto;mask-image:linear-gradient(to bottom,transparent,black 40%);-webkit-mask-image:linear-gradient(to bottom,transparent,black 40%)}
.lv-comment-stream .lv-bubble{left:0;max-width:min(90%,420px);padding:8px 12px;border:1px solid #ffffff6b;border-radius:14px 14px 14px 4px;background:var(--comment-tone,#ccfbf1);color:#183b50;box-shadow:0 3px 12px #0002;opacity:0;animation:lv-comment-rise 6s linear forwards}
.lv-comment-stream .lv-bubble b{color:#254b68}
@keyframes lv-comment-rise{0%{transform:translateY(0);opacity:0}8%,45%{opacity:1}78%,100%{transform:translateY(var(--comment-travel,-180px));opacity:0}}
.lv-comment-history{margin:0 10px 4px;border-top:1px solid #b7cdeb33;color:#cbd5e1;font-size:12px}
.lv-comment-history>summary{cursor:pointer;padding:7px 2px;font-weight:700;min-height:32px}
body.live-mode .lv-comment-history .lv-history{min-height:0;max-height:25dvh}
.lv-comment-announcer{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.lv-comment-stream .lv-float{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;mask-image:none;-webkit-mask-image:none}.lv-comment-stream .lv-bubble{position:static;animation:none;opacity:1}.lv-comment-stream .lv-bubble:nth-last-child(n+4){display:none}}

/* Cool pearl dialogs, shared by profile handover and room confirmations. */
.mr-action-dialog{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:calc(100% - 32px);max-width:410px;max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:1px solid #c9d8ec;border-radius:22px;color:#20334e;background:linear-gradient(145deg,#f0fdfa 0%,#f8fafc 48%,#eef2ff 100%);box-shadow:0 24px 80px #081b3e55;font-family:inherit}
.mr-action-dialog::backdrop{background:#101a37a8;backdrop-filter:blur(4px)}
.mr-action-form{padding:24px;position:relative;text-align:left}
.mr-action-close{position:absolute;right:10px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:#e3eaf4;color:#435773;font-family:inherit;font-size:26px;line-height:1;cursor:pointer}
.mr-action-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#c3f0e5,#d9defc);color:#225d74;font-size:24px;margin-bottom:12px}
.mr-action-kicker{display:block;color:#557187;font-size:10px;font-weight:850;letter-spacing:1.2px}
.mr-action-dialog h2{color:#253d61;font-size:21px;line-height:1.25;margin:7px 22px 10px 0;overflow-wrap:anywhere}
.mr-action-dialog p{font-size:14px;line-height:1.55;margin:0 0 16px;color:#50637b}
.mr-action-dialog label{display:block;font-size:12px;font-weight:800;margin:0 0 6px;color:#334e68}
.mr-action-dialog input{box-sizing:border-box;width:100%;min-height:46px;padding:10px 12px;border:1px solid #b8cadf;border-radius:11px;background:#ffffffdb;color:#1f3650;font-family:inherit;font-size:16px}
.mr-action-dialog small{display:block;color:#60768e;font-size:12px;line-height:1.5;margin-top:8px}
.mr-action-buttons{display:flex;gap:9px;margin-top:22px}
.mr-action-buttons button{flex:1;min-width:0;min-height:44px;border:1px solid #c9d6e7;border-radius:11px;background:#ffffffc9;color:#37546b;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;padding:9px 10px}
.mr-action-buttons [data-confirm=yes]{border-color:#4f67b5;background:linear-gradient(120deg,#287f88,#5968b8);color:#fff;box-shadow:0 3px 9px #526fa92b}
.mr-action-dialog :focus-visible{outline:3px solid #8b9ee8;outline-offset:3px}
.lv-status.err{color:#ffe4e6;background:#472e1b;border-color:#b89766;font-weight:700}

@media(min-width:900px){#roomRoot>.lv-comment-stream{grid-column:2;grid-row:2/6;min-height:240px;max-height:58vh;align-self:stretch}#roomRoot>.lv-comment-history{grid-column:2;grid-row:6;max-height:25vh;overflow:auto}#roomRoot>.lv-compose{grid-row:7}}


/* Approved compact glossy navigation: shared geometry, distinct cool accents. */
:root{--mr-nav-surface:linear-gradient(145deg,#243b58,#0d2033 65%,#1d2944);--mr-tab-ink:#eaf4ff;--mr-tab-accent:#4fbcff}
.mr-feature-banner{display:grid;grid-template-columns:1fr;gap:8px;margin:4px 10px 8px;padding:8px 4px;border:0;border-radius:0;background:#fff;box-shadow:none;color:#253a50;font-size:12px}
.mr-feature-banner .mr-feature-intro{display:flex;flex-direction:column;gap:3px;min-width:0}
.mr-feature-banner strong{font-family:inherit;font-style:normal;font-size:15px;line-height:1.25;font-weight:800;letter-spacing:0}
.mr-feature-banner small{color:#63788b;font-size:11px;line-height:1.35}
.mr-feature-banner nav{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:7px;width:100%}
.mr-feature-banner button{--mr-tab-accent:#45dfdf;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:40px;padding:8px 6px;border:1px solid var(--mr-tab-accent);border-radius:11px;background:linear-gradient(180deg,#ffffff20,#ffffff03 46%),var(--mr-nav-surface);color:var(--mr-tab-ink);box-shadow:inset 0 1px 0 #ffffff40,0 2px 5px #0002;font-size:12px;font-weight:750;line-height:1.2}
.mr-feature-banner button[data-go="chatView"]{--mr-tab-accent:#4fbcff}
.mr-feature-banner button[data-go="liveView"]{--mr-tab-accent:#b8a0ff}
.mr-feature-banner button svg{flex:0 0 18px;width:18px;height:18px;color:var(--mr-tab-accent)}
.mr-feature-banner button span{font-size:inherit;opacity:1;white-space:nowrap}
.mr-feature-banner button:hover{filter:brightness(1.15);text-decoration:none}
/* All profile, People, Inbox and Live tabs use the same compact glass finish. */
.home-tabs{background:#102033;gap:6px}
.home-tab,.lv-home-tab,.sl-tab,.ibx-filter{--mr-tab-accent:#4fbcff;border:1px solid #6688aa;border-radius:10px;background:linear-gradient(180deg,#ffffff17,#ffffff02 48%),var(--mr-nav-surface);color:#edf5ff;box-shadow:inset 0 1px 0 #ffffff26;font-size:12px;font-weight:800;line-height:1.2}
.home-tab:nth-child(2),.sl-tab:nth-child(3n+1),.ibx-filter:nth-child(3n+1){--mr-tab-accent:#45dfdf}
.lv-home-tab,.sl-tab:nth-child(3n),.ibx-filter:nth-child(3n){--mr-tab-accent:#b8a0ff}
.home-tab.active,.sl-tab.active,.ibx-filter.active{background:linear-gradient(180deg,#ffffff20,transparent 55%),#223d56;color:#fff;border-color:var(--mr-tab-accent);box-shadow:inset 0 -2px 0 var(--mr-tab-accent),inset 0 1px 0 #ffffff38}
.sl-tabs{background:#f1f5fa;border-color:#d1ddeb;gap:6px}
.sl-tab{padding:7px 11px}
.ibx-filters{gap:6px}
.bottom-nav .nav-item{--mr-tab-accent:#4fbcff;border:1px solid transparent;color:#344c66;border-radius:10px;transition:background .15s,border-color .15s}
.bottom-nav .nav-item:nth-child(3n+1){--mr-tab-accent:#159f9f}
.bottom-nav .nav-item:nth-child(3n){--mr-tab-accent:#9270d8}
.bottom-nav .nav-item.active{background:linear-gradient(160deg,#34526f,#132b40);border-color:var(--mr-tab-accent);color:#fff;box-shadow:inset 0 1px 0 #ffffff60,0 2px 6px #14283d20}
.mr-feature-banner button:focus-visible,.home-tab:focus-visible,.lv-home-tab:focus-visible,.sl-tab:focus-visible,.ibx-filter:focus-visible,.bottom-nav .nav-item:focus-visible{outline:3px solid #57cffa;outline-offset:2px}
@media(pointer:coarse){.mr-feature-banner button{min-height:44px}}
@media(min-width:700px){.mr-feature-banner{grid-template-columns:minmax(0,1fr) minmax(300px,46%);align-items:center;padding:12px 16px}.mr-feature-banner strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.bottom-nav .nav-item{transition:none}}
#chatView .ibx-filters .ibx-filter{border:1px solid #6688aa;border-radius:10px;background:linear-gradient(180deg,#ffffff17,#ffffff02 48%),var(--mr-nav-surface);color:#edf5ff;box-shadow:inset 0 1px 0 #ffffff26;font-weight:800;min-height:36px;padding:6px 10px}
#chatView .ibx-filters .ibx-filter[data-filter][aria-pressed=true]{background:linear-gradient(180deg,#ffffff20,transparent 55%),#223d56;color:#fff;border-color:var(--mr-tab-accent);box-shadow:inset 0 -2px 0 var(--mr-tab-accent),inset 0 1px 0 #ffffff38}


/* Half-height live profiles; comments stop below the panel boundary. */
.lv-stage{aspect-ratio:2.5;max-height:29dvh}
.lv-stage.few{aspect-ratio:3.2}
.lv-stage[data-count="1"]{aspect-ratio:2.9}
.lv-stage .lv-tile .lv-face img,.lv-stage .lv-tile .lv-face span{width:auto;height:calc(100% - 44px);max-height:90px;max-width:40%;aspect-ratio:1}
.lv-comment-stream{flex:0 0 auto;height:clamp(160px,26dvh,240px);min-height:160px;max-height:240px;margin-top:6px}
.lv-comment-stream .lv-float{top:0;bottom:0;mask-image:linear-gradient(to bottom,transparent 0,transparent 12px,#000 60px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 12px,#000 60px)}
@keyframes lv-comment-rise{0%{transform:translateY(0);opacity:0}8%{opacity:1}80%{opacity:1}100%{transform:translateY(var(--comment-travel,-180px));opacity:0}}
@media(min-width:700px){.lv-stage{aspect-ratio:3.2}.lv-stage[data-count="1"]{aspect-ratio:2.9}}
@media(max-width:420px){.lv-stage[data-count="1"],.lv-stage.few[data-count="2"]{aspect-ratio:2.3}}
@media(min-width:900px){
 body.live-mode #roomRoot{grid-template-rows:auto auto auto auto auto auto auto 1fr}
 #roomRoot>.lv-comment-stream{grid-column:1;grid-row:5;min-height:160px;max-height:240px;align-self:start}
 #roomRoot>.lv-status{grid-row:6}
 #roomRoot>.lv-primary{grid-row:7}
 #roomRoot>.lv-room-nav{grid-row:8}
 #roomRoot>.lv-comment-history{grid-column:2;grid-row:2/8;align-self:start;max-height:65vh}
 body.live-mode #roomRoot>.lv-compose{grid-column:2;grid-row:8}
}
@media(prefers-reduced-motion:reduce){.lv-comment-stream .lv-float{mask-image:none;-webkit-mask-image:none}}
/* Override the earlier single-person fallback as well as host layouts. */
#lvStage[data-count="1"]{aspect-ratio:2.9;max-height:29dvh}
@media(max-width:420px){#lvStage[data-count="1"]{aspect-ratio:2.3}}