.treeHeader,.nickHeader{
  padding:11px 12px 10px;
  font-weight:bold;
  font-size:13px;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)), linear-gradient(180deg,var(--header1),var(--header2));
  border-bottom:1px solid rgba(255,255,255,.3);
  text-shadow:0 1px 0 rgba(45,27,110,.45);
}
#tree,#nickList{ padding:8px 0; }
.treeItem{ padding:7px 12px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; color:var(--text); }
.treeItem.server{ font-weight:bold; }
.treeItem.child{ padding-left:22px; }
.treeItem:hover{ background:rgba(130,107,224,.10); }
.treeItem.active{ background:linear-gradient(180deg,#fff9c9,#efdb73); border-top:1px solid rgba(179,141,0,.28); border-bottom:1px solid rgba(179,141,0,.28); font-weight:bold; color:#5d4700; }
.treeItem.unread-pm{ animation:pmBlink .9s step-start infinite; background:linear-gradient(180deg,#fff7bf,#ffd56e); border-top:1px solid rgba(179,141,0,.45); border-bottom:1px solid rgba(179,141,0,.45); font-weight:bold; color:#6b2500; position:relative; }
.treeItem.unread-pm::after{ content:' • NEW'; color:#b10028; font-weight:800; }
.treeItem.unread-mention{ animation:mentionBlink .85s step-start infinite; background:linear-gradient(180deg,#ffe9ff,#ffc8ee); border-top:1px solid rgba(202,62,144,.45); border-bottom:1px solid rgba(202,62,144,.45); font-weight:bold; color:#7a1146; }
.treeItem.unread-mention::after{ content:' @'; color:#c01367; font-weight:900; }
@keyframes mentionBlink{
  0%,49%{ opacity:1; box-shadow:inset 0 0 0 999px rgba(255,200,238,.14),0 0 0 rgba(0,0,0,0);}
  50%,100%{ opacity:1; box-shadow:inset 0 0 0 999px rgba(255,119,190,.30),0 0 14px rgba(255,119,190,.30);}
}
@keyframes pmBlink{
  0%,49%{ opacity:1; box-shadow:inset 0 0 0 999px rgba(255,213,110,.18),0 0 0 rgba(0,0,0,0);}
  50%,100%{ opacity:1; box-shadow:inset 0 0 0 999px rgba(255,107,129,.34),0 0 14px rgba(255,107,129,.38);}
}
.chatHeader{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.10)), linear-gradient(180deg,#7a62d7,#624bbb);
  font-size:13px; color:#fff; font-weight:bold; position:relative; z-index:1; text-shadow:0 1px 0 rgba(45,27,110,.45);
}
.chatHeaderLeft,.chatHeaderActions{ display:flex; align-items:center; gap:8px; min-width:0; }
.chatHeaderTitle{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chatHeaderBtn{ height:28px; padding:0 10px; }
.channelToggleBtn{ display:none; height:28px; padding:0 10px; flex:0 0 auto; }
.mobileChannelBar{
  display:none; padding:8px 10px; gap:6px; overflow-x:auto; overflow-y:hidden; white-space:nowrap;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08)), linear-gradient(180deg,#8a74e3,#6b53c7);
  position:relative; z-index:1;
}
.mobileChannelChip{ display:inline-flex; align-items:center; justify-content:center; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.20); color:#fff; font-size:12px; font-weight:700; cursor:pointer; text-shadow:0 1px 0 rgba(45,27,110,.35); }
.mobileChannelChip.active{ background:linear-gradient(180deg,#fff9c9,#efdb73); border-color:rgba(179,141,0,.45); color:#5d4700; text-shadow:none; }
.chatView{
  min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px 14px 18px; font-family:var(--font-stack); font-size:14px; line-height:1.45; color:var(--text); white-space:pre-wrap; word-break:break-word; scroll-behavior:auto; position:relative; z-index:1;
}
.chatLine{ margin:0 0 8px; padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.45); border:1px solid rgba(207,196,255,.45); }
.chatMessage{ display:flex; align-items:flex-start; gap:10px; margin:0 0 10px; }
.chatAvatar{ width:64px; height:64px; border-radius:10px; border:1px solid #b8aae9; box-shadow:0 2px 6px rgba(40,26,101,.12); flex:0 0 64px; background:#fff; object-fit:cover; aspect-ratio:1/1; }
.chatBubble{ min-width:0; flex:1 1 auto; padding:8px 10px; border-radius:14px; border:1px solid #cabdf8; background:linear-gradient(180deg,var(--bubbleOther1),var(--bubbleOther2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.line-self .chatBubble{ background:linear-gradient(180deg,var(--bubbleSelf1),var(--bubbleSelf2)); border-color:#d7bb3e; }
.chatMeta{ display:flex; align-items:center; gap:6px; margin-bottom:3px; font-size:12px; line-height:1.2; }
.chatNick{ font-weight:700; color:#4d3798; }
.chatText{ font-size:14px; line-height:1.45; white-space:pre-wrap; word-break:break-word; color:var(--text); }
.chatText a{ color:#4d3798; font-weight:700; text-decoration:none; }
.chatText a:hover{ text-decoration:underline; }
.chatText .mentionTag{ display:inline-flex; align-items:center; padding:0 4px; border-radius:8px; background:rgba(110,84,199,.14); color:#4d3798; font-weight:700; }
.chatInlineImageWrap{ margin-top:8px; }
.chatInlineImage{ display:block; max-width:min(100%, 420px); width:auto; height:auto; border-radius:12px; border:1px solid #b8aae9; box-shadow:0 3px 10px rgba(40,26,101,.12); background:#fff; }
.chatInlineImageLink{ display:inline-block; }
.uploadingBadge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:linear-gradient(#fff8c8,#edd660); border:1px solid #d9bf3c; color:#6b5200; font-size:12px; font-weight:700; }
.prefixBadge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid rgba(130,107,224,.28); background:#fff; color:#5d4ea4; line-height:1; }
.prefix-op{ background:linear-gradient(#fff8c8,#edd660); color:#6b5200; border-color:#d9bf3c; }
.prefix-voice{ background:linear-gradient(#e6fbff,#bfefff); color:#0b5f80; border-color:#8fdaf5; }
.prefix-normal{ background:linear-gradient(#ffffff,#f0ebff); color:#65588d; }
.line-chat .chatNick{ color:#4d3798; }
.line-self .chatNick{ color:#5a4500; }
.line-topic{ color:#6d2ce0; font-weight:700; }
.line-notice{ color:#2b65c8; font-weight:700; }
.line-status{ color:#5d4ea4; font-weight:700; }
.line-join{ color:#188847; font-weight:700; }
.line-part{ color:#d1446e; font-weight:700; }
.line-error{ color:#d5193c; font-weight:700; }
.nickItem{ display:flex; align-items:center; gap:8px; padding:6px 10px; white-space:nowrap; overflow:hidden; border-bottom:1px solid rgba(156,141,226,.16); font-weight:bold; color:var(--text); }
.nickAvatar{ width:40px; height:40px; border-radius:10px; border:1px solid #b8aae9; background:#fff; flex:0 0 40px; object-fit:cover; aspect-ratio:1/1; }
.nickText{ display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; }
.nickName{ overflow:hidden; text-overflow:ellipsis; }
.mentionSuggestions{
  position:absolute; left:0; right:0; bottom:calc(100% + 6px); display:none; max-height:220px; overflow:auto;
  background:linear-gradient(180deg,#ffffff,#f3eeff); border:1px solid #b8aae9; border-radius:12px;
  box-shadow:0 10px 22px rgba(40,26,101,.18); z-index:8;
}
.mentionSuggestions.show{ display:block; }
.mentionSuggestionItem{ padding:8px 10px; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); }
.mentionSuggestionItem:hover,.mentionSuggestionItem.active{ background:linear-gradient(180deg,#fff9c9,#efdb73); color:#5d4700; }
.mentionSuggestionPrefix{ font-weight:700; color:#6b5aa6; }
#imageUploadInput{ display:none; }
.emojiPicker{
  position:absolute; left:0; bottom:calc(100% + 8px); display:grid; grid-template-columns:repeat(6, 1fr);
  gap:6px; width:min(320px, 100%); padding:10px; background:linear-gradient(180deg,#ffffff,#f3eeff);
  border:1px solid #b8aae9; border-radius:12px; box-shadow:0 10px 22px rgba(40,26,101,.18); z-index:9;
}
.emojiItem{
  height:38px; border:1px solid #cabdf8; border-radius:10px; background:linear-gradient(#fff,#f5f1ff);
  cursor:pointer; font-size:20px;
}
.embed-mode .toolbar{ padding:8px 10px; }
.embed-mode .main{ padding:8px; }

.emojiPicker[hidden]{ display:none !important; }