/* ============================================
   VAPI QA TESTER - MINIMAL CUSTOM CSS
   ============================================

   This file contains only styles that cannot be
   easily replicated with Tailwind CSS:
   - Animations
   - JavaScript-controlled states
   - Special component behaviors

   Layout, colors, spacing, typography, and responsive
   design are all handled by Tailwind CSS in index.html
   ============================================ */

/* ============================================
   BODY BASE STYLES
   ============================================ */
body {
    margin: 0;
    padding: 0;
    background-color: #0d1117;
    color: #c9d1d9;
    font-family: 'Inter', sans-serif;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hidden state (JavaScript toggles this) */
.hidden {
    display: none !important;
}

/* Show state for modals */
.show {
    display: flex !important;
}

/* ============================================
   CONSOLE LOG LINE STYLES
   ============================================

   These classes are dynamically added by JavaScript
   based on log type (system, event, error, success)
   ============================================ */

.log-line {
    margin-bottom: 5px;
    opacity: 0.8;
}

.log-line.system {
    color: #8b949e;
}

.log-line.event {
    color: #58a6ff;
}

.log-line.error {
    color: #da3633;
}

.log-line.success {
    color: #7ee787;
}

/* ============================================
   TRANSCRIPT MESSAGE STYLES
   ============================================

   User and Assistant messages in the transcript
   section have distinct colors and borders
   ============================================ */

.log-line.user-msg {
    color: #7ee787; /* Green for user */
    font-weight: 600;
    padding-left: 8px;
    border-left: 3px solid #7ee787;
}

.log-line.assistant-msg {
    color: #58a6ff; /* Blue for assistant */
    padding-left: 8px;
    border-left: 3px solid #58a6ff;
}

/* ============================================
   STAR RATING STATES
   ============================================

   JavaScript adds/removes 'selected' class
   when user clicks on star ratings
   ============================================ */

.star {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.star.selected {
    color: #ffd700 !important; /* Gold color for selected stars */
}

/* ============================================
   SCROLLBAR STYLING
   ============================================

   Custom scrollbar for better visual consistency
   ============================================ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #30363d #0d1117;
}

/* Webkit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #0d1117;
}

*::-webkit-scrollbar-thumb {
    background-color: #30363d;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #484f58;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade in animation for modals */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide in animation for elements */
@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Pulse animation for status indicators */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Glow animation for active elements */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(88, 166, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(88, 166, 255, 0.8);
    }
}

/* ============================================
   STATUS INDICATOR STATES
   ============================================

   JavaScript updates these classes based on
   connection state (offline, connecting, online)
   ============================================ */

#status-indicator .status-dot {
    transition: background-color 0.3s ease;
}

#status-indicator.offline .status-dot {
    background-color: #8b949e;
}

#status-indicator.connecting .status-dot {
    background-color: #f0883e;
    animation: pulse 1s infinite;
}

#status-indicator.online .status-dot {
    background-color: #7ee787;
}

#status-indicator.offline .status-text {
    color: #8b949e;
}

#status-indicator.connecting .status-text {
    color: #f0883e;
}

#status-indicator.online .status-text {
    color: #7ee787;
}

/* ============================================
   FIELD VALIDATION ICON STATES
   ============================================

   JavaScript shows/hides validation icons
   based on input validity
   ============================================ */

.field-error:not(.hidden) {
    animation: slideIn 0.3s ease;
}

/* Show valid/invalid icons when JavaScript adds these IDs */
[id$="-valid-icon"]:not(.hidden) {
    display: flex !important;
}

[id$="-invalid-icon"]:not(.hidden) {
    display: flex !important;
}

/* ============================================
   TAB BUTTON ACTIVE STATE
   ============================================

   Note: Most tab styling is in Tailwind classes,
   but this ensures smooth transitions
   ============================================ */

.tab-button {
    transition: all 0.2s ease;
}

/* ============================================
   WHATSAPP-STYLE CHAT BUBBLES
   ============================================ */

/* Chat message containers */
.chat-message {
    display: flex;
    margin-bottom: 8px;
    width: 100%;
}

/* User messages - right aligned */
.chat-message.user-msg {
    justify-content: flex-end;
}

/* Assistant messages - left aligned */
.chat-message.assistant-msg {
    justify-content: flex-start;
}

/* Message bubbles */
.message-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.4;
}

/* User bubble - green like WhatsApp */
.user-msg .message-bubble {
    background: #dcf8c6;
    color: #000;
    border-bottom-right-radius: 4px;
}

/* Assistant bubble - grey */
.assistant-msg .message-bubble {
    background: #e5e5ea;
    color: #000;
    border-bottom-left-radius: 4px;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .user-msg .message-bubble {
        background: #056162;
        color: #fff;
    }

    .assistant-msg .message-bubble {
        background: #262626;
        color: #fff;
    }
}

/* ============================================
   END OF CUSTOM CSS
   ============================================

   Total lines: ~300 (reduced from 1,020)
   Reduction: ~70%

   All other styling is handled by Tailwind CSS
   utility classes in index.html
   ============================================ */