/**
 * Connection Status — Real-time Connection Indicator
 *
 * "A good indicator is invisible when things work,
 * and impossible to miss when they don't."
 *
 * States:
 * - Connected: Subtle green, steady
 * - Disconnected: Amber warning, interactive
 * - Reconnecting: Calm, explicit progress
 */

/* ========== Container ========== */

.connection-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  appearance: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  user-select: none;
}

.connection-status:hover {
  background: var(--bg-hover);
  border-color: var(--border-bright);
}

.connection-status:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ========== Status Indicator ========== */

.connection-status__indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
  transition:
    background var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

/* Connected: Green with subtle glow */
.connection-status--connected .connection-status__indicator {
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-long-glow);
}

/* Disconnected: Amber warning */
.connection-status--disconnected .connection-status__indicator {
  background: var(--color-warning);
  box-shadow: 0 0 6px var(--color-warning-dim);
}

/* Reconnecting: Calm, steady */
.connection-status--reconnecting .connection-status__indicator {
  background: var(--color-warning);
}

/* ========== Status Label ========== */

.connection-status__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}

.connection-status--connected .connection-status__label {
  color: var(--text-tertiary);
}

.connection-status--disconnected .connection-status__label {
  color: var(--color-warning);
}

.connection-status--reconnecting .connection-status__label {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

/* ========== Details Panel ========== */

.connection-status__wrapper {
  position: relative;
}

.connection-status__details {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  z-index: var(--z-dropdown);
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);

  /* Premium depth */
  box-shadow: var(--shadow-elevated);
}

.connection-status__details--open {
  display: block;
}

.connection-status__details--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Details content */
.connection-status__details-content {
  padding: var(--space-3);
  font-size: var(--text-xs);
}

.connection-status__details-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.connection-status__details-row:last-child {
  margin-bottom: 0;
}

.connection-status__details-label {
  color: var(--text-tertiary);
}

.connection-status__details-value {
  color: var(--text-primary);
  text-transform: capitalize;
}

.connection-status__details-value--mono {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.connection-status__details-value--warning {
  color: var(--color-warning);
  font-family: var(--font-mono);
}

/* ========== Retry Button ========== */

.connection-status__retry {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.connection-status__retry:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.connection-status__retry:active {
  transform: scale(0.98);
}

.connection-status__retry:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Reconnecting state */
.connection-status__retry--reconnecting {
  color: var(--text-tertiary);
  cursor: wait;
}

/* Calm tech: no spinners; text is enough. */

/* ========== Responsive ========== */

@media (max-width: 480px) {
  .connection-status__label {
    /* Hide label on mobile, show only indicator */
    display: none;
  }

  .connection-status__details {
    right: -var(--space-2);
    width: 200px;
  }
}

/* ========== Light Mode ========== */

[data-theme="light"] .connection-status__details {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .connection-status--connected .connection-status__indicator {
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
}

/* ========== Reduced Motion ========== */

@media (prefers-reduced-motion: reduce) {
  .connection-status--reconnecting .connection-status__indicator,
  .connection-status__retry--reconnecting::before {
    animation: none;
  }

  .connection-status__details {
    transition: opacity var(--duration-fast);
    transform: none;
  }
}