/**
 * custom.css - Custom Brand Overrides & UI Animations
 * Company: Das Engineering Works (dasvalves.com)
 */

/* Smooth Scrolling & Typography */
html {
    scroll-behavior: smooth;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom Webkit Scrollbars for Staff & Client Chat Windows */
#chat-messages-container::-webkit-scrollbar,
#staff-messages-container::-webkit-scrollbar {
    width: 6px;
}

#chat-messages-container::-webkit-scrollbar-track,
#staff-messages-container::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#chat-messages-container::-webkit-scrollbar-thumb,
#staff-messages-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

#chat-messages-container::-webkit-scrollbar-thumb:hover,
#staff-messages-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Chat Pulse Online Indicator Animation */
@keyframes online-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.15);
    }
}

.animate-pulse-fast {
    animation: online-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Form Focus Highlights */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Spec Sheet Print Styles for Technical Downloads */
@media print {
    header, footer, #chat-widget-root, #chat-trigger-btn {
        display: none !important;
    }
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    .bg-slate-900 {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
}
/* Infinite Marquee Animation for Trust Ticker */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: 200%;
    animation: marquee 25s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}