/* Responsive fixes for the SpaceX-inspired interface */

/* Mobile improvements (320px - 480px) */
@media (max-width: 480px) {
  .control-panel {
    width: 90%;
    max-width: none;
    right: 5%;
    left: 5%;
    padding: 16px;
    max-height: 80vh;
  }
  
  .btn {
    padding: 12px 16px; /* Larger touch targets */
    min-height: 44px; /* Minimum recommended touch target size */
  }
  
  .control-panel-section {
    padding: 12px;
  }
  
  .control-panel-title {
    font-size: 16px;
  }
  
  .control-panel-section-title {
    font-size: 13px;
  }
}

/* Safari-specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Safari-specific CSS */
  .custom-checkbox .checkmark:after {
    left: 5px;
    top: 1px;
  }
  
  .btn {
    -webkit-appearance: none;
  }
  
  /* Fix for Safari transitions */
  .control-panel {
    -webkit-transition: -webkit-transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
  }
}

/* Edge-specific fixes */
@supports (-ms-ime-align:auto) {
  /* Edge-specific CSS */
  body {
    font-family: 'Lato', 'Segoe UI', sans-serif;
  }
}

/* Additional performance optimizations */
.control-panel {
  will-change: transform, opacity;
}

.btn:active {
  transform: translateY(1px);
}

/* Improve notification visibility */
.notification {
  z-index: 2000;
}