/* ═══════════════════════════════════════════════════════════════════════════
   Zevo LLM Debt Recovery Demo — Custom Styles
   Scrollbar styling, animations, and overrides.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scrollbar Styling ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F1F1F1;
}

::-webkit-scrollbar-thumb {
    background: #888888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #888888 #F1F1F1;
}

/* ── Pulse Recording Animation ─────────────────────────────────────────── */
@keyframes pulse-recording {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.animate-pulse-recording {
    animation: pulse-recording 1.5s ease infinite;
}

/* ── Loading Dots Animation ────────────────────────────────────────────── */
@keyframes dots {
    0%, 20% {
        content: " .";
    }
    40% {
        content: " ..";
    }
    60%, 100% {
        content: " ...";
    }
}

.loading-dots::after {
    content: " .";
    animation: dots 1.5s steps(5, end) infinite;
}

/* ── Body Reset ────────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* ── Smooth Transitions ────────────────────────────────────────────────── */
#login-screen,
#chat-screen {
    transition: opacity 0.2s ease;
}

/* ── Message Input Focus ───────────────────────────────────────────────── */
#message-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(27, 139, 151, 0.3);
}

/* ── Login Button Active State ─────────────────────────────────────────── */
#login-btn:active,
#send-btn:active {
    transform: scale(0.98);
}

/* ── Sidebar Scroll ────────────────────────────────────────────────────── */
#sidebar {
    scrollbar-width: thin;
}