/* 子比语音厅 · 前台样式 */

/*
 * 这条很重要，别删：
 * 我给按钮设了 display: inline-block，作者样式的优先级高于浏览器自带的
 * [hidden] { display: none }，结果就是「加了 hidden 属性也藏不住」。
 * 所以这里必须用 !important 把浏览器的隐藏规则压回来。
 */
[hidden] {
	display: none !important;
}

.vr-wrap {
	--vr-main: #ff6b81;
	--vr-main-2: #ff9a6b;
	--vr-line: rgba(0, 0, 0, .08);
	--vr-muted: #888;
	margin: 20px 0;
	color: inherit;
	font-size: 14px;
}

/* ---------------- 头部 ---------------- */

.vr-head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.vr-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.vr-sub {
	margin: 4px 0 0;
	color: var(--vr-muted);
	font-size: 12px;
}

.vr-head-btns {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* ---------------- 按钮 ---------------- */

.vr-btn {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--vr-line);
	border-radius: 20px;
	background: transparent;
	color: inherit;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: .2s;
	text-decoration: none;
}

.vr-btn:hover {
	opacity: .8;
}

.vr-btn-main {
	border: none;
	background: linear-gradient(90deg, var(--vr-main-2), var(--vr-main));
	color: #fff;
}

.vr-btn-live {
	border: none;
	background: #46b450;
	color: #fff;
}

.vr-tip {
	color: var(--vr-muted);
	font-size: 12px;
}

/* ---------------- 建房表单 ---------------- */

.vr-create {
	margin-bottom: 20px;
	padding: 16px 18px;
	border: 1px solid var(--vr-line);
	border-radius: 12px;
}

.vr-create h4 {
	margin: 0 0 12px;
	font-size: 16px;
}

.vr-create label {
	display: block;
	margin-bottom: 10px;
	color: var(--vr-muted);
	font-size: 13px;
}

.vr-create input[type=text],
.vr-create input[type=number],
.vr-create select {
	display: block;
	width: 100%;
	max-width: 420px;
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid var(--vr-line);
	border-radius: 8px;
	background: rgba(127, 127, 127, .06);
	color: inherit;
	font-size: 14px;
}

.vr-create-btns {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}

/* ---------------- 房间卡片 ---------------- */

.vr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.vr-card {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--vr-line);
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
	transition: .2s;
}

.vr-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	color: inherit;
}

.vr-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.vr-tag {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	background: rgba(127, 127, 127, .14);
	font-size: 12px;
	font-weight: 400;
}

.vr-card-vip .vr-tag {
	background: #ffb900;
	color: #4a3200;
}

.vr-card-private .vr-tag {
	background: #7b6cff;
	color: #fff;
}

.vr-card-admin .vr-tag {
	background: #46b450;
	color: #fff;
}

.vr-online {
	color: var(--vr-muted);
	font-size: 12px;
}

.vr-card-name {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vr-card-foot {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--vr-muted);
	font-size: 12px;
}

.vr-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

.vr-card-owner {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vr-empty,
.vr-notice-box {
	padding: 30px 18px;
	border: 1px dashed var(--vr-line);
	border-radius: 12px;
	color: var(--vr-muted);
	text-align: center;
}

/* ---------------- 房间内部 ---------------- */

.vr-room-head {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--vr-line);
}

.vr-back {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--vr-muted);
	font-size: 13px;
	text-decoration: none;
}

.vr-room-meta {
	margin-top: 6px;
	color: var(--vr-muted);
	font-size: 13px;
}

.vr-notice-line {
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(127, 127, 127, .08);
	font-size: 13px;
}

.vr-join-panel {
	padding: 24px 18px;
	border: 1px solid var(--vr-line);
	border-radius: 12px;
	text-align: center;
}

.vr-join-panel input[type=text] {
	max-width: 260px;
	margin: 10px auto;
	padding: 8px 10px;
	border: 1px solid var(--vr-line);
	border-radius: 8px;
	background: rgba(127, 127, 127, .06);
	color: inherit;
}

/* 麦位 */

.vr-seats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.vr-seat {
	padding: 12px 6px;
	border-radius: 12px;
	background: rgba(127, 127, 127, .06);
	text-align: center;
}

.vr-seat-avatar {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
}

.vr-seat-avatar img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.vr-seat-empty {
	line-height: 52px;
	border: 1px dashed var(--vr-line);
	border-radius: 50%;
	color: var(--vr-muted);
	font-size: 20px;
}

.vr-mic {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	font-size: 11px;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.vr-seat-name {
	font-size: 13px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vr-seat-no {
	color: var(--vr-muted);
	font-size: 11px;
}

/* 听众 */

.vr-audience-line {
	margin: 10px 0 8px;
	color: var(--vr-muted);
	font-size: 13px;
}

.vr-audience {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.vr-audience-item {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 3px 10px 3px 4px;
	border-radius: 20px;
	background: rgba(127, 127, 127, .08);
	font-size: 12px;
}

.vr-audience-item img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

/* 操作条 */

.vr-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

/* 礼物 */

.vr-gift-box {
	padding: 14px;
	border: 1px solid var(--vr-line);
	border-radius: 12px;
}

.vr-gift-notice {
	margin-bottom: 10px;
	color: var(--vr-muted);
	font-size: 13px;
}

.vr-gifts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 10px;
}

.vr-gift {
	padding: 8px 4px;
	border: 1px solid var(--vr-line);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: .2s;
}

.vr-gift:hover {
	border-color: var(--vr-main);
}

.vr-gift-icon {
	display: block;
	font-size: 22px;
}

.vr-gift-name {
	display: block;
	font-size: 12px;
}

.vr-gift-price {
	display: block;
	color: var(--vr-main);
	font-size: 12px;
}

/* 消息提示 */

.vr-msg {
	position: fixed;
	left: 50%;
	bottom: 40px;
	z-index: 9999;
	transform: translateX(-50%);
	padding: 10px 20px;
	border-radius: 24px;
	background: rgba(0, 0, 0, .78);
	color: #fff;
	font-size: 14px;
}

/* 语音状态条 */

.vr-step-hint {
	margin-bottom: 10px;
	padding: 8px 12px;
	border-left: 3px solid #46b450;
	border-radius: 6px;
	background: rgba(70, 180, 80, .1);
	font-size: 13px;
}

.vr-step-hint:empty {
	display: none;
}

.vr-voice-line {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 16px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(127, 127, 127, .06);
}

.vr-voice-status {
	flex: 1;
	min-width: 200px;
	font-size: 13px;
	color: var(--vr-muted);
}

.vr-voice-ok {
	color: #1b6b25;
}

.vr-voice-live {
	color: #0a7c3a;
	font-weight: 600;
}

.vr-voice-err {
	color: #c62828;
}

.vr-btn-sm {
	padding: 5px 12px;
	font-size: 13px;
}

/* 我的麦克风音量条（说话时它会动，不动就是采不到声音） */

.vr-myvol-box {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 16px;
	font-size: 13px;
}

.vr-myvol-label {
	color: var(--vr-muted);
	white-space: nowrap;
}

.vr-myvol {
	flex: 0 0 160px;
	height: 10px;
	border-radius: 6px;
	background: rgba(127, 127, 127, .18);
	overflow: hidden;
}

.vr-myvol-bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, #46b450, #a8e063);
	transition: width .15s linear;
}

.vr-myvol-tip {
	color: var(--vr-muted);
}

.vr-myvol-bad {
	color: #c62828;
	font-weight: 600;
}

/* 浏览器拦住了声音播放时的提示条 */

.vr-autoplay {
	margin-bottom: 16px;
	padding: 12px 14px;
	border: 1px solid #ffb900;
	border-radius: 10px;
	background: #fff8e5;
	color: #7a5200;
	font-size: 14px;
	cursor: pointer;
}

/* 谁在说话：那个麦位亮光环 */

.vr-seat.vr-speaking {
	background: rgba(70, 180, 80, .16);
}

.vr-seat.vr-speaking .vr-seat-avatar {
	animation: vr-pulse 1.4s infinite;
	border-radius: 50%;
}

.vr-seat.vr-speaking .vr-seat-avatar img {
	box-shadow: 0 0 0 3px #46b450;
}

@keyframes vr-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(70, 180, 80, .55); }
	70%  { box-shadow: 0 0 0 10px rgba(70, 180, 80, 0); }
	100% { box-shadow: 0 0 0 0 rgba(70, 180, 80, 0); }
}

/* ===== v0.4 房主管理 + 微信引导 ===== */

.vr-admin-line {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 10px;
}

/* 麦位上的"管理"小按钮 */

.vr-seat-manage {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 2px 0;
	border: 1px solid var(--vr-line);
	border-radius: 6px;
	background: transparent;
	color: var(--vr-muted);
	font-size: 11px;
	cursor: pointer;
}

.vr-seat-manage:hover {
	color: #c62828;
	border-color: #c62828;
}

/* 被禁麦的标记 */

.vr-muted-mark {
	display: inline-block;
	padding: 0 5px;
	border-radius: 8px;
	background: #fadddd;
	color: #8a1f1f;
	font-size: 10px;
}

/* 房主管理弹窗 */

.vr-menu {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 10000;
	transform: translate(-50%, -50%);
	width: 260px;
	padding: 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
	color: #222;
}

.vr-menu-title {
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.vr-menu button {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	padding: 9px 10px;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fafafa;
	color: #333;
	font-size: 13px;
	cursor: pointer;
}

.vr-menu button:hover {
	background: #f0f0f0;
}

.vr-menu .vr-menu-danger {
	border-color: #f0b7b7;
	background: #fff5f5;
	color: #c62828;
}

.vr-menu .vr-menu-cancel {
	border: none;
	background: transparent;
	color: #888;
}

/* 微信引导 */

.vr-wechat-guide {
	margin-bottom: 16px;
	padding: 14px 16px;
	border: 1px solid #ffb900;
	border-radius: 12px;
	background: #fff8e5;
	color: #6d4a00;
	font-size: 14px;
	line-height: 1.9;
}

.vr-wechat-guide .vr-btn {
	margin-top: 6px;
}


/* ============================================================
 * v0.5 语音厅视觉：TT语音 / 快手直播那种
 * （放在文件最后，故意覆盖上面的浅色样式）
 * ============================================================ */

/* ---- 6 种房间配色（房间号或建房时选的那种决定用哪套） ---- */
.vr-grad-0 { --vr-c1: #4c1d95; --vr-c2: #7c3aed; }
.vr-grad-1 { --vr-c1: #0c2d48; --vr-c2: #1c74c4; }
.vr-grad-2 { --vr-c1: #7c2d12; --vr-c2: #ea580c; }
.vr-grad-3 { --vr-c1: #064e3b; --vr-c2: #10b981; }
.vr-grad-4 { --vr-c1: #831843; --vr-c2: #ec4899; }
.vr-grad-5 { --vr-c1: #0f172a; --vr-c2: #334155; }

/* ---- 房间舞台：深色沉浸 ---- */
.vr-room {
	position: relative;
}

.vr-stage {
	position: relative;
	overflow: hidden;
	padding: 14px 16px 18px;
	border-radius: 18px;
	color: #fff;
	background:
		radial-gradient(circle at 50% -20%, rgba(255, 255, 255, .3), transparent 55%),
		linear-gradient(160deg, var(--vr-c1, #2b1055), var(--vr-c2, #6d28d9));
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.vr-topbar {
	display: flex;
	gap: 10px;
	align-items: center;
}

.vr-iconbtn {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.vr-iconbtn:hover {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}

.vr-topinfo {
	flex: 1;
	min-width: 0;
}

.vr-roomname {
	font-size: 17px;
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vr-roomsub {
	margin-top: 3px;
	color: rgba(255, 255, 255, .72);
	font-size: 12px;
}

.vr-stage .vr-tag {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

.vr-tag-lock {
	background: #facc15 !important;
	color: #422006 !important;
}

.vr-stage .vr-notice-line {
	margin-top: 10px;
	background: rgba(0, 0, 0, .22);
	color: rgba(255, 255, 255, .9);
}

.vr-stage .vr-admin-line .vr-btn {
	border-color: transparent;
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.vr-stage .vr-tip {
	color: rgba(255, 255, 255, .58);
}

/* ---- 麦位圈：圆形头像 + 金色房主框 + 说话光环 ---- */
.vr-seatgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px 8px;
	margin: 16px 0 6px;
}

@media (max-width: 560px) {
	.vr-seatgrid {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px 6px;
	}
}

.vr-seat {
	position: relative;
	padding: 4px 2px;
	border-radius: 14px;
	background: transparent;
	text-align: center;
}

.vr-seat-avatar {
	position: relative;
	display: inline-block;
	width: 62px;
	height: 62px;
}

@media (max-width: 560px) {
	.vr-seat-avatar {
		width: 52px;
		height: 52px;
	}
}

.vr-seat-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	object-fit: cover;
}

.vr-seat-owner .vr-seat-avatar img {
	border-color: #ffd166;
	box-shadow: 0 0 12px rgba(255, 209, 102, .55);
}

.vr-crown {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
}

.vr-seat-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 2px dashed rgba(255, 255, 255, .3);
	border-radius: 50%;
	color: rgba(255, 255, 255, .45);
	font-size: 20px;
	line-height: 1;
}

.vr-seat-name {
	margin-top: 7px;
	font-size: 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vr-seat-name-empty {
	color: rgba(255, 255, 255, .4);
}

.vr-seat-no {
	margin-top: 1px;
	color: rgba(255, 255, 255, .45);
	font-size: 10px;
}

.vr-mic {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 22px;
	height: 22px;
	line-height: 22px;
	border-radius: 50%;
	background: #fff;
	font-size: 11px;
	text-align: center;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

.vr-mic-off { background: #e5e7eb; }
.vr-mic-on  { background: #bbf7d0; }

/* 说话中：绿色光环 + 一圈波纹扩散 */
.vr-seat.vr-speaking {
	background: transparent;
}

.vr-seat.vr-speaking .vr-seat-avatar img {
	border-color: #4ade80;
}

.vr-seat.vr-speaking .vr-seat-avatar::after {
	content: '';
	position: absolute;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	border: 2px solid rgba(74, 222, 128, .9);
	border-radius: 50%;
	animation: vr-ring 1.2s ease-out infinite;
}

@keyframes vr-ring {
	0%   { transform: scale(.94); opacity: .95; }
	70%  { transform: scale(1.16); opacity: 0; }
	100% { transform: scale(1.16); opacity: 0; }
}

.vr-seat.vr-speaking .vr-seat-name {
	color: #86efac;
}

.vr-seat-manage {
	display: block;
	width: 76%;
	margin: 5px auto 0;
	padding: 1px 0;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 8px;
	background: transparent;
	color: rgba(255, 255, 255, .7);
	font-size: 10px;
	cursor: pointer;
}

.vr-seat-manage:hover {
	border-color: #fca5a5;
	color: #fca5a5;
}

.vr-muted-mark {
	background: rgba(248, 113, 113, .28);
	color: #fecaca;
	font-size: 10px;
}

/* ---- 听众 ---- */
.vr-audience-row {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.vr-aud-label {
	color: rgba(255, 255, 255, .6);
	font-size: 12px;
}

.vr-audience {
	margin-top: 6px;
}

.vr-audience-item {
	background: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .92);
}

/* ---- 公屏 ---- */
.vr-feed {
	margin-top: 10px;
	max-height: 118px;
	overflow-y: auto;
	color: rgba(255, 255, 255, .72);
	font-size: 12px;
	line-height: 1.95;
}

.vr-feed-line {
	padding: 1px 0;
}

.vr-feed-line:last-child {
	color: #fff;
}

/* ---- 底部图标操作栏 ---- */
.vr-bottombar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	gap: 6px;
	justify-content: space-around;
	margin-top: 12px;
	padding: 8px 6px;
	border-radius: 16px;
	background: rgba(17, 24, 39, .94);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, .22);
}

.vr-op {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 7px 2px;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: rgba(255, 255, 255, .82);
	font-size: 11px;
	cursor: pointer;
}

.vr-op i {
	font-size: 20px;
	font-style: normal;
	line-height: 1;
}

.vr-op:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.vr-op-live {
	background: linear-gradient(135deg, #22c55e, #16a34a);
	color: #fff;
}

.vr-op-gift {
	background: linear-gradient(135deg, #fbbf24, #f97316);
	color: #fff;
}

/* ---- 礼物面板 ---- */
.vr-giftpanel {
	margin-top: 10px;
	padding: 12px;
	border-radius: 16px;
	background: rgba(17, 24, 39, .96);
	color: #fff;
}

.vr-giftpanel-head {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
}

.vr-giftpanel-head .vr-tip {
	margin-left: 6px;
	color: rgba(255, 255, 255, .5);
	font-weight: 400;
}

.vr-giftgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 8px;
}

.vr-giftcard {
	padding: 8px 4px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
}

.vr-giftcard:hover {
	border-color: #fbbf24;
}

.vr-giftcard.vr-picked {
	border-color: #fbbf24;
	background: rgba(251, 191, 36, .22);
}

.vr-giftcard-icon {
	display: block;
	font-size: 24px;
}

.vr-giftcard-name {
	display: block;
	font-size: 11px;
}

.vr-giftcard-price {
	display: block;
	color: #fcd34d;
	font-size: 11px;
}

.vr-giftpanel-foot {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.vr-giftpanel-foot .vr-tip {
	color: rgba(255, 255, 255, .6);
}

/* ---- 飘屏特效 ---- */
.vr-fly {
	position: absolute;
	right: 12px;
	bottom: 100px;
	z-index: 30;
	pointer-events: none;
}

.vr-fly-item {
	margin-top: 6px;
	padding: 6px 12px;
	border-radius: 20px;
	background: linear-gradient(90deg, rgba(251, 191, 36, .96), rgba(249, 115, 22, .96));
	color: #3b1d00;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	animation: vr-fly-up 3s ease-out forwards;
}

.vr-fly-icon {
	font-size: 16px;
}

@keyframes vr-fly-up {
	0%   { opacity: 0; transform: translateY(14px) scale(.9); }
	15%  { opacity: 1; transform: translateY(0) scale(1); }
	75%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-64px); }
}

/* ---- 进房的小弹层 ---- */
.vr-join-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border-radius: 18px;
	background: rgba(0, 0, 0, .45);
}

.vr-join-card {
	width: 100%;
	max-width: 300px;
	padding: 22px 18px;
	border-radius: 16px;
	background: rgba(17, 24, 39, .97);
	color: #fff;
	text-align: center;
}

.vr-join-card p {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
}

.vr-join-card input[type=text] {
	width: 100%;
	margin-bottom: 12px;
	padding: 9px 12px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.vr-join-card .vr-btn-main {
	width: 100%;
	border: none;
}

/* ---- 大厅卡片：彩色封面 + 麦位头像 ---- */
.vr-card {
	display: block;
	padding: 0;
	overflow: hidden;
	border: none;
	border-radius: 16px;
	background: linear-gradient(160deg, var(--vr-c1, #4c1d95), var(--vr-c2, #7c3aed));
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
	transition: .2s;
}

.vr-card:hover {
	transform: translateY(-3px);
	color: #fff;
	box-shadow: 0 12px 26px rgba(0, 0, 0, .2);
}

.vr-card-top {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 12px 14px 0;
}

.vr-card-emoji {
	font-size: 22px;
}

.vr-card-tag {
	padding: 1px 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .22);
	color: #fff;
	font-size: 11px;
}

.vr-card-online {
	margin-left: auto;
	color: rgba(255, 255, 255, .88);
	font-size: 11px;
}

.vr-card-name {
	padding: 8px 14px 0;
	font-size: 16px;
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vr-card-foot {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 10px 14px 12px;
	color: rgba(255, 255, 255, .85);
	font-size: 11px;
}

.vr-mini-avatar {
	width: 22px;
	height: 22px;
	margin-right: -6px;
	border: 1.5px solid rgba(255, 255, 255, .65);
	border-radius: 50%;
}

.vr-card-owner {
	margin-left: 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vr-card-seats {
	margin-left: auto;
	white-space: nowrap;
}

/* 公屏滚动条弄细一点，别那么丑 */
.vr-feed {
	scrollbar-width: thin;
}

.vr-feed::-webkit-scrollbar {
	width: 4px;
}

.vr-feed::-webkit-scrollbar-track {
	background: transparent;
}

.vr-feed::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background: rgba(255, 255, 255, .22);
}

/* ============================================================
 * v0.6：图标 + 聊天区 + 点空位上麦
 * ============================================================ */

/* ---- 图标尺寸（currentColor 跟着文字颜色走） ---- */
.vri {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
	vertical-align: -.18em;
}

.vri-xs   { width: 14px; height: 14px; vertical-align: -2px; }
.vri-card { width: 26px; height: 26px; color: #fff; }
.vri-room { width: 20px; height: 20px; color: #ffd166; vertical-align: -3px; }
.vri-gift { width: 30px; height: 30px; color: #fff; display: block; margin: 0 auto; }
.vri-plus { width: 22px; height: 22px; }
.vri-icon { width: 20px; height: 20px; }
.vr-iconbtn .vri { width: 20px; height: 20px; }
.vr-op .vri { width: 22px; height: 22px; }
.vr-chat-send .vri { width: 20px; height: 20px; }
.vr-crown .vri-crown { width: 16px; height: 16px; }

/* 麦位右下角那个麦克风徽标里的图标 */
.vr-mic .vri-mic {
	width: 13px;
	height: 13px;
	vertical-align: 0;
	color: #16a34a;
}

.vr-mic-off .vri-mic {
	color: #6b7280;
}

/* ---- 空位可点 ---- */
.vr-seat-clickable {
	cursor: pointer;
	border-radius: 50%;
	transition: transform .18s ease;
}

.vr-seat-clickable:hover {
	transform: scale(1.07);
}

.vr-seat-clickable:hover .vr-seat-empty {
	border-color: #ffd166;
	color: #ffd166;
}

/* ---- 聊天区 ---- */
.vr-feed {
	max-height: 152px;
}

.vr-chat-line {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	padding: 2px 0;
	line-height: 1.75;
	word-break: break-word;
}

.vr-chat-line img {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	border-radius: 50%;
}

.vr-chat-line b {
	flex: 0 0 auto;
	max-width: 42%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #ffd166;
	font-size: 12px;
	font-weight: 500;
}

.vr-chat-line span {
	flex: 1;
	color: rgba(255, 255, 255, .92);
	font-size: 12px;
}

.vr-chat-me b {
	color: #86efac;
}

.vr-chat-sys {
	justify-content: center;
	color: rgba(255, 255, 255, .45);
	font-size: 11px;
}

/* ---- 发言输入条 ---- */
.vr-chatbar {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
	padding: 6px 6px 6px 14px;
	border-radius: 24px;
	background: rgba(17, 24, 39, .94);
}

.vr-chatbar input {
	flex: 1;
	min-width: 0;
	padding: 8px 0;
	border: none;
	outline: none;
	background: transparent;
	color: #fff;
	font-size: 13px;
}

.vr-chatbar input::placeholder {
	color: rgba(255, 255, 255, .4);
}

.vr-chat-send {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, #fbbf24, #f97316);
	color: #fff;
	cursor: pointer;
}

.vr-chat-send:hover {
	filter: brightness(1.08);
}

/* 礼物卡片里的图标居中 */
.vr-giftcard-icon {
	display: block;
	min-height: 32px;
}

/* ---- 房主的房间设置面板 ---- */
.vr-editpanel {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 10001;
	transform: translate(-50%, -50%);
	width: 300px;
	max-height: 86vh;
	overflow-y: auto;
	padding: 16px;
	border-radius: 16px;
	background: #fff;
	color: #222;
	box-shadow: 0 14px 44px rgba(0, 0, 0, .3);
}

.vr-editpanel-title {
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

.vr-editpanel-title .vri-xs {
	vertical-align: -2px;
}

.vr-editpanel label {
	display: block;
	margin-bottom: 10px;
	color: #666;
	font-size: 12px;
}

.vr-editpanel input[type=text],
.vr-editpanel select {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fafafa;
	color: #222;
	font-size: 13px;
}

.vr-editpanel-btns {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.vr-editpanel-btns .vr-btn {
	flex: 1;
	justify-content: center;
}

.vr-editpanel-btns .vr-btn:not(.vr-btn-main) {
	border-color: #ddd;
	color: #666;
}

/* ============================================================
 * v0.7：房主头像当房间图标 + 背景图 + 聊天固定在底部
 * ============================================================ */

/* 房主头像当"房间图标" */
.vr-card-face {
	width: 34px;
	height: 34px;
	border: 1.5px solid rgba(255, 255, 255, .75);
	border-radius: 50%;
	object-fit: cover;
}

.vr-topbar-face {
	width: 22px;
	height: 22px;
	margin-right: 3px;
	border: 1.5px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	object-fit: cover;
	vertical-align: -5px;
}

/* 聊天固定在底部，像抖音那样：定高、从下面冒、旧的自己消失、不出现滚动条 */
.vr-feed {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 172px;
	max-height: none;
	overflow: hidden;
	margin-top: auto;
	padding-top: 8px;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}

.vr-feed::-webkit-scrollbar {
	display: none;
}

.vr-chat-line {
	animation: vr-msg-in .26s ease-out;
}

@keyframes vr-msg-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* 手机：整个房间铺满屏幕，聊天贴着底部 */
@media (max-width: 768px) {
	.vr-room {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - 40px);
	}

	.vr-stage {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.vr-feed {
		height: 190px;
	}
}

/* 房间设置里的背景图 */
.vr-bgrow {
	display: flex;
	gap: 8px;
	margin: 4px 0 8px;
}

.vr-bgprev img {
	display: block;
	width: 100%;
	max-height: 140px;
	border-radius: 10px;
	object-fit: cover;
}

.vr-tip-block {
	margin: 6px 0 12px;
	padding: 8px 11px;
	border-radius: 8px;
	background: rgba(127, 127, 127, .12);
}

/* ============================================================
 * v0.7.1：大厅卡片也用房间背景图（裁切显示）+ 深色遮罩
 * ============================================================ */

/* 有背景图的卡片：高一点，把图露出来，文字压到底部 */
.vr-card-has-bg {
	display: flex;
	flex-direction: column;
	min-height: 172px;
}

.vr-card-has-bg .vr-card-top {
	text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

.vr-card-has-bg .vr-card-name {
	margin-top: auto;
	font-size: 17px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

.vr-card-has-bg .vr-card-foot {
	padding-top: 8px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

.vr-card-has-bg .vr-card-face {
	border-color: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* ============================================================
 * v0.7.2：说话音浪 + 手机底部安全区 + 进房飘屏
 * ============================================================ */

/* 音浪：说话时头像底下跳动的柱子，高度由实时音量 --vr-vol（0~1）驱动 */
.vr-seat {
	--vr-vol: 0;
}

.vr-wave {
	position: absolute;
	left: 50%;
	bottom: -8px;
	display: flex;
	gap: 2px;
	align-items: flex-end;
	height: 14px;
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity .18s ease;
	pointer-events: none;
}

.vr-seat.vr-speaking .vr-wave {
	opacity: 1;
}

.vr-wave i {
	display: block;
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: linear-gradient(to top, #16a34a, #86efac);
	transform-origin: bottom center;
	transform: scaleY(calc(.22 + var(--vr-vol) * .78));
	transition: transform .09s linear;
}

.vr-wave i:nth-child(2) {
	transform: scaleY(calc(.36 + var(--vr-vol) * 1));
}

.vr-wave i:nth-child(3) {
	transform: scaleY(calc(.18 + var(--vr-vol) * .62));
}

.vr-wave i:nth-child(4) {
	transform: scaleY(calc(.3 + var(--vr-vol) * .88));
}

/* 手机底部安全区：iPhone 的系统横条不会压住操作栏和输入框 */
.vr-bottombar,
.vr-chatbar {
	padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* 进房欢迎的飘屏：和送礼的橙色区分开，用白底 */
.vr-fly-enter {
	background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(226, 232, 240, .95));
	color: #1f2937;
}

/* ============================================================
 * v0.8.0：房主的"进房申请"弹窗 + 申请进房的等待提示
 * ============================================================ */

.vr-reqpanel {
	position: fixed;
	right: 14px;
	bottom: 112px;
	z-index: 60;
	width: 272px;
	max-width: calc(100vw - 28px);
	padding: 12px 12px 10px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	background: rgba(24, 22, 38, .97);
	box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
	color: #fff;
}

.vr-reqpanel-title {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
}

.vr-reqrow {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, .09);
}

.vr-reqrow img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
}

.vr-reqname {
	flex: 1;
	overflow: hidden;
	font-size: 12.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vr-reqrow .vr-btn {
	padding: 4px 9px;
	font-size: 12px;
}

.vr-reqpanel-close {
	width: 100%;
	margin-top: 9px;
}

.vr-join-wait {
	margin: 7px 0 2px;
	font-size: 13px;
	color: #93c5fd;
}

.vr-join-wait-no {
	color: #fca5a5;
}

/* 私密房：没被同意的人看到的提示 */
.vr-tip-block {
	line-height: 1.65;
}

/* ============================================================
 * v0.8.1：自适应
 *   ① 房间居中限宽（电脑上不再拉成一条大板子，宽度后台可调）
 *   ② 麦位头像和字号跟着屏幕缩放（小屏自动变小，不会撑破）
 * ============================================================ */

.vr-wrap.vr-room {
	max-width: var(--vr-room-w, 520px);
	margin-right: auto;
	margin-left: auto;
}

.vr-room {
	/* 头像尺寸：小屏自动缩到 46px，大屏最多 62px */
	--vr-seat: clamp(46px, 13vw, 62px);
}

.vr-room .vr-seat-avatar,
.vr-room .vr-seat-avatar img {
	width: var(--vr-seat);
	height: var(--vr-seat);
}

.vr-room .vr-roomname {
	font-size: clamp(15px, 4.4vw, 17px);
}

.vr-room .vr-seat-name {
	font-size: clamp(11px, 3.2vw, 12.5px);
}

.vr-room .vr-chat-line,
.vr-room .vr-chatbar input {
	font-size: clamp(12px, 3.4vw, 13px);
}

.vr-room .vr-roomsub {
	font-size: clamp(11px, 3vw, 12px);
}

/* 特别窄的老手机（<360px）再收紧间距，别横向挤出去 */
@media (max-width: 360px) {
	.vr-room .vr-stage {
		padding: 12px 10px 14px;
	}

	.vr-room .vr-seatgrid {
		gap: 10px 4px;
	}

	.vr-room .vr-op {
		font-size: 10px;
	}

	.vr-room .vr-op .vri {
		width: 19px;
		height: 19px;
	}

	.vr-room .vr-audience-item {
		padding: 3px 8px 3px 4px;
		font-size: 11px;
	}
}