/* Community chat widget — self-contained. Dark, Stake-style. */
.cchat, .cchat-launch, .cchat * { box-sizing: border-box; }

/* ---- launcher: GOLD FAB (bottom-left) in a wrap, with a dock ✕ + collapsed edge tab ---- */
.cchat-fabwrap { position: fixed; left: 16px; bottom: 84px; z-index: 50; width: 54px; height: 54px; }
.cchat-fabwrap.is-gone { display: none; }
.cchat-launch {
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; position: relative;
  display: grid; place-items: center; color: #5a3d00;
  background: radial-gradient(circle at 32% 28%, #ffd968, #f2a100 82%);
  box-shadow: 0 8px 22px rgba(242,163,0,.5), inset 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .15s ease;
}
.cchat-launch:hover { transform: translateY(-2px); }
.cchat-launch__dot {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 10px; background: #ef4444; color: #fff; font: 700 10px/18px system-ui, sans-serif;
  text-align: center; box-shadow: 0 0 0 2px #0a0e13;
}
/* dock ✕ at the FAB's top-LEFT (clear of the top-right unread dot) */
.cchat-fab__x {
  position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: #10151c; color: #fff; border: 2px solid #0a0e13;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); cursor: pointer; z-index: 3;
}
.cchat-fab__x svg { width: 10px; height: 10px; display: block; }
.cchat-fab__x:active { transform: scale(.9); }
/* collapsed edge tab — gold sticker peeking from the LEFT edge; chevron pulls the FAB back out */
.cchat-tab {
  display: none; flex-direction: column; align-items: center; gap: 1px; position: fixed;
  left: 0; bottom: 92px; padding: 5px 4px 6px 4px; border: none; cursor: pointer; z-index: 50; color: #5a3d00;
  border-radius: 0 13px 13px 0; background: radial-gradient(circle at 70% 28%, #ffd968, #f2a100 86%);
  box-shadow: 3px 5px 15px rgba(0,0,0,.45); animation: cchatTabIn .28s ease both;
}
.cchat-tab.is-shown { display: inline-flex; }
.cchat-tab__chev { display: grid; place-items: center; transform: scaleX(-1); }   /* point OUT (right) from the left edge */
.cchat-tab__chev svg { width: 13px; height: 13px; display: block; }
.cchat-tab__ico { display: grid; place-items: center; }
.cchat-tab__dot { top: 1px; right: 1px; min-width: 8px; height: 8px; padding: 0; box-shadow: 0 0 0 2px #f2a100; font-size: 0; }
@keyframes cchatTabIn { from { transform: translateX(-70%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---- drawer ---- */
.cchat {
  position: fixed; top: 0; right: 0; z-index: 52;
  width: 372px; max-width: 100vw; height: 100%;
  display: flex; flex-direction: column;
  background: #0f1620; color: #d7deea;
  border-left: 1px solid #202a3a;
  box-shadow: -14px 0 40px rgba(0,0,0,.45);
  transform: translateX(105%); transition: transform .26s cubic-bezier(.2,.7,.2,1);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
.cchat.is-open { transform: translateX(0); }

.cchat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; border-bottom: 1px solid #1c2636; background: #121a26;
}
.cchat__title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cchat__title-main { font-weight: 800; font-size: 15px; color: #eef3fb; }
.cchat__online { font-size: 11.5px; color: #6ee7a8; font-weight: 600; white-space: nowrap; }
.cchat__online::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 6px #22c55e; }
.cchat__close { background: transparent; border: none; color: #7a8699; cursor: pointer; padding: 4px; border-radius: 8px; display: grid; place-items: center; }
.cchat__close:hover { background: #1c2636; color: #cfd8e3; }

.cchat__list {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 9px; scrollbar-width: thin; scrollbar-color: #2a3547 transparent;
}
.cchat__list::-webkit-scrollbar { width: 8px; }
.cchat__list::-webkit-scrollbar-thumb { background: #2a3547; border-radius: 8px; }

.cchat__row { font-size: 13.5px; line-height: 1.45; word-wrap: break-word; animation: cchatIn .22s ease backwards; }
@keyframes cchatIn { from { opacity: 0; transform: translateY(4px); } }
.cchat__badge { margin-right: 3px; font-size: 12px; }
/* VIP member tier chip (Smart/Pro/Elite) — sits just before the username */
.cchat__vip { display: inline-block; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1; padding: 2px 5px; border-radius: 5px; margin-right: 5px; vertical-align: middle; position: relative; top: -1px; }
.cchat__vip--smart { color: #08131f; background: #48b0ff; }
.cchat__vip--pro { color: #fff; background: linear-gradient(180deg, #b06bff, #8a3ff0); }
.cchat__vip--elite { color: #3a2900; background: linear-gradient(180deg, #ffde86, #f2a100); box-shadow: 0 0 6px rgba(242,163,0,.5); }
.cchat__name { font-weight: 700; color: #67c7ff; margin-right: 6px; }
.cchat__text { color: #b8c2d1; }
.cchat__mention { color: #8ab4ff; background: rgba(58,110,255,.14); border-radius: 5px; padding: 0 4px; font-weight: 600; }
.cchat__row--self .cchat__text { color: #e8eef8; }
.cchat__row--self { background: rgba(47,107,255,.08); border-left: 2px solid #2f6bff; margin: -2px -12px; padding: 2px 12px; }

/* emoji picker */
.cchat__emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px 10px; background: #121a26; border-top: 1px solid #1c2636; max-height: 184px; overflow-y: auto; scrollbar-width: thin; }
.cchat__emojis[hidden] { display: none; }   /* the class rule above overrides the UA [hidden]{display:none}, so restate it with higher specificity */
.cchat__emoji { background: transparent; border: none; font-size: 20px; cursor: pointer; padding: 5px 0; border-radius: 6px; line-height: 1; }
.cchat__emoji:hover { background: #1c2636; }
.cchat__emojibtn { background: transparent; border: none; font-size: 21px; cursor: pointer; padding: 0 2px; line-height: 1; align-self: center; transition: transform .12s ease; }
.cchat__emojibtn:hover { transform: scale(1.15); }

.cchat__foot { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid #1c2636; background: #121a26; align-items: center; }
.cchat__input {
  flex: 1; min-width: 0; background: #0c121b; border: 1px solid #22304a; color: #e6ecf5;
  border-radius: 10px; padding: 10px 12px; font-size: 13.5px; outline: none;
}
.cchat__input::placeholder { color: #5b6678; }
.cchat__input:focus { border-color: #2f6bff; }
.cchat__input:disabled { opacity: .6; cursor: not-allowed; }
.cchat__send {
  border: none; cursor: pointer; color: #fff; font-weight: 700; font-size: 13.5px; padding: 0 16px;
  border-radius: 10px; background: linear-gradient(150deg, #2f6bff, #1e50d6);
}
.cchat__send:hover { filter: brightness(1.08); }
.cchat__send:disabled { opacity: .5; cursor: not-allowed; }

/* ---- mobile: full-screen drawer; launcher above the bottom nav ---- */
@media (max-width: 640px) {
  .cchat { width: 100%; border-left: none; }
  .cchat-fabwrap { bottom: 78px; left: 14px; width: 50px; height: 50px; }
  .cchat-launch { width: 50px; height: 50px; }
  .cchat-tab { bottom: 86px; }
}