/* Шрифттер жаңартылды: Inter (Regular) және Space Grotesk (Bold) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@700&display=swap');

* { 
    -webkit-tap-highlight-color: transparent; 
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

::-webkit-scrollbar { 
    display: none; 
    width: 0;
    background: transparent;
}

body { 
    font-family: 'Inter', sans-serif; /* Негізгі шрифт */
    font-weight: 400;
    background-color: #f8fafc; 
    color: #1e293b; 
    overflow: hidden;
    height: 100dvh;
    width: 100vw;
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
}

/* --- ТАҚЫРЫПТАРҒА АРНАЛҒАН SPACE GROTESK --- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

/* Логотиптер мен басты UI элементтеріне (Span) Space Grotesk қосу */
#loading-screen h1,
#auth-screen h2,
#sidebar .font-bold.text-xl, /* Sidebar лого */
header .font-bold.text-lg,  /* Header лого */
#welcome-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

.pt-safe { padding-top: max(35px, env(safe-area-inset-top)); }
.pb-safe { padding-bottom: max(20px, env(safe-area-inset-bottom)); }

.scroll-smooth-y { overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

/* Chat Bubbles - Жаңартылған минималистік түстер */
.msg-user { 
    background: linear-gradient(135deg, #ec4899, #3b82f6); 
    color: white !important; 
    border-radius: 20px 20px 4px 20px; 
    margin-left: auto; 
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
}
.msg-ai { 
    background: #ffffff; 
    color: #1e293b !important; 
    border-radius: 20px 20px 20px 4px; 
    border: 1px solid #e2e8f0; 
    margin-right: auto; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.prose { font-size: 15px; line-height: 1.5; color: #1e293b; }
.prose p { margin-bottom: 0.75em; }
.prose pre { background: #0f172a !important; color: white; border-radius: 12px; margin: 10px 0; padding: 12px; font-size: 13px; overflow-x: auto; }

.toast {
    position: fixed; top: 40px;
    left: 50%; transform: translateX(-50%) translateY(-200%);
    background: #ffffff; padding: 12px 20px; border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); z-index: 9999;
    display: flex; align-items: center; gap: 10px; font-size: 14px;
    color: #1e293b;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #e2e8f0; width: 90%; max-width: 350px;
}
.toast.show { transform: translateX(-50%) translateY(0); }

.input-area-bg {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.typing-dot { width: 6px; height: 6px; background: #cbd5e1; border-radius: 50%; animation: typing 1.4s infinite ease-in-out both; margin: 0 2px; display: inline-block; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

.disabled-area { opacity: 0.5; pointer-events: none; }

/* KLOP SWITCH STYLES - Ақшыл дизайн */
.mode-active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}
.mode-inactive {
    color: #64748b;
    background: transparent;
}
.mode-inactive:hover {
    color: #1e293b;
    background: #f1f5f9;
}