:root{--bg:#eef1f5;--panel:#fff;--line:#e2e6ec;--text:#1f2937;--muted:#6b7280;--accent:#7c3aed;--accent2:#a855f7;--bubble:#f0e7ff;--danger:#dc2626}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);height:100vh}button,input{font:inherit}.hidden{display:none!important}.app{height:100vh;display:flex}.sidebar{width:340px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}.side-head{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center}.brand b{display:block;font-size:18px}.brand small{display:block;color:var(--muted);font-size:11px}.brand.big{justify-content:center;margin-bottom:24px}.brand.big b{font-size:26px}.logo,.empty-logo{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));font-size:20px}.icon-btn{border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--muted)}.me{padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px}.me strong{display:block}.me span{color:#16a34a}.search{padding:12px}.search input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;outline:none;background:#f8fafc}.list{overflow:auto}.users{max-height:38vh}.item{display:flex;gap:11px;align-items:center;padding:12px 16px;cursor:pointer;border-bottom:1px solid #f3f4f6}.item:hover,.item.active{background:#f7f4ff}.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#ddd;display:grid;place-items:center;flex:none}.item-main{min-width:0;flex:1}.item-name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.badge{background:var(--accent);color:#fff;border-radius:10px;font-size:11px;padding:2px 7px}.users-title{font-size:11px;font-weight:700;color:var(--muted);padding:10px 16px 5px;text-transform:uppercase}.chat{flex:1;display:flex;flex-direction:column;min-width:0;background:#f7f8fa}.chat-head{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:12px}.chat-head .name{font-weight:700}.chat-head .status{font-size:12px;color:#16a34a}.messages{flex:1;overflow:auto;padding:22px 7%;display:flex;flex-direction:column;gap:6px}.msg-row{display:flex}.msg-row.mine{justify-content:flex-end}.bubble{max-width:min(70%,620px);padding:9px 12px;border-radius:14px;background:#fff;box-shadow:0 1px 2px #0000000b;white-space:pre-wrap;overflow-wrap:anywhere}.mine .bubble{background:var(--bubble)}.meta{font-size:10px;color:var(--muted);margin-top:4px;text-align:right}.attachment{display:block;max-width:340px;max-height:300px;border-radius:10px;margin-bottom:5px}.sticker{width:160px;height:160px;object-fit:contain}.preview{display:block;border:1px solid var(--line);border-radius:10px;padding:8px;margin-top:7px;color:inherit;text-decoration:none;background:#fafafa}.preview img{width:100%;max-height:160px;object-fit:cover;border-radius:7px}.preview small{color:var(--muted)}.composer{background:#fff;border-top:1px solid var(--line);padding:10px 14px;display:flex;gap:8px;align-items:end}.composer textarea{flex:1;resize:none;min-height:42px;max-height:130px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;outline:none}.composer button{height:42px;min-width:42px;border:0;border-radius:12px;cursor:pointer;background:#f1f3f6}.composer .send{background:var(--accent);color:#fff}.sticker-panel{position:absolute;bottom:72px;right:90px;width:360px;max-height:340px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 35px #0002;padding:12px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.sticker-panel button{border:0;background:#fafafa;border-radius:10px;padding:4px;cursor:pointer}.sticker-panel img,.sticker-panel video{width:48px;height:48px;object-fit:contain}.login-wrap{height:100vh;display:grid;place-items:center}.login-card{width:min(390px,92vw);background:#fff;padding:32px;border-radius:20px;box-shadow:0 18px 60px #0001}.login-card h1{margin:0 0 5px}.login-card label{display:block;font-size:13px;font-weight:600;margin:18px 0}.login-card input{display:block;width:100%;margin-top:7px;border:1px solid var(--line);padding:12px;border-radius:10px;outline:none}.primary{width:100%;padding:12px;border:0;border-radius:11px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}.muted{color:var(--muted);font-size:13px}.error{color:var(--danger);font-size:13px;margin-top:12px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 16px;border-radius:10px;display:none;z-index:20}.empty{margin:auto;text-align:center;color:var(--muted)}.empty-logo{margin:0 auto 14px}.date-sep{text-align:center;font-size:11px;color:var(--muted);margin:14px}.reply{border-left:3px solid var(--accent);padding-left:8px;color:var(--muted);font-size:12px;margin-bottom:5px}.call-history{font-size:12px;color:var(--muted);padding:8px 14px;border-top:1px solid var(--line);background:#fff}@media(max-width:800px){.sidebar{width:290px}.messages{padding:15px 3%}.bubble{max-width:85%}.sticker-panel{right:10px;width:calc(100vw - 20px)}}