:root{
  --bg:#0b0f14;
  --card:rgba(16,20,26,.72);
  --card2:rgba(0,0,0,.18);
  --line:rgba(255,255,255,.08);
  --text:#e9eef6;
  --muted:rgba(233,238,246,.62);
  --gold:#d3b17a;
  --gold2:#caa35f;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --r:18px;
  --r2:14px;
  --font:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(211,177,122,.10), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(211,177,122,.06), transparent 55%),
              var(--bg);
  color:var(--text);
  overflow:hidden;
}

/* Backdrop */
.backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:35;
}
.backdrop.show{ display:block; }

/* Topbar */
.topbar{
  height:64px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.12));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand{ display:flex; align-items:center; gap:10px; }
.dot{
  width:10px; height:10px; border-radius:50%;
  background:#3ddc84;
  box-shadow:0 0 10px rgba(61,220,132,.25);
}
.dot.bad{ background:#ff4b4b; box-shadow:0 0 10px rgba(255,75,75,.25); }
.dot.ok{ background:#3ddc84; }
.dot.away{ background:#ffb347; box-shadow:0 0 10px rgba(255,179,71,.25); }
.dot.busy{ background:#ff5b57; box-shadow:0 0 10px rgba(255,91,87,.25); }
.dot.offline{ background:#98a0ad; box-shadow:none; }
.dot.listening{ background:#7db8ff; box-shadow:0 0 10px rgba(125,184,255,.25); }
.dot.live{ background:#ff4b4b; box-shadow:0 0 16px rgba(255,75,75,.45); }

.twrap{ display:flex; flex-direction:column; line-height:1.1; }
.title{ font-weight:900; letter-spacing:.2px; }
.sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.right{ display:flex; align-items:center; gap:10px; }
.nickWrap{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius:999px;
  padding:7px 10px;
}
.nickLbl{ font-size:12px; color:var(--muted); }
.nick{
  width:180px;
  background:transparent;
  border:0;
  outline:none;
  color:var(--text);
  font-weight:700;
}
@media (max-width:900px){
  .nickWrap{ display:none; }
}

/* Icons */
.iconBtn{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  position:relative;
}
.iconBtn:hover{ border-color: rgba(211,177,122,.35); }
.iconBtn svg{ width:20px; height:20px; fill: currentColor; opacity:.92; }
.iconBtn.small{ width:34px; height:34px; border-radius:12px; font-weight:900; }
.notifyBubble{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:2px solid rgba(7,11,18,.98);
  background:linear-gradient(135deg, #ff3b5f, #ffd75e);
  color:#07101b;
  font-size:11px;
  font-weight:1000;
  line-height:1;
  box-shadow:0 0 16px rgba(255,73,96,.42);
  pointer-events:none;
  z-index:5;
}
.iconBtn.hasNotify{
  border-color:rgba(255,215,94,.45);
  box-shadow:0 0 0 1px rgba(255,215,94,.12), 0 0 18px rgba(255,73,96,.16);
}

/* Layout */
.chatLayout{
  height: calc(100vh - 64px);
  display:flex;
  min-height:0;
}

.chatMain{
  position:relative;
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Messages */
.messages{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:14px 14px 6px;
}
.msgRow{
  display:flex;
  gap:10px;
  padding:10px 10px;
  border-radius:16px;
}
.msgRow.mine{
  background:rgba(93,169,255,.05);
  border:1px solid rgba(93,169,255,.10);
}
.msgRow.pendingSend{
  opacity:.72;
}
.msgRow.failedSend{
  border-color:rgba(255,82,82,.28);
  background:rgba(255,82,82,.06);
}
.msgRow:hover{ background: rgba(255,255,255,.03); }
.msgRow.imageOnly{
  padding:4px 8px;
  border-radius:0;
  background:transparent;
  border-color:transparent;
  gap:8px;
}
.msgRow.imageOnly.mine{
  background:transparent;
  border-color:transparent;
}
.msgRow.imageOnly:hover{
  background:rgba(255,255,255,.018);
}
.msgRow.imageOnly .avatar{
  width:36px;
  height:36px;
  font-size:14px;
}
.msgRow.imageOnly .meta{
  min-height:22px;
}
.msgRow.imageOnly .text{
  margin-top:0;
  line-height:1;
}
.msgRow.imageOnly .seenState{
  display:none;
}
.avatar{
  width:40px; height:40px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.75);
  font-weight:900;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.msgCol{ flex:1; min-width:0; }
.meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.nickLine{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
}
.nickName{
  display:inline-block;
  max-width:100%;
}
.nickProfile{
  border:0;
  background:transparent;
  padding:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
  text-align:left;
}
.nickProfile:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.time{ color:var(--muted); font-size:12px; white-space:nowrap; display:flex; align-items:center; gap:7px; }

.badge{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:rgba(255,255,255,.9);
}
.badge.live{
  border-color: rgba(255,82,82,.55);
  background: rgba(255,59,59,.08);
  color: #ff8d8d;
  box-shadow: 0 0 14px rgba(255,82,82,.18);
  gap: 5px;
}
.badge.live .livePulse{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5252;
  box-shadow: 0 0 0 0 rgba(255,82,82,.8);
  animation: livePulse 1.4s ease-out infinite;
}
@keyframes livePulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,82,82,.7); }
  70%{ box-shadow: 0 0 0 7px rgba(255,82,82,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,82,82,0); }
}
.badge.owner{ border-color: rgba(255,213,74,.35); color: #ffe27c; }
.badge.td{ border-color: rgba(255,213,74,.35); color: #ffe27c; }
.badge.bot{ border-color: rgba(211,177,122,.38); color:#d3b17a; }
.badge.private{ border-color: rgba(137,191,255,.35); color:#9dccff; }
.badge.vip{ border-color: rgba(61,220,132,.35); color:#9df7bd; }
.badge.regular{ border-color: rgba(137,191,255,.35); color:#a9d0ff; }
.liveNowBadge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(255,82,82,.45);
  color:#ffb3b3;
  font-size:10px;
  font-weight:1000;
}
.liveNowBadge i{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ff3b3b;
  box-shadow:0 0 10px rgba(255,59,59,.75);
  animation:livePulse 1.1s infinite ease-in-out;
}
@keyframes livePulse{
  0%,100%{ transform:scale(.85); opacity:.72; }
  50%{ transform:scale(1.18); opacity:1; }
}

.text{
  margin-top:4px;
  font-size: var(--font);
  line-height:1.35;
  word-wrap:break-word;
}
.replyQuote{
  margin:0 0 8px;
  padding:9px 11px;
  border-left:3px solid rgba(211,177,122,.85);
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.replyQuote.hasMedia{
  display:inline-flex;
  flex-direction:column;
  max-width:min(300px, 100%);
}
.rqNick{
  font-size:12px;
  font-weight:900;
  color:#f3d6a4;
  margin-bottom:2px;
}
.rqText{
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
.rqMedia{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.rqMedia img{
  width:42px;
  height:32px;
  object-fit:contain;
  border-radius:7px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  flex:0 0 auto;
}
.rqMedia span{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.seenState{
  margin-top:8px;
  font-size:11px;
  color:#89bfff;
  font-weight:700;
}
.seenState.pending{
  color:rgba(233,238,246,.45);
}
.seenState.failed{
  color:#ff8b8b;
}
.text .bot{ color: var(--gold); font-weight:800; }
.mention{
  color:#9dccff;
  font-weight:900;
  padding:0 2px;
  border-radius:5px;
  background:rgba(93,169,255,.08);
}
.mentionMine{
  color:#ffe27c;
  background:rgba(211,177,122,.18);
}
.shoutBtn{
  color:#ff8585;
  border-color:rgba(255,82,82,.28);
}
.shoutBtn[hidden],
[data-staff-only][hidden]{
  display:none !important;
}
.shoutBtn:not([hidden]){
  display:grid;
}
.chatNotice{
  width:max-content;
  max-width:min(620px, calc(100% - 30px));
  margin:8px auto;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.34);
  color:#f4f7ff;
  font-size:13px;
  font-weight:800;
}
.chatNotice.error{
  border-color:rgba(255,90,90,.28);
  color:#ffb9b9;
}
.chatNotice.ok{
  border-color:rgba(61,220,132,.28);
  color:#b9ffd7;
}
.quickShoutPanel{
  position:fixed;
  z-index:90;
  display:grid;
  gap:5px;
  min-width:210px;
  padding:7px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(15,18,24,.98);
  box-shadow:var(--shadow);
}
.quickShoutPanel button{
  min-height:36px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(0,0,0,.22);
  color:#fff;
  font-weight:900;
  text-align:left;
  cursor:pointer;
}
.quickShoutPanel button:hover{
  color:#ffe27c;
  border-color:rgba(211,177,122,.35);
}
.modMenuBtn{
  width:26px;
  height:22px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:rgba(233,238,246,.72);
  cursor:pointer;
  line-height:1;
}
.modMenuBtn:hover{ color:#fff; border-color:rgba(211,177,122,.35); }
.profileMiniCard,
.modMiniMenu{
  position:fixed;
  z-index:80;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(15,18,24,.98);
  box-shadow:var(--shadow);
}
.profileMiniCard{
  width:min(330px, calc(100vw - 20px));
  padding:13px;
  background:
    radial-gradient(circle at top left, rgba(255,216,106,.10), transparent 34%),
    linear-gradient(180deg, rgba(17,23,32,.98), rgba(8,11,17,.99));
}
.profileMiniTop{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.profileMiniTop img,
.profileMiniTop > span{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.07);
  display:grid;
  place-items:center;
  object-fit:cover;
  font-weight:900;
}
.profileMiniIdentity{
  min-width:0;
  display:grid;
  gap:4px;
}
.profileMiniName{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  flex-wrap:wrap;
}
.profileMiniTop b{
  display:block;
  font-size:15px;
  line-height:1.1;
}
.profileMiniStatusLine{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:11px;
  line-height:1.2;
}
.profileMiniChips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.profileMiniChip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:20px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(93,169,255,.10);
  border:1px solid rgba(93,169,255,.24);
  color:#d8ecff;
  font-size:10px;
  font-weight:900;
}
.profileMiniActions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
  margin-top:12px;
}
.profileMiniActions button,
.modMiniMenu button{
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(0,0,0,.22);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.profileMiniActions button{
  min-height:38px;
  padding:8px 10px;
  text-align:center;
}
.profileMiniActions button.danger{
  border-color:rgba(255,82,82,.45);
  color:#ff8b8b;
}
.modMiniMenu{
  min-width:150px;
  padding:6px;
  display:grid;
  gap:4px;
}
.modMiniMenu button{
  padding:9px 10px;
  text-align:left;
}
.profileMiniActions button:hover,
.modMiniMenu button:hover{
  border-color:rgba(211,177,122,.35);
  color:#ffe27c;
}

.profileMiniCard{
  width:min(316px, calc(100vw - 20px));
  padding:12px;
}
.profileMiniCard .badge.live{
  border-color:rgba(255,83,83,.55);
  color:#ff8080;
}
.profileMiniName b{
  color:#ff5f68;
  text-shadow:0 0 10px rgba(255,80,80,.42);
}
.profileMiniActions button{
  min-height:38px;
  border-radius:8px;
  font-size:14px;
}
.profileMiniActions button.danger{
  background:rgba(255,54,54,.07);
}
.youtubeCard{
  display:block;
  width:min(420px, 92vw);
  aspect-ratio:16/9;
  margin-top:6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.24);
  overflow:hidden;
}
.youtubeCard iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.hint{
  color:var(--muted);
  font-size:12px;
  margin-top:6px;
}
.themeGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.themeGrid button{
  min-height:38px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(0,0,0,.18);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.themeGrid button.active{
  color:#07101d;
  border-color:transparent;
  background:linear-gradient(135deg, #95cdf5, #f4d96f);
}
.themeCompact .msgRow{ padding:10px 12px; gap:8px; }
.themeCompact .avatar{ width:36px; height:36px; }
.themeCompact .text{ margin-top:2px; }
.themeNeon{
  --accent:#42f5d7;
  --gold:#ff4fd8;
}
.themeNeon .chatShell,
.themeNeon .msgRow{
  box-shadow:0 0 22px rgba(66,245,215,.08);
}
.themeQuiet{
  --accent:#7fb7dd;
  --gold:#d8c68a;
}
.themeQuiet .msgRow,
.themeQuiet .chatShell{
  background:rgba(11,15,20,.9);
}

.msgRow.mentionMe{
  border:1px solid rgba(211,177,122,.25);
  background: rgba(211,177,122,.06);
}

/* images in chat */
.imgCard{
  display:inline-block;
  margin-top:0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  max-width: min(420px, 92vw);
}
.imgCard img{ display:block; width:100%; height:auto; }
.imgCardSticker{
  width:auto;
  max-width:min(360px, 82vw);
  background:transparent;
}
.imgCardSticker img{
  width:auto;
  object-fit:contain;
}
.imgCardLiveDj{
  max-width:min(300px, 76vw);
  padding:0;
  border-color:transparent;
}
.imgCardLiveDj img{
  max-width:min(290px, 72vw);
  max-height:58px;
}
.imgCardTextBanner{
  max-width:min(250px, 66vw);
  padding:0;
  border-color:transparent;
  margin-top:0;
  vertical-align:middle;
}
.imgCardTextBanner img{
  max-width:min(245px, 64vw);
  max-height:32px;
}
.imgCardEmote{
  border-color:transparent;
  padding:0;
}
.imgCardEmote img{
  max-width:48px;
  max-height:48px;
}

/* Reply bar */
.replyBar{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:0 14px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background: rgba(0,0,0,.18);
}
.replyBar.show{ display:flex; }
.replyBar .t{ font-weight:900; }
.replyBar .p{
  color:var(--muted);
  font-size:12px;
  min-width:0;
  overflow:hidden;
  flex:1;
}
.replyBar .x{ margin-left:auto; }
.replyBarPreview{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  max-width:100%;
}
.replyBarPreview .rqNick{
  margin:0;
  flex:0 0 auto;
}
.replyBarPreview .rqText{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.replyBarPreview.hasMedia .rqMedia{
  min-width:0;
  max-width:100%;
}
.replyBarPreview.hasMedia .rqMedia img{
  width:36px;
  height:26px;
}

/* Composer */
.composer{
  padding:10px 12px;
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.30));
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.msg{
  flex:1;
  resize:none;
  max-height:120px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
.btn{
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color:var(--text);
  border-radius:14px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:900;
}
.btn:hover{ border-color: rgba(211,177,122,.35); }
.btn.ghost{
  padding:0;
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  line-height:1;
}
.composer .btn.ghost svg{
  width:20px;
  height:20px;
  display:block;
}
.composer .btn.ghost img,
.composer .btn.ghost span{
  max-width:22px;
  max-height:22px;
}
.btn.ghost.youtubeBtn{
  color:#ff5f5f;
  border-color:rgba(255,82,82,.22);
}
.btn.ghost.youtubeBtn:hover{
  border-color:rgba(255,82,82,.5);
  background:rgba(255,59,59,.08);
}
.btn.ghost.youtubeBtn svg{
  width:22px;
  height:22px;
  fill:currentColor;
}
.btn.send{
  background: linear-gradient(90deg, rgba(211,177,122,.35), rgba(211,177,122,.18));
  border-color: rgba(211,177,122,.35);
}

/* Emoji panel */
.emojiPanel{
  position:absolute;
  left:12px;
  right:12px;
  bottom:74px;
  width:auto;
  max-width:none;
  max-height:min(38vh, 330px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(17,21,27,.98);
  box-shadow: var(--shadow);
  padding:12px;
  display:none;
  z-index:50;
}
.emojiPanel.show{ display:block; }
.emojiPanel.is-wide{ max-height:min(34vh, 310px); }
.emojiTabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.09);
  overflow:auto;
  scrollbar-width:thin;
}
.emojiTabs.is-hidden{ display:none; }
.emojiTab{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color:var(--text);
  border-radius:7px;
  padding:8px 12px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:34px;
}
.emojiTab.active{
    border-color: rgba(211,177,122,.45);
    background: rgba(211,177,122,.12);
    color:#f6deb3;
  }
.emojiTabIcon{
  font-size:18px;
  line-height:1;
}
.emojiTabLabel{
  display:none;
}
.emojiGrid{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding-bottom:44px;
}
.emojiGridCompact{ gap:7px; }
.emojiBtn{
  border:1px solid rgba(255,255,255,.06);
  background: transparent;
  border-radius:8px;
  width:34px;
  height:34px;
  padding:0;
  cursor:pointer;
  font-size:24px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.emojiBtn:hover{
  border-color: rgba(211,177,122,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.12));
  transform: translateY(-1px);
}
.pickerModes{
  position:sticky;
  left:0;
  bottom:0;
  display:flex;
  gap:5px;
  padding-top:10px;
  background:linear-gradient(180deg, rgba(17,21,27,0), rgba(17,21,27,.98) 35%);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.pickerMode{
  width:48px;
  min-width:48px;
  height:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  background:#050607;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
  font-size:15px;
}
.pickerMode:first-child,
.pickerMode:nth-child(2){ font-size:19px; }
.pickerIconAemo{
  width:24px;
  height:24px;
  display:block;
  background:center/contain no-repeat url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDguNSA4LjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuMiAxLjFjLTEuOC0xZS03LTMuMiAxLjQtMy4yIDMuMi0uMDAzOSAxLjggMS40IDMuMiAzLjIgMy4yIDEuOCAwIDMuMi0xLjQgMy4yLTMuMi4wMDIyLTEuOC0xLjQtMy4yLTMuMi0zLjJ6bS42NiAxLjJjLjM4IDAgLjcuMzcuNy44My0uMDAxOC40Ni0uMzEuODItLjY5LjgzLS4zOCAwLS43LS4zNy0uNy0uODMtMS42ZS02LS40Ni4zMS0uODMuNjktLjgzem0tMi4yLjE5Yy4zOC0xLjNlLTYuNy4zNy43LjgzIDMuNmUtNi40Ni0uMzEuODMtLjY5LjgzLS4zOCAwLS43LS4zNy0uNy0uODMgMC0uNDYuMzEtLjgzLjctLjgzem0tLjEzIDIuMWMuMDIgMCAuMDQ0LjAwMy4wNy4wMjMuOC42NiAxLjcuNjYgMi41IDAgLjEtLjA4LjE4LjA1Ni4xMS4xOC0uMjUuNDctLjczLjktMS40LjktLjYyIDAtMS4xLS40My0xLjQtLjktLjA1LS4wOTUtLjAxOC0uMi4wNDMtLjJ6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTYuNCA4LjItLjQ1LTEuMi40My0xLjItMS4yLjQ1LTEuMi0uNDMuNDUgMS4yLS40MyAxLjIgMS4yLS40NXoiIGZpbGw9IiNmMmJjMmUiIHN0cm9rZS13aWR0aD0iLjQxIi8+PHBhdGggZD0ibTYuMyAzLjYuMzMuODctLjMyLjg3Ljg3LS4zMy44Ny4zMi0uMzMtLjg3LjMyLS44Ny0uODcuMzN6IiBmaWxsPSIjZWZiYjJlIiBzdHJva2Utd2lkdGg9Ii40MSIvPjwvc3ZnPg0K");
}
.pickerMode:nth-child(3),
.pickerMode:nth-child(4),
.pickerMode:nth-child(5){ width:94px; min-width:94px; }
.pickerMode.active{ background:#a91145; border-color:#c92661; }
.pickerMode[data-picker-mode="live"].active{ background:#a91145; border-color:#c92661; }
.pickerMode[data-picker-mode="text"].active{ background:#3d947d; border-color:#61b59f; }
.gifPickerGrid{ display:block; }
.tenorSearch{
  display:flex;
  justify-content:center;
  gap:0;
  margin:0 auto 14px;
  max-width:min(460px, 100%);
}
.tenorSearch .input{
  width:min(380px, 70vw);
  border-radius:6px 0 0 6px;
  background:#050607;
}
.tenorSearch .btn{
  border-radius:0 6px 6px 0;
  min-width:80px;
}
.gifStrip{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:8px;
  min-height:76px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.pickerHint{
  color:var(--muted);
  font-weight:800;
  padding:10px 2px;
}
.tenorChip{
  flex:0 0 auto;
  height:36px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:#050607;
  color:#fff;
  font-weight:900;
  padding:0 14px;
  cursor:pointer;
}
.tenorChip:hover{ border-color:rgba(211,177,122,.35); }
.gifTile{
  width:96px;
  height:58px;
  flex:0 0 auto;
  padding:0;
  border:2px solid rgba(255,255,255,.82);
  background:#111;
  cursor:pointer;
}
.gifTile img{ width:100%; height:100%; object-fit:cover; display:block; }
.emoteAsset{
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  background:transparent;
  padding:1px;
  cursor:pointer;
}
.emoteAsset img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.liveDjStrip{
  display:flex;
  gap:20px;
  align-items:center;
  overflow:auto;
  flex-wrap:nowrap;
  min-height:88px;
  padding:6px 2px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.liveDjImageSticker{
  flex:0 0 auto;
  max-width:190px;
  min-width:96px;
  min-height:44px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.liveDjImageSticker img{
  max-width:190px;
  max-height:58px;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
  animation:liveStickerFloat 1.35s ease-in-out infinite;
  filter:drop-shadow(0 0 7px rgba(255,209,31,.45));
}
@keyframes liveStickerFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-2px) scale(1.025); }
}
.liveDjSticker{
  flex:0 0 auto;
  max-width:180px;
  border:0;
  background:transparent;
  color:#ffd11f;
  font-weight:1000;
  font-size:18px;
  line-height:.9;
  text-shadow:2px 2px 0 #5d3200, 0 0 8px rgba(255,209,31,.55);
  cursor:pointer;
}
.textBannerGrid{
  gap:10px 18px;
  align-items:center;
}
.textBannerAsset{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.textBannerAsset img{
  max-width:min(255px, 74vw);
  max-height:42px;
  object-fit:contain;
  display:block;
}
.textBanner{
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:1000;
  font-size:22px;
  line-height:1;
  text-shadow:2px 2px 0 #000, 0 0 8px currentColor;
}
.textBanner0{ color:#ff7b2e; }
.textBanner1{ color:#ffdd44; background:rgba(108,32,0,.7); padding:8px 10px; }
.textBanner2{ color:#fff; -webkit-text-stroke:1px #f44; }
.textBanner3{ color:#ff5aa8; font-size:32px; }
.textBanner4{ color:#3ed6ff; font-style:italic; }
.textBanner5{ color:#70ff58; }

/* INTERNAL USERLIST (desktop) */
.sideUsers{
  width:320px;
  max-width:38vw;
  border-left:1px solid var(--line);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition: width .18s ease, opacity .18s ease;
}
.sideHead{
  padding:12px 12px 10px;
  border-bottom:1px solid var(--line);
}
.sideHead .ttl{ font-weight:900; }

.userlist{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:8px;
}
.user{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 8px;
  border-radius:12px;
  border:1px solid transparent;
}
.user:hover{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
  cursor:pointer;
}
.user .l{ display:flex; align-items:center; gap:8px; min-width:0; width:100%; }
.userMeta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}
.user .pip{
  width:10px; height:10px;
  border-radius:50%;
  background:#3ddc84;
  box-shadow:0 0 10px rgba(61,220,132,.18);
  flex:0 0 auto;
}
.user .name{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  min-width:0;
  overflow:hidden;
  flex-wrap:wrap;
  line-height:1.05;
}
.user .name .nickName{
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height:1.08;
}
.userStatusLine{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:var(--muted);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.userStateDot{
  width:9px;
  height:9px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
}
.userStateDot.green{ background:#3ddc84; box-shadow:0 0 10px rgba(61,220,132,.2); }
.userStateDot.orange{ background:#ffb347; box-shadow:0 0 10px rgba(255,179,71,.2); }
.userStateDot.red{ background:#ff5b57; box-shadow:0 0 10px rgba(255,91,87,.2); }
.userStateDot.gray{ background:#98a0ad; }
.userStateIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
}
.user .r{
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
  padding-left:8px;
  align-self:flex-start;
}

.userAvatar{
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:14px;
}
.userAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.privateChatWindow{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  width:min(360px, calc(100vw - 28px));
  border:1px solid rgba(88,164,255,.22);
  border-radius:16px;
  overflow:hidden;
  background:rgba(11,15,22,.97);
  box-shadow:0 18px 70px rgba(0,0,0,.45);
}
.privateChatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.privateChatHead span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.privateChatHead strong{ color:#ffe18c; }
.privateChatActions{ display:flex; gap:6px; }
.privateChatActions button{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.privateChatBody{ padding:12px; display:grid; gap:8px; }
.privateChatMessages{
  min-height:150px;
  max-height:260px;
  overflow:auto;
  display:grid;
  gap:8px;
  align-content:start;
  padding-right:2px;
}
.privateChatHint{ color:var(--muted); font-size:12px; line-height:1.35; }
.privateBubble{
  width:fit-content;
  max-width:88%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.055);
  color:var(--text);
  font-size:13px;
  line-height:1.35;
}
.privateBubble.out{
  justify-self:end;
  border-color:rgba(211,177,122,.25);
  background:rgba(211,177,122,.12);
}
.privateBubble.in{
  justify-self:start;
  border-color:rgba(88,164,255,.24);
  background:rgba(88,164,255,.10);
}
.privateBubble small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
.privateChatInput{
  width:100%;
  resize:vertical;
  min-height:42px;
  max-height:110px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.32);
  color:var(--text);
  padding:10px;
  font:inherit;
}
.privateChatFoot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:8px;
  padding:0 12px 12px;
}
.privateChatWindow.has-new{
  border-color:rgba(255,216,106,.45);
  box-shadow:0 18px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,216,106,.16);
}
.privateChatWindow.is-minimized .privateChatBody,
.privateChatWindow.is-minimized .privateChatFoot{ display:none; }

.privateInboxList{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.privateInboxItem{
  width:100%;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.privateInboxItem:hover,
.privateInboxItem.has-unread{
  border-color:rgba(211,177,122,.34);
  background:rgba(211,177,122,.08);
}
.privateInboxAvatar{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  font-weight:1000;
}
.privateInboxMeta{
  min-width:0;
  display:grid;
  gap:2px;
}
.privateInboxMeta strong{
  color:#ffe18c;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.privateInboxMeta small{
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.privateInboxTime{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

body.usersCollapsed .sideUsers{
  width:0;
  opacity:0;
  border-left-color: transparent;
}

/* DRAWERS (Profile/Media/Settings) */
.drawer{
  position:fixed;
  top:76px;
  right:14px;
  bottom:96px;
  width:min(420px, 92vw);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background: rgba(15,18,24,.98);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:none;
  z-index:45;
}
.drawer.open{ display:flex; flex-direction:column; }
.drawerTop{
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drawerTitle{ font-weight:900; }
.drawerBody{
  padding:12px;
  overflow:auto;
  min-height:0;
}

.block{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
  margin-bottom:12px;
}
.label{
  font-weight:900;
  margin-bottom:10px;
  color:rgba(255,255,255,.92);
}
.seg{ display:flex; gap:8px; flex-wrap:wrap; }
.segBtn{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.segBtn.active{ border-color: rgba(211,177,122,.35); color: var(--gold); }

.avatarRow{ display:flex; gap:12px; align-items:center; }
.avatarBig{
  width:84px; height:84px; border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  display:grid;
  place-items:center;
  font-weight:900;
}
.avatarBig img{ width:100%; height:100%; object-fit:cover; display:block; }
.colorRow{ display:flex; gap:12px; align-items:center; }
.colorInput{
  width:64px;
  height:44px;
  padding:4px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:12px;
}
.colorRow .hint{
  margin-top:0;
  line-height:1.35;
}

.statusList{ display:flex; flex-direction:column; gap:8px; }
.statusItem{
  display:flex; align-items:center; gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
}
.statusItem.active{ border-color: rgba(211,177,122,.35); color: var(--gold); }
.statusItem .pip{
  width:11px;
  height:11px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  box-shadow:0 0 10px rgba(255,255,255,.12);
}
.pip.green{ background:#3ddc84; }
.pip.gray{ background:#7a8a9b; }
.pip.yellow{ background:#f4c542; }
.pip.red{ background:#ff4b4b; }
.pip.purple{ background:#a56bff; }
.pip.orange{ background:#ffb347; }
.pip.radio,
.pip.mic{
  width:auto;
  height:auto;
  background:transparent;
  font-size:14px;
  line-height:1;
  box-shadow:none;
}
.pip.radio::before{ content:"📻"; }
.pip.mic::before{ content:"🎙️"; }
.msgRow.privateRow{
  background:rgba(137,191,255,.055);
  border:1px solid rgba(137,191,255,.14);
}

.statusText{
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}

.chk{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:rgba(255,255,255,.88);
}
.chk input{ transform: scale(1.15); }
.input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
  margin:8px 0;
}

/* Media */
.mediaToolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.toolBtn{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  cursor:pointer;
}
.toolBtn:hover{ border-color: rgba(211,177,122,.35); }

.tabs{ display:flex; gap:8px; margin-bottom:10px; }
.tab{
  flex:1;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  font-weight:900;
}
.tab.active{ border-color: rgba(211,177,122,.35); color: var(--gold); }

.tabPanel{ display:none; }
.tabPanel.active{ display:block; }

.mediaList{ display:flex; flex-direction:column; gap:8px; }
.mediaEmpty{
  border:1px dashed rgba(255,255,255,.12);
  border-radius:12px;
  padding:14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.mediaItem{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.mediaItem .left{ display:flex; align-items:center; gap:10px; min-width:0; }
.mediaThumb{
  width:34px; height:34px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.mediaThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mediaName{
  font-weight:800;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.mediaItem button{
  border:1px solid rgba(211,177,122,.35);
  border-radius:10px;
  background:rgba(211,177,122,.10);
  color:var(--gold);
  font-weight:900;
  padding:7px 10px;
  cursor:pointer;
}
.mediaItem button:hover{ background:rgba(211,177,122,.18); color:#fff; }

#drawCanvas{
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:#0f141c;
}
.drawActions{
  display:flex; gap:10px; margin-top:10px;
}

/* Mobile tweaks */
@media (max-width:900px){
  .chatLayout{ height: calc(100vh - 64px); }
  .emojiPanel{
    right:10px;
    left:10px;
    bottom:78px;
    width:auto;
    max-width:none;
  }
  .emojiGrid{
    display:flex;
  }
  .emojiTabs{
    display:flex;
    gap:7px;
    margin-bottom:12px;
    padding-bottom:10px;
  }
  .emojiTabs.is-hidden{ display:none; }
  .emojiTab{
    min-height:40px;
    padding:8px 10px;
  }
  .pickerModes{ overflow:auto; }
  .pickerMode{ width:48px; min-width:48px; flex:0 0 auto; }
  .pickerMode:nth-child(3),
  .pickerMode:nth-child(4),
  .pickerMode:nth-child(5){ width:82px; min-width:82px; }
  .sideUsers{
    position:fixed;
    right:12px;
    top:76px;
    bottom:96px;
    width:min(330px,90vw);
    border-radius:18px;
    box-shadow: var(--shadow);
    transform: translateX(calc(100% + 16px));
    opacity:0;
    transition: transform .2s ease, opacity .2s ease;
    z-index:45;
  }
  body.usersOpen .sideUsers{
    transform: translateX(0);
    opacity:1;
  }
  body.usersCollapsed .sideUsers{ width:min(360px,92vw); opacity:1; border-left:1px solid rgba(255,255,255,.10); }
  .user{
    align-items:flex-start;
    padding:10px 9px;
  }
  .user .l{
    align-items:flex-start;
  }
  .userMeta{
    width:100%;
  }
  .user .name{
    display:grid;
    gap:3px;
    align-items:flex-start;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    font-size:15px;
    line-height:1.2;
    overflow-wrap:anywhere;
  }
  .user .name .nickName{
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.18;
    word-break:break-word;
  }
  .user .r{
    white-space:nowrap;
    padding-top:2px;
    font-size:10px;
    display:none;
  }
  .userStatusLine{
    font-size:11px;
    line-height:1.25;
  }
}

/* Mobile polish 2026-04-27 */
@media (max-width:640px){
  html,
  body{
    max-width:100%;
    overflow:hidden;
  }

  .topbar{
    height:auto;
    min-height:58px;
    padding:7px 8px;
    gap:6px;
  }

  .brand{
    min-width:0;
    flex:1 1 auto;
    gap:7px;
  }

  .twrap{
    min-width:0;
  }

  .title{
    font-size:.96rem;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .sub{
    max-width:43vw;
    font-size:10.5px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .right{
    flex:0 0 auto;
    gap:5px;
  }

  .iconBtn{
    width:36px;
    height:36px;
    border-radius:12px;
  }

  .chatLayout{
    height:calc(100vh - 58px);
  }

  .messages{
    padding:10px 8px 6px;
  }

  .msgRow{
    gap:8px;
    padding:9px 7px;
    border-radius:14px;
  }

  .avatar{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .meta{
    align-items:flex-start;
    gap:6px;
  }

  .nickLine{
    flex-wrap:wrap;
    gap:5px;
  }

  .time{
    font-size:11px;
  }

  .text{
    font-size:16px;
    line-height:1.32;
  }

  .composer{
    padding:8px;
    gap:7px;
    align-items:center;
  }

  .composer .btn.ghost,
  .composer .btn.send{
    min-width:44px;
    height:44px;
    padding:0 10px;
    border-radius:14px;
  }

  .composer .btn.send{
    min-width:96px;
    font-size:.95rem;
  }

  .msg{
    min-height:44px;
    max-height:88px;
    padding:9px 10px;
    border-radius:14px;
  }

  .sideUsers{
    right:8px;
    left:8px;
    width:auto;
    max-width:none;
  }

  .drawer{
    top:64px;
    right:8px;
    left:8px;
    bottom:76px;
    width:auto;
  }
}

@media (max-width:390px){
  .sub{
    max-width:40vw;
  }

  .iconBtn{
    width:34px;
    height:34px;
  }

  .composer .btn.send{
    min-width:84px;
    font-size:.9rem;
  }
}