html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:transparent;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f8fb}
*{box-sizing:border-box}.hidden{display:none!important}
.chat-shell{width:100%;height:100%;padding:8px;display:flex;flex-direction:column}
.chat-header{height:44px;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid rgba(255,255,255,.10);border-bottom:0;border-radius:16px 16px 0 0;background:rgba(7,10,17,.94);font-size:11px;letter-spacing:.10em;box-shadow:0 12px 30px rgba(0,0,0,.20)}
.chat-header #chatStatus{margin-left:auto;color:#737b89;font-size:8px;font-weight:850;letter-spacing:.08em}.live-dot{width:7px;height:7px;border-radius:50%;background:#ff2449;box-shadow:0 0 14px rgba(255,36,73,.8)}
.messages-wrap{position:relative;min-height:0;flex:1;border:1px solid rgba(255,255,255,.10);border-radius:0 0 16px 16px;overflow:hidden;background:linear-gradient(180deg,rgba(8,11,18,.92),rgba(5,8,14,.88));box-shadow:0 18px 50px rgba(0,0,0,.28);backdrop-filter:blur(14px)}
.chat-messages{width:100%;height:100%;overflow-y:hidden;padding:12px 10px 16px;display:flex;flex-direction:column;justify-content:flex-end}
.chat-message{display:flex;gap:9px;align-items:flex-start;padding:7px 6px;border-radius:11px}.chat-message.new{animation:messageIn .38s cubic-bezier(.2,.8,.2,1) both}.chat-message.superchat{margin:3px 0;background:linear-gradient(90deg,rgba(255,185,40,.10),rgba(255,185,40,.025));border:1px solid rgba(255,185,40,.16)}
.chat-avatar{width:30px;height:30px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#30394a,#1e2430);color:#dce2ec;font-size:10px;font-weight:850;box-shadow:0 2px 10px rgba(0,0,0,.20)}.chat-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.chat-content{min-width:0;flex:1}.chat-meta{display:flex;align-items:center;gap:5px;min-width:0}.chat-meta strong{max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f3f5f9;font-size:10px;text-shadow:0 1px 4px rgba(0,0,0,.3)}.chat-content p{margin:2px 0 0;color:#d2d7df;font-size:11px;line-height:1.35;overflow-wrap:anywhere;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.role-badge{padding:2px 4px;border-radius:4px;font-size:6px;font-weight:900;letter-spacing:.06em}.role-badge.owner{background:rgba(255,36,73,.17);color:#ff7c92}.role-badge.mod{background:rgba(65,146,255,.17);color:#86bdff}.role-badge.member{background:rgba(62,229,161,.16);color:#6cecb6}.super-amount{margin-left:auto;color:#ffd46a;font-size:8px;font-weight:850}
.chat-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;padding:22px;color:#69717e}.chat-empty strong{color:#aeb5c0;font-size:11px}.chat-empty span{margin-top:5px;max-width:250px;font-size:9px;line-height:1.4}
@keyframes messageIn{0%{opacity:0;transform:translateX(-10px) scale(.98);filter:brightness(1.4)}100%{opacity:1;transform:translateX(0) scale(1);filter:brightness(1)}}