/* ==========================================================================
   ALIBEK.AI - ULTIMATE PRO STYLES v5.0 (CODER MAX + TOOLS EDITION)
   ========================================================================== */

body { 
    background-color: #131314; 
    color: #e3e3e3; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #444746; border-radius: 10px; transition: background 0.2s; }
::-webkit-scrollbar-thumb:hover { background: #5f6368; }

/* ========== BRAND GRADIENT ========== */
.brand-gradient { 
    background: linear-gradient(90deg, #8ab4f8 0%, #c58af9 50%, #f28b82 100%); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
}
.brand-gradient-bg {
    background: linear-gradient(135deg, #8ab4f8 0%, #c58af9 60%, #f28b82 100%);
}

/* ========== MARKDOWN BODY ========== */
.markdown-body { 
    font-size: 0.97rem; 
    line-height: 1.75; 
    color: #e3e3e3;
    word-break: break-word;
}
.markdown-body p { margin-bottom: 0.9rem; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body a { color: #8ab4f8; text-decoration: none; border-bottom: 1px solid #8ab4f820; transition: border-color 0.2s; }
.markdown-body a:hover { border-color: #8ab4f8; }
.markdown-body strong { color: #fff; font-weight: 600; }
.markdown-body em { color: #c4c7c5; }
.markdown-body blockquote {
    border-left: 3px solid #c58af9;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    background: #1e1f2050;
    border-radius: 0 8px 8px 0;
    color: #c4c7c5;
}
.markdown-body h1 { color: #fff; font-weight: 600; font-size: 1.5rem; margin-top: 1.6rem; margin-bottom: 0.8rem; }
.markdown-body h2 { color: #fff; font-weight: 600; font-size: 1.25rem; margin-top: 1.4rem; margin-bottom: 0.7rem; }
.markdown-body h3 { color: #fff; font-weight: 500; font-size: 1.1rem; margin-top: 1.2rem; margin-bottom: 0.6rem; }
.markdown-body ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 0.9rem; }
.markdown-body ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 0.9rem; }
.markdown-body li { margin-bottom: 0.3rem; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.markdown-body th { background: #282a2c; color: #fff; padding: 0.6rem 0.9rem; text-align: left; border: 1px solid #444746; font-weight: 500; }
.markdown-body td { padding: 0.5rem 0.9rem; border: 1px solid #333537; }
.markdown-body tr:nth-child(even) { background: #1e1f2040; }
.markdown-body hr { border: none; border-top: 1px solid #444746; margin: 1.5rem 0; }

/* ========== CODE BLOCKS (YANGI COPY VA YUKLASH TUGMALARI UCHUN) ========== */
.code-block-wrapper pre {
    margin: 0 !important;
    border-radius: 0 !important;
}
.code-block-wrapper {
    margin: 1.5rem 0;
}
.markdown-body pre { 
    background: #1e1e1e !important; 
    padding: 1.2rem !important; 
    border-radius: 12px; 
    overflow-x: auto; 
    margin: 1.2rem 0; 
    border: 1px solid #333537;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
}
.markdown-body pre code { 
    font-family: 'Fira Code', 'Consolas', monospace !important; 
    font-size: 0.88rem; 
    text-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #d4d4d4 !important; 
    line-height: 1.6;
}
.markdown-body :not(pre) > code { 
    font-family: 'Fira Code', monospace; 
    background: #282a2c; 
    padding: 0.18rem 0.45rem; 
    border-radius: 6px; 
    font-size: 0.87em; 
    color: #c58af9;
    border: 1px solid #333537;
}

/* ========== TYPEWRITER CURSOR ========== */
.typewriter-cursor { 
    display: inline-block; 
    width: 3px; 
    height: 1.05em; 
    background: linear-gradient(180deg, #8ab4f8, #c58af9); 
    margin-left: 2px; 
    animation: blink 0.9s step-end infinite; 
    vertical-align: text-bottom;
    border-radius: 2px;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ========== AI LOADER DOTS ========== */
@keyframes aiDot {
    0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
    30% { transform: translateY(-6px) scale(1.1); opacity: 1; }
}

/* ========== MESSAGE ANIMATIONS ========== */
@keyframes msgIn {
    0% { opacity: 0; transform: translateY(16px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.msg-animate { animation: msgIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ========== MODEL SELECTOR ========== */
.model-badge-free {
    background: linear-gradient(135deg, #1a2a3a, #1e2d3d);
    border: 1px solid #8ab4f840;
    color: #8ab4f8;
}
.model-badge-pro {
    background: linear-gradient(135deg, #2a1a3a, #2d1e3d);
    border: 1px solid #c58af940;
    color: #c58af9;
}
.model-dropdown {
    background: #1a1b1c;
    border: 1px solid #333537;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
}
.model-option {
    transition: background 0.15s;
    cursor: pointer;
}
.model-option:hover { background: #282a2c; }
.model-option.active { background: #222426; }

/* ========== PAYWALL MODAL ========== */
.paywall-overlay {
    background: rgba(10, 10, 12, 0.88);
    backdrop-filter: blur(18px);
    z-index: 9999;
}
.paywall-card {
    background: linear-gradient(145deg, #1a1b1c, #1e1f20);
    border: 1px solid #333537;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(197,138,249,0.1);
}
.pro-glow {
    box-shadow: 0 0 40px rgba(197,138,249,0.2), 0 0 80px rgba(197,138,249,0.08);
}

/* ========== UI COMPONENTS ========== */
.custom-textarea { resize: none; overflow-y: auto; scrollbar-width: thin; overflow-x: hidden; }
.modal-overlay { background: rgba(13, 13, 14, 0.88); backdrop-filter: blur(12px); z-index: 1000; }

/* ========== INPUT AREA GLOW ========== */
.input-area-focused {
    border-color: rgba(197,138,249,0.4) !important;
    box-shadow: 0 0 0 1px rgba(197,138,249,0.15), 0 4px 24px rgba(0,0,0,0.3);
}

/* ========== CODER MAX GLOW ========== */
.coder-max-active {
    border-color: rgba(242, 139, 130, 0.6) !important;
    box-shadow: 0 0 15px rgba(242, 139, 130, 0.2), inset 0 0 10px rgba(242, 139, 130, 0.1) !important;
    background: linear-gradient(to right, #1a1b1c, #221515) !important;
}

/* ========== ATTACH MENU ========== */
.attach-menu {
    background: #1e1f20;
    border: 1px solid #333537;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
    transform-origin: bottom left;
    animation: menuPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes menuPop {
    0% { opacity: 0; transform: scale(0.9) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.attach-item {
    transition: all 0.2s ease;
    cursor: pointer;
}
.attach-item:hover {
    background: #282a2c;
}

/* ========== DAILY LIMIT LOCK ========== */
.limit-lock-overlay {
    background: rgba(19, 19, 20, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #f28b82;
    font-weight: 500;
    z-index: 10;
}

/* ========== SIDEBAR ITEM ========== */
.sidebar-item-active {
    background: linear-gradient(135deg, rgba(138,180,248,0.12), rgba(197,138,249,0.08));
    border: 1px solid rgba(138,180,248,0.15);
    color: #8ab4f8;
}
.sidebar-item { 
    border: 1px solid transparent;
    transition: all 0.2s;
}
.sidebar-item:hover {
    border-color: rgba(255,255,255,0.05);
}

/* ========== TOAST ========== */
.toast-enter { 
    animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
}
.toast-exit { 
    animation: toastOut 0.25s ease-in forwards; 
}
@keyframes toastIn {
    0% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.95); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes toastOut {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

/* ========== ACTION BUTTONS ========== */
.action-btn {
    opacity: 0;
    transition: opacity 0.2s, background 0.15s, color 0.15s;
}
.group:hover .action-btn { opacity: 1; }

/* ========== STREAMING FADE-IN ========== */
@keyframes contentFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.content-fade { animation: contentFadeIn 0.3s ease-out forwards; }

/* ========== VOICE WAVES ANIMATION ========== */
.voice-waves-container { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    height: 24px; 
    padding: 0 10px;
}
.wave-bar { 
    width: 3px; 
    background-color: #f28b82; 
    border-radius: 4px; 
    animation: wave 1s ease-in-out infinite; 
}
.wave-bar:nth-child(1) { animation-delay: 0.0s; }
.wave-bar:nth-child(2) { animation-delay: 0.1s; background-color: #c58af9; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; background-color: #8ab4f8; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; background-color: #c58af9; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; background-color: #f28b82; }
@keyframes wave {
    0%, 100% { height: 6px; }
    50% { height: 20px; }
}

/* ========== LIVE CODE RUNNER MODAL ========== */
.code-runner-overlay { 
    background: rgba(0, 0, 0, 0.9); 
    backdrop-filter: blur(10px); 
    z-index: 9999; 
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
}
.code-runner-container { 
    background: #131314; 
    border: 1px solid #333537; 
    border-radius: 16px; 
    width: 95vw; 
    height: 90vh; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    box-shadow: 0 24px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05); 
    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.code-runner-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 12px 20px; 
    background: #1e1f20; 
    border-bottom: 1px solid #333537; 
}
.code-runner-iframe { 
    width: 100%; 
    height: 100%; 
    border: none; 
    background: #ffffff; 
} 

/* ========== EXPORT & PROMPT MENU ========== */
.dropdown-menu { 
    background: #1e1f20; 
    border: 1px solid #333537; 
    border-radius: 12px; 
    box-shadow: 0 12px 30px rgba(0,0,0,0.6); 
    overflow: hidden; 
    z-index: 100;
    animation: menuPop 0.2s ease-out forwards;
}
.dropdown-item {
    transition: background 0.15s;
    cursor: pointer;
}
.dropdown-item:hover { background: #282a2c; }

/* ========== PRINT STYLES (PDF EXPORT) ========== */
@media print {
    body { background: #ffffff !important; color: #000000 !important; overflow: auto !important; height: auto !important; }
    
    .sidebar, header, .input-area-container, .toast, .modal-overlay, .attach-menu, button, .action-btn { 
        display: none !important; 
    }
    
    .chat-container-print { 
        width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 20px !important; 
    }
    .flex-1 { overflow: visible !important; }
    
    .markdown-body { color: #000000 !important; font-size: 11pt !important; }
    .markdown-body pre { background: #f5f5f5 !important; border: 1px solid #cccccc !important; box-shadow: none !important; color: #333 !important;}
    .markdown-body pre code { color: #333333 !important; }
    .msg-animate { animation: none !important; transform: none !important; opacity: 1 !important; }
    
    .bg-\\[\\#1e1f20\\] { background: #f0f0f0 !important; border: 1px solid #ddd !important; color: #000 !important; }
    .text-\\[\\#e3e3e3\\] { color: #000 !important; }
    
    .brand-gradient { background: none !important; color: #000 !important; -webkit-text-fill-color: #000 !important; }
    ::-webkit-scrollbar { display: none !important; }
    
    pre, blockquote, img { page-break-inside: avoid; }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .markdown-body { font-size: 0.93rem; }
    .code-runner-container { width: 100vw; height: 100vh; border-radius: 0; }
}