/* agent-console.css — futuristic console skin for the Telmo AI Agent panel */

.ai-chat-panel {
  background:
    linear-gradient(rgba(0, 30, 50, 0.25), rgba(0, 8, 20, 0.4)),
    rgba(2, 8, 20, 0.96) !important;
  border: 1px solid rgba(0, 255, 255, 0.55) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 60px rgba(0, 200, 255, 0.22),
              inset 0 0 44px rgba(0, 150, 255, 0.07) !important;
  position: relative;
}

/* CRT scanlines over the whole console */
.ai-chat-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 255, 0.03) 0px,
    rgba(0, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: screen;
  z-index: 5;
}

.ai-chat-header {
  background: linear-gradient(90deg, rgba(0, 90, 140, 0.5), rgba(60, 0, 140, 0.35) 70%, transparent) !important;
  border-bottom: 1px solid rgba(0, 255, 255, 0.45) !important;
}

.ai-chat-title {
  color: #7dfcff !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.8) !important;
}

.ai-chat-title::before {
  content: '◤ ';
  color: #00e5ff;
}

.ai-chat-title::after {
  content: ' _';
  animation: agentCursorBlink 1s steps(2, start) infinite;
  color: #00e5ff;
}

@keyframes agentCursorBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

.ai-chat-voice,
.ai-chat-control,
.ai-chat-send,
.ai-chat-action,
.ai-chat-close {
  border: 1px solid rgba(0, 255, 255, 0.5) !important;
  background: rgba(0, 70, 120, 0.55) !important;
  color: #baf3ff !important;
  border-radius: 4px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  transition: all 0.25s ease !important;
}

.ai-chat-voice:hover,
.ai-chat-control:hover,
.ai-chat-send:hover,
.ai-chat-action:hover,
.ai-chat-close:hover {
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.45) !important;
  color: #fff !important;
}

.ai-chat-send {
  background: linear-gradient(135deg, rgba(0, 120, 190, 0.85), rgba(0, 200, 255, 0.55)) !important;
  color: #fff !important;
}

.ai-chat-body {
  background: rgba(0, 10, 22, 0.55) !important;
}

.ai-chat-body::-webkit-scrollbar { width: 5px; }
.ai-chat-body::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 255, 0.35);
  border-radius: 3px;
}

.ai-chat-message {
  border-radius: 3px !important;
  font-size: 13px;
  line-height: 1.65;
}

.ai-chat-message.assistant {
  background: rgba(0, 70, 110, 0.3) !important;
  border-left: 2px solid #00e5ff !important;
  color: #d8f7ff !important;
}

.ai-chat-message.assistant::before {
  content: 'AI ▸ ';
  color: #00e5ff;
  font-size: 10px;
  letter-spacing: 1px;
}

.ai-chat-message.user {
  background: rgba(90, 30, 190, 0.28) !important;
  border-right: 2px solid #c86bff !important;
  color: #f2eaff !important;
}

.ai-chat-input {
  background: rgba(0, 40, 70, 0.4) !important;
  border: 1px solid rgba(0, 220, 255, 0.4) !important;
  border-radius: 4px !important;
  color: #baf3ff !important;
  caret-color: #00e5ff;
}

.ai-chat-input:focus {
  border-color: rgba(0, 255, 255, 0.85) !important;
  box-shadow: 0 0 16px rgba(0, 220, 255, 0.3) !important;
  outline: none;
}

.ai-chat-footer {
  background: rgba(0, 15, 30, 0.65) !important;
  border-top: 1px solid rgba(0, 255, 255, 0.35) !important;
}

.ai-chat-volume {
  color: #7de9ff !important;
}

.ai-chat-volume input[type="range"] {
  accent-color: #00b7e6;
}

/* Mic active state */
#aiChatMic.is-active,
#aiChatMic.listening {
  border-color: #ff5470 !important;
  color: #ff98aa !important;
  background: rgba(120, 10, 40, 0.6) !important;
  box-shadow: 0 0 20px rgba(255, 60, 100, 0.5) !important;
}