.scroll-to-bottom-btn{position:fixed;width:48px;height:48px;background:rgba(102,126,234,0.8);color:white;border:none;border-radius:50%;font-size:24px;line-height:48px;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,0.3);transition:background 0.3s,box-shadow 0.3s}
.scroll-to-bottom-btn:hover{background:rgba(118,75,162,0.9);box-shadow:0 4px 15px rgba(0,0,0,0.4)}
@media(min-width:768px){
#chat{padding:30px;padding-bottom:0}
.message{max-width:60%;padding:12px 52px 12px 16px}
#inputArea{padding:6px 20px;display:flex;flex-direction:row;gap:10px;align-items:flex-end;max-height:120px}
#messageInput{flex:1;min-height:44px;max-height:80px}
#sendBtn{width:auto;margin:0;padding:12px 30px}
}
@media(max-width:768px){
#header{padding:15px;max-height:80px;min-height:55px}
#title{font-size:1.1rem}
#topic{font-size:0.85rem;max-width:55%;line-height:1.2;max-height:2.4em;-webkit-line-clamp:2;margin:0 8px;text-wrap:balance}
#controls{gap:10px;min-width:110px}
.font-btn{padding:4px 8px;font-size:14px;width:28px;height:28px}
#artifactBtn{padding:6px;font-size:18px;width:36px;height:36px}
#chat{padding:10px;padding-bottom:0;font-size:14px}
.message{max-width:92%;font-size:14px;padding:10px 46px 10px 14px}
.message .copy-btn{width:28px;height:28px;font-size:14px;top:10px;right:10px}
.message:hover .copy-btn{opacity:0.8}
#status:not(:empty){font-size:17px;padding:4px 12px;font-weight:600}
#chat::-webkit-scrollbar{width:14px}
#chat::-webkit-scrollbar-track{background:rgba(200,200,200,0.2)}
#chat::-webkit-scrollbar-thumb{background:rgba(136,136,136,0.4);border-radius:7px;min-height:60px}
#inputArea{padding:5px 12px;max-height:140px}
#messageInput{min-height:44px;font-size:15px;max-height:90px}
#messageInput::placeholder{font-size:15px}
#sendBtn{position:static;width:100%;margin-top:8px;font-size:15px}
}
@media(max-width:480px){
#title{font-size:1rem}
#controls{gap:8px;min-width:100px}
.font-btn{width:26px;height:26px;font-size:13px}
#artifactBtn{width:34px;height:34px;font-size:17px}
.message{max-width:95%;font-size:13px}
#messageInput{min-height:44px;font-size:14px;max-height:85px}
#messageInput::placeholder{font-size:14px}
#sendBtn{padding:10px;font-size:14px}
}
@media(prefers-color-scheme:dark){
body{background:#1a1a1a;color:#e0e0e0}
#chat{background:#2a2a2a}
.isis{background:#3a3a3a;color:#e0e0e0;border-color:#4a4a4a}
.message code,.message pre{background:#444;color:#e0e0e0}
.message .copy-btn{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2)}
.message .copy-btn:hover{background:rgba(255,255,255,0.2)}
.user .copy-btn{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3)}
.user .copy-btn:hover{background:rgba(255,255,255,0.35)}
#messageInput{background:#3a3a3a;color:#e0e0e0;border-color:#4a4a4a}
#messageInput:focus{background:#404040}
#inputArea{background:#2a2a2a;border-top-color:#4a4a4a}
#status{background:#2a2a2a;color:#a0a0ff}
.system{background:rgba(255,152,0,0.1);color:#ffa726;border-color:#ff9800}
.welcome-content,.topic-popup-content,.artifact-content{background:#2d2d2d;color:#e0e0e0}
.welcome-content h2,.topic-popup-content h3,.artifact-header h3{color:#a088ca}
.welcome-content p,.topic-popup-content p{color:#e0e0e0}
}