/* ==========================================================================
   HALO ULTRA-PERFORMANCE RUNTIME SYSTEM (v281)
   Eliminates mobile GPU thermal spikes, nested backdrop-filter compositing,
   and unconstrained layout thrashing across all mobile & desktop viewports.
   ========================================================================== */

#halo-local-voice {
  position: fixed !important;
  inset: 12px !important;
  margin: auto !important;
  box-sizing: border-box !important;
  width: min(460px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: auto !important;
  padding: 20px !important;
  border: 1px solid var(--ui-line, #607087) !important;
  border-radius: 20px !important;
  background: var(--ui-surface, #172238) !important;
  color: var(--ui-text, #edf4ff) !important;
  transform: none !important;
}

#halo-local-voice header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#halo-local-voice h2 { font-size: 20px; }
#halo-local-voice p { font: 400 13px/1.5 system-ui; }
#halo-local-voice label { display: grid; gap: 8px; margin: 14px 0; }
#halo-local-voice select {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  background: var(--ui-surface, #172238);
  color: inherit;
  border: 1px solid var(--ui-line, #607087);
  border-radius: 10px;
  font-size: 16px;
}
#halo-local-voice button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--ui-line, #607087);
  border-radius: 10px;
  background: var(--edge-soft, #ffffff10);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#halo-local-voice button:disabled { opacity: .5; }
#halo-local-voice::backdrop { background: #030b1766; }

/* ==========================================================================
   MOBILE & TOUCH THERMAL SAFEGUARDS
   Zero-lag, 120fps fluid interaction by removing multi-layer GPU blurs
   and infinite animated radial gradients behind translucent surfaces.
   ========================================================================== */

@media (max-width: 900px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  /* 1. Stop GPU-intensive background animations */
  .ambient, .orb, .orb-one, .orb-two, .orb-three, .grid,
  .auth-orbit .logo-mark, .auth-orbit > i, .social-brand-pulse,
  .call-logo-mark, .call-logo-mark::before, .call-logo-mark i,
  .connection-status > .status-dot, .live-dot {
    animation: none !important;
    will-change: auto !important;
  }

  /* 2. Remove stacked backdrop-filter blurs */
  :is(
    .app-shell,
    .topbar,
    .social-rail,
    .social-main-header,
    .social-card,
    .social-contacts-card,
    .social-feature-hero,
    .social-side-stack,
    .halo-status-list-card,
    .halo-status-publisher,
    .halo-status-section,
    .halo-news-card,
    .halo-settings-page,
    #halo-wallet-dialog,
    .halo-wallet-dialog,
    .halo-wallet-content,
    .halo-wallet-shell > header,
    .halo-balance-subcard,
    .halo-quick-btn,
    .halo-wallet-allowance,
    #halo-coin-send,
    .halo-coin-history li,
    .halo-shop-hero,
    .halo-product-card,
    .halo-profile-card,
    .social-profile-card,
    .halo-identity-card,
    .halo-personalization,
    .halo-notification-card,
    .halo-game-card,
    .halo-call-history,
    #direct-chat-card,
    .direct-chat-card,
    .direct-chat-header,
    .direct-chat-messages,
    .direct-chat-form,
    #halo-group-detail,
    .auth-card,
    .glass-panel,
    .glass-bar,
    .halo-active-call-overlay .room-sidebar,
    .social-call-panel .halo-call-row,
    .social-call-panel .halo-call-empty,
    .halo-direct-call-layer,
    .halo-image-viewer,
    .privacy-chip,
    .caption-panel
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  dialog::backdrop,
  #halo-wallet-dialog::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3. Dark Theme Mobile Surface Optimizations */
  html:not([data-theme="light"]) body.social-authenticated .app-shell,
  body.social-authenticated .app-shell {
    background: #080d18 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
  }
  html:not([data-theme="light"]) body.social-authenticated :is(.topbar, .social-main-header, .social-rail) {
    background: #0c1424 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  html:not([data-theme="light"]) body.social-authenticated :is(
    .social-card,
    .social-contacts-card,
    .social-feature-hero,
    .halo-status-list-card,
    .halo-news-card,
    .halo-settings-page,
    .halo-profile-card,
    .halo-identity-card,
    #direct-chat-card,
    #halo-group-detail
  ) {
    background: #0d1629 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  }
  html:not([data-theme="light"]) body.social-authenticated :is(.direct-chat-header, .direct-chat-messages, .direct-chat-form) {
    background: #09101d !important;
  }
  html:not([data-theme="light"]) body.social-authenticated .social-contact {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }
  html:not([data-theme="light"]) body.social-authenticated .social-contact:hover,
  html:not([data-theme="light"]) body.social-authenticated .social-contact:active {
    background: rgba(255, 255, 255, 0.07) !important;
  }
  html:not([data-theme="light"]) body:not(.social-authenticated) .auth-card {
    background: #0d1629 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
  }

  /* 4. Light Theme Mobile Surface Optimizations */
  html[data-theme="light"] body.social-authenticated .app-shell {
    background: #edf2f9 !important;
    border-color: rgba(135, 162, 211, 0.2) !important;
  }
  html[data-theme="light"] body.social-authenticated :is(.topbar, .social-main-header, .social-rail) {
    background: #ffffff !important;
    border-color: rgba(135, 162, 211, 0.22) !important;
  }
  html[data-theme="light"] body.social-authenticated :is(
    .social-card,
    .social-contacts-card,
    .social-feature-hero,
    .halo-status-list-card,
    .halo-news-card,
    .halo-settings-page,
    .halo-profile-card,
    .halo-identity-card,
    #direct-chat-card,
    #halo-group-detail
  ) {
    background: #ffffff !important;
    border-color: rgba(135, 162, 211, 0.25) !important;
    box-shadow: 0 8px 24px rgba(43, 78, 138, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }
  html[data-theme="light"] body.social-authenticated :is(.direct-chat-header, .direct-chat-messages, .direct-chat-form) {
    background: #f7f9fd !important;
  }
  html[data-theme="light"] body.social-authenticated .social-contact {
    background: #f9fbfd !important;
    border-color: rgba(135, 162, 211, 0.18) !important;
  }
  html[data-theme="light"] body.social-authenticated .social-contact:hover,
  html[data-theme="light"] body.social-authenticated .social-contact:active {
    background: #eef3fb !important;
  }
  html[data-theme="light"] body:not(.social-authenticated) .auth-card {
    background: #ffffff !important;
    border-color: rgba(135, 162, 211, 0.25) !important;
    box-shadow: 0 16px 48px rgba(43, 78, 138, 0.12) !important;
  }
}

/* 5. Mobile phones (under 768px): completely remove background orbs from DOM compositor */
@media (max-width: 768px) {
  .ambient {
    display: none !important;
  }
}