/* Chatty AI v3.0 - Optimized Styles */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter','Segoe UI',sans-serif;}
body{height:100vh;display:flex;justify-content:center;align-items:center;background:#0A0F1F;overflow:hidden;}
canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}

/* Login Container */
.login-container{
position:relative;z-index:2;width:min(400px,90vw);padding:40px;
background:rgba(20,25,45,0.85);border-radius:20px;
box-shadow:0 15px 50px rgba(0,0,0,0.7);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.1);
opacity:0;transform:translateY(30px);
animation:fadeIn 0.8s forwards 0.3s;
}
@keyframes fadeIn{to{opacity:1;transform:translateY(0);}}

.login-header{text-align:center;margin-bottom:30px;}
.login-header h1{color:#3A80FF;font-size:2rem;margin-bottom:8px;text-shadow:0 0 15px rgba(58,128,255,0.5);}
.login-header .subtitle{color:#8893A6;font-size:0.9rem;}

#login-form{display:flex;flex-direction:column;gap:15px;}
#login-form input{
padding:15px 20px;border-radius:12px;border:none;outline:none;
background:rgba(255,255,255,0.05);color:#fff;font-size:16px;
transition:0.3s;
}
#login-form input:focus{
background:rgba(58,128,255,0.15);
box-shadow:0 0 20px rgba(58,128,255,0.4);
}
#login-form input::placeholder{color:#8893A6;}

#login-form button{
padding:15px;border:none;border-radius:12px;
background:linear-gradient(135deg,#1E63FF,#3A80FF);
color:#fff;font-size:16px;font-weight:600;cursor:pointer;
transition:0.3s;box-shadow:0 5px 20px rgba(58,128,255,0.4);
}
#login-form button:hover{
transform:translateY(-2px);
box-shadow:0 8px 30px rgba(58,128,255,0.6);
}
#login-form button:disabled{
opacity:0.6;cursor:not-allowed;transform:none;
}

.login-footer{text-align:center;margin-top:20px;font-size:13px;color:#666;}

/* Chat Container */
.chat-container{
position:relative;z-index:2;
width:min(90vw,1200px);height:85vh;
background:rgba(20,25,45,0.9);border-radius:20px;
box-shadow:0 15px 50px rgba(0,0,0,0.7);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.1);
display:flex;flex-direction:column;overflow:hidden;
}

/* Header */
.chat-header{
display:flex;justify-content:space-between;align-items:center;
padding:20px 25px;
border-bottom:1px solid rgba(255,255,255,0.1);
background:rgba(10,15,31,0.5);
}

.header-left{display:flex;align-items:center;gap:15px;}
.header-left h2{color:#3A80FF;margin:0;font-size:1.5rem;}
.model-badge{
padding:6px 15px;border-radius:20px;
background:linear-gradient(135deg,#1E63FF,#3A80FF);
color:#fff;font-size:13px;font-weight:600;
box-shadow:0 3px 10px rgba(58,128,255,0.3);
}

.header-right{display:flex;gap:10px;}
.icon-btn{
width:40px;height:40px;border:none;border-radius:10px;
background:rgba(255,255,255,0.05);color:#8893A6;
cursor:pointer;transition:0.3s;
display:flex;align-items:center;justify-content:center;
}
.icon-btn svg{width:20px;height:20px;}
.icon-btn:hover{
background:rgba(58,128,255,0.2);color:#3A80FF;
transform:translateY(-2px);
}

/* Search Bar */
.search-bar{
display:flex;align-items:center;gap:10px;
padding:15px 25px;
border-bottom:1px solid rgba(255,255,255,0.1);
background:rgba(58,128,255,0.1);
}
.search-bar input{
flex:1;padding:10px 15px;border:none;border-radius:10px;
background:rgba(255,255,255,0.05);color:#fff;
outline:none;font-size:14px;
}
.search-bar input::placeholder{color:#8893A6;}

/* Messages */
.messages{
flex:1;overflow-y:auto;padding:20px 25px;
display:flex;flex-direction:column;gap:15px;
}
.messages::-webkit-scrollbar{width:8px;}
.messages::-webkit-scrollbar-track{background:rgba(255,255,255,0.02);}
.messages::-webkit-scrollbar-thumb{background:rgba(58,128,255,0.3);border-radius:4px;}
.messages::-webkit-scrollbar-thumb:hover{background:rgba(58,128,255,0.5);}

.welcome-message{
text-align:center;padding:40px 20px;color:#8893A6;
}
.welcome-message h3{color:#3A80FF;margin-bottom:10px;}

.message{
display:flex;gap:15px;max-width:85%;
animation:messageSlide 0.3s ease;
}
@keyframes messageSlide{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.user-message{align-self:flex-end;flex-direction:row-reverse;}
.ai-message{align-self:flex-start;}

.avatar{
width:40px;height:40px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:20px;flex-shrink:0;
background:rgba(58,128,255,0.2);
}

.message-content{
padding:15px 20px;border-radius:15px;
position:relative;
}
.user-message .message-content{
background:linear-gradient(135deg,#1E63FF,#3A80FF);
color:#fff;
border-bottom-right-radius:5px;
}
.ai-message .message-content{
background:rgba(255,255,255,0.05);
color:#E4E7EB;
border-bottom-left-radius:5px;
}

.message-content pre{
margin:10px 0;border-radius:8px;
overflow-x:auto;
}
.message-content code{
background:rgba(0,0,0,0.3);
padding:2px 6px;border-radius:4px;
}
.message-content pre code{
padding:15px;display:block;
}

.timestamp{
font-size:11px;color:rgba(255,255,255,0.5);
margin-top:8px;text-align:right;
}

.system-message{
align-self:center;padding:10px 20px;
border-radius:20px;background:rgba(255,193,7,0.1);
color:#FFC107;font-size:14px;text-align:center;
border:1px solid rgba(255,193,7,0.2);
}

.search-highlight{
animation:highlight 0.5s ease;
}
@keyframes highlight{50%{background:rgba(255,193,7,0.3);}}

/* Quick Prompts */
.quick-prompts{
display:flex;gap:10px;padding:15px 25px;
overflow-x:auto;flex-wrap:wrap;
border-top:1px solid rgba(255,255,255,0.1);
}
.quick-prompts::-webkit-scrollbar{height:6px;}
.quick-prompts::-webkit-scrollbar-thumb{background:rgba(58,128,255,0.3);border-radius:3px;}

.prompt-btn{
padding:10px 18px;border:none;border-radius:20px;
background:rgba(58,128,255,0.1);color:#3A80FF;
font-size:14px;cursor:pointer;transition:0.3s;
white-space:nowrap;border:1px solid rgba(58,128,255,0.2);
}
.prompt-btn:hover{
background:rgba(58,128,255,0.2);
transform:translateY(-2px);
}

/* Chat Input */
.chat-input{
padding:20px 25px;
border-top:1px solid rgba(255,255,255,0.1);
background:rgba(10,15,31,0.5);
}

.input-status{
display:flex;justify-content:space-between;
margin-bottom:10px;font-size:12px;
}
.char-counter{color:#8893A6;}
.typing-indicator{color:#3A80FF;}

.chat-input-wrapper{
display:flex;gap:10px;align-items:flex-end;
}
.chat-input-wrapper textarea{
flex:1;padding:12px 15px;border:none;border-radius:12px;
background:rgba(255,255,255,0.05);color:#fff;
font-size:15px;resize:none;outline:none;
min-height:45px;max-height:150px;
font-family:inherit;transition:0.3s;
}
.chat-input-wrapper textarea:focus{
background:rgba(58,128,255,0.1);
box-shadow:0 0 15px rgba(58,128,255,0.3);
}
.chat-input-wrapper textarea::placeholder{color:#8893A6;}

.chat-input-wrapper button{
width:45px;height:45px;border:none;border-radius:12px;
background:linear-gradient(135deg,#1E63FF,#3A80FF);
color:#fff;cursor:pointer;transition:0.3s;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 15px rgba(58,128,255,0.4);
flex-shrink:0;
}
.chat-input-wrapper button svg{width:20px;height:20px;}
.chat-input-wrapper button:hover:not(:disabled){
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(58,128,255,0.6);
}
.chat-input-wrapper button:disabled{
opacity:0.4;cursor:not-allowed;
}

/* Scroll to Bottom */
.scroll-to-bottom{
position:absolute;bottom:140px;right:30px;
width:45px;height:45px;border:none;border-radius:50%;
background:linear-gradient(135deg,#1E63FF,#3A80FF);
color:#fff;cursor:pointer;transition:0.3s;
display:flex;align-items:center;justify-content:center;
box-shadow:0 5px 20px rgba(58,128,255,0.5);
z-index:10;
}
.scroll-to-bottom svg{width:24px;height:24px;}
.scroll-to-bottom:hover{
transform:translateY(-3px);
box-shadow:0 8px 25px rgba(58,128,255,0.7);
}

/* Modals */
.modal{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);
display:flex;align-items:center;justify-content:center;
z-index:1000;
}
.modal-content{
background:rgba(20,25,45,0.95);border-radius:20px;
padding:30px;max-width:500px;width:90%;
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 20px 60px rgba(0,0,0,0.8);
}
.modal-header{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:25px;
}
.modal-header h3{color:#3A80FF;margin:0;}
.close-btn{
width:35px;height:35px;border:none;border-radius:50%;
background:rgba(255,255,255,0.05);color:#8893A6;
font-size:24px;cursor:pointer;transition:0.3s;
display:flex;align-items:center;justify-content:center;
}
.close-btn:hover{
background:rgba(255,0,0,0.2);color:#FF4444;
transform:rotate(90deg);
}

.settings-section{margin-bottom:25px;}
.settings-section label{
display:block;margin-bottom:10px;color:#8893A6;
font-size:14px;font-weight:600;
}
.status-box{
padding:15px;border-radius:10px;
background:rgba(255,255,255,0.05);
margin-bottom:10px;
}
.status-success{color:#4CAF50;}
.status-error{color:#FF9800;}
.info-text{
font-size:13px;color:#8893A6;
line-height:1.5;margin-top:8px;
}

.model-select{
width:100%;padding:12px 15px;border:none;border-radius:10px;
background:rgba(255,255,255,0.05);color:#fff;
font-size:14px;cursor:pointer;outline:none;
}
.model-select option{background:#1A1F35;color:#fff;}

.export-buttons{
display:flex;gap:10px;flex-wrap:wrap;
margin-top:20px;
}
.export-btn{
flex:1;padding:15px;border:none;border-radius:12px;
background:rgba(58,128,255,0.1);color:#3A80FF;
font-size:14px;font-weight:600;cursor:pointer;
transition:0.3s;border:1px solid rgba(58,128,255,0.2);
display:flex;align-items:center;justify-content:center;gap:8px;
min-width:120px;
}
.export-btn svg{width:18px;height:18px;}
.export-btn:hover{
background:rgba(58,128,255,0.2);
transform:translateY(-2px);
}

/* Utility Classes */
.hidden{display:none!important;}

/* Responsive */
@media(max-width:768px){
.chat-container{width:100vw;height:100vh;border-radius:0;}
.chat-header{padding:15px;}
.header-left h2{font-size:1.2rem;}
.messages{padding:15px;}
.message{max-width:95%;}
.quick-prompts{padding:10px 15px;}
.chat-input{padding:15px;}
.login-container{width:95vw;padding:30px;}
}

@media(max-width:480px){
.prompt-btn{font-size:12px;padding:8px 14px;}
.model-badge{font-size:11px;padding:4px 10px;}
.icon-btn{width:35px;height:35px;}
.icon-btn svg{width:18px;height:18px;}
}