/* Custom Tactical Radio Styles */

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(31, 41, 61, 0.8);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.5);
}

/* Tactical LCD Display Screen */
.tactical-lcd {
  background-color: #04140e;
  background-image: 
    radial-gradient(rgba(16, 185, 129, 0.15) 1px, transparent 0),
    linear-gradient(to bottom, rgba(4, 20, 14, 0.95), rgba(2, 10, 7, 0.98));
  background-size: 8px 8px, 100% 100%;
}

.lcd-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ), linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.03)
  );
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
}

/* Transmitting / TX PTT Active State */
body.is-transmitting #btn-ptt {
  border-color: #ef4444 !important;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.8), inset 0 0 15px rgba(239, 68, 68, 0.5) !important;
  background: radial-gradient(circle, #7f1d1d 0%, #450a0a 70%, #000000 100%) !important;
}

body.is-transmitting #ptt-aura {
  background-color: rgba(239, 68, 68, 0.4) !important;
  transform: scale(1.1);
}

body.is-transmitting #ptt-icon-wrap {
  background-color: #991b1b !important;
  border-color: #f87171 !important;
}

body.is-transmitting #ptt-icon {
  color: #ffffff !important;
  animation: pulse-red 1s infinite;
}

body.is-transmitting #ptt-label {
  color: #fca5a5 !important;
}

/* Receiving / RX State when another user is talking */
body.is-receiving #btn-ptt {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.6) !important;
}

body.is-receiving #ptt-aura {
  background-color: rgba(59, 130, 246, 0.3) !important;
}

/* Keyframe animations */
@keyframes pulse-red {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* Channel Card Active State */
.channel-card.active {
  border-color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.08) !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}

/* Voice Indicator Waveform Animation */
.voice-wave-bar {
  animation: wave-bounce 0.8s ease-in-out infinite alternate;
}

.voice-wave-bar:nth-child(2) { animation-delay: 0.15s; }
.voice-wave-bar:nth-child(3) { animation-delay: 0.3s; }
.voice-wave-bar:nth-child(4) { animation-delay: 0.45s; }

@keyframes wave-bounce {
  0% { height: 4px; }
  100% { height: 16px; }
}