/* Morse code visualization styles */

.morse-visual {
  font-family: 'Courier New', monospace;
  position: relative;
}

/* Morse symbols */
.morse-symbol {
  display: inline-block;
  margin: 0 2px;
  animation: fadeIn 0.2s ease-in;
}

.morse-symbol.dit {
  color: #4444ff;
}

.morse-symbol.dah {
  color: #4444ff;
}

.morse-symbol.space {
  width: 10px;
}

/* User morse (blue) */
.morse-visual.user .morse-symbol {
  color: #88ccff;
}

/* AI morse (green) */
.morse-visual.ai .morse-symbol {
  color: #00ff00;
}

/* Live keying indicator */
.morse-visual.keying {
  box-shadow: inset 0 0 10px rgba(68, 68, 255, 0.3);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* Cursor blink for active input */
.morse-visual.active::after {
  content: '|';
  animation: pulse 1s infinite;
  margin-left: 4px;
  color: var(--text-secondary);
}

/* Decoded text animations */
.decoded-text .character {
  display: inline-block;
  animation: popIn 0.15s ease-out;
}

@keyframes popIn {
  from {
    transform: scale(1.3);
    color: var(--text-secondary);
  }
  to {
    transform: scale(1);
    color: var(--text-primary);
  }
}

/* Word space */
.decoded-text .word-space {
  display: inline-block;
  width: 0.5em;
}

/* Transcript entry animations */
.transcript-entry {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* State indicators */
.state-display span:not(.label) {
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
}

.state-display .state-IDLE {
  background: rgba(136, 136, 136, 0.2);
  color: #888;
}

.state-display .state-LISTENING {
  background: rgba(0, 255, 0, 0.2);
  color: #00ff00;
  animation: pulse 2s infinite;
}

.state-display .state-USER_TURN {
  background: rgba(68, 68, 255, 0.2);
  color: #88ccff;
}

.state-display .state-DECODING {
  background: rgba(255, 191, 0, 0.2);
  color: #ffbf00;
  animation: pulse 1s infinite;
}

.state-display .state-AI_THINKING {
  background: rgba(255, 191, 0, 0.2);
  color: #ffbf00;
  animation: pulse 0.8s infinite;
}

.state-display .state-AI_SENDING {
  background: rgba(0, 255, 0, 0.2);
  color: #00ff00;
}

/* WPM meters */
.wpm-display span:not(strong) {
  font-size: 1.2rem;
  color: var(--text-secondary);
  min-width: 40px;
  display: inline-block;
  text-align: right;
}