.playback-continuity-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.connection-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.connection-text {
  font-weight: 500;
  color: var(--text-primary);
}

.offline-time {
  color: var(--text-secondary);
  font-size: 11px;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-color);
}

.sync-icon {
  font-size: 10px;
  animation: spin 2s linear infinite;
}

.sync-text {
  font-size: 10px;
  font-weight: 500;
}

.playback-sync-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--border-color);
}

.sync-device,
.sync-timestamp {
  font-size: 10px;
  color: var(--text-tertiary);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Compact mode */
.playback-continuity-indicator.compact {
  font-size: 11px;
}

.playback-continuity-indicator.compact .connection-icon {
  font-size: 12px;
}

/* Status-specific styling */
.playback-continuity-indicator[data-status="offline"] .connection-icon {
  color: var(--warning-color);
}

.playback-continuity-indicator[data-status="poor"] .connection-icon {
  color: var(--warning-color);
}

.playback-continuity-indicator[data-status="good"] .connection-icon {
  color: var(--success-color);
}

.playback-continuity-indicator[data-status="excellent"] .connection-icon {
  color: var(--success-color);
}