*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0d0d12;--panel:#16161f;--panel2:#1e1e2b;--border:rgba(255,255,255,.06);
--accent:#8b5cf6;--accent2:#a78bfa;--text:#e8e8f0;--muted:#8a8aa0}
body{background:radial-gradient(1200px 600px at 20% 0%,#1b1030 0%,var(--bg) 60%);
color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;
display:flex;align-items:center;justify-content:center;padding:16px}
.app{width:100%;max-width:1100px;height:88vh;display:grid;grid-template-columns:340px 1fr;gap:16px}
.player{background:linear-gradient(180deg,var(--panel),#12121a);border-radius:22px;
padding:22px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--border);
box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cover-wrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(139,92,246,.25)}
.cover{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#1a1a22;transition:opacity .4s}
.live-badge{position:absolute;top:10px;left:10px;background:#e11d48;color:#fff;font-size:11px;
font-weight:700;padding:4px 8px;border-radius:6px;letter-spacing:1px;display:none}
.live-badge.on{display:block;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.track-info{display:flex;flex-direction:column;gap:4px;min-height:64px}
.track-title{font-size:16px;font-weight:700;line-height:1.3;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.track-artist{font-size:13px;color:var(--accent2);font-weight:600}
.track-album{font-size:12px;color:var(--muted);font-style:italic;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.play-btn{width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;
align-items:center;justify-content:center;align-self:center;
box-shadow:0 8px 24px rgba(139,92,246,.45);transition:transform .15s,box-shadow .2s}
.play-btn:hover{transform:scale(1.06);box-shadow:0 10px 30px rgba(139,92,246,.6)}
.play-btn:active{transform:scale(.95)}
.listeners{text-align:center;font-size:12px;color:var(--muted);display:flex;
justify-content:center;gap:6px;align-items:center}
.chat{background:var(--panel);border-radius:22px;border:1px solid var(--border);
display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;
border-bottom:1px solid var(--border);background:var(--panel2)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.dot{width:9px;height:9px;border-radius:50%;background:#22c55e;
box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulse 1.6s infinite}
.me{font-size:12px;color:var(--muted);cursor:pointer}
.me:hover{color:var(--accent2)}
.messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.messages::-webkit-scrollbar{width:6px}
.messages::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:3px}
.msg{max-width:78%;padding:9px 14px;border-radius:16px;font-size:14px;line-height:1.4;
word-break:break-word;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.own{align-self:flex-end;background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#fff;border-bottom-right-radius:5px}
.msg.other{align-self:flex-start;background:var(--panel2);border-bottom-left-radius:5px}
.msg .who{font-size:11px;font-weight:700;color:var(--accent2);margin-bottom:3px}
.msg.own .who{color:rgba(255,255,255,.85)}
.msg .time{font-size:10px;opacity:.55;margin-top:4px;text-align:right}
.emoji-bar{display:flex;gap:6px;padding:8px 16px;overflow-x:auto;
border-top:1px solid var(--border);background:var(--panel2)}
.emoji-bar::-webkit-scrollbar{display:none}
.emoji-bar span{font-size:20px;cursor:pointer;user-select:none;transition:transform .15s}
.emoji-bar span:hover{transform:scale(1.35)}
.composer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
#input{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:12px;
padding:11px 14px;color:var(--text);font-size:14px;outline:none;transition:border .2s}
#input:focus{border-color:var(--accent)}
#send{width:46px;border:none;border-radius:12px;cursor:pointer;color:#fff;font-size:17px;
background:linear-gradient(135deg,var(--accent),var(--accent2));transition:transform .15s,opacity .2s}
#send:hover{opacity:.88}
#send:active{transform:scale(.93)}
@media(max-width:820px){.app{grid-template-columns:1fr;height:auto;grid-template-rows:auto 1fr}
.player{padding:16px}.cover{aspect-ratio:16/9}}