/* Reset & Font */
body, html { margin:0; padding:0; font-family:'Inter','Arial',sans-serif; height:100%; transition: background 0.3s, color 0.3s; }
body.dark { background:#1f2026; color:#fff; }
body.light { background:#f6f6f6; color:#111; }

/* Layout */
.container { display:flex; height:100vh; overflow:hidden; }

/* Sidebar */
.sidebar { width:280px; background: linear-gradient(180deg, #2b2c34, #1e1f26); display:flex; flex-direction:column; padding:20px; color:#fff; box-shadow:2px 0 12px rgba(0,0,0,0.4); }
.sidebar-header { display:flex; flex-direction:column; gap:10px; }
.sidebar h2 { font-size:20px; font-weight:600; letter-spacing:0.5px; }
.new-chat-btn { position:sticky; top:10px; background:#19a7ce; color:#fff; font-weight:600; border-radius:12px; padding:10px; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.new-chat-btn:hover { background:#17a2c3; transform:translateY(-2px); }
.sidebar select, .sidebar input, .clear-btn, .mode-btn { margin-top:10px; border:none; border-radius:10px; padding:10px; font-size:14px; transition:all 0.2s ease; }
.sidebar select, .sidebar input { background:#2c2d35; color:#fff; }
.sidebar input::placeholder { color:#aaa; }
.clear-btn, .mode-btn { background:#444654; color:#fff; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
.clear-btn:hover, .mode-btn:hover { background:#19a7ce; transform:translateY(-2px); }

/* Conversation List */
.conversation-list { flex:1; overflow-y:auto; margin-top:15px; }
.conversation-item { padding:12px; border-radius:12px; cursor:pointer; margin-bottom:8px; background:#2c2d35; display:flex; justify-content:space-between; align-items:center; }
.conversation-item.active { background:#19a7ce; color:#fff; }
.conversation-item:hover { background:#3a3b45; transform:translateX(2px); }
.conv-btn { margin-left:6px; background:#444654; color:#fff; border:none; border-radius:6px; padding:2px 5px; cursor:pointer; }
.conv-btn:hover { background:#19a7ce; }

/* Chat Area */
.chat-container { flex:1; display:flex; flex-direction:column; background:#1f2026; transition:background 0.3s; }
.chat-box { flex:1; padding:20px; overflow-y:auto; scroll-behavior:smooth; }

/* Messages */
.message { margin:10px 0; padding:16px 22px; border-radius:24px; max-width:75%; line-height:1.5; word-wrap:break-word; white-space:pre-wrap; position:relative; transition:all 0.2s ease; font-size:15px; }
.user { background:linear-gradient(135deg,#19a7ce,#17a2c3); color:#fff; margin-left:auto; text-align:right; box-shadow:0 4px 12px rgba(0,0,0,0.3); animation:fadeInUp 0.3s ease; }
.bot { background:linear-gradient(135deg,#2e2e3c,#3b3b4c); color:#fff; margin-right:auto; text-align:left; box-shadow:0 4px 12px rgba(0,0,0,0.3); animation:fadeInUp 0.3s ease; }

/* Input Box */
.input-box { display:flex; border-top:1px solid #333; background:#1e1f26; padding:12px; }
.input-box textarea { flex:1; padding:16px; font-size:16px; border:none; outline:none; border-radius:16px; background:#2c2d35; color:#fff; resize:none; box-shadow:inset 0 2px 6px rgba(0,0,0,0.3); transition:all 0.2s; }
.input-box textarea:focus { box-shadow:inset 0 2px 8px rgba(0,0,0,0.6); }
.input-box button { padding:16px 28px; margin-left:12px; border:none; border-radius:16px; background:#19a7ce; color:#fff; font-weight:600; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.input-box button:hover { background:#17a2c3; transform:translateY(-2px); }

/* Copy button */
.copy-btn { position:absolute; top:6px; right:6px; background:rgba(25,167,206,0.85); color:#fff; border:none; padding:4px 7px; border-radius:8px; cursor:pointer; font-size:12px; transition:all 0.2s; }
.copy-btn:hover { background:#17a2c3; transform:scale(1.1); }

/* Loading animation */
.loading { display:inline-block; width:6px; height:6px; margin-left:4px; background:#fff; border-radius:50%; animation:blink 1s infinite; }
@keyframes blink { 0%,80%,100%{opacity:0;} 40%{opacity:1;} }

/* Scrollbar */
.chat-box::-webkit-scrollbar { width:8px; }
.chat-box::-webkit-scrollbar-thumb { background:#555; border-radius:4px; }
.chat-box::-webkit-scrollbar-track { background:#1f2026; }

/* FadeInUp animation */
@keyframes fadeInUp {0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:translateY(0);}}

/* Responsive */
@media screen and (max-width:768px){
    .container{flex-direction:column;}
    .sidebar{width:100%; flex-direction:row; overflow-x:auto; padding:10px;}
    .conversation-list{display:flex; flex-direction:row; flex-wrap:nowrap; overflow-x:auto;}
    .conversation-item{flex:0 0 auto; margin-right:8px;}
    .chat-container{flex:1; width:100%;}
}
body.dark { background:#1f2026; color:#fff; }
body.light { background:#f6f6f6; color:#111; }

/* Chat container background */
body.light .chat-container { background:#fff; color:#111; }
body.light .sidebar { background:#f0f0f0; color:#111; }
body.light .conversation-item { background:#e0e0e0; color:#111; }
body.light .conversation-item.active { background:#19a7ce; color:#fff; }
body.light .message.user { background:linear-gradient(135deg,#19a7ce,#17a2c3); color:#fff; }
body.light .message.bot { background:linear-gradient(135deg,#ddd,#ccc); color:#111; }
body.light .input-box { background:#eee; }
body.light .input-box textarea { background:#fff; color:#111; }
body.light .input-box button { background:#19a7ce; color:#fff; }
/* Light Mode */
body.light {
    background:#f6f6f6;
    color:#111;
}

body.light .sidebar {
    background:#fff;
    color:#111;
    box-shadow:2px 0 12px rgba(0,0,0,0.05);
}

body.light .sidebar h2 {
    color:#111;
}

body.light .conversation-item {
    background:#e8e8e8;
    color:#111;
}

body.light .conversation-item.active {
    background:#19a7ce;
    color:#fff;
}

body.light .conversation-item:hover {
    background:#d0d0d0;
}

body.light .conv-btn {
    background:#d0d0d0;
    color:#111;
}

body.light .conv-btn:hover {
    background:#19a7ce;
    color:#fff;
}

body.light .chat-container {
    background:#f6f6f6;
    color:#111;
}

body.light .message.user {
    background:linear-gradient(135deg,#19a7ce,#17a2c3);
    color:#fff;
}

body.light .message.bot {
    background:#e0e0e0;
    color:#111;
}

body.light .input-box {
    background:#f0f0f0;
    border-top:1px solid #ccc;
}

body.light .input-box textarea {
    background:#fff;
    color:#111;
    border:1px solid #ccc;
}

body.light .input-box textarea:focus {
    box-shadow:0 0 8px rgba(0,0,0,0.1);
}

body.light .input-box button {
    background:#19a7ce;
    color:#fff;
}

body.light .input-box button:hover {
    background:#17a2c3;
}

/* Scrollbar */
body.light .chat-box::-webkit-scrollbar {
    width:8px;
}
body.light .chat-box::-webkit-scrollbar-thumb {
    background:#ccc;
    border-radius:4px;
}
body.light .chat-box::-webkit-scrollbar-track {
    background:#f6f6f6;
}