/* ================= Голосовые комнаты ================= */
.nav-item span { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bottom-nav { width:300px; }
@media (max-width: 768px) { #bottom-nav { width:auto; } }

/* ---- Вкладка со списком ---- */
.vr-list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vr-create-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:20px; font-weight:800; font-size:13.5px; background:var(--grad); color:#fff; box-shadow:0 6px 18px rgba(123,92,255,.35); }
.vr-create-btn svg { width:16px; height:16px; }
.vr-section { font-size:12.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin:14px 20px 8px; display:flex; align-items:center; gap:8px; }
.vr-live-dot { width:8px; height:8px; border-radius:50%; background:#FF4D6D; box-shadow:0 0 0 0 rgba(255,77,109,.6); animation:vrLive 1.6s infinite; }
@keyframes vrLive { 0% { box-shadow:0 0 0 0 rgba(255,77,109,.55); } 70% { box-shadow:0 0 0 7px rgba(255,77,109,0); } 100% { box-shadow:0 0 0 0 rgba(255,77,109,0); } }
.vr-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; padding:0 14px; }
.vr-card { position:relative; border-radius:20px; padding:14px 12px 12px; min-height:132px; color:#fff; overflow:hidden; text-align:left; display:flex; flex-direction:column; gap:6px; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.18); transition:transform .15s; }
.vr-card:active { transform:scale(.97); }
.vr-card::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.18), transparent 60%); pointer-events:none; }
.vr-card-emoji { font-size:30px; line-height:1; }
.vr-card-title { font-weight:800; font-size:15px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vr-card-topic { font-size:12px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:12px; font-weight:700; }
.vr-card-avs { display:flex; }
.vr-card-avs i { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; margin-left:-6px; }
.vr-card-avs i:first-child { margin-left:0; }
.vr-card-count { display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,.25); padding:3px 8px; border-radius:10px; }
.vr-card-count svg { width:13px; height:13px; }
.vr-row { display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer; border-top:1px solid var(--border); }
.vr-row:first-child { border-top:0; }
.vr-row-ico { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; color:#fff; }
.vr-row-main { flex:1; min-width:0; }
.vr-row-title { font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-row-sub { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-row-edit { color:var(--muted); width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.vr-row-edit svg { width:18px; height:18px; }
.vr-empty { text-align:center; padding:26px 24px 10px; color:var(--muted); font-size:14px; line-height:1.5; }
.vr-empty b { display:block; color:var(--text); font-size:16px; margin-bottom:4px; }
.vr-empty-art { font-size:44px; margin-bottom:6px; }
.vr-note { margin:14px 20px 0; font-size:12px; color:var(--muted); line-height:1.45; }

/* Темы комнат */
.vr-th-violet { background:linear-gradient(155deg,#6B4BFF 0%,#3B1E8F 55%,#1D0F4D 100%); }
.vr-th-night  { background:linear-gradient(155deg,#2B3A67 0%,#141B33 55%,#070A16 100%); }
.vr-th-sunset { background:linear-gradient(155deg,#FF8A5C 0%,#C2366B 50%,#4A1240 100%); }
.vr-th-ocean  { background:linear-gradient(155deg,#2BC4E8 0%,#1565A8 50%,#0A2A52 100%); }
.vr-th-forest { background:linear-gradient(155deg,#3FCF8E 0%,#17795A 50%,#0A3326 100%); }
.vr-th-rose   { background:linear-gradient(155deg,#FF6FB5 0%,#B0287A 50%,#45103A 100%); }

/* ---- Окно создания / настройки ---- */
#vr-edit-overlay .modal { width:400px; max-width:calc(100vw - 24px); max-height:90vh; }
.vr-field { margin-bottom:12px; }
.vr-field label { display:block; font-size:12.5px; font-weight:800; color:var(--muted); margin:0 0 6px 4px; }
.vr-field input, .vr-field textarea { width:100%; padding:11px 14px; border-radius:14px; border:1px solid var(--border); background:var(--panel2); color:var(--text); font:inherit; font-size:15px; resize:none; }
.vr-field input:focus, .vr-field textarea:focus { outline:none; border-color:var(--accent); }
.vr-emojis { display:flex; flex-wrap:wrap; gap:6px; }
.vr-emojis button { width:40px; height:40px; border-radius:12px; font-size:21px; background:var(--panel2); }
.vr-emojis button.sel { box-shadow:0 0 0 2px var(--accent); background:var(--accent-soft); }
.vr-themes { display:flex; gap:8px; flex-wrap:wrap; }
.vr-themes button { width:44px; height:44px; border-radius:14px; position:relative; }
.vr-themes button.sel::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:18px; text-shadow:0 1px 3px rgba(0,0,0,.4); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); border-radius:14px; }
.vr-seg { display:flex; background:var(--panel2); border-radius:14px; padding:3px; gap:3px; }
.vr-seg button { flex:1; padding:9px 6px; border-radius:11px; font-size:13px; font-weight:700; color:var(--muted); }
.vr-seg button.sel { background:var(--panel); color:var(--text); box-shadow:var(--shadow); }
.vr-hint { font-size:12px; color:var(--muted); margin:6px 4px 0; line-height:1.4; }
.vr-edit-err { color:var(--danger); font-size:13px; min-height:18px; margin:4px 2px 8px; }
.vr-danger-link { display:block; width:100%; margin-top:10px; padding:10px; border-radius:12px; color:var(--danger); font-weight:700; font-size:14px; }

/* ---- Экран комнаты ---- */
#vr-room-overlay { z-index:400; padding:0; align-items:stretch; justify-content:center; background:rgba(0,0,0,.55); }
.vr-room { position:relative; width:100%; max-width:560px; height:100%; display:flex; flex-direction:column; color:#fff; overflow:hidden; }
.vr-room::before { content:""; position:absolute; inset:0; background:radial-gradient(90% 50% at 50% 0%, rgba(255,255,255,.16), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(0,0,0,.35), transparent 70%); pointer-events:none; }
.vr-room > * { position:relative; }
.vr-top { display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 8px; }
.vr-ibtn { width:40px; height:40px; border-radius:14px; background:rgba(255,255,255,.12); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
.vr-ibtn svg { width:20px; height:20px; }
.vr-ibtn:active { background:rgba(255,255,255,.22); }
.vr-title-wrap { flex:1; min-width:0; }
.vr-title { font-weight:800; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-sub { font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-pill { display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 11px; border-radius:17px; background:rgba(255,255,255,.14); font-size:13px; font-weight:800; color:#fff; flex-shrink:0; position:relative; }
.vr-pill svg { width:15px; height:15px; }
.vr-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#FF4D6D; color:#fff; font-size:11px; font-weight:800; line-height:18px; text-align:center; }
.vr-ann { margin:2px 14px 4px; padding:8px 12px; border-radius:14px; background:rgba(0,0,0,.22); font-size:12.5px; line-height:1.4; display:flex; gap:8px; }
.vr-ann:empty { display:none; }

.vr-stage { padding:6px 10px 2px; }
.vr-host { display:flex; justify-content:center; margin-bottom:6px; }
.vr-seats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 4px; }
.vr-seat { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; cursor:pointer; background:none; color:#fff; padding:0; }
.vr-seat-av { --sz:60px; position:relative; width:var(--sz); height:var(--sz); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:calc(var(--sz) * .46); flex-shrink:0; }
.vr-host .vr-seat-av { --sz:76px; }
.vr-seat-av .avatar { width:100%; height:100%; font-size:inherit; border-radius:50%; position:relative; overflow:hidden; }
.vr-seat.empty .vr-seat-av { background:rgba(255,255,255,.1); border:1.5px dashed rgba(255,255,255,.35); color:rgba(255,255,255,.75); }
.vr-seat.empty .vr-seat-av svg { width:40%; height:40%; }
.vr-seat.locked .vr-seat-av { border-style:solid; background:rgba(0,0,0,.25); }
.vr-seat-ring { position:absolute; inset:-5px; border-radius:50%; border:2.5px solid #7CF7C9; opacity:0; transform:scale(.92); transition:opacity .12s, transform .12s; pointer-events:none; }
.vr-seat.speaking .vr-seat-ring { opacity:1; transform:scale(calc(1 + var(--lvl, 0) * .1)); box-shadow:0 0 16px rgba(124,247,201,.6); }
.vr-seat.speaking .vr-seat-ring::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(124,247,201,.5); animation:vrRipple 1s ease-out infinite; }
@keyframes vrRipple { from { transform:scale(1); opacity:.8; } to { transform:scale(1.25); opacity:0; } }
.vr-seat-mic { position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%; background:#FF4D6D; border:2px solid rgba(20,10,40,.8); display:flex; align-items:center; justify-content:center; }
.vr-seat-mic svg { width:12px; height:12px; color:#fff; }
.vr-seat-crown { position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-size:16px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.vr-seat-away { position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.vr-seat-name { max-width:100%; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2px; }
.vr-seat.empty .vr-seat-name { opacity:.6; font-weight:600; }
.vr-seat-charm { font-size:10.5px; font-weight:800; background:rgba(0,0,0,.25); padding:1px 7px; border-radius:8px; display:inline-flex; gap:3px; align-items:center; }
.vr-seat-charm:empty { display:none; }
.vr-float { position:absolute; left:50%; top:0; transform:translateX(-50%); font-size:28px; pointer-events:none; animation:vrFloat 1.6s ease-out forwards; z-index:3; }
@keyframes vrFloat { 0% { opacity:0; transform:translate(-50%, 10px) scale(.6); } 15% { opacity:1; transform:translate(-50%, -8px) scale(1.15); } 100% { opacity:0; transform:translate(-50%, -46px) scale(1); } }

.vr-e2e { text-align:center; font-size:11px; opacity:.55; margin:6px 16px 0; }
.vr-chat { flex:1; min-height:80px; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:5px; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 18px); mask-image:linear-gradient(to bottom, transparent 0, #000 18px); overscroll-behavior:contain; }
.vr-msg { align-self:flex-start; max-width:88%; background:rgba(0,0,0,.28); padding:6px 11px; border-radius:14px; font-size:13.5px; line-height:1.4; word-wrap:break-word; overflow-wrap:anywhere; }
.vr-msg b { font-weight:800; margin-right:5px; color:#C9B8FF; cursor:pointer; }
.vr-msg.sys { background:transparent; padding:2px 6px; font-size:12px; opacity:.7; }
.vr-msg.gift { background:linear-gradient(90deg, rgba(255,200,80,.32), rgba(255,120,180,.25)); font-weight:600; }
.vr-msg.gift .vr-gift-e { font-size:18px; vertical-align:-3px; margin:0 3px; }

.vr-bottom { display:flex; align-items:center; gap:8px; padding:8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.vr-input { flex:1; min-width:0; height:42px; border-radius:21px; border:0; padding:0 16px; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-size:15px; }
.vr-input::placeholder { color:rgba(255,255,255,.6); }
.vr-input:focus { outline:none; background:rgba(255,255,255,.2); }
.vr-act { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
.vr-act svg { width:21px; height:21px; }
.vr-act.on { background:#fff; color:#2A1670; }
.vr-act.off { background:#FF4D6D; }
.vr-act.gift { background:linear-gradient(135deg,#FFB547,#FF5FA2); }
.vr-act[hidden] { display:none; }
@media (max-width: 380px) { .vr-seat-av { --sz:54px; } .vr-host .vr-seat-av { --sz:68px; } .vr-act { width:40px; height:40px; } }
@media (max-height: 640px) { .vr-seat-av { --sz:50px; } .vr-host .vr-seat-av { --sz:62px; } .vr-seats { gap:6px 4px; } }

.vr-unlock { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); z-index:5; padding:12px 18px; border-radius:18px; background:#fff; color:#2A1670; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.4); }

/* ---- Листы внутри комнаты ---- */
.vr-sheet-back { position:absolute; inset:0; z-index:10; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; animation:vrFade .15s; }
@keyframes vrFade { from { opacity:0; } }
.vr-sheet { width:100%; max-height:78%; overflow-y:auto; background:var(--panel); color:var(--text); border-radius:24px 24px 0 0; padding:8px 0 calc(14px + env(safe-area-inset-bottom, 0px)); animation:vrUp .2s ease-out; overscroll-behavior:contain; }
@keyframes vrUp { from { transform:translateY(40px); opacity:.5; } }
.vr-sheet-grip { width:40px; height:4px; border-radius:2px; background:var(--border); margin:2px auto 10px; }
.vr-sheet-title { font-weight:800; font-size:16px; padding:0 18px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vr-sheet-title small { font-size:12.5px; color:var(--muted); font-weight:600; }
.vr-person { display:flex; align-items:center; gap:12px; padding:9px 18px; cursor:pointer; }
.vr-person .avatar { width:42px; height:42px; font-size:19px; flex-shrink:0; border-radius:50%; position:relative; overflow:hidden; }
.vr-person-main { flex:1; min-width:0; }
.vr-person-name { font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-person-sub { font-size:12px; color:var(--muted); }
.vr-tag { font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:7px; background:var(--accent-soft); color:var(--accent); margin-left:6px; vertical-align:1px; }
.vr-tag.own { background:rgba(255,181,71,.2); color:#D98A00; }
.vr-small-btn { padding:7px 12px; border-radius:12px; font-size:13px; font-weight:800; background:var(--accent); color:#fff; }
.vr-small-btn.ghost { background:var(--panel2); color:var(--text); }
.vr-who { display:flex; flex-direction:column; align-items:center; gap:6px; padding:4px 18px 12px; text-align:center; }
.vr-who .avatar { width:72px; height:72px; font-size:32px; border-radius:50%; position:relative; overflow:hidden; }
.vr-who-name { font-weight:800; font-size:17px; }
.vr-menu-item { display:flex; align-items:center; gap:14px; width:100%; padding:13px 20px; font-size:15px; font-weight:600; text-align:left; color:var(--text); }
.vr-menu-item:active { background:var(--panel2); }
.vr-menu-item svg { width:21px; height:21px; color:var(--muted); flex-shrink:0; }
.vr-menu-item.danger, .vr-menu-item.danger svg { color:var(--danger); }
.vr-gifts { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; padding:0 14px; }
.vr-gift { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px 8px; border-radius:16px; background:var(--panel2); border:2px solid transparent; }
.vr-gift.sel { border-color:var(--accent); background:var(--accent-soft); }
.vr-gift.locked { opacity:.45; }
.vr-gift-emoji { font-size:30px; line-height:1.1; }
.vr-gift-name { font-size:11.5px; font-weight:700; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-gift-price { font-size:11.5px; font-weight:800; color:#D98A00; }
.vr-gift-to { display:flex; gap:10px; overflow-x:auto; padding:0 16px 12px; scrollbar-width:none; }
.vr-gift-to::-webkit-scrollbar { display:none; }
.vr-gift-to button { display:flex; flex-direction:column; align-items:center; gap:4px; width:58px; flex-shrink:0; font-size:11px; font-weight:700; color:var(--muted); }
.vr-gift-to .avatar { width:44px; height:44px; font-size:20px; border-radius:50%; position:relative; overflow:hidden; box-shadow:0 0 0 2px transparent; }
.vr-gift-to button.sel { color:var(--text); }
.vr-gift-to button.sel .avatar { box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.vr-gift-to span { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-gift-foot { display:flex; align-items:center; gap:10px; padding:14px 16px 0; }
.vr-gift-bal { flex:1; font-size:13.5px; font-weight:700; }
.vr-gift-bal button { color:var(--accent); font-weight:800; margin-left:6px; }
.vr-gift-send { padding:11px 20px; border-radius:14px; font-weight:800; background:var(--grad); color:#fff; }
.vr-gift-send:disabled { opacity:.45; }
.vr-reacts { display:flex; justify-content:space-around; padding:4px 12px 6px; }
.vr-reacts button { font-size:30px; width:52px; height:52px; border-radius:16px; }
.vr-reacts button:active { background:var(--panel2); transform:scale(1.15); }

/* Большая анимация подарка */
.vr-giftfx { position:absolute; inset:0; z-index:8; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.vr-giftfx-e { font-size:110px; line-height:1; animation:vrGiftPop 2.6s cubic-bezier(.2,.9,.3,1.2) forwards; filter:drop-shadow(0 10px 30px rgba(255,200,80,.6)); }
.vr-giftfx-t { font-size:15px; font-weight:800; background:rgba(0,0,0,.45); padding:7px 14px; border-radius:16px; animation:vrGiftText 2.6s ease forwards; text-align:center; max-width:86%; }
@keyframes vrGiftPop { 0% { transform:scale(.2) rotate(-20deg); opacity:0; } 18% { transform:scale(1.2) rotate(6deg); opacity:1; } 30% { transform:scale(1) rotate(0); } 80% { transform:scale(1); opacity:1; } 100% { transform:scale(.6) translateY(-80px); opacity:0; } }
@keyframes vrGiftText { 0%,10% { opacity:0; transform:translateY(10px); } 22%,80% { opacity:1; transform:none; } 100% { opacity:0; } }

/* ---- Плавающий кружок свёрнутой комнаты ---- */
#vr-bubble { position:fixed; z-index:160; right:14px; bottom:calc(150px + env(safe-area-inset-bottom, 0px)); width:60px; height:60px; border-radius:50%; display:none; align-items:center; justify-content:center; font-size:28px; color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.85); cursor:pointer; touch-action:none; }
#vr-bubble.show { display:flex; }
#vr-bubble.speaking { animation:vrBubble 1s ease-in-out infinite; }
@keyframes vrBubble { 50% { box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.85), 0 0 0 9px rgba(124,247,201,.45); } }
#vr-bubble .vr-bubble-mic { position:absolute; right:-3px; bottom:-3px; width:24px; height:24px; border-radius:50%; background:#22C55E; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
#vr-bubble .vr-bubble-mic.off { background:#FF4D6D; }
#vr-bubble .vr-bubble-mic svg { width:12px; height:12px; color:#fff; }
#vr-bubble .vr-bubble-x { position:absolute; left:-4px; top:-4px; width:22px; height:22px; border-radius:50%; background:rgba(20,15,40,.9); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.vr-toast { position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:7000; background:rgba(20,15,40,.94); color:#fff; padding:10px 16px; border-radius:16px; font-size:13.5px; font-weight:600; max-width:calc(100vw - 32px); text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:vrFade .2s; }
body:has(.modal-overlay.active:not(.tab-sheet)) #vr-bubble { display:none; }