:root{--bg: #1e1e2f;--panel: #2a2a3d;--muted: #94a3b8;--accent: #4f46e5;--bubble-user: #2b6cb0;--bubble-ai: #2f343a}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial;background:var(--bg);color:#e6eef8}body{display:flex;flex-direction:column}#app{flex:1;display:flex;flex-direction:column;height:100%}@media (min-width: 880px){#app{flex-direction:row}}aside#contacts{width:100%;background:var(--panel);border-bottom:1px solid rgba(255,255,255,.04);padding:12px}@media (min-width: 880px){aside#contacts{width:320px;border-right:1px solid rgba(255,255,255,.04);border-bottom:none;flex-shrink:0}}.brand h1{margin:0 0 8px;font-size:18px;color:#fff;text-align:center}.login-box{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.login-box input{padding:10px;border-radius:6px;border:none;outline:none}.login-box button{background:var(--accent);color:#fff;padding:10px;border-radius:6px;border:none;cursor:pointer}.hint{font-size:12px;color:var(--muted)}.contact-list{margin-top:8px;overflow-y:auto;padding-bottom:12px}.contact{display:flex;gap:12px;padding:10px;border-radius:8px;align-items:center;cursor:pointer;transition:background .15s}.contact:hover{background:rgba(255,255,255,.02)}.contact.active{background:rgba(79,70,229,.18)}.contact .avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px;border:1px solid rgba(255,255,255,.06)}.contact .meta{flex:1}.contact .name{font-weight:600;color:#fff}.contact .sub{font-size:12px;color:var(--muted)}main#chatPanel{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}#chatHeader{height:72px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.03);justify-content:space-between}.chat-info{display:flex;gap:12px;align-items:center}.avatar-lg{width:48px;height:48px;border-radius:50%}.chat-name{font-weight:700;font-size:16px;color:#fff}.chat-sub{font-size:12px;color:var(--muted)}.chat-box{flex:1 1 auto;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,.01),transparent);-webkit-overflow-scrolling:touch}.msg{max-width:90%;padding:10px 14px;border-radius:14px;line-height:1.4;word-wrap:break-word;box-shadow:0 1px #00000040}.msg.user{align-self:flex-end;background:linear-gradient(90deg,var(--bubble-user),#2b4f8d);color:#fff;border-bottom-right-radius:6px}.msg.ai{align-self:flex-start;background:var(--bubble-ai);color:#e6eef8;border-bottom-left-radius:6px}.msg .time{font-size:12px;color:#999;margin-top:4px}.input-area{display:flex;gap:8px;padding:12px;background:var(--panel);border-top:1px solid rgba(255,255,255,.03);position:sticky;bottom:0}.input-area input{flex:1;padding:10px;font-size:16px;border-radius:6px;border:none;outline:none}.input-area button{background:var(--accent);color:#fff;padding:10px 16px;font-size:16px;border-radius:6px;border:none;cursor:pointer}@media (max-width: 879px){#contacts{display:none}body.collapsed-contacts #contacts{display:block;position:absolute;left:0;top:0;width:80%;max-width:300px;height:100%;z-index:100;background:var(--panel);overflow-y:auto;border-right:1px solid rgba(255,255,255,.06)}#chatPanel{width:100%;height:100%}.toggle-btn{background:none;border:none;font-size:24px;color:#fff;cursor:pointer;margin-left:auto}}