:root{--msn-border:#c7d5ff;--shadow:0 6px 20px rgba(0,0,0,.12);--bg1:#e8f3ff;--bg2:#cfe1ff;--bg3:#b8d0ff;}
*{box-sizing:border-box}
body.bg{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(circle at 30% 0%,var(--bg1),var(--bg2) 45%,var(--bg3) 100%);min-height:100vh}
.msn-shell{max-width:1200px;margin:0 auto;padding:12px}
.msn-main{display:grid;grid-template-columns:320px 1fr;gap:12px}
.msn-side,.msn-chat{background:rgba(255,255,255,.78);border:1px solid var(--msn-border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.me-box{padding:12px;background:linear-gradient(180deg,#fff,#f2f6ff)}
.me-title{font-size:12px;opacity:.75}
.me-nick{font-size:20px;font-weight:900;margin-top:4px}
.users-box{padding:10px}
.users-title{font-size:12px;font-weight:900;opacity:.8;margin-bottom:8px}
.users-list{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto;padding-right:4px}
.msn-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid rgba(199,213,255,.8);background:rgba(244,247,255,.7);cursor:pointer}
.msn-user:hover{background:rgba(232,240,255,.95)}
.dot{width:10px;height:10px;border-radius:999px;background:#aaa}
.dot.on{background:#34c759}
.dot.off{background:#aab2c1}
.name{font-weight:900}
.tabs-bar{display:flex;gap:6px;flex-wrap:wrap;padding:8px;border-bottom:1px solid var(--msn-border);background:linear-gradient(180deg,#f7fbff,#e8f1ff)}
.msn-tab{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.8);cursor:pointer}
.msn-tab.active{background:linear-gradient(180deg,#fff,#eaf1ff);border-color:rgba(47,117,255,.35)}
.msn-tab-close{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:#678}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
.chat-title{font-size:16px;font-weight:1000}
.status-line{font-size:12px;opacity:.7;max-width:55%;text-align:right}
.chat-box{height:54vh;overflow:auto;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(245,248,255,.9));border-top:1px solid rgba(199,213,255,.65);border-bottom:1px solid rgba(199,213,255,.65)}
.msn-msg{margin:10px 0}
.msn-msg-meta{display:flex;justify-content:space-between;font-size:12px;opacity:.75;margin:0 6px 4px}
.msn-msg-who{font-weight:1000}
.msn-bubble{border:1px solid rgba(199,213,255,.9);border-radius:14px;background:rgba(244,247,255,.85);padding:10px 12px}
.bubble-text{white-space:pre-wrap;word-break:break-word}
.emote-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.emote-gif{width:28px;height:28px}
.prompt-wrap{position:sticky;bottom:0;position:relative;padding:10px 12px;background:linear-gradient(180deg,rgba(248,252,255,.95),rgba(234,243,255,.95));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.input-preview{min-height:0}
.prompt-row{display:flex;gap:10px;align-items:flex-end;margin-top:8px}
.emoji-btn,.send-btn{border:1px solid rgba(0,0,0,.15);background:linear-gradient(180deg,#fff,#eaf1ff);border-radius:14px;padding:10px 12px;cursor:pointer;font-weight:1000;flex:0 0 auto}
.chat-input{flex:1 1 auto;min-width:0;border:1px solid rgba(0,0,0,.15);border-radius:14px;padding:10px 12px;resize:none;font-size:14px;background:rgba(255,255,255,.95)}
.emoji-panel{display:none;position:absolute;left:12px;right:12px;bottom:calc(100% + 10px);z-index:50;padding:10px;border-radius:14px;border:1px solid rgba(199,213,255,.9);background:rgba(255,255,255,.96);max-height:240px;overflow:auto;grid-template-columns:repeat(10,1fr);gap:8px;box-shadow:0 10px 28px rgba(0,0,0,.16);}
.emoPickBtn{border:1px solid rgba(0,0,0,.08);background:rgba(244,247,255,.65);border-radius:12px;padding:6px;cursor:pointer}
.emoPickBtn:hover{background:rgba(232,240,255,.95)}
@media (max-width:980px){.msn-main{grid-template-columns:1fr}.users-list{max-height:220px}.chat-box{height:46vh}.emoji-panel{grid-template-columns:repeat(8,1fr)}}
@media (max-width:520px){.prompt-row{gap:8px}.emoji-btn{padding:10px 10px}.send-btn{padding:10px 12px;min-width:92px}.chat-input{font-size:16px}}