:root{
--bg:#f4f6f8;
--surface:#ffffff;
--border:#dee2e6;
--text:#212529;
--text-muted:#6c757d;
--primary:#2c3e50;
--accent:#3498db;
--success:#2ecc71;
--danger:#e74c3c;
--shadow:rgba(0,0,0,0.08);
--shadow-modal:rgba(0,0,0,0.2);
--chat-user:#3498db;
--chat-ai:#ffffff;
--input-bg:#ffffff;
}

[data-theme="dark"]{
--bg:#0f0f1a;
--surface:#1a1a2e;
--border:#2d2d44;
--text:#e0e0e0;
--text-muted:#a0a0a0;
--primary:#1a1a2e;
--accent:#3498db;
--success:#2ecc71;
--danger:#e74c3c;
--shadow:rgba(0,0,0,0.3);
--shadow-modal:rgba(0,0,0,0.5);
--chat-user:#3498db;
--chat-ai:#1a1a2e;
--input-bg:#1a1a2e;
}

*{
box-sizing:border-box;
}

html, body{
height:100%;
margin:0;
}

body{
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
background:var(--bg);
color:var(--text);
transition:background-color 0.3s, color 0.3s;
height:100vh;
height:100dvh;
display:flex;
flex-direction:column;
overflow:hidden;
}

.navbar{
background:var(--primary) !important;
transition:background-color 0.3s;
flex-shrink:0;
}

#model-select{
width:auto;
max-width:180px;
background:var(--input-bg);
color:var(--text);
border-color:var(--border);
}

.chat-container{
flex:1;
overflow-y:auto;
padding:1rem;
display:flex;
flex-direction:column;
gap:0.75rem;
scroll-behavior:smooth;
}

.message{
max-width:75%;
padding:0.625rem 0.875rem;
border-radius:0.75rem;
font-size:0.9375rem;
line-height:1.5;
word-wrap:break-word;
white-space:pre-wrap;
animation:fadeIn 0.2s ease;
}

@keyframes fadeIn{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}

.message.user{
background:var(--chat-user);
color:white;
margin-left:auto;
border-bottom-right-radius:4px;
align-self:flex-end;
}

.message.ai{
background:var(--chat-ai);
border:1px solid var(--border);
color:var(--text);
border-bottom-left-radius:4px;
box-shadow:0 1px 3px var(--shadow);
align-self:flex-start;
transition:background-color 0.3s, border-color 0.3s;
}

.message-content{
white-space:pre-wrap;
}

.message-actions{
display:flex;
gap:0.5rem;
margin-top:0.5rem;
}

.msg-action-btn{
padding:0.25rem 0.5rem;
font-size:0.75rem;
background:rgba(0,0,0,0.1);
border:none;
border-radius:0.25rem;
cursor:pointer;
opacity:0.7;
transition:opacity 0.2s;
color:inherit;
}

.msg-action-btn:hover{
opacity:1;
}

[data-theme="dark"] .msg-action-btn{
background:rgba(255,255,255,0.1);
}

.loading{
display:flex;
gap:0.25rem;
padding:0.5rem 0.75rem;
}

.loading span{
width:0.5rem;
height:0.5rem;
background:var(--accent);
border-radius:50%;
animation:bounce 1.4s infinite ease-in-out both;
}

.loading span:nth-child(1){animation-delay:-0.32s;}
.loading span:nth-child(2){animation-delay:-0.16s;}
.loading span:nth-child(3){animation-delay:0s;}

@keyframes bounce{
0%, 80%, 100%{transform:scale(0);}
40%{transform:scale(1);}
}

.input-container{
background:var(--surface);
border-top:1px solid var(--border);
padding:0.75rem;
flex-shrink:0;
transition:background-color 0.3s, border-color 0.3s;
}

#message{
resize:none;
border-radius:1.5rem;
background:var(--input-bg);
color:var(--text);
border-color:var(--border);
transition:border-color 0.2s, box-shadow 0.2s, background-color 0.3s, color 0.3s;
}

#message:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(52,152,219,0.15);
}

.btn-success{
background:var(--success);
border-color:var(--success);
}

.btn-success:hover{
background:#27ae60;
border-color:#27ae60;
}

.btn-success:disabled{
background:#95a5a6;
border-color:#95a5a6;
}

.btn-danger{
background:var(--danger);
border-color:var(--danger);
}

.btn-danger:hover{
background:#c0392b;
border-color:#c0392b;
}

.modal-content{
background:var(--surface);
color:var(--text);
border-color:var(--border);
transition:background-color 0.3s, color 0.3s;
}

.modal-header{
border-bottom-color:var(--border);
}

.modal-footer{
border-top-color:var(--border);
}

.form-control{
background:var(--input-bg);
color:var(--text);
border-color:var(--border);
}

.form-control:focus{
background:var(--input-bg);
color:var(--text);
border-color:var(--accent);
}

.form-range::-webkit-slider-thumb{
background:var(--accent);
}

.form-select{
background-color:var(--input-bg);
color:var(--text);
border-color:var(--border);
}

.btn-close{
filter:var(--text);
}

[data-theme="dark"] .btn-close{
filter:invert(1);
}

[data-theme="dark"] .form-range::-webkit-slider-runnable-track{
background:var(--border);
}

@media (max-width: 576px){
.message{
max-width:90%;
padding:0.5rem 0.75rem;
font-size:0.875rem;
}

.chat-container{
padding:0.75rem;
gap:0.5rem;
}

#message{
font-size:0.875rem;
}

.btn{
padding:0.375rem 0.75rem;
}
}

@media (min-width: 577px) and (max-width: 768px){
.message{
max-width:80%;
}
}

@media (min-width: 769px) and (max-width: 1024px){
.message{
max-width:72%;
}
}