<template>
  <view
    class="live-root"
    :class="{ 'live-root--desktop': isDesktop, 'live-root--mobile': !isDesktop }"
  >
    <!-- 与登录页同一套玄幻背景（八卦、太极、祥云、阵环等） -->
    <MysticFantasyBg :round-phase="roundPhase" />

    <block v-if="!showDetail">
      <!-- 电脑端：内容区居中加宽；手机端：全宽（与 Tab 内测名一致） -->
      <view class="live-content">
        <TestNameScreen ref="testNameFormRef" @test="handleTest" />
      </view>
    </block>

    <!-- 结果详解弹层：个人 / 公司测名详解（电脑端：居中面板，内容组件不变） -->
    <view
      v-else
      class="live-detail-modal"
      :class="{ 'live-detail-modal--desktop': isDesktop }"
      @click="closeDetail"
    >
      <view
        class="live-detail-modal-body"
        :class="{ 'live-detail-modal-body--desktop': isDesktop }"
        @click.stop=""
      >
        <TestNameDetail
          v-if="detailKind === 'personal'"
          :data="reportData"
          :desktop-layout="isDesktop"
          @back="closeDetail"
        />
        <CompanyNamingDetailDesktop
          v-else-if="isDesktop"
          :data="reportData"
          :show-business-fortune="companyShowBusinessFortune"
          @back="closeDetail"
          @business-fortune="() => {}"
        />
        <CompanyNamingDetail
          v-else
          :data="reportData"
          :show-business-fortune="companyShowBusinessFortune"
          :desktop-layout="isDesktop"
          @back="closeDetail"
          @business-fortune="() => {}"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import TestNameScreen from '../../components/screens/TestName.vue';
import TestNameDetail from '../../components/screens/TestNameDetail.vue';
import CompanyNamingDetail from '../../components/screens/CompanyNamingDetail.vue';
import CompanyNamingDetailDesktop from '../../components/screens/CompanyNamingDetailDesktop.vue';
import MysticFantasyBg from '../../components/MysticFantasyBg.vue';
import { namingApi } from '../../api/naming';
import { showToast } from '../../utils/uni-compat';
import { getIsDesktopLayout } from '../../utils/device-layout';
import {
  classifyLiveTestDetail,
  pollTestSolutionDetail,
  pollUntilSolutionIdFromScoring,
} from '../../utils/poll-test-solution-detail';

type LiveRoundPhase = 'ready' | 'loading' | 'result';

type PersonalTestParams = {
  lastName: string;
  firstName: string;
  gender: 'male' | 'female';
  birthDate: string;
};

type CompanyTestParams = {
  companyName?: string;
  industry: string;
  address: string;
  target_audience: string;
  members: Array<{ name: string; birth_date: string }>;
};

type TestMode = 'personal' | 'company';

const testNameFormRef = ref<{ closeLoading: () => void } | null>(null);

/** 电脑端网页布局 vs 手机端布局（随窗口尺寸变化更新） */
const isDesktop = ref(
  typeof window !== 'undefined' ? getIsDesktopLayout() : false,
);

const roundPhase = ref<LiveRoundPhase>('ready');
const reportData = ref<any | null>(null);
const showDetail = ref(false);
/** 详解弹层：个人测名 vs 公司测名（与 index 我的方案分流一致） */
const detailKind = ref<'personal' | 'company'>('personal');
const companyShowBusinessFortune = ref(false);

let pollAbort: AbortController | null = null;

const syncDeviceLayout = () => {
  if (typeof window === 'undefined') return;
  isDesktop.value = getIsDesktopLayout();
};

onMounted(() => {
  syncDeviceLayout();
  window.addEventListener('resize', syncDeviceLayout, { passive: true });
});

onUnmounted(() => {
  pollAbort?.abort();
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', syncDeviceLayout);
  }
});

const closeDetail = () => {
  showDetail.value = false;
  reportData.value = null;
  detailKind.value = 'personal';
  companyShowBusinessFortune.value = false;
  roundPhase.value = 'ready';
};

const handleTest = async (mode: TestMode, params: PersonalTestParams | CompanyTestParams) => {
  roundPhase.value = 'loading';
  pollAbort?.abort();
  pollAbort = new AbortController();
  const signal = pollAbort.signal;

  try {
    let res: any;
    if (mode === 'personal') {
      const p = params as PersonalTestParams;
      res = await namingApi.personalScoring({
        surname: String(p.lastName || '').trim(),
        given_name: String(p.firstName || '').trim(),
        gender: p.gender,
        birthday: p.birthDate,
      });
    } else {
      const p = params as CompanyTestParams;
      res = await namingApi.companyScoring({
        company_name: String(p.companyName || '').trim(),
        industry: String(p.industry || '').trim(),
        address: String(p.address || '').trim(),
        target_audience: String(p.target_audience || '').trim(),
        members: Array.isArray(p.members)
          ? p.members
              .filter((m) => m?.name && m?.birth_date)
              .map((m) => ({
                name: String(m.name || '').trim(),
                birthday: m.birth_date,
              }))
          : [],
      });
    }

    const solutionId = await pollUntilSolutionIdFromScoring(res, {
      intervalMs: 5000,
      signal,
    });

    const detail = await pollTestSolutionDetail(solutionId, mode, {
      intervalMs: 5000,
      signal,
    });
    const classified = classifyLiveTestDetail(detail, mode);
    detailKind.value = classified.kind;
    companyShowBusinessFortune.value = classified.showBusinessFortune;
    reportData.value = detail;
    roundPhase.value = 'result';
    showDetail.value = true;
  } catch (error: any) {
    if (String(error?.message || '') === 'aborted') {
      roundPhase.value = 'ready';
      return;
    }
    showToast({
      title: error?.msg || error?.message || '测算失败，请稍后重试',
      icon: 'none',
    });
    roundPhase.value = 'ready';
  } finally {
    testNameFormRef.value?.closeLoading();
  }
};
</script>

<style scoped>
.live-root {
  min-height: 100vh;
  background: transparent;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: block;
}

/* 电脑端：内容区居中，阅读宽度更接近网页 */
.live-root--desktop .live-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px 32px 48px;
  box-sizing: border-box;
}

/* 电脑端：测名表单与登录页同系 — 深色玻璃 + 金边 */
.live-root--desktop :deep(.testname-top-bar) {
  opacity: 0.35;
}

.live-root--desktop :deep(.testname-title) {
  color: #f2e6d8;
  text-shadow: 0 0 24px rgba(212, 175, 55, 0.25);
}

.live-root--desktop :deep(.testname-mode-toggle-bg) {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.22);
  backdrop-filter: blur(8px);
}

.live-root--desktop :deep(.testname-mode-toggle-slider) {
  background: rgba(2, 6, 23, 0.75);
  border-color: rgba(212, 175, 55, 0.28);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.12);
}

.live-root--desktop :deep(.testname-mode-toggle-btn) {
  color: rgba(233, 233, 239, 0.55);
}

.live-root--desktop :deep(.testname-mode-toggle-btn-active) {
  color: #d4af37;
}

.live-root--desktop :deep(.testname-form-card) {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}

.live-root--desktop :deep(.testname-corner) {
  border-color: rgba(212, 175, 55, 0.35);
}

.live-root--desktop :deep(.testname-label),
.live-root--desktop :deep(.testname-label-center),
.live-root--desktop :deep(.testname-label-with-icon) {
  color: rgba(242, 230, 216, 0.78);
}

.live-root--desktop :deep(.testname-input-wrapper) {
  border-bottom-color: rgba(148, 163, 184, 0.35);
}

.live-root--desktop :deep(.testname-input-wrapper-focus) {
  border-bottom-color: rgba(212, 175, 55, 0.55);
}

.live-root--desktop :deep(.testname-input-name) {
  color: #f2e6d8;
}

.live-root--desktop :deep(.testname-input-name::placeholder) {
  color: rgba(148, 163, 184, 0.55);
}

.live-root--desktop :deep(.testname-gender-btn) {
  border-color: rgba(148, 163, 184, 0.4);
  color: rgba(233, 233, 239, 0.75);
  background: rgba(2, 6, 23, 0.35);
}

.live-root--desktop :deep(.testname-gender-btn-active) {
  border-color: rgba(212, 175, 55, 0.55);
  background: linear-gradient(145deg, rgba(139, 35, 35, 0.85), rgba(212, 175, 55, 0.2));
  color: #fdfbf7;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.live-root--desktop :deep(.testname-date-picker-trigger) {
  background: rgba(2, 6, 23, 0.45);
  border-color: rgba(212, 175, 55, 0.18);
}

.live-root--desktop :deep(.testname-date-picker-text) {
  color: rgba(148, 163, 184, 0.65);
}

.live-root--desktop :deep(.testname-date-picker-text-filled) {
  color: #f2e6d8;
}

.live-root--desktop :deep(.testname-input-company) {
  background: rgba(2, 6, 23, 0.45);
  border-color: rgba(148, 163, 184, 0.35);
  color: #f2e6d8;
}

.live-root--desktop :deep(.testname-input-company::placeholder) {
  color: rgba(148, 163, 184, 0.45);
}

.live-root--desktop :deep(.testname-members-tip) {
  color: rgba(212, 175, 55, 0.55);
}

.live-root--desktop :deep(.testname-member-item) {
  background: rgba(2, 6, 23, 0.45);
  border-color: rgba(148, 163, 184, 0.35);
}

.live-root--desktop :deep(.testname-member-number) {
  background: rgba(212, 175, 55, 0.12);
  color: rgba(233, 233, 239, 0.75);
}

.live-root--desktop :deep(.testname-member-name) {
  color: #f2e6d8;
}

.live-root--desktop :deep(.testname-member-name::placeholder) {
  color: rgba(148, 163, 184, 0.45);
}

.live-root--desktop :deep(.testname-member-divider) {
  background: rgba(148, 163, 184, 0.35);
}

.live-root--desktop :deep(.testname-member-date) {
  color: rgba(148, 163, 184, 0.65);
}

.live-root--desktop :deep(.testname-member-date-filled) {
  color: #f2e6d8;
}

.live-root--desktop :deep(.testname-divider) {
  background: rgba(212, 175, 55, 0.15);
}

.live-root--desktop :deep(.testname-submit-btn) {
  background: linear-gradient(135deg, rgba(139, 35, 35, 0.95), rgba(90, 20, 20, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(212, 175, 55, 0.12);
}

.live-root--desktop :deep(.testname-submit-btn-border) {
  border-color: rgba(212, 175, 55, 0.35);
}

.live-root--desktop :deep(.testname-submit-text) {
  color: #fdfbf7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* 电脑端：详解以居中「网页页」形式展示，内容仍为原详解组件 */
.live-root--desktop .live-detail-modal--desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  box-sizing: border-box;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(12px);
}

.live-root--desktop .live-detail-modal-body--desktop {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 1320px;
  /* 电脑端：适当拉高弹层，避免底部模块在可视区内被裁切 */
  height: min(98vh, calc(100vh - 12px));
  max-height: calc(100vh - 12px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  background: rgba(6, 8, 16, 0.92);
}

/* 详解根组件：占满面板，内部由各页 desktop 样式负责双列与滚动 */
.live-root--desktop .live-detail-modal-body--desktop :deep(.test-name-detail),
.live-root--desktop .live-detail-modal-body--desktop :deep(.company-detail) {
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
}

.live-root--desktop .live-detail-modal-body--desktop :deep(.company-detail) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
  max-height: 100%;
  min-height: 0;
  z-index: 1;
}

/* 手机端：与 Tab 内八字测名一致，不额外收窄 */
.live-root--mobile .live-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.live-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.live-top {
  padding: 18rpx 20rpx 10rpx;
}

.live-video {
  height: 220rpx;
  border-radius: 20rpx;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top, #2a2040, #0b0b12 55%);
  border: 1px solid rgba(212, 175, 55, 0.15);
}

.live-video-shimmer {
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, rgba(212, 175, 55, 0) 35%, rgba(212, 175, 55, 0.22) 50%, rgba(212, 175, 55, 0) 65%);
  transform: translateX(-30%);
  animation: live-shimmer 2.6s linear infinite;
}

@keyframes live-shimmer {
  0% {
    transform: translateX(-40%);
  }
  100% {
    transform: translateX(40%);
  }
}

.live-video-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 26rpx;
}

.live-title-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.live-title {
  font-size: 34rpx;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #d4af37;
}

.live-pill {
  padding: 8rpx 18rpx;
  border-radius: 999rpx;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.live-sub-row {
  margin-top: 10rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.live-subtext {
  font-size: 22rpx;
  color: rgba(233, 233, 239, 0.78);
}

.live-live-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.live-live-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #ff2d2d;
  box-shadow: 0 0 20rpx rgba(255, 45, 45, 0.4);
  animation: live-pulse 1.2s ease-in-out infinite;
}

.live-live-text {
  font-size: 22rpx;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ff2d2d;
}

.live-inline-count {
  font-size: 18rpx;
  color: rgba(233, 233, 239, 0.75);
  letter-spacing: 0.06em;
}

@keyframes live-pulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

.live-main {
  flex: 1;
  display: flex;
  gap: 18rpx;
  padding: 0 20rpx 24rpx;
  box-sizing: border-box;
}

.live-left {
  flex: 1.15;
  min-width: 0;
}

.live-right {
  flex: 0.85;
  min-width: 0;
}

.live-info {
  height: calc(100vh - 280rpx);
  border-radius: 20rpx;
  border: 1px solid rgba(212, 175, 55, 0.08);
  background: rgba(15, 23, 42, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 16rpx;
  box-sizing: border-box;
}

.live-info-card {
  border-radius: 16rpx;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.45);
  padding: 16rpx 14rpx;
}

.live-info-card.ghost {
  background: rgba(2, 6, 23, 0.22);
}

.live-info-title {
  display: block;
  font-size: 22rpx;
  font-weight: 900;
  color: #d4af37;
  letter-spacing: 0.06em;
  margin-bottom: 12rpx;
}

.live-info-line {
  display: block;
  font-size: 20rpx;
  color: rgba(233, 233, 239, 0.78);
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.live-info-tip {
  display: block;
  font-size: 18rpx;
  color: rgba(233, 233, 239, 0.62);
  margin-top: 10rpx;
  line-height: 1.5;
}

.live-form-scroll {
  height: calc(100vh - 280rpx);
  border-radius: 20rpx;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.08);
  background: rgba(253, 251, 247, 0.02);
}

/* 将现有测名组件“全屏最小高度”调整为嵌入式 */
:deep(.testname-screen) {
  min-height: 100vh !important;
  background: transparent !important;
  position: relative;
  z-index: 2;
}

:deep(.testname-bg-texture) {
  opacity: 0 !important;
  background-image: none !important;
}

.live-result-scroll {
  height: calc(100vh - 280rpx);
}

.live-result-card {
  height: 100%;
  border-radius: 20rpx;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.28);
  overflow: hidden;
  box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.45);
}

.live-result-head {
  padding: 24rpx 26rpx;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

.live-result-label {
  font-size: 26rpx;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #d4af37;
}

.live-result-actions {
  display: flex;
  gap: 14rpx;
}

.live-action-btn {
  flex: 1;
  padding: 14rpx 0;
  border-radius: 12rpx;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.32);
  color: #fff;
  font-weight: 700;
  font-size: 22rpx;
}

.live-action-btn.ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.live-score-row {
  padding: 28rpx 26rpx;
  display: flex;
  gap: 22rpx;
  align-items: center;
}

.live-score-big {
  min-width: 180rpx;
}

.live-score {
  font-size: 82rpx;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: linear-gradient(to bottom, #d4af37, #8a6e1e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.live-stars {
  margin-top: 10rpx;
  display: flex;
  gap: 10rpx;
}

.live-star {
  font-size: 26rpx;
  color: rgba(212, 175, 55, 0.35);
}

.live-star.active {
  color: #d4af37;
  text-shadow: 0 0 10rpx rgba(212, 175, 55, 0.35);
}

.live-name-col {
  flex: 1;
  min-width: 0;
}

.live-name {
  font-size: 30rpx;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #f2e6d8;
  display: block;
}

.live-quote {
  margin-top: 12rpx;
  font-size: 22rpx;
  color: rgba(233, 233, 239, 0.72);
  line-height: 1.8;
  line-clamp: 3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.live-result-foot {
  padding: 0 26rpx 26rpx;
}

.live-tip {
  font-size: 20rpx;
  color: rgba(233, 233, 239, 0.7);
}

.live-mystic {
  height: 100%;
  border-radius: 20rpx;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.08);
  background: radial-gradient(circle at top, rgba(212, 175, 55, 0.12), rgba(15, 23, 42, 0.35) 55%);
  display: flex;
  flex-direction: column;
  padding: 18rpx;
  box-sizing: border-box;
}

.mystic-card {
  flex: 1;
  border-radius: 18rpx;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.35);
  box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.35);
  padding: 18rpx 16rpx;
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

.mystic-topline {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.mystic-title {
  font-size: 26rpx;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #d4af37;
}

.mystic-status {
  font-size: 18rpx;
  color: rgba(233, 233, 239, 0.78);
  letter-spacing: 0.06em;
}

.mystic-arc {
  flex: 1;
  min-height: 220rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mystic-arc-ring {
  width: 220rpx;
  height: 220rpx;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.55);
  opacity: 0.35;
  animation: mystic-rotate 6s linear infinite;
}

.mystic-arc-ring.active {
  opacity: 0.75;
  border-color: rgba(212, 175, 55, 0.9);
  animation-duration: 2.2s;
}

.mystic-arc-core {
  position: absolute;
  width: 78rpx;
  height: 78rpx;
  border-radius: 50%;
  background: radial-gradient(circle at top, rgba(212, 175, 55, 0.9), rgba(139, 35, 35, 0.25));
  box-shadow: 0 0 60rpx rgba(212, 175, 55, 0.25);
}

.mystic-charm {
  font-size: 18rpx;
  color: rgba(233, 233, 239, 0.78);
  letter-spacing: 0.08em;
}

.mystic-energy {
  padding-top: 8rpx;
}

.mystic-energy-bar {
  height: 10rpx;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.18);
  overflow: hidden;
  position: relative;
}

.mystic-energy-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.9));
  transform: translateX(-120%);
  animation: mystic-energy 2.4s ease-in-out infinite;
}

.mystic-energy-bar.phase-ready::after {
  animation-duration: 3.4s;
  opacity: 0.75;
}

.mystic-energy-bar.phase-loading::after {
  animation-duration: 1.6s;
  opacity: 1;
}

.mystic-energy-bar.phase-result::after {
  animation-duration: 2.8s;
  opacity: 0.9;
}

.mystic-tip {
  font-size: 16rpx;
  color: rgba(233, 233, 239, 0.6);
  line-height: 1.5;
}

@keyframes mystic-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes mystic-energy {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(180%);
  }
  100% {
    transform: translateX(180%);
  }
}

.live-chat {
  height: 100%;
  border-radius: 20rpx;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.08);
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
}

.live-chat-header {
  padding: 22rpx 20rpx;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.live-chat-title {
  font-size: 26rpx;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #d4af37;
}

.live-chat-header-tip {
  margin-top: 10rpx;
}

.live-chat-header-tip-text {
  font-size: 18rpx;
  color: rgba(233, 233, 239, 0.7);
}

.live-chat-list {
  flex: 1;
  padding: 18rpx 18rpx 0;
}

.chat-item {
  display: flex;
  gap: 10rpx;
  margin-bottom: 16rpx;
  align-items: flex-start;
}

.chat-role {
  font-size: 18rpx;
  color: rgba(212, 175, 55, 0.9);
  font-weight: 800;
  width: 60rpx;
  flex-shrink: 0;
}

.chat-text {
  font-size: 20rpx;
  color: rgba(233, 233, 239, 0.86);
  line-height: 1.6;
  word-break: break-all;
}

.live-chat-input {
  display: flex;
  gap: 12rpx;
  padding: 14rpx 14rpx 16rpx;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  box-sizing: border-box;
}

.chat-input {
  flex: 1;
  border-radius: 12rpx;
  padding: 14rpx 14rpx;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.32);
  color: #fff;
  font-size: 22rpx;
}

.chat-send-btn {
  width: 160rpx;
  border-radius: 12rpx;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.32);
  color: #fff;
  font-weight: 800;
  font-size: 22rpx;
}

.chat-send-btn[disabled] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: rgba(255, 255, 255, 0.55);
}

.live-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.45);
}

.live-detail-modal-body {
  position: absolute;
  inset: 0;
}

.live-stream-pill {
  position: fixed;
  right: 22rpx;
  top: calc(22rpx + env(safe-area-inset-top, 0px));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10rpx;
  padding: 12rpx 16rpx;
  border-radius: 999rpx;
  background: rgba(10, 10, 15, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.28);
  backdrop-filter: blur(10px);
}

.live-stream-pill-title {
  font-size: 20rpx;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #d4af37;
}

.live-stream-pill-sep {
  font-size: 18rpx;
  color: rgba(233, 233, 239, 0.6);
}

.live-stream-pill-state {
  font-size: 18rpx;
  letter-spacing: 0.06em;
  color: rgba(233, 233, 239, 0.72);
}
</style>

