/* LingoLeap voice rooms (Voice Room tab). Uses the theme variables, so it follows light and dark mode. */
.rm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.rm-head h1 { margin: 0; flex: 1; font-size: 26px; }
.rm-new { padding: 10px 14px; font-size: 14px; white-space: nowrap; }
.rm-intro { margin: 4px 0 12px; }
.rm-chips { flex-wrap: nowrap; overflow-x: auto; max-height: none; margin-bottom: 12px; scrollbar-width: none; }
.rm-chips::-webkit-scrollbar { display: none; }
.rm-chips .s-chip { flex: none; white-space: nowrap; font: inherit; font-weight: 800; font-size: 14px; }
.rm-list { display: flex; flex-direction: column; gap: 8px; }
.rm-card { display: block; color: var(--text); text-decoration: none; padding: 9px 12px; border: 2px solid var(--line); border-bottom-width: 3px; border-radius: 14px; background: var(--card); transition: transform .08s; }
.rm-card:active { transform: translateY(2px); }
.rm-card-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.rm-live { color: #fff; background: var(--red); border-radius: 6px; padding: 1px 6px; font-size: 10px; font-weight: 900; letter-spacing: .5px; white-space: nowrap; flex: none; }
.rm-globe { font-size: 16px; }
.rm-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rm-l1 .flag, .rm-l1 .rm-globe { flex: none; }
.rm-title { flex: 1; min-width: 0; margin: 0; font-size: 16px !important; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-l2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; }
.rm-host { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.rm-host .s-demo { font-size: 10px; }
.rm-counts { font-weight: 800; font-size: 13px; color: var(--muted); white-space: nowrap; flex: none; }
.rm-ppl { display: inline-flex; align-items: center; flex: none; padding-left: 6px; }
.rm-ppl .sav { margin-left: -6px; border: 2px solid var(--card); box-sizing: content-box; }
.rm-desc { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rm-youin { color: var(--green-d); }
.rm-form label { display: block; }
.rm-note { font-size: 13px; }
/* inside a room */
.rm-room-head { display: flex; align-items: center; gap: 6px; margin: -4px 0 8px; min-height: 40px; }
.rm-room-head .s-back { flex: none; }
.rm-room-head .rm-rtitle { flex: 1; min-width: 0; margin: 0; font-size: 16px !important; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--red-l); }
.rm-count { flex: none; font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.rm-hbtn { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--soft); border: 2px solid var(--line); font: inherit; font-size: 15px; font-weight: 900; color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.rm-stage { padding: 0; }
.rm-sec { font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; color: var(--muted); }
.rm-hands { color: var(--orange-d); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px 4px; }
.rm-grid.small { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.rm-aud { margin: 10px 0 8px; }
.rm-none { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.rm-person { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; font: inherit; color: var(--text); padding: 2px; min-width: 0; }
.rm-av { position: relative; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 3px transparent; transition: box-shadow .12s; }
.rm-avf { position: relative; display: inline-flex; }
.rm-person.talking .rm-av { box-shadow: 0 0 0 3px var(--green), 0 0 12px 2px rgba(88, 204, 2, .55); }
.rm-mic, .rm-hand { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; z-index: 2; }
.rm-mic.off { background: var(--red-l); border-color: var(--red); }
.rm-hand { font-size: 13px; border-color: var(--orange); animation: rmwave 1.2s ease-in-out infinite; }
@keyframes rmwave { 50% { transform: rotate(-14deg); } }
.rm-role { position: absolute; top: -6px; right: -4px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; z-index: 2; border: 2px solid var(--card); }
.rm-role.host { background: #ffc800; }
.rm-role.mod { background: var(--blue); }
.rm-person .cn-cflag { z-index: 2; }
.rm-name { font-size: 12px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.rm-av.gifted { animation: rmgift .9s ease; }
@keyframes rmgift { 30% { transform: scale(1.18); box-shadow: 0 0 0 4px #ffc800; } }
/* chat */
.rm-chatbox { border-top: 2px solid var(--line); padding-top: 6px; }
.rm-chat { height: clamp(150px, 32vh, 340px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; }
.rm-chat-empty { margin: auto 0 0; font-size: 13px; text-align: center; }
.rm-msg { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; position: relative; }
.rm-msg:first-child { margin-top: auto; }
.rm-mbody { min-width: 0; background: var(--soft); border-radius: 4px 14px 14px 14px; padding: 5px 10px 6px; max-width: calc(100% - 64px); }
.rm-mhead { display: flex; align-items: center; gap: 4px; font-size: 12px; flex-wrap: wrap; }
.rm-mtext { overflow-wrap: anywhere; white-space: pre-wrap; }
.rm-mb { font-size: 10px; font-weight: 900; padding: 2px 5px; border-radius: 6px; }
.rm-mb.host { background: #fff1b8; color: #6b4e00; }
.rm-mb.mod { background: var(--blue-l); color: #1279b8; }
.rm-mdel { flex: none; align-self: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; background: none; color: var(--muted); opacity: .6; padding: 0; }
.rm-msg.sys, .rm-msg.gift { display: block; align-self: center; text-align: center; font-size: 12px; color: var(--muted); background: none; padding: 0 8px; }
.rm-msg.gift { color: var(--text); background: #fff4d6; border-radius: 12px; padding: 4px 10px; }
/* bottom chat bar: mic/hand, message input (send inside), react, gift */
.rm-controls { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); z-index: 5; margin-top: 6px; }
.rm-ctl { display: flex; gap: 6px; flex: none; }
.rm-cb { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--soft); border: 2px solid var(--line); font-size: 19px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.rm-cb.on { background: var(--blue-l); border-color: var(--blue); }
.rm-cb.red { background: var(--red); border-color: var(--red-d); }
.rm-input { position: relative; flex: 1; min-width: 0; display: flex; }
.rm-input input { flex: 1; min-width: 0; width: 100%; height: 42px; border-radius: 21px; border: 2px solid var(--line); background: var(--soft); color: var(--text); padding: 0 46px 0 14px; font: inherit; font-size: 16px; }
.rm-input input:focus { outline: none; border-color: var(--blue); background: var(--card); }
.rm-send { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; font-size: 15px; border: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.rm-hbtn.red { background: var(--red); border-color: var(--red-d); }
/* Inside a room the screen is a column: header and stage at the top, chat in the middle (scrolls), chat bar pinned to the very bottom.
   --rm-vh / --rm-top come from rooms.js (visualViewport), so the bar sits right above the on-screen keyboard. */
body.in-room .main { padding-bottom: 0; }
.rm-in { display: flex; flex-direction: column; height: var(--rm-vh, 100vh); padding-top: 10px; padding-bottom: 0; }
.rm-in > #rmRoom { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rm-in .rm-room-head { flex: none; margin-top: 0; }
.rm-in #rmTop { flex: 0 1 auto; min-height: 0; max-height: calc(var(--rm-vh, 100vh) * .42); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.rm-in #rmTop::-webkit-scrollbar { display: none; }
.rm-in .rm-chatbox { flex: 1 1 0; min-height: 72px; display: flex; flex-direction: column; }
.rm-in .rm-chat { flex: 1 1 auto; height: auto; min-height: 0; }
.rm-in .rm-controls { flex: none; margin: 0 -16px; border: 0; border-top: 2px solid var(--line); border-radius: 0; padding: 8px 10px calc(8px + var(--safe-b)); }
@media (max-width: 699px) {
  .rm-in { position: fixed; left: 0; right: 0; top: var(--rm-top, 0px); padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 700px) {
  .rm-in .rm-controls { margin: 0; border: 2px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; }
}
.rm-reacts { position: absolute; bottom: calc(100% + 6px); left: 8px; display: flex; gap: 4px; padding: 6px; background: var(--card); border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.rm-reacts button { width: 38px; height: 38px; border-radius: 50%; background: none; font-size: 22px; padding: 0; }
#rmRoom { position: relative; }
.rm-float { position: absolute; bottom: 70px; font-size: 30px; pointer-events: none; animation: rmfloat 2.2s ease-out forwards; z-index: 6; }
@keyframes rmfloat { from { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-20px) scale(1.1); } to { transform: translateY(-260px) scale(1); opacity: 0; } }
.rm-giftfly { position: fixed; left: 50%; top: 38%; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; animation: rmgfly 2.6s ease forwards; }
.rm-giftfly .e { font-size: 84px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.rm-giftfly .t { font-weight: 900; font-size: 14px; background: rgba(0,0,0,.65); color: #fff; padding: 4px 12px; border-radius: 14px; white-space: nowrap; }
@keyframes rmgfly { 0% { transform: translate(-50%, 40px) scale(.3); opacity: 0; } 18% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, 0) scale(1); } 80% { transform: translate(-50%, -10px) scale(1); opacity: 1; } 100% { transform: translate(-50%, -90px) scale(.8); opacity: 0; } }
/* sheets */
.rm-modal-av { display: flex; justify-content: center; margin-bottom: 6px; }
.rm-sheet h2 { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rm-mtitle { overflow-wrap: anywhere; }
.rm-gto { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.rm-gtc { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 20px; border: 2px solid var(--line); background: var(--soft); font: inherit; font-size: 13px; font-weight: 800; color: var(--text); }
.rm-gtc.on { border-color: var(--green); background: #d7ffb8; }
.rm-ggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rm-gift { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); font: inherit; font-size: 12px; font-weight: 800; color: var(--text); }
.rm-gift .e { font-size: 30px; }
.rm-gift small { font-size: 10px; }
.rm-check { margin: 4px 0 8px; font-size: 14px; }
.rm-audio { display: none; }
/* mini bar while browsing elsewhere */
.rm-mini { position: fixed; left: 8px; right: 8px; bottom: calc(74px + var(--safe-b)); z-index: 35; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--card); border: 2px solid var(--green); border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
@media (min-width: 700px) { .rm-mini { left: auto; right: 16px; bottom: 16px; width: 340px; } }
.rm-mini-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 14px; }
.rm-mini-go b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rm-mini-go .muted { white-space: nowrap; font-size: 12px; }
.rm-mini-btn { flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; background: var(--soft); border: 2px solid var(--line); color: var(--text); }
.rm-mini-btn.red { background: var(--red); border-color: var(--red-d); color: #fff; }
body.rm-mini-on .page { padding-bottom: 70px; }
body.call-open .rm-mini { display: none; }
@media (max-width: 699px) {
  body.nav-off .rm-mini { bottom: calc(8px + var(--safe-b)); }
  body.in-chat .rm-mini { bottom: calc(72px + var(--safe-b)); }
}
html[data-theme="dark"] .rm-msg.gift { background: #3a3218; }
html[data-theme="dark"] .rm-mb.host { background: #4a3d10; color: #ffe08a; }
html[data-theme="dark"] .rm-mb.mod { color: #9fd8ff; }
html[data-theme="dark"] .rm-gtc.on { background: #1f3a12; }
/* Moments: voice room card */
.c-rcard { margin: 8px 0 4px; padding: 12px; border-radius: 16px; border: 2px solid var(--green); background: linear-gradient(135deg, rgba(88, 204, 2, .12), rgba(28, 176, 246, .10)); display: flex; flex-direction: column; gap: 6px; }
.c-rcard.ended { border-color: var(--line); background: var(--soft); }
.c-rc-top { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; }
.c-rc-live { color: var(--red); font-weight: 900; letter-spacing: .5px; }
.c-rc-badge { font-weight: 900; color: var(--muted); }
.c-rc-title { font-size: 17px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.c-rc-row { display: flex; align-items: center; gap: 8px; }
.c-rc-host { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-rc-host small { font-size: 12px; font-weight: 700; }
.c-rc-join { flex: none; width: auto !important; padding: 8px 18px !important; margin: 0 !important; }
.c-rc-join[disabled] { opacity: .6; }
/* invite people (1.12) */
.rm-invlist { max-height: 52vh; overflow-y: auto; margin: 8px 0 10px; }
.rm-inv { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
.rm-inv + .rm-inv { border-top: 2px solid var(--line); }
.rm-inv .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rm-inv .grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-invst { font-size: 13px; font-weight: 800; }