/**
 * WorldView - Terminal Aesthetic Styles
 * Design system for the geospatial intelligence dashboard
 * Inspired by military/intelligence surveillance UI
 */

/* ============================================
   CSS Variables - Design Tokens
   ============================================ */
:root {
  /* Colors - Dark teal/cyan military aesthetic */
  --color-bg: #0a0f14;
  --color-bg-panel: rgba(10, 18, 24, 0.92);
  --color-bg-panel-solid: #0c151d;
  --color-primary: #00d4d4;      /* Teal-Cyan */
  --color-secondary: #3a7a6a;    /* Muted teal */
  --color-highlight: #00e87a;    /* Bright green */
  --color-warning: #ff3a3a;      /* Red */
  --color-text: #00d4d4;
  --color-text-dim: #7ab8a8;
  --color-text-muted: #5a9a8a;
  --color-border: #1a3a35;
  --color-border-light: #2a5a50;
  --color-active: #00d4d4;
  --color-active-bg: rgba(0, 212, 212, 0.15);

  /* Typography */
  --font-mono: "Courier New", Courier, monospace;
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-md: 13px;
  --font-size-lg: 16px;
  --font-size-xl: 22px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 28px;

  /* Layout */
  --panel-width: 260px;
  --top-bar-height: 50px;
  --bottom-bar-height: 60px;
  
  /* Border radius */
  --radius-sm: 2px;
  --radius-md: 4px;
}

/* ============================================
   Reset & Base Styles
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(135deg, #080c10 0%, #0a1218 50%, #0c161e 100%);
}

/* ============================================
   Cesium Container
   ============================================ */
#cesium-container {
  position: absolute;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  bottom: var(--bottom-bar-height);
  z-index: 1;
}

/* Hide Cesium default UI elements */
.cesium-viewer-bottom,
.cesium-viewer-animationContainer,
.cesium-viewer-timelineContainer,
.cesium-viewer-fullscreenContainer {
  display: none !important;
}

/* ============================================
   Vignette Overlay (circular darkening)
   ============================================ */
.vignette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(10, 15, 20, 0.15) 55%,
    rgba(10, 15, 20, 0.4) 75%,
    rgba(10, 15, 20, 0.7) 100%
  );
}

/* ============================================
   Classification Watermark (top-left)
   ============================================ */
.classification-watermark {
  position: fixed;
  top: 58px;
  left: 268px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 50, 50, 0.85);
  white-space: nowrap;
  pointer-events: none;
  z-index: 250;
  letter-spacing: 2px;
  text-shadow: 0 0 4px rgba(255, 50, 50, 0.5);
}

/* ============================================
   Top Bar
   ============================================ */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-bar-height);
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-lg);
  z-index: 200;
  backdrop-filter: blur(8px);
}

.top-bar-left {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
}

.wordmark {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-primary);
  letter-spacing: 5px;
  text-shadow: 0 0 20px rgba(0, 212, 212, 0.3);
}

.tagline {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  letter-spacing: 2px;
}

.top-bar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
}

.top-bar-center span {
  font-size: var(--font-size-xs);
  letter-spacing: 1.5px;
  padding: 4px 8px;
  background: rgba(0, 212, 212, 0.08);
  border-radius: var(--radius-sm);
}

#sat-tracking-counter {
  color: var(--color-primary);
}

#flight-tracking-counter {
  color: var(--color-highlight);
}

#camera-tracking-counter {
  color: var(--color-secondary);
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

/* FPS Counter */
.fps-counter {
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-weight: bold;
}

.fps-counter.fps-good {
  color: var(--color-highlight);
}

.fps-counter.fps-warn {
  color: #e6a800;
  background: rgba(230, 168, 0, 0.15);
}

.fps-counter.fps-critical {
  color: var(--color-warning);
  background: rgba(255, 58, 58, 0.2);
  animation: blink 1s infinite;
}

.mode-indicator {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--color-highlight);
  letter-spacing: 3px;
  padding: 4px 12px;
  background: rgba(0, 232, 122, 0.12);
  border: 1px solid rgba(0, 232, 122, 0.3);
  border-radius: var(--radius-sm);
}

.rec-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.rec-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: rgba(255, 50, 50, 0.95);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 0 4px rgba(255, 50, 50, 0.5);
}

.rec-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 50, 50, 0.95);
  border-radius: 50%;
  animation: blink 1s infinite;
  box-shadow: 0 0 10px rgba(255, 50, 50, 0.7);
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.telemetry {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 1px;
}

/* ============================================
   Panels - Shared Styles
   ============================================ */
.left-panel,
.right-panel {
  position: fixed;
  top: var(--top-bar-height);
  bottom: var(--bottom-bar-height);
  width: var(--panel-width);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  padding: var(--spacing-md);
  overflow-y: auto;
  z-index: 200;
  backdrop-filter: blur(8px);
}

.left-panel {
  left: 0;
  border-left: none;
  border-top: none;
  border-bottom: none;
}

.right-panel {
  right: 0;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.panel-section {
  margin-bottom: var(--spacing-md);
}

.panel-header {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.panel-header::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--color-primary);
  border-radius: 1px;
}

/* ============================================
   Bottom Bar
   ============================================ */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-bar-height);
  background: var(--color-bg-panel);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-lg);
  z-index: 200;
  backdrop-filter: blur(8px);
}

.bottom-bar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.bottom-bar-center {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bottom-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.style-presets-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 1.5px;
  margin-right: var(--spacing-sm);
}

/* ============================================
   Buttons
   ============================================ */
button {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  background: rgba(0, 212, 212, 0.08);
  color: var(--color-primary);
  border: 1px solid var(--color-border-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 1px;
  border-radius: var(--radius-sm);
}

button:hover:not(:disabled) {
  background: rgba(0, 212, 212, 0.2);
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(0, 212, 212, 0.2);
}

button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  color: var(--color-text-muted);
  background: transparent;
}

button.active {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 12px rgba(0, 212, 212, 0.3);
}

/* ============================================
   Mode Buttons
   ============================================ */
.mode-switcher {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.mode-btn {
  min-width: 55px;
  padding: 8px var(--spacing-md);
  font-size: var(--font-size-sm);
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--color-border);
  background: transparent;
}

.mode-btn:last-child {
  border-right: none;
}

.mode-btn.active {
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: bold;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
}

.mode-btn:not(.active) {
  color: var(--color-text-dim);
}

.mode-btn:not(.active):hover {
  background: rgba(0, 212, 212, 0.1);
  color: var(--color-primary);
}

/* ============================================
   City Tabs
   ============================================ */
.city-tabs {
  display: flex;
  gap: 0;
}

.city-tab {
  min-width: 42px;
  padding: 6px 10px;
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-border);
  border-radius: 0;
  margin-left: -1px;
  background: rgba(0, 0, 0, 0.3);
}

.city-tab:first-child {
  margin-left: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.city-tab:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.city-tab.active {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
  z-index: 1;
}

.city-tab:not(.active) {
  color: var(--color-text-dim);
}

.city-tab:not(.active):hover {
  background: rgba(0, 212, 212, 0.1);
  color: var(--color-primary);
}

/* ============================================
   Location Tooltip
   ============================================ */
.location-tooltip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--font-size-xs);
  min-width: 150px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.tooltip-poi {
  color: var(--color-primary);
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 212, 212, 0.3);
}

.tooltip-city {
  color: var(--color-text-dim);
  font-size: 9px;
  letter-spacing: 1.5px;
}

/* ============================================
   Form Controls
   ============================================ */
select {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-primary);
  border: 1px solid var(--color-border-light);
  padding: 8px var(--spacing-sm);
  width: 100%;
  cursor: pointer;
  border-radius: var(--radius-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300d4d4' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

select:hover {
  border-color: var(--color-primary);
  background-color: rgba(0, 212, 212, 0.08);
}

select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(0, 212, 212, 0.3);
}

select:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

select option {
  background: var(--color-bg-panel-solid);
  color: var(--color-text);
}

/* ============================================
   City Selector
   ============================================ */
.city-selector {
  margin-bottom: var(--spacing-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

.city-selector label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  margin-bottom: var(--spacing-xs);
  letter-spacing: 1.5px;
}

/* ============================================
   POI Navigation
   ============================================ */
.poi-navigation {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

.poi-display {
  flex: 1;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(0, 212, 212, 0.08);
  border-radius: var(--radius-sm);
  letter-spacing: 1px;
}

.nav-btn {
  min-width: 50px;
  background: rgba(0, 212, 212, 0.12);
  border-color: var(--color-border-light);
}

/* ============================================
   Toggle Controls
   ============================================ */
.toggles {
  margin-bottom: var(--spacing-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.toggle-row:hover {
  background: rgba(0, 212, 212, 0.05);
}

.toggle-row span {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  letter-spacing: 1px;
}

.toggle-btn {
  min-width: 44px;
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: bold;
  border: 1px solid var(--color-border-light);
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.toggle-btn.on {
  background: linear-gradient(135deg, var(--color-primary) 0%, #00a8a8 100%);
  color: var(--color-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(0, 212, 212, 0.4);
}

/* Satellite category filter buttons row */
.sat-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-left: var(--spacing-sm);
  border-left: 2px solid var(--color-primary);
  background: rgba(0, 212, 212, 0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.sat-filter-row.hidden {
  display: none;
}

.sat-filter-row .toggle-btn {
  flex: 0 1 auto;
  font-size: 7px;
  padding: 3px 6px;
  border-radius: 10px;
  min-width: auto;
}

/* Ground layer options row */
.ground-options-row {
  margin-left: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-left: 2px solid var(--color-primary);
  background: rgba(0, 212, 212, 0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ground-options-row.hidden {
  display: none;
}

.sub-toggle-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.sub-toggle-row:last-child {
  margin-bottom: 0;
}

.sub-toggle-row .toggle-btn {
  flex: 1;
  font-size: 7px;
  padding: 3px 6px;
  border-radius: 10px;
}

.sub-toggle-row .toggle-btn.sub-toggle {
  min-width: 50px;
}

.sub-toggle-row .style-toggle {
  min-width: 60px;
  font-size: 7px;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.sub-toggle-row .style-toggle:hover {
  background: rgba(58, 122, 106, 0.3);
  color: var(--color-primary);
}

/* ============================================
   Action Buttons Row
   ============================================ */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.action-btn {
  flex: 1;
  min-width: 80px;
  font-size: 9px;
  padding: 8px var(--spacing-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ============================================
   Slider Rows
   ============================================ */
.slider-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
}

.slider-row label {
  width: 70px;
  font-size: 9px;
  color: var(--color-text-dim);
  flex-shrink: 0;
  letter-spacing: 1px;
}

.slider-row input[type="range"] {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, 
    var(--color-primary) 0%, 
    var(--color-primary) var(--slider-fill, 50%), 
    var(--color-border) var(--slider-fill, 50%), 
    var(--color-border) 100%
  );
  border-radius: 3px;
  outline: none;
  border: 1px solid var(--color-border);
}

.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 8px rgba(0, 212, 212, 0.5);
  transition: transform 0.1s ease;
}

.slider-row input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.slider-row input[type="range"]:disabled {
  opacity: 0.3;
  background: var(--color-border);
}

.slider-row input[type="range"]:disabled::-webkit-slider-thumb {
  background: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.slider-row .slider-value {
  width: 35px;
  text-align: right;
  font-size: 9px;
  color: var(--color-primary);
  font-weight: bold;
}

/* ============================================
   Calibration Section
   ============================================ */
.calibration-sliders {
  margin-bottom: var(--spacing-md);
}

.calibration-buttons {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.calibration-buttons button {
  flex: 1;
  font-size: 9px;
}

/* ============================================
   Effect Sliders (Right Panel)
   ============================================ */
.effect-sliders {
  margin-bottom: var(--spacing-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

/* ============================================
   Readouts
   ============================================ */
.live-readout {
  background: rgba(0, 15, 20, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

.readout-row {
  display: flex;
  justify-content: space-between;
  padding: 6px var(--spacing-xs);
  border-bottom: 1px solid rgba(26, 58, 53, 0.5);
}

.readout-row:last-child {
  border-bottom: none;
}

.readout-label {
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
  letter-spacing: 1.5px;
}

.readout-value {
  color: var(--color-highlight);
  font-weight: bold;
  font-size: var(--font-size-xs);
  text-shadow: 0 0 8px rgba(0, 232, 122, 0.3);
}

/* ============================================
   CCTV Placeholder
   ============================================ */
.cctv-placeholder {
  background: #000;
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-md);
  height: 120px;
  display: flex;
  flex-direction: column;
}

/* ============================================
   CCTV Camera List Panel (left bar)
   ============================================ */
.cctv-list-panel {
  border: 1px solid var(--color-border);
  background: rgba(0, 10, 15, 0.6);
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cctv-header {
  font-size: 9px;
  color: var(--color-text-dim);
  padding: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
}

.cctv-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
}

/* ============================================
   System Log
   ============================================ */
.system-log {
  border: 1px solid var(--color-border);
  background: rgba(0, 10, 15, 0.6);
  font-size: 9px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.log-header {
  color: var(--color-text-dim);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.3);
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.log-header::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.log-content {
  padding: var(--spacing-xs);
  max-height: 120px;
  overflow-y: auto;
}

.log-entry {
  color: var(--color-secondary);
  padding: 3px var(--spacing-xs);
  font-size: 8px;
  letter-spacing: 0.5px;
  border-left: 2px solid transparent;
  margin-bottom: 1px;
}

.log-entry.error {
  color: var(--color-warning);
  border-left-color: var(--color-warning);
  background: rgba(255, 58, 58, 0.08);
}

.log-entry.success {
  color: var(--color-highlight);
  border-left-color: var(--color-highlight);
}

/* ============================================
   Info Panels - Shared Base
   ============================================ */
.sat-info-panel,
.flight-info-panel,
.ship-info-panel {
  position: absolute;
  right: calc(var(--panel-width) + var(--spacing-md));
  width: 240px;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--color-highlight);
  color: var(--color-highlight);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  z-index: 300;
  pointer-events: all;
}

.sat-info-link,
.flight-info-link,
.ship-info-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.sat-info-link:hover,
.flight-info-link:hover,
.ship-info-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============================================
   Satellite Info Panel
   ============================================ */
.sat-info-panel {
  top: var(--spacing-md);
}

.sat-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--color-highlight);
  background: rgba(0, 255, 136, 0.08);
}

.sat-info-title {
  letter-spacing: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-highlight);
}

.sat-info-close {
  border: none;
  background: transparent;
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
  padding: 0 var(--spacing-xs);
  cursor: pointer;
  line-height: 1;
  min-width: unset;
}

.sat-info-close:hover {
  color: var(--color-warning);
  background: transparent;
}

.sat-info-body {
  padding: var(--spacing-sm);
}

.sat-info-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid rgba(0, 255, 136, 0.1);
}

.sat-info-row:last-child {
  border-bottom: none;
}

.sat-info-label {
  color: var(--color-text-dim);
  letter-spacing: 1px;
  flex-shrink: 0;
  width: 50px;
}

.sat-info-value {
  color: var(--color-highlight);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.sat-info-footer {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-top: 1px solid rgba(0, 255, 136, 0.2);
}

.sat-info-follow-btn {
  width: 100%;
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs);
  letter-spacing: 2px;
  border-color: var(--color-highlight);
  color: var(--color-highlight);
}

.sat-info-follow-btn:hover {
  background: var(--color-highlight);
  color: var(--color-bg);
}

/* ============================================
   Flight Info Panel
   ============================================ */
.flight-info-panel {
  top: calc(var(--spacing-md) + 260px);
}

/* ============================================
   Ship Info Panel (blue variant)
   ============================================ */
.ship-info-panel {
  --ship-color: #3B82F6;
  top: calc(var(--spacing-md) + 520px);
  width: 260px;
  border-color: var(--ship-color);
  color: var(--ship-color);
}

.ship-info-panel .sat-info-header { background: rgba(59, 130, 246, 0.08); }
.ship-info-panel .sat-info-row { border-bottom-color: rgba(59, 130, 246, 0.1); }
.ship-info-panel .sat-info-value { color: var(--ship-color); }

.ship-info-panel .sat-info-follow-btn {
  border-color: var(--ship-color);
  color: var(--ship-color);
  margin-bottom: var(--spacing-xs);
}

.ship-info-panel .sat-info-follow-btn:hover {
  background: var(--ship-color);
  color: var(--color-bg);
}

.ship-info-title {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ship-info-footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ship-info-external-link {
  display: block;
  text-align: center;
  color: var(--color-text-dim);
  font-size: 9px;
  text-decoration: none;
  padding: var(--spacing-xs);
  transition: color 0.15s ease;
  letter-spacing: 0.5px;
}

.ship-info-external-link:hover {
  color: var(--ship-color);
  text-decoration: underline;
}

/* ============================================
   CCTV Camera List (sidebar panel)
   ============================================ */
.cctv-panel-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 1px;
}

.cctv-panel-count {
  color: var(--color-highlight);
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 232, 122, 0.4);
}

.cctv-camera-list {
  max-height: 200px;
  overflow-y: auto;
}

.cctv-loading,
.cctv-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--color-text-dim);
  font-size: var(--font-size-xs);
}

.cctv-item {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  border-bottom: 1px solid rgba(26, 58, 53, 0.4);
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: var(--radius-sm);
  margin: 2px;
}

.cctv-item:hover {
  background: rgba(0, 212, 212, 0.08);
}

.cctv-item:last-child {
  border-bottom: none;
}

.cctv-item.projected {
  background: rgba(0, 232, 122, 0.12);
  border-left: 3px solid var(--color-highlight);
}

.cctv-item.error {
  animation: cctv-error-flash 0.5s ease;
}

@keyframes cctv-error-flash {
  0%, 100% { background: transparent; }
  50% { background: rgba(255, 51, 51, 0.2); }
}

.cctv-thumb-container {
  position: relative;
  width: 64px;
  height: 48px;
  flex-shrink: 0;
  background: #000;
  border: 1px solid var(--color-border);
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.cctv-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8);
}

.cctv-status {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 6px;
  padding: 1px 4px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
}

.cctv-status.live {
  background: var(--color-highlight);
  color: #000;
  box-shadow: 0 0 6px var(--color-highlight);
}

.cctv-status.offline {
  background: var(--color-warning);
  color: #fff;
}

.cctv-status.img {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}

.cctv-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cctv-name {
  font-size: 8px;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  max-width: 140px;
}

.cctv-roadway {
  font-size: 10px;
  color: #4a9e8a;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cctv-coords {
  font-size: 7px;
  color: var(--color-text-muted);
}

.cctv-project-btn {
  font-size: 7px;
  padding: 3px 8px;
  min-width: unset;
  margin-top: 2px;
  border-radius: 10px;
  background: rgba(0, 212, 212, 0.1);
}

.cctv-project-btn:hover {
  background: rgba(0, 212, 212, 0.25);
}

.cctv-project-btn.active {
  background: var(--color-highlight);
  color: var(--color-bg);
  border-color: var(--color-highlight);
}

/* ============================================
   CCTV Center-Stage Overlay
   ============================================ */
.cctv-center-stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 15, 20, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: cctv-center-stage-fade-in 0.2s ease-out;
  backdrop-filter: blur(4px);
}

@keyframes cctv-center-stage-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.cctv-center-stage-container {
  background: var(--color-bg-panel-solid);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 40px rgba(0, 212, 212, 0.25), inset 0 0 60px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cctv-center-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(0, 212, 212, 0.1);
  border-bottom: 1px solid var(--color-border-light);
}

.cctv-center-stage-title {
  font-size: var(--font-size-md);
  color: var(--color-primary);
  font-weight: bold;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(0, 212, 212, 0.3);
}

.cctv-center-stage-controls {
  display: flex;
  gap: var(--spacing-sm);
}

.cctv-center-stage-btn {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: 8px 16px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s ease;
  border-radius: var(--radius-sm);
  letter-spacing: 1px;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0, 212, 212, 0.3);
}

.cctv-center-stage-btn:hover {
  background: #00e8e8;
  border-color: #00e8e8;
  box-shadow: 0 0 15px rgba(0, 212, 212, 0.5);
}

#cctv-unproject-btn {
  background: rgba(0, 212, 212, 0.15);
  border-color: var(--color-border-light);
  color: var(--color-primary);
  box-shadow: none;
}

#cctv-unproject-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
  box-shadow: 0 0 10px rgba(0, 212, 212, 0.3);
}

.cctv-center-stage-btn.cctv-close-btn {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 58, 58, 0.3);
}

.cctv-center-stage-btn.cctv-close-btn:hover {
  background: #ff5555;
  border-color: #ff5555;
  box-shadow: 0 0 15px rgba(255, 58, 58, 0.5);
}

.cctv-center-stage-feed {
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#cctv-center-stage-canvas,
#cctv-center-stage-video {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

#cctv-center-stage-video {
  background: #000;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ============================================
   Command Bar
   ============================================ */
.command-bar {
  position: fixed;
  bottom: 96px; /* 16px above bottom bar which is ~80px */
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  display: none; /* hidden by default */
  align-items: center;
  gap: var(--spacing-xs);
  z-index: 1000;
}

.command-bar.visible {
  display: flex;
}

.command-bar-prefix {
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  text-transform: uppercase;
}

.command-bar-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  outline: none;
  letter-spacing: 0.5px;
}

.command-bar-input::placeholder {
  color: rgba(0, 240, 255, 0.3);
}

.command-bar-error {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid var(--color-border);
  color: var(--color-warning);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.command-bar-error:empty {
  display: none;
}

/* Loading indicator text */
.command-bar-loading {
  display: none;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: command-bar-loading-blink 0.8s ease-in-out infinite;
}

.command-bar-loading.visible {
  display: inline;
}

@keyframes command-bar-loading-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Loading state - pulsing border */
.command-bar.loading {
  animation: command-bar-pulse 1s ease-in-out infinite;
}

@keyframes command-bar-pulse {
  0%, 100% { border-color: var(--color-border); }
  50% { border-color: var(--color-primary); }
}

/* Error state - red border */
.command-bar.error {
  border-color: var(--color-warning);
}

/* Success state - green flash */
.command-bar.success {
  border-color: var(--color-highlight);
  animation: command-bar-success 0.3s ease-out;
}

@keyframes command-bar-success {
  0% { border-color: var(--color-highlight); box-shadow: 0 0 10px var(--color-highlight); }
  100% { border-color: var(--color-border); box-shadow: none; }
}

/* ============================================
   Globe Error Overlay
   ============================================ */
.globe-error-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  padding: var(--spacing-lg) var(--spacing-xl);
  font-family: 'IBM Plex Mono', var(--font-mono);
  font-size: var(--font-size-md);
  white-space: pre-wrap;
  text-align: center;
  z-index: 1000;
  max-width: 400px;
  line-height: 1.6;
}

/* ============================================
   Compass / Location Badge (Bottom Right)
   ============================================ */
.compass-badge {
  position: fixed;
  bottom: calc(var(--bottom-bar-height) + 20px);
  right: calc(var(--panel-width) + 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 150;
  pointer-events: none;
}

.compass-icon {
  width: 50px;
  height: 50px;
  position: relative;
}

.compass-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-text-muted);
  border-radius: 50%;
}

.compass-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 20px solid var(--color-text-muted);
}

.compass-n {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--color-text-dim);
  font-weight: bold;
}

.compass-location {
  font-size: 9px;
  color: var(--color-text-dim);
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.3;
}

/* ============================================
   Hidden Utility Class
   ============================================ */
.hidden {
  display: none !important;
}

/* ============================================
   CCTV Video Overlay Panel
   ============================================ */
.cctv-panel {
  position: fixed;
  bottom: calc(var(--bottom-bar-height) + 12px);
  right: 20px;
  width: 420px;
  background: var(--color-bg-panel);
  border: 1px solid rgba(0, 255, 136, 0.5);
  z-index: 200;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
}

.cctv-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(0, 255, 136, 0.3);
  background: rgba(0, 20, 10, 0.8);
}

.cctv-panel-title {
  font-family: var(--font-mono);
  color: #00ff88;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}

.cctv-panel-close {
  background: none;
  border: 1px solid rgba(0, 255, 136, 0.4);
  color: #00ff88;
  cursor: pointer;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  transition: background 0.15s;
}

.cctv-panel-close:hover {
  background: rgba(0, 255, 136, 0.15);
}

.cctv-panel-content {
  background: #000;
  line-height: 0;
}

.cctv-video,
.cctv-image {
  width: 100%;
  display: block;
  max-height: 280px;
  background: #000;
}

.cctv-image {
  object-fit: cover;
}

/* ============================================
   MOBILE — Atlas EP iPhone WorldView (b454)
   ============================================ */
@media (max-width: 900px) {
  :root {
    --top-bar-height: 56px;
    --bottom-bar-height: 64px;
    --panel-width: 100vw;
  }

  /* TOP BAR: tighten + show toggle buttons */
  .top-bar { padding: 0 8px; }
  .wordmark { font-size: 14px; letter-spacing: 1.5px; }
  .tagline { display: none; }
  .top-bar-center { display: none; }
  .telemetry { display: none; }
  .rec-section { font-size: 10px; }
  .mode-indicator { font-size: 11px; padding: 2px 6px; }
  .classification-watermark { display: none; }

  /* MOBILE TOGGLE BUTTONS — visible only on mobile */
  .mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,0.55);
    border: 1px solid var(--color-border, #1a3a5c);
    color: var(--color-primary, #4ee2c8);
    font-size: 22px;
    border-radius: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-toggle:active { background: rgba(78,226,200,0.18); }

  /* CESIUM: full width, full available height — give the globe priority */
  #cesium-container {
    top: var(--top-bar-height);
    bottom: var(--bottom-bar-height);
    left: 0;
    right: 0;
  }

  /* PANELS: full-width bottom-sheet drawers */
  .left-panel, .right-panel {
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw;
    top: auto;
    bottom: var(--bottom-bar-height);
    max-height: 70vh;
    border: none;
    border-top: 2px solid var(--color-primary, #4ee2c8);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.7);
    padding: 12px 14px 24px;
    background: rgba(2,8,16,0.96);
    z-index: 400;
    animation: slide-up 200ms ease-out;
  }
  @keyframes slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* PANEL DRAWER HANDLE — visual hint to dismiss */
  .left-panel::before, .right-panel::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    background: rgba(255,255,255,0.4);
    border-radius: 2px;
    margin: -2px auto 12px;
  }

  /* BIGGER TOUCH TARGETS — toggles, action buttons */
  .toggle-row { padding: 10px 4px; }
  .toggle-btn {
    min-height: 38px;
    min-width: 70px;
    font-size: 13px;
    padding: 8px 14px;
    -webkit-tap-highlight-color: transparent;
  }
  .toggle-btn.sub-toggle, .toggle-btn.style-toggle {
    min-height: 34px; min-width: 60px;
    font-size: 12px;
  }
  .nav-btn {
    min-height: 40px; padding: 8px 16px; font-size: 13px;
  }
  .action-btn { min-height: 40px; font-size: 12px; }
  select#city-dropdown {
    min-height: 40px; font-size: 14px; padding: 8px;
  }

  /* CCTV CARDS — bigger, full-tap zone */
  .cctv-camera-list { max-height: 32vh; }
  .cctv-camera-list .cctv-card,
  .cctv-camera-list > * {
    min-height: 60px;
  }

  /* SYSTEM LOG: collapse into smaller box on mobile */
  .system-log { max-height: 18vh; font-size: 10px; }

  /* BOTTOM BAR — horizontally scrollable, bigger buttons */
  .bottom-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 6px;
    gap: 6px;
    height: var(--bottom-bar-height);
    scrollbar-width: none;
  }
  .bottom-bar::-webkit-scrollbar { display: none; }
  .bottom-bar-left, .bottom-bar-center, .bottom-bar-right {
    flex-shrink: 0;
  }
  .style-presets-label { display: none; }
  .mode-switcher { gap: 4px; }
  .mode-btn {
    min-height: 38px;
    min-width: 56px;
    font-size: 11px;
    padding: 6px 10px;
    flex-shrink: 0;
  }
  .city-tab {
    min-height: 38px;
    min-width: 52px;
    font-size: 11px;
    padding: 6px 10px;
    flex-shrink: 0;
  }
  .location-tooltip { font-size: 10px; padding: 4px 8px; }
  .tooltip-poi { font-size: 11px; }

  /* BACKDROP: tap-outside-to-close */
  .panel-backdrop {
    display: block;
    position: fixed;
    inset: var(--top-bar-height) 0 var(--bottom-bar-height) 0;
    background: rgba(0,0,0,0.35);
    z-index: 350;
    -webkit-tap-highlight-color: transparent;
  }
}

/* DESKTOP: hide mobile-only elements */
@media (min-width: 901px) {
  .mobile-toggle { display: none !important; }
  .panel-backdrop { display: none !important; }
}

/* Address search box (b458+) */
.address-search .search-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.address-search .search-input {
  flex: 1;
  min-height: 38px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--color-border, #1a3a5c);
  color: var(--color-primary, #4ee2c8);
  font-family: inherit;
  font-size: 13px;
  border-radius: 4px;
}
.address-search .search-input:focus {
  outline: none;
  border-color: var(--color-primary, #4ee2c8);
  box-shadow: 0 0 0 1px var(--color-primary, #4ee2c8);
}
.address-search .search-btn {
  min-width: 56px;
  min-height: 38px;
  background: rgba(78,226,200,0.15);
  border: 1px solid var(--color-primary, #4ee2c8);
  color: var(--color-primary, #4ee2c8);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  border-radius: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.address-search .search-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.address-search .search-btn:not(:disabled):active {
  background: rgba(78,226,200,0.3);
}

/* b460 — move mobile toggles inward from edges so they're easier to thumb-reach */
@media (max-width: 900px) {
  .top-bar-left .mobile-toggle {
    margin-left: 4px;
  }
  .top-bar-right .mobile-toggle {
    margin-right: 8px;
  }
  /* Make the toggle buttons more prominent on mobile */
  .mobile-toggle {
    background: rgba(0,0,0,0.72) !important;
    border-width: 1.5px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  }
  /* Pull top-bar-right inward by giving it right padding */
  .top-bar-right {
    padding-right: 4px;
  }
}

/* b460 — lift bottom-bar above iPhone home-indicator + safe area */
@media (max-width: 900px) {
  .bottom-bar {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    height: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
  }
  /* Also lift the panel drawers so they sit above the bottom-bar's new height */
  .left-panel, .right-panel {
    bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
  }
}

/* b461 — shrink REC indicator on mobile to free top-right space for ⚙ toggle */
@media (max-width: 900px) {
  /* Hide the live UTC clock (date+time) on mobile — keeps just the red REC dot + label */
  #live-clock {
    display: none !important;
  }
  /* Hide telemetry "GRB:..." string — too noisy for mobile */
  .telemetry {
    display: none !important;
  }
  /* Tighten REC section, smaller font */
  .rec-section {
    padding: 0 4px !important;
  }
  .rec-indicator {
    font-size: 9px !important;
    gap: 4px !important;
  }
  .rec-dot {
    width: 6px !important;
    height: 6px !important;
  }
  /* Hide REC label too on mobile — just the red pulsing dot is enough */
  .rec-indicator span:not(.rec-dot) {
    display: none;
  }
  /* Hide the NORMAL/CRT/etc mode-indicator text on top-bar — already shown in bottom bar */
  .mode-indicator {
    display: none !important;
  }
}

/* b461 — visual tap feedback on toggle/preset buttons when state doesn't change */
.toggle-btn:active,
.mode-btn:active,
.city-tab:active,
.nav-btn:active,
.action-btn:active,
.search-btn:active {
  transform: scale(0.95);
  filter: brightness(1.4);
  transition: transform 80ms ease-out, filter 80ms ease-out;
}
.toggle-btn,
.mode-btn,
.city-tab,
.nav-btn {
  transition: transform 120ms ease-out, filter 120ms ease-out, background 120ms ease-out;
}

/* 2026-08-31 iPHONE GESTURE FIX (Brockmann: "fingers to scroll does not work").
   The iOS side was already correct — ContentView.swift:6401/6407 set
   scrollView.bounces=false and isScrollEnabled=false. The remaining half was the
   WEB side: with no touch-action set, mobile Safari/WKWebView claims the drag as
   a page-scroll gesture before Cesium ever sees it, so pan and pinch die.
   touch-action:none hands every touch to the canvas. */
html, body { touch-action: none; overscroll-behavior: none; }
#cesiumContainer, #cesiumContainer canvas, .cesium-widget, .cesium-widget canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* UI chrome must stay tappable/scrollable */
.left-panel, .right-panel, .bottom-bar, .top-bar, .touch-nav, .cctv-panel {
  touch-action: manipulation;
}

/* 2026-08-31 iPHONE SAFE-AREA FIX (Brockmann: ATLAS INTEL and GO clipped off both
   edges in the app). The iOS host applies .ignoresSafeArea() to the WKWebView
   (ContentView.swift:6205), so the page runs edge-to-edge UNDER the Dynamic Island
   and the rounded corners. The page had no viewport-fit=cover and no safe-area
   padding, so panel content simply fell off the screen on both sides.
   viewport-fit=cover (index.html) exposes env(safe-area-inset-*); these rules use it. */
.top-bar {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
}
.left-panel {
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: 10px;
  box-sizing: border-box;
  max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  overflow-x: hidden;
}
.right-panel {
  padding-right: max(10px, env(safe-area-inset-right));
  box-sizing: border-box;
  max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  overflow-x: hidden;
}
.bottom-bar {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}
.touch-nav { bottom: calc(96px + env(safe-area-inset-bottom)); right: calc(12px + env(safe-area-inset-right)); }
/* Panel content must never exceed the panel box */
.left-panel *, .right-panel * { max-width: 100%; box-sizing: border-box; }

/* 2026-08-31 PAGE LOCK (Brockmann: ATLAS INTEL menu does not appear; top bar
   missing and bottom bar clipped on the LEFT in the app).
   ROOT CAUSE: the document itself was scrollable/pannable. touch-action:none
   handed drags to Cesium but did NOT stop the page being displaced, so the
   whole UI slid — the top bar (ATLAS INTEL + gear) scrolled off the top and the
   style bar shifted right, hiding NORMAL/CRT/NVG. Nothing was broken; it was
   simply not on screen.
   FIX: pin the document. A map app must never scroll as a document — the map
   pans, the chrome stays put. */
html, body {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* Chrome must sit ABOVE the canvas and never be displaced */
.top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; }
/* The style/city strip is wider than a phone — let THAT scroll horizontally,
   inside its own box, instead of the whole page moving. */
.bottom-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
/* Panels scroll their own content vertically, not the document */
.left-panel, .right-panel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  position: relative;   /* anchors the ✕ close button added 2026-08-31 */
  max-height: 100dvh;
}

/* 2026-08-31 PANEL MUST NOT COVER THE TOP BAR (Brockmann: "no actual exit in this
   screen" — full screenshot shows the menu scrolled with ATLAS INTEL gone).
   The left panel was overlaying the top bar, so the wordmark — which IS the
   open/close toggle — was unreachable once the menu was open. The only remaining
   control was the native iOS EXIT, which quits the globe entirely. That is why it
   read as "two exits" and then "no exit": the RIGHT one was hidden.
   Pin the top bar above everything and start the panels beneath it. The toggle is
   then always on screen: tap ATLAS INTEL to open, tap it again to close. */
.top-bar { z-index: 200 !important; }
.left-panel, .right-panel {
  top: calc(env(safe-area-inset-top) + 52px) !important;
  bottom: calc(env(safe-area-inset-bottom) + 56px) !important;
  max-height: none !important;
  height: auto !important;
  z-index: 100 !important;
}
/* Backdrop sits under the panels but over the map, and closes on tap */
.mobile-backdrop, .panel-backdrop { z-index: 90 !important; }