:root{ color-scheme: light dark; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:#f4f6f9; display:flex; align-items:center; justify-content:center; }
@media (prefers-color-scheme: dark){ body{ background:#0e1116; } }

.wrap{ width:100%; max-width:480px; height:100vh; max-height:760px; background:#fff; display:flex; flex-direction:column; box-shadow:0 8px 40px rgba(0,0,0,0.12); border-radius:12px; overflow:hidden; }
@media (prefers-color-scheme: dark){ .wrap{ background:#161a20; box-shadow:0 8px 40px rgba(0,0,0,0.5); } }
@media (max-width:480px){ .wrap{ max-height:none; border-radius:0; } }

.hdr{ display:flex; align-items:center; gap:10px; padding:16px 18px; background:linear-gradient(135deg,#4f7cff,#7b5cff); color:#fff; flex:0 0 auto; }
.dot{ width:10px; height:10px; border-radius:50%; background:#37e07a; box-shadow:0 0 0 3px rgba(55,224,122,0.25); }
.hdr-title{ font-weight:600; font-size:15px; }
.hdr-sub{ font-size:12px; opacity:0.85; }

.log{ flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg{ max-width:78%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.4; white-space:pre-wrap; word-wrap:break-word; }
.msg.assistant{ align-self:flex-start; background:#eef1f6; color:#1c2230; border-bottom-left-radius:4px; }
.msg.visitor{ align-self:flex-end; background:#4f7cff; color:#fff; border-bottom-right-radius:4px; }
@media (prefers-color-scheme: dark){
  .msg.assistant{ background:#232a35; color:#e7ecf5; }
  .msg.visitor{ background:#5b7fff; }
}

.typing{ padding:0 18px 8px; display:flex; align-items:center; gap:6px; }
.typing[hidden]{ display:none; }
.typing-text{ font-size:12px; color:#8b93a3; font-style:italic; }
@media (prefers-color-scheme: dark){ .typing-text{ color:#7a8394; } }
.dots{ display:flex; gap:4px; }
.dots span{ width:6px; height:6px; border-radius:50%; background:#9aa4b5; animation:bounce 1.2s infinite ease-in-out; }
.dots span:nth-child(2){ animation-delay:0.15s; }
.dots span:nth-child(3){ animation-delay:0.3s; }
@keyframes bounce{ 0%,60%,100%{ transform:translateY(0); opacity:0.5; } 30%{ transform:translateY(-4px); opacity:1; } }

.composer{ display:flex; gap:8px; padding:12px; border-top:1px solid rgba(0,0,0,0.08); flex:0 0 auto; }
@media (prefers-color-scheme: dark){ .composer{ border-top-color:rgba(255,255,255,0.08); } }
.composer input{ flex:1; border:1px solid rgba(0,0,0,0.12); border-radius:20px; padding:10px 16px; font-size:14px; outline:none; background:#f7f8fa; color:inherit; }
@media (prefers-color-scheme: dark){ .composer input{ background:#0e1116; border-color:rgba(255,255,255,0.12); } }
.composer input:focus{ border-color:#4f7cff; }
.composer button{ width:40px; height:40px; border-radius:50%; border:none; background:#4f7cff; color:#fff; font-size:16px; cursor:pointer; flex:0 0 auto; }
.composer button:active{ transform:scale(0.94); }