/* A compact phone dock: media on the left, contact on the right, 3D above contact. */
@media (max-width: 600px) {
  .site-audio {
    left: calc(14px + env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .site-video-button {
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  #waFab {
    right: calc(14px + env(safe-area-inset-right)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .canvas-controls,
  body:not(.menu-open):not(.ui-scroll-locked) .canvas-controls {
    position: fixed !important;
    right: calc(14px + env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    z-index: 1002 !important;
  }
  body:not(.hero-controls-visible) .canvas-controls,
  body.menu-open .canvas-controls,
  body.ui-scroll-locked .canvas-controls {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #backToTop {
    right: calc(20px + env(safe-area-inset-right)) !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }
  body.hero-controls-visible #backToTop {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:not(.hero-panel-collapsed) .site-audio {
    left: auto !important;
    right: calc(14px + env(safe-area-inset-right)) !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.hero-panel-collapsed) .site-video-button {
    left: auto !important;
    right: calc(18px + env(safe-area-inset-right)) !important;
    bottom: calc(147px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.hero-panel-collapsed) .canvas-controls,
  body:not(.hero-panel-collapsed):not(.menu-open):not(.ui-scroll-locked) .canvas-controls {
    bottom: calc(217px + env(safe-area-inset-bottom)) !important;
  }
}
.site-audio.is-playing {
  border-color: color-mix(in srgb, var(--accent, #ff7a1a) 75%, white) !important;
  background: color-mix(in srgb, var(--accent, #ff7a1a) 18%, var(--bg,#101827)) !important;
  box-shadow: 0 3px 18px #0008, 0 0 0 3px color-mix(in srgb, var(--accent, #ff7a1a) 40%, transparent), 0 0 30px var(--accent, #ff7a1a) !important;
}
.site-audio.is-playing .site-audio-toggle { color: var(--accent, #ff7a1a); text-shadow: 0 0 14px var(--accent, #ff7a1a); }
@media (max-width: 600px) {
  .loader-ring::before, .loader-ring svg { animation: none !important; }
  .site-video-overlay { backdrop-filter: none; }
}