/* ==========================================
   SurfSmart Support - Styles partages
   ========================================== */

/* --- Base --- */
body {
    background-color: #0f1115;
    color: #e2e8f0;
    background-image:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 40%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.03), transparent 40%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Glass panels (opaque - no backdrop-filter for perf) --- */
.glass {
    background: rgba(22, 27, 34, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-panel {
    background: rgba(22, 27, 34, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-input {
    background: rgba(22, 27, 34, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.glass-input:focus {
    border-color: #3b82f6;
    background: rgba(22, 27, 34, 0.95);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    outline: none;
}

/* --- Dropdown --- */
.dropdown-enter {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.dropdown-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* --- Custom Scrollbar --- */
.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #161b22;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

/* --- Chat Scrollbar --- */
.chat-scroll::-webkit-scrollbar {
    width: 6px;
}

.chat-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.chat-scroll::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

/* --- Toast System (GPU-accelerated) --- */
@keyframes slideIn {
    from { transform: translate3d(100%, 0, 0); opacity: 0; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes fadeOut {
    from { transform: translate3d(0, 0, 0); opacity: 1; }
    to { transform: translate3d(100%, 0, 0); opacity: 0; }
}

@keyframes progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.toast-enter {
    animation: slideIn 0.25s ease-out forwards;
    will-change: transform, opacity;
}

.toast-exit {
    animation: fadeOut 0.2s ease-in forwards;
    will-change: transform, opacity;
}

/* --- Animations (fast, GPU-accelerated) --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.35s ease-out forwards;
    will-change: transform, opacity;
}

/* Staggered delays for cascade effect */
.animate-delay-1 { animation-delay: 0.05s; }
.animate-delay-2 { animation-delay: 0.1s; }
.animate-delay-3 { animation-delay: 0.15s; }
.animate-delay-4 { animation-delay: 0.2s; }
.animate-delay-5 { animation-delay: 0.25s; }
.animate-delay-6 { animation-delay: 0.3s; }
.animate-delay-7 { animation-delay: 0.35s; }

/* --- Loading Skeleton --- */
.skeleton {
    background: rgba(255, 255, 255, 0.05);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* --- Strength Bar (Login) --- */
.strength-bar {
    transition: width 0.2s ease, background-color 0.2s ease;
}

/* --- Step Animation (Login) --- */
.step-enter {
    animation: fadeInUp 0.25s ease-out forwards;
}

/* --- Modal animations (GPU-accelerated) --- */
.modal-enter {
    opacity: 0;
    transform: scale(0.97) translate3d(0, 0, 0);
}

.modal-active {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    transition: opacity 0.15s ease, transform 0.15s ease;
}