/* EchoWx r167 Phase 1: professional radar controls/timeline cleanup.
   UI-only: no radar ingest, frame, manifest, or projection changes. */
:root {
  --echowx-r167-panel: rgba(9, 13, 18, 0.86);
  --echowx-r167-panel-strong: rgba(12, 18, 24, 0.94);
  --echowx-r167-border: rgba(255, 255, 255, 0.13);
  --echowx-r167-border-soft: rgba(255, 255, 255, 0.08);
  --echowx-r167-text: rgba(255, 255, 255, 0.92);
  --echowx-r167-muted: rgba(255, 255, 255, 0.58);
  --echowx-r167-accent: #e2a832;
  --echowx-r167-accent-soft: rgba(226, 168, 50, 0.18);
  --echowx-r167-blue: #71b7ff;
}

html.echowx-r167-radar-phase1 .workspace-bottom-radar-quick,
html.echowx-r167-radar-phase1 .map-timeline,
html.echowx-r167-radar-phase1 .timeline-panel,
html.echowx-r167-radar-phase1 .timeline-bar {
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-radar-quick {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--echowx-r167-border) !important;
  background: linear-gradient(180deg, rgba(14, 20, 27, .92), rgba(8, 12, 17, .86)) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
  border-radius: 18px !important;
  color: var(--echowx-r167-text) !important;
  max-width: min(1180px, calc(100vw - 28px)) !important;
  margin-inline: auto !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-segment,
html.echowx-r167-radar-phase1 .workspace-bottom-quick-select,
html.echowx-r167-radar-phase1 .workspace-bottom-radar-site,
html.echowx-r167-radar-phase1 .workspace-bottom-icon-action,
html.echowx-r167-radar-phase1 .workspace-bottom-radar-frame-status {
  min-height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid var(--echowx-r167-border-soft) !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--echowx-r167-text) !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-segment {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-segment button,
html.echowx-r167-radar-phase1 .workspace-bottom-radar-site,
html.echowx-r167-radar-phase1 .workspace-bottom-icon-action {
  height: 30px !important;
  min-width: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--echowx-r167-muted) !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  transition: background .16s ease, color .16s ease, transform .16s ease !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-segment button:hover,
html.echowx-r167-radar-phase1 .workspace-bottom-radar-site:hover,
html.echowx-r167-radar-phase1 .workspace-bottom-icon-action:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-segment button.active,
html.echowx-r167-radar-phase1 .workspace-bottom-segment button.selected,
html.echowx-r167-radar-phase1 .workspace-bottom-radar-site.active {
  background: linear-gradient(180deg, rgba(226,168,50,.28), rgba(226,168,50,.18)) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(226,168,50,.35) !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-loop-segment button {
  font-size: 12px !important;
  min-width: 42px !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-quick-select {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 3px 8px !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-quick-select > span,
html.echowx-r167-radar-phase1 .workspace-bottom-radar-frame-status {
  color: var(--echowx-r167-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-quick-select select {
  height: 30px !important;
  max-width: 240px !important;
  border: 0 !important;
  outline: 0 !important;
  background: rgba(0,0,0,.28) !important;
  color: #fff !important;
  border-radius: 9px !important;
  padding: 0 28px 0 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-radar-speed-select select {
  max-width: 78px !important;
}

html.echowx-r167-radar-phase1 .workspace-bottom-radar-frame-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  color: rgba(255,255,255,.66) !important;
  background: rgba(113,183,255,.075) !important;
  border-color: rgba(113,183,255,.16) !important;
}

html.echowx-r167-radar-phase1 .map-timeline,
html.echowx-r167-radar-phase1 .timeline-panel,
html.echowx-r167-radar-phase1 .timeline-bar {
  background: linear-gradient(180deg, rgba(12,18,25,.88), rgba(8,12,17,.84)) !important;
  border: 1px solid var(--echowx-r167-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
  color: #fff !important;
}

html.echowx-r167-radar-phase1 .map-timeline input[type="range"],
html.echowx-r167-radar-phase1 .timeline-panel input[type="range"],
html.echowx-r167-radar-phase1 .timeline-bar input[type="range"] {
  accent-color: var(--echowx-r167-accent) !important;
}

html.echowx-r167-radar-phase1 .timeline-play,
html.echowx-r167-radar-phase1 .play-button,
html.echowx-r167-radar-phase1 .playback-buttons button,
html.echowx-r167-radar-phase1 button[aria-label*="Play" i],
html.echowx-r167-radar-phase1 button[aria-label*="Pause" i] {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html.echowx-r167-radar-phase1 .timeline-play:hover,
html.echowx-r167-radar-phase1 .play-button:hover,
html.echowx-r167-radar-phase1 .playback-buttons button:hover,
html.echowx-r167-radar-phase1 button[aria-label*="Play" i]:hover,
html.echowx-r167-radar-phase1 button[aria-label*="Pause" i]:hover {
  background: var(--echowx-r167-accent-soft) !important;
  border-color: rgba(226,168,50,.38) !important;
}

/* Remove the decorative loader/sprite layer while keeping text/error/status panels visible. */
html.echowx-r167-radar-phase1 [class*="radar" i][class*="sprite" i],
html.echowx-r167-radar-phase1 [class*="loading" i][class*="sprite" i],
html.echowx-r167-radar-phase1 [class*="spinner" i]:not(.source-dot):not(.status-dot),
html.echowx-r167-radar-phase1 [class*="loader" i]:not([class*="message" i]):not([class*="status" i]),
html.echowx-r167-radar-phase1 [data-loading-sprite],
html.echowx-r167-radar-phase1 .radar-loading-sprite,
html.echowx-r167-radar-phase1 .loading-radar-sprite {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.echowx-r167-radar-phase1 .radar-control-panel[data-echowx-radar-settings-location="global-footer-only"] {
  border-radius: 18px !important;
  border: 1px solid var(--echowx-r167-border) !important;
  background: var(--echowx-r167-panel-strong) !important;
  box-shadow: 0 20px 58px rgba(0,0,0,.38) !important;
}

html.echowx-r167-radar-phase1 .radar-control-panel-header span,
html.echowx-r167-radar-phase1 .radar-control-label,
html.echowx-r167-radar-phase1 .radar-drawing-location-note {
  color: var(--echowx-r167-muted) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

@media (max-width: 900px) {
  html.echowx-r167-radar-phase1 .workspace-bottom-radar-quick {
    gap: 6px !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding: 7px 8px !important;
    border-radius: 16px !important;
    scrollbar-width: none !important;
  }
  html.echowx-r167-radar-phase1 .workspace-bottom-radar-quick::-webkit-scrollbar { display: none !important; }
  html.echowx-r167-radar-phase1 .workspace-bottom-quick-select > span,
  html.echowx-r167-radar-phase1 .workspace-bottom-radar-frame-status { display: none !important; }
  html.echowx-r167-radar-phase1 .workspace-bottom-quick-select { grid-template-columns: auto !important; padding: 3px !important; }
  html.echowx-r167-radar-phase1 .workspace-bottom-quick-select select { max-width: 168px !important; height: 34px !important; }
  html.echowx-r167-radar-phase1 .workspace-bottom-radar-speed-select select { max-width: 72px !important; }
  html.echowx-r167-radar-phase1 .workspace-bottom-loop-segment button { min-width: 44px !important; height: 34px !important; }
  html.echowx-r167-radar-phase1 .map-timeline,
  html.echowx-r167-radar-phase1 .timeline-panel,
  html.echowx-r167-radar-phase1 .timeline-bar { border-radius: 16px !important; }
}

@media (max-width: 560px) {
  html.echowx-r167-radar-phase1 .workspace-bottom-radar-product-select select { max-width: 145px !important; }
  html.echowx-r167-radar-phase1 .workspace-bottom-loop-segment { order: 2 !important; }
  html.echowx-r167-radar-phase1 .workspace-bottom-radar-speed-select { order: 3 !important; }
}