/* VIP Production Hotfix V1.3.1: final layout guard only. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
}

.vip-phone-app {
  width: 100% !important;
  max-width: 430px !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding-bottom: 126px !important;
  overflow-x: hidden !important;
}

.screen {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
  padding-bottom: 126px !important;
  overflow: visible !important;
}

.header,
.page-heading,
.hero-card,
.assistant-card,
.focus-card,
.match-card,
.detail-hero,
.card,
.review-hero,
.review-card,
.member-card,
.benefit-hero,
.service-strip,
.chat-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
}

.hero-card *,
.assistant-card *,
.focus-card *,
.match-card *,
.review-hero *,
.review-card *,
.card *,
.member-card *,
.benefit-hero *,
.service-strip * {
  min-width: 0;
}

.stat-grid,
.review-hero div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px !important;
  width: 100% !important;
}

.stat-grid > div,
.review-hero div > span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
}

.stat-grid span,
.stat-grid strong,
.review-hero span,
.review-hero strong,
.match-card b,
.match-card strong,
.focus-card b,
.focus-card strong {
  overflow-wrap: anywhere;
}

.review-hero div > span {
  border-right: 0 !important;
  border-radius: 12px;
  background: rgba(247, 250, 248, .94);
  padding: 10px 6px;
}

.review-hero div > span:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.match-card .play-grid,
.play-grid {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden;
}

.match-card .play-grid > *,
.play-grid > * {
  min-width: 0 !important;
}

.bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 430px !important;
  z-index: 120 !important;
  pointer-events: auto;
}

.chat-input {
  bottom: 96px !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: calc(100% - 28px) !important;
  max-width: 402px !important;
}

.empty-review {
  display: none !important;
}

@media (max-width: 360px) {
  .screen {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .stat-grid,
  .review-hero div {
    gap: 9px !important;
  }
}

/* VIP UI emergency guard: production DOM layout and interaction only. */
.vip-page,
.vip-shell,
.vip-container,
.vip-main,
.vip-content,
.vip-phone-app {
  width: 100% !important;
  max-width: 430px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
}

.vip-page,
.vip-shell,
.vip-container,
.vip-main,
.vip-content,
.screen {
  padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important;
}

.vip-section,
.vip-banner,
.vip-card,
.vip-ai-card,
.vip-review-card,
.vip-match-card,
.hero,
.hero-card,
.assistant-home,
.assistant-card,
.focus-card,
.focus-row,
.design-focus-match,
.match-card,
.detail-card,
.review-card,
.member-card,
.benefit-hero,
.service-strip {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.vip-status-grid,
.status-grid,
.home-status-grid,
.stat-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.vip-status-card,
.status-card,
.stat-grid > div {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.vip-status-card *,
.status-card *,
.stat-grid > div * {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

.vip-match-card,
.vip-match-card button,
.vip-match-card a,
.match-card,
.match-card button,
.match-card a,
.focus-row,
.focus-row button,
.design-focus-match,
.view-detail-btn,
[data-detail],
[data-page],
[data-question],
[data-review-tab] {
  pointer-events: auto !important;
  cursor: pointer;
}

.vip-bg-graphic,
.vip-banner-graphic,
.decorative,
.robot-avatar-bg,
.hero-agent-visual,
.hero-agent-visual *,
.detail-visual,
.detail-visual *,
.assistant-ball {
  pointer-events: none !important;
}

.vip-bottom-nav,
.bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 430px !important;
  z-index: 80 !important;
}

.assistant-screen {
  padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
}

.vip-chat-list,
.assistant-messages,
.chat-list {
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 24px !important;
}

.vip-chat-input,
.assistant-input-bar,
.chat-input {
  position: sticky !important;
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 40 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 14px 0 0 !important;
}

.chat-panel {
  overflow: visible !important;
}

.hero,
.review-hero {
  overflow: hidden !important;
}