/* ------------------------------------------------------------------ */
/* DMALL public chat — ported from vibecheckbot. Desktop: docked panel  */
/* on the right; mobile: full-screen sheet. Newest message at the bottom.*/
/* ------------------------------------------------------------------ */

/* Topbar button (sits before the balance pill), with an unread dot. */
.dm-chat-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--stroke-2, rgba(255, 255, 255, .13));
  border-radius: 8px;
  color: var(--text, #e9edf5);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
}
.dm-chat-btn:hover { background: rgba(255, 255, 255, .05); border-color: var(--blue, #5b8def); }
.dm-chat-btn:active { transform: scale(.97); }
.dm-chat-btn svg { width: 18px; height: 18px; display: block; }
.dm-chat-dot {
  display: none;
  position: absolute;
  top: -3px; right: -3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--red, #ed4245);
  border: 2px solid var(--bg, #0c1017);
}
.dm-chat-dot.on { display: block; }

/* Overlay + panel */
.dm-chat-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  background: rgba(0, 0, 0, .55);
}
.dm-chat-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--panel, #151a23);
  color: var(--text, #e9edf5);
  overflow: hidden;
}

/* Desktop: dock to the right, no dimming, panel floats. */
@media (min-width: 721px) {
  .dm-chat-modal.dm-chat-docked {
    background: transparent;
    pointer-events: none;
    justify-content: flex-end;
  }
  .dm-chat-docked .dm-chat-box {
    pointer-events: auto;
    position: fixed;
    top: 66px; right: 14px; bottom: 14px;
    width: 360px; height: auto;
    border: 1px solid var(--stroke-2, rgba(255, 255, 255, .13));
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  }
}

.dm-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, .07));
  font-weight: 700;
  flex: none;
}
.dm-chat-close {
  background: transparent;
  border: none;
  color: var(--muted, #8a95a8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  width: 30px; height: 30px;
  border-radius: 8px;
}
.dm-chat-close:hover { background: rgba(255, 255, 255, .06); color: var(--text, #e9edf5); }

.dm-chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-chat-empty { margin: auto; color: var(--muted, #8a95a8); font-size: 13px; text-align: center; padding: 24px; }

/* A message: avatar column + name/time/text. Whole row clickable = reply. */
.dm-chat-msg {
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dm-chat-msg:hover { background: rgba(255, 255, 255, .04); }
.dm-chat-av { flex: none; width: 38px; height: 38px; margin-top: 2px; border-radius: 50%; overflow: hidden; background: var(--panel-2, #1b212c); display: block; }
.dm-chat-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-chat-av-txt { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; font-size: 16px; color: var(--muted, #8a95a8); line-height: 1; }
.dm-chat-body { flex: 1; min-width: 0; }
.dm-chat-head-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm-chat-author { font-weight: 600; font-size: 14px; color: var(--text, #e9edf5); }
.dm-chat-time { font-size: 11px; color: var(--dim, #5f6b80); }
.dm-chat-del, .dm-chat-mute {
  margin-left: auto;
  background: transparent; border: none;
  color: var(--dim, #5f6b80); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 6px;
  opacity: 0; transition: opacity .12s;
}
.dm-chat-mute { margin-left: auto; }
.dm-chat-mute + .dm-chat-del { margin-left: 4px; }   /* del sits right after mute, not pushed away */
.dm-chat-mute svg { width: 15px; height: 15px; display: block; }
.dm-chat-msg:hover .dm-chat-del, .dm-chat-msg:hover .dm-chat-mute { opacity: 1; }
.dm-chat-del:hover { color: var(--red, #ed4245); background: rgba(237, 66, 69, .12); }
.dm-chat-mute:hover { color: var(--amber, #f5b300); background: rgba(245, 179, 0, .12); }

/* Staff mute menu. */
.dm-mute-menu {
  position: fixed; z-index: 1400;
  min-width: 190px; padding: 6px;
  background: var(--panel-2, #1b212c);
  border: 1px solid var(--stroke-2, rgba(255, 255, 255, .13));
  border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.dm-mute-title { padding: 6px 10px 8px; font-size: 12px; font-weight: 700; color: var(--muted, #8a95a8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-mute-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text, #e9edf5); font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.dm-mute-menu button:hover { background: var(--panel, #151a23); }
.dm-mute-unmute { color: var(--green, #57f287) !important; }
.dm-mute-purge { color: var(--red, #ed4245) !important; border-top: 1px solid var(--stroke, rgba(255, 255, 255, .07)) !important; margin-top: 4px; border-radius: 0 0 8px 8px !important; }
.dm-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; margin-top: 1px; }
.dm-chat-text .c-emoji { width: 20px; height: 20px; vertical-align: -4px; }
/* Discord-style jumbo emoji: emoji-only messages get bigger, scaling down with count. */
.dm-chat-text.emoji-only { line-height: 1.15; }
.dm-chat-text.emoji-only.e1 { font-size: 44px; }
.dm-chat-text.emoji-only.e1 .c-emoji { width: 44px; height: 44px; vertical-align: -8px; }
.dm-chat-text.emoji-only.e2 { font-size: 36px; }
.dm-chat-text.emoji-only.e2 .c-emoji { width: 36px; height: 36px; vertical-align: -7px; }
.dm-chat-text.emoji-only.e3 { font-size: 30px; }
.dm-chat-text.emoji-only.e3 .c-emoji { width: 30px; height: 30px; vertical-align: -6px; }
.dm-chat-text.emoji-only.e4 { font-size: 26px; }
.dm-chat-text.emoji-only.e4 .c-emoji { width: 26px; height: 26px; vertical-align: -5px; }
.dm-chat-text.emoji-only.e5 { font-size: 22px; }
.dm-chat-text.emoji-only.e5 .c-emoji { width: 22px; height: 22px; vertical-align: -5px; }
.dm-chat-mention { color: var(--blue, #5b8def); font-weight: 600; background: color-mix(in srgb, var(--blue, #5b8def) 16%, transparent); border-radius: 4px; padding: 0 3px; }

/* Reply preview above a message's text. */
.dm-chat-reply {
  display: flex; align-items: baseline; gap: 5px;
  margin: 1px 0 3px; padding: 2px 0 2px 8px;
  border-left: 3px solid var(--stroke-2, rgba(255, 255, 255, .13));
  font-size: 12px; line-height: 1.3; opacity: .9;
}
.dm-chat-reply-ico { width: 13px; height: 13px; flex: none; color: var(--muted, #8a95a8); transform: translateY(2px); }
.dm-chat-reply-name { color: var(--blue, #5b8def); font-weight: 600; flex: none; }
.dm-chat-reply-snip { color: var(--muted, #8a95a8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Replying to @name" bar above the input. */
.dm-chat-replybar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--stroke, rgba(255, 255, 255, .07));
  font-size: 13px; color: var(--muted, #8a95a8);
  flex: none;
}
.dm-chat-replybar b { color: var(--text, #e9edf5); }
.dm-chat-replybar button { margin-left: auto; background: transparent; border: none; color: var(--muted, #8a95a8); cursor: pointer; font-size: 12px; }
.dm-chat-replybar button:hover { color: var(--text, #e9edf5); }

/* Input row (copied from the original): one flat pill holding clip + textarea +
   sticker + emoji, then a round send button on the right. NO blue focus ring. */
.dm-chat-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--stroke, rgba(255, 255, 255, .07)); flex: none; }
/* Pending attachments queued above the input (uploaded + published on send, as a ribbon). */
.dm-chat-pend { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.dm-chat-pend:empty { display: none; }
.dm-chat-attchip { display: inline-flex; align-items: center; gap: 4px; max-width: 200px; background: var(--inset, #0e131b); border: 1px solid var(--stroke, rgba(255, 255, 255, .07)); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; color: var(--text, #e9edf5); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-chat-attchip b { color: var(--muted, #8a95a8); font-weight: 700; margin-left: 2px; }
.dm-chat-attchip:hover b { color: #ff6b6b; }
/* Several attachments in one message → a wrapped ribbon. */
.dm-chat-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.dm-chat-atts .dm-chat-att-img, .dm-chat-atts .dm-chat-att-vid, .dm-chat-atts .dm-chat-att-file { margin-top: 0; }
.dm-chat-inputbar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  background: var(--inset, #0e131b);
  border: 1px solid var(--stroke, rgba(255, 255, 255, .07));
  border-radius: 10px;
  padding: 3px 5px;
}
/* contenteditable composer — custom emoji render as inline images (not token text). */
.dm-chat-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--text, #e9edf5);
  font: inherit; font-size: 14px; line-height: 1.5;
  padding: 7px 4px; max-height: 120px; overflow-y: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
/* Placeholder shows only when empty AND not focused → the caret sits at the very start,
   the hint disappears on focus and returns on blur if still empty. */
.dm-chat-input.empty:not(:focus):before { content: attr(data-placeholder); color: var(--dim, #5f6b80); pointer-events: none; }
.dm-chat-input .ce-emoji { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin: 0 1px; }
/* Kill the page-wide focus ring/glow (order.css :focus-visible outline + :focus box-shadow). */
.dm-chat-inputbar .dm-chat-input:focus,
.dm-chat-inputbar .dm-chat-input:focus-visible { outline: none; box-shadow: none; }
/* "X is typing…" line above the input, with animated dots. */
.dm-chat-typing { flex: none; padding: 2px 16px 4px; font-size: 12px; color: var(--muted, #8a95a8); font-style: italic; display: flex; align-items: center; }
.dm-typing-dots { display: inline-flex; gap: 2px; margin-left: 4px; }
.dm-typing-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .3; animation: dm-typing 1s infinite; }
.dm-typing-dots i:nth-child(2) { animation-delay: .15s; }
.dm-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dm-typing { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
/* Tool icons inside the pill — transparent circles. */
.dm-chat-tool {
  flex: none; width: 34px; height: 34px; padding: 0;
  border-radius: 8px; background: transparent; border: none;
  color: var(--muted, #8a95a8); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-chat-tool svg { width: 20px; height: 20px; display: block; }
.dm-chat-tool:hover { background: rgba(128, 128, 128, .16); color: var(--text, #e9edf5); }
.dm-chat-send {
  flex: none; width: 40px; height: 40px; padding: 0;
  border-radius: 8px; border: none; background: var(--blue, #5b8def); color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.dm-chat-send:hover { filter: brightness(1.08); }
.dm-chat-send svg { width: 20px; height: 20px; }
.dm-chat-login { display: block; text-align: center; padding: 14px; color: var(--blue, #5b8def); text-decoration: none; border-top: 1px solid var(--stroke, rgba(255, 255, 255, .07)); }

/* Attachments + sticker in the message body. */
.dm-chat-att-img { max-width: 220px; max-height: 260px; border-radius: 10px; margin-top: 3px; cursor: zoom-in; display: block; }
.dm-chat-att-vid { max-width: 260px; max-height: 300px; border-radius: 10px; margin-top: 3px; display: block; }
.dm-chat-att-file { display: inline-flex; align-items: center; gap: 7px; margin-top: 3px; padding: 8px 12px; border-radius: 10px; background: var(--inset, #0e131b); border: 1px solid var(--stroke, rgba(255, 255, 255, .07)); color: var(--text, #e9edf5); text-decoration: none; max-width: 100%; }
.dm-chat-att-file svg { width: 18px; height: 18px; flex: none; color: var(--muted, #8a95a8); }
.dm-chat-att-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-chat-sticker { width: 128px; height: 128px; object-fit: contain; margin-top: 3px; display: block; }

/* Lightbox for images. */
.dm-chat-lb { position: fixed; inset: 0; z-index: 1400; background: rgba(0, 0, 0, .82); display: flex; align-items: center; justify-content: center; }
.dm-chat-lb-img { max-width: 92vw; max-height: 88vh; border-radius: 10px; }
.dm-chat-lb-close { position: fixed; top: 16px; right: 18px; background: rgba(0, 0, 0, .4); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; }

/* ===================== emoji / sticker picker (ported) ===================== */
.dm-ep {
  position: fixed; z-index: 1300;
  width: 340px; max-width: calc(100vw - 16px);
  height: 400px; max-height: calc(100vh - 16px);
  display: flex; flex-direction: column;
  background: var(--panel-2, #1b212c);
  border: 1px solid var(--stroke-2, rgba(255, 255, 255, .13));
  border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); overflow: hidden;
}
.dm-ep-tabs { display: flex; gap: 4px; padding: 8px 8px 0; }
.dm-ep-tab { flex: 1; padding: 8px 10px; background: none; border: none; border-radius: 8px 8px 0 0; color: var(--muted, #8a95a8); font: inherit; font-weight: 600; cursor: pointer; }
.dm-ep-tab.on { color: var(--text, #e9edf5); background: var(--panel, #151a23); }
.dm-ep-search { padding: 8px; }
.dm-ep-search input { width: 100%; box-sizing: border-box; background: var(--inset, #0e131b); border: 1px solid transparent; border-radius: 8px; color: var(--text, #e9edf5); padding: 8px 10px; outline: none; font: inherit; }
.dm-ep-search input:focus { border-color: var(--stroke-2, rgba(255, 255, 255, .13)); }
.dm-ep-body { flex: 1; min-height: 0; display: flex; }
.dm-ep-rail { width: 48px; flex: none; overflow-y: auto; padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; border-right: 1px solid var(--stroke, rgba(255, 255, 255, .07)); scrollbar-width: none; }
.dm-ep-rail::-webkit-scrollbar { display: none; }
.dm-ep-server { position: relative; width: 34px; height: 34px; min-width: 34px; flex: none; border: none; border-radius: 50%; overflow: hidden; background: var(--inset, #0e131b); color: var(--muted, #8a95a8); font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dm-ep-server svg { width: 16px; height: 16px; }
.dm-ep-ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dm-ep-server img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.dm-ep-server:has(img) .dm-ep-ini, .dm-ep-head-ico:has(img) .dm-ep-ini { display: none; }
.dm-ep-rail-fav, .dm-ep-rail-recent { border-radius: 12px; color: var(--amber, #f5b300); }
.dm-ep-rail-recent { color: var(--muted, #8a95a8); }
.dm-ep-grid { flex: 1; min-width: 0; overflow-y: auto; padding: 6px 8px 10px; scrollbar-width: none; -ms-overflow-style: none; }
.dm-ep-grid::-webkit-scrollbar { display: none; }
.dm-ep-group-head { display: flex; align-items: center; gap: 6px; padding: 6px 2px 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted, #8a95a8); }
.dm-ep-group + .dm-ep-group .dm-ep-group-head { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--stroke, rgba(255, 255, 255, .07)); }
.dm-ep-head-ico { position: relative; width: 16px; height: 16px; flex: none; border-radius: 50%; overflow: hidden; background: var(--inset, #0e131b); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; }
.dm-ep-head-ico img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.dm-ep-items { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 2px; }
.dm-ep-emoji, .dm-ep-sticker { position: relative; border: none; background: none; border-radius: 8px; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; }
.dm-ep-emoji:hover, .dm-ep-sticker:hover { background: var(--panel, #151a23); }
.dm-ep-emoji img { width: 30px; height: 30px; object-fit: contain; }
.dm-ep-sticker { padding: 6px; }
.dm-ep-sticker img { width: 84px; height: 84px; object-fit: contain; }
.dm-ep-items:has(.dm-ep-sticker) { grid-template-columns: repeat(auto-fill, 96px); }
.dm-ep-star { position: absolute; top: -1px; right: -1px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: var(--muted, #8a95a8); background: var(--panel-2, #1b212c); border-radius: 50%; opacity: 0; transition: opacity .12s, color .12s, transform .12s; }
.dm-ep-emoji:hover .dm-ep-star, .dm-ep-sticker:hover .dm-ep-star { opacity: .85; }
.dm-ep-star:hover { transform: scale(1.2); color: var(--amber, #f5b300); }
.faved .dm-ep-star { opacity: 1; color: var(--amber, #f5b300); }
.dm-ep-empty { color: var(--muted, #8a95a8); text-align: center; padding: 30px 10px; }
.dm-ep-loading { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 10px; }
.dm-ep-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--stroke-2, rgba(255, 255, 255, .13)); border-top-color: var(--blue, #5b8def); animation: dm-ep-spin .8s linear infinite; }
@keyframes dm-ep-spin { to { transform: rotate(360deg); } }

/* Mobile tweaks. */
@media (max-width: 720px) {
  .dm-chat-msg { padding: 7px 6px; }
  .dm-ep { width: min(94vw, 340px); }
  .dm-chat-att-img, .dm-chat-att-vid { max-width: 68vw; }
}