/* ============================================================================
   CONNECTION STATUS INDICATOR & BANNER
   ============================================================================
   Real-time WebSocket connection status UI components
   ============================================================================ */

/* --------------------------------------------------------------------------
   Connection Status Indicator (Toolbar dot)
   -------------------------------------------------------------------------- */

.connection-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: default;
}

.connection-status-indicator .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.connection-status-indicator .status-text {
  font-size: 11px;
  white-space: nowrap;
}

/* Connected state */
.connection-status-indicator[data-state="connected"] {
  background: rgba(34, 197, 94, 0.1);
}

.connection-status-indicator[data-state="connected"] .status-dot {
  background-color: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.connection-status-indicator[data-state="connected"] .status-text {
  color: #16a34a;
}

/* Connecting state */
.connection-status-indicator[data-state="connecting"] {
  background: rgba(234, 179, 8, 0.1);
}

.connection-status-indicator[data-state="connecting"] .status-dot {
  background-color: #eab308;
  animation: pulse-connecting 1.5s ease-in-out infinite;
}

.connection-status-indicator[data-state="connecting"] .status-text {
  color: #ca8a04;
}

/* Disconnected state */
.connection-status-indicator[data-state="disconnected"] {
  background: rgba(239, 68, 68, 0.1);
}

.connection-status-indicator[data-state="disconnected"] .status-dot {
  background-color: #ef4444;
}

.connection-status-indicator[data-state="disconnected"] .status-text {
  color: #dc2626;
}

/* Error state */
.connection-status-indicator[data-state="error"] {
  background: rgba(239, 68, 68, 0.15);
}

.connection-status-indicator[data-state="error"] .status-dot {
  background-color: #ef4444;
  animation: pulse-error 1s ease-in-out infinite;
}

.connection-status-indicator[data-state="error"] .status-text {
  color: #dc2626;
}

/* Dark mode overrides */
.dark .connection-status-indicator[data-state="connected"] {
  background: rgba(34, 197, 94, 0.15);
}

.dark .connection-status-indicator[data-state="connected"] .status-text {
  color: #4ade80;
}

.dark .connection-status-indicator[data-state="connecting"] {
  background: rgba(234, 179, 8, 0.15);
}

.dark .connection-status-indicator[data-state="connecting"] .status-text {
  color: #facc15;
}

.dark .connection-status-indicator[data-state="disconnected"],
.dark .connection-status-indicator[data-state="error"] {
  background: rgba(239, 68, 68, 0.2);
}

.dark .connection-status-indicator[data-state="disconnected"] .status-text,
.dark .connection-status-indicator[data-state="error"] .status-text {
  color: #f87171;
}

/* --------------------------------------------------------------------------
   Disconnection Banner (iOS-style top banner)
   -------------------------------------------------------------------------- */

.connection-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.connection-banner.visible {
  transform: translateY(0);
}

.connection-banner .banner-icon {
  font-size: 16px;
}

.connection-banner .banner-text {
  flex: 1;
}

.connection-banner .banner-action {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.connection-banner .banner-action:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Disconnected banner style (red/warning) */
.connection-banner.disconnected {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
}

.connection-banner.disconnected .banner-action {
  color: white;
}

/* Connecting banner style (yellow) */
.connection-banner.connecting {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
  color: #1f2937;
}

.connection-banner.connecting .banner-action {
  color: #1f2937;
}

/* Error banner style */
.connection-banner.error {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: white;
}

.connection-banner.error .banner-action {
  color: white;
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes pulse-connecting {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

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

/* --------------------------------------------------------------------------
   Compact indicator for narrow spaces
   -------------------------------------------------------------------------- */

.connection-status-indicator.compact {
  padding: 4px 6px;
}

.connection-status-indicator.compact .status-text {
  display: none;
}

/* Show text on hover for compact indicators */
.connection-status-indicator.compact:hover .status-text {
  display: inline;
}

/* --------------------------------------------------------------------------
   Mobile responsive adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .connection-banner {
    font-size: 12px;
    padding: 8px 12px;
  }

  .connection-banner .banner-icon {
    font-size: 14px;
  }

  .connection-status-indicator .status-text {
    display: none;
  }
}