/**
 * nomadro white-label overlay for MiroTalk P2P client (iframe embed).
 * Colors align with portal /social (#0a0e17 + coral/gold/teal).
 * Default UX language: zh-CN (see config brand.app.language).
 */
:root {
  --ds-brand-50: #fff5f5;
  --ds-brand-100: #ffe3e3;
  --ds-brand-300: #ff9f9f;
  --ds-brand-500: #ff6b6b;
  --ds-brand-600: #f05959;
  --ds-brand-700: #d94848;
  --ds-neutral-900: #0a0e17;
  --ds-neutral-800: #111827;
  --ds-neutral-700: #1f2937;
  --ds-warning: #ffe66d;
  --ds-info: #4ecdc4;
  --ds-success: #4ecdc4;
}

html,
body {
  background: #0a0e17 !important;
  color: #f1f5f9 !important;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui,
    sans-serif !important;
}

/* Hide Google Translate chrome (language still applied) */
#google_translate_element,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.skiptranslate iframe,
body > .skiptranslate {
  display: none !important;
}
body {
  top: 0 !important;
}

/* Loading gate — nomadro, not MiroTalk */
#loadingDiv.nomadro-loading,
#loadingDiv {
  z-index: 9999 !important;
  min-width: min(420px, 92vw);
  padding: 36px 28px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(78, 205, 196, 0.16), transparent),
    rgba(10, 14, 23, 0.92) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(14px);
}

#loadingDiv h1 {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffe66d 50%, #4ecdc4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-family: inherit !important;
}

#loadingDiv pre {
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #94a3b8 !important;
  font-family: inherit !important;
  white-space: pre-wrap !important;
}

.nomadro-mark,
.spinner-logo.nomadro-mark {
  display: grid !important;
  place-items: center;
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto;
  border-radius: 18px !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #0a0e17 !important;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffe66d 50%, #4ecdc4 100%) !important;
  object-fit: unset !important;
  border: 0 !important;
}

.spinner-ring {
  border-top-color: #4ecdc4 !important;
}

#qrRoomPopupContainer {
  display: none !important;
}

/* Hide leftover MiroTalk gif/logo assets if any remain */
img[src*="mirotalk"],
img.spinner-logo[src*="logo.svg"] {
  display: none !important;
}

/* Kill MiroTalk promo / share / about chrome */
#shareRoomBtn,
#shareRoomBtn *,
#qrRoomBtn,
#aboutBtn,
#extraBtn,
#support-button,
#linkedin-button,
#email-button,
button#shareButton,
.fa-share-alt,
.fa-qrcode,
button[data-umami-event*="Share"],
button[data-umami-event*="About"],
button[data-umami-event*="Support"],
#initVideoAudioBtn,
.init-wrap,
.emoji-picker-react,
#showChatOnMsgDiv,
.swal2-image {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide Share-the-room / about / survey SweetAlerts (permissions still work via browser UI) */
html.nomadro-embed .swal2-container,
body.nomadro-embed .swal2-container {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Toolbar: glass dark like portal */
#controlButtons,
.control-bar,
.navbar,
#bottomButtons,
.fa-bar {
  background: rgba(10, 14, 23, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px);
}

#controlButtons button,
.control-button,
.btn,
button.btn {
  border-radius: 12px !important;
  box-shadow: none !important;
}

#controlButtons button:hover,
.control-button:hover {
  filter: brightness(1.08);
}

/* Video stage */
#videoMediaContainer,
#videoPinMediaContainer,
.Video {
  background: #05070c !important;
}

/* Chat panel (rarely used when portal has side chat) */
#msgerDraggable,
.msger {
  background: rgba(17, 24, 39, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

/* Settings / menus */
.settings,
.tabcontent,
.select,
select {
  background: #111827 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hide powered-by / version footers inside room if any */
.footer,
#footerDiv,
.powered-by,
[class*="poweredBy"],
#mirotalkVersion {
  display: none !important;
}