/* chathub.css — the lobby chat dock (Global / Recruit / Clan / DMs) + its floating launcher. Lobby-only. */
/* Twemoji (Discord-style) colour emoji, bundled locally — one COLR font, works offline. Listed AFTER the text font so
   only emoji glyphs resolve to Twemoji; text stays Chakra Petch. Used across both chat UIs (dock + clan page). */
@font-face { font-family:'Twemoji Mozilla'; src:url('/public/twemoji/TwemojiMozilla.ttf') format('truetype'); font-display:swap; }
/* emoji in messages are wrapped by fmtBody() and rendered LARGER than the text (Discord-style), forced to Twemoji.
   jumbo = an emoji-only message. Global so both chat UIs (dock + clan page) get it. */
.em { font-family:'Twemoji Mozilla','Segoe UI Emoji','Apple Color Emoji',sans-serif; font-size:1.45em; line-height:1; vertical-align:-0.18em; }
.em.jumbo { font-size:2.5em; vertical-align:-0.3em; }
/* keep emoji modest inside quotes / reply bars (don't jumbo a one-line preview) */
#chatHubMsgs .rquote .em, #clanPage .cp-rquote .em, #chatReplyBar .em, #cpReplyBar .em { font-size:1em; vertical-align:-0.1em; }
/* launcher styled to match the dark "command" lobby (cyan-accented panel tab) */
#chatFab { position:fixed; right:18px; bottom:18px; padding:11px 16px; border-radius:10px; background:#101b2e; color:#5cc8ff;
  border:1px solid #28395a; font:700 12px 'Chakra Petch','Segoe UI',system-ui; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; z-index:70; box-shadow:0 6px 20px rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; }
#chatFab:hover { background:#16243a; border-color:#5cc8ff; color:#fff; filter:none; }
#chatFab:focus-visible { outline:2px solid #5cc8ff; outline-offset:2px; }
#chatFab[data-n]:not([data-n=""])::after { content:attr(data-n); position:absolute; top:-3px; right:-3px; min-width:18px; height:18px;
  padding:0 4px; box-sizing:border-box; border-radius:9px; background:#e0433b; color:#fff; font:700 11px system-ui; display:flex; align-items:center; justify-content:center; }

/* dark "command" panel — flat, cyan-accented, matches the lobby + clan page (no toy colours / chunky pills) */
#chatDock { position:fixed; right:18px; bottom:18px; width:min(372px,94vw); height:min(520px,74vh); background:#0e1626;
  border:1px solid #1d2c45; border-radius:12px; z-index:70; display:none; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.55); font-family:'Chakra Petch','Twemoji Mozilla','Segoe UI',system-ui; }
.chatHubHead { display:flex; align-items:center; gap:4px; padding:5px 8px; border-bottom:1px solid #1d2c45; background:#0b1220; }
.chatTabs { display:flex; gap:2px; flex:1; }
.chatTabs button { flex:1; background:none; color:#8da2be; border:none; border-bottom:2px solid transparent; padding:9px 3px 8px;
  font:600 12px 'Chakra Petch','Twemoji Mozilla',system-ui; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; position:relative; white-space:nowrap; transition:color .12s, border-color .12s; }
.chatTabs button:hover { color:#cdd9ea; }
.chatTabs button.active { color:#5cc8ff; border-bottom-color:#5cc8ff; }
.chatTabs button.unread::after { content:""; position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:#e0533d; }
#chatHubClose { background:none; border:none; color:#5f6f88; font-size:18px; cursor:pointer; padding:2px 8px; }
#chatHubClose:hover { color:#cdd9ea; }

#chatHubMsgs { flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:10px 2px 12px; }
#chatHubMsgs::-webkit-scrollbar { width:7px; } #chatHubMsgs::-webkit-scrollbar-thumb { background:#ffffff1f; border-radius:4px; }
#chatHubMsgs .empty { color:#5f6f88; font-size:13px; text-align:center; margin:auto; line-height:1.5; max-width:82%; }
/* Discord-style row: [avatar] [body]. Grouped continuation rows drop the avatar+name header and tighten up. */
#chatHubMsgs .cmsg { position:relative; display:flex; gap:9px; padding:1px 10px; font:400 13px/1.4 'Chakra Petch','Twemoji Mozilla',system-ui; word-break:break-word; }
#chatHubMsgs .cmsg.head { margin-top:9px; }
#chatHubMsgs .cmsg.head:first-child, #chatHubMsgs .cdivider + .cmsg.head { margin-top:2px; }
#chatHubMsgs .cmsg:hover { background:#ffffff08; }
#chatHubMsgs .cav { flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font:700 12px 'Chakra Petch',system-ui; margin-top:2px; }
#chatHubMsgs .cav.sp { background:none !important; align-items:flex-start; justify-content:center; }
#chatHubMsgs .cav.sp .hts { display:none; font-size:10px; color:#4f5d75; line-height:2.2; }
#chatHubMsgs .cmsg.cont:hover .cav.sp .hts { display:block; }   /* grouped rows reveal a tiny timestamp on hover */
#chatHubMsgs .cbody { flex:1; min-width:0; }
#chatHubMsgs .chead { display:flex; align-items:baseline; gap:8px; margin-bottom:1px; }
#chatHubMsgs .who { color:#9bb6ff; font-weight:700; }
#chatHubMsgs .who.lnk { cursor:pointer; }
#chatHubMsgs .who.lnk:hover { text-decoration:underline; }
#chatHubMsgs .cmsg.me .who { color:#5cc8ff; }
#chatHubMsgs .txt { color:#dfe6f0; }
#chatHubMsgs .ts { color:#4f5d75; font-size:11px; font-weight:400; }
/* DM inbox: one card per partner */
#chatHubMsgs .cmsg.inbox .txt { color:#8da2be; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chatHubMsgs .cmsg.inbox .unreadn { background:#e0533d; color:#fff; font:700 11px system-ui; border-radius:9px; padding:1px 7px; }
/* date divider */
#chatHubMsgs .cdivider { display:flex; align-items:center; gap:10px; margin:10px 12px 4px; color:#4f5d75; font:600 10px 'Chakra Petch',system-ui; letter-spacing:.1em; text-transform:uppercase; }
#chatHubMsgs .cdivider::before, #chatHubMsgs .cdivider::after { content:""; flex:1; height:1px; background:#1d2c45; }

#dmToWrap { display:flex; gap:6px; padding:8px 10px 0; }
#dmToWrap input { flex:1; min-width:0; box-sizing:border-box; background:#0b1220; color:#e8eef7; border:1px solid #1d2c45; border-radius:8px; padding:7px 10px; font:12px 'Chakra Petch','Twemoji Mozilla',system-ui; outline:none; }
#dmToWrap input:focus { border-color:#2f86d6; }
#chatDock .chatbar { display:flex; gap:7px; padding:9px 10px 5px; }
#chatDock .chatbar input { flex:1; min-width:0; background:#0b1220; color:#e8eef7; border:1px solid #1d2c45; border-radius:8px; padding:8px 11px; font:13px 'Chakra Petch','Twemoji Mozilla',system-ui; outline:none; }
#chatDock .chatbar input:focus { border-color:#2f86d6; }
#chatDock .chatbar input:disabled { opacity:.5; }
#chatDock .chatbar button#chatHubSend { border:1px solid #1d2c45; border-radius:8px; padding:0 15px; background:#12263e; color:#5cc8ff; font-size:15px; cursor:pointer; }
#chatDock .chatbar button#chatHubSend:hover { background:#173352; color:#fff; border-color:#2f86d6; }
#chatDock .chatbar button:disabled { opacity:.45; cursor:default; }
#chatHubHint { color:#5f6f88; font-size:11px; padding:0 10px 8px; min-height:14px; }

/* ---- Phase-1 UX ---- */
/* clickable links + @mention tags inside a message body */
#chatHubMsgs .txt a { color:#5cc8ff; text-decoration:underline; word-break:break-all; }
#chatHubMsgs .txt .mtag { color:#ffd16b; font-weight:700; }
/* light markdown (bold/italic/strike render natively; code + quote need styling) — shared by both chat UIs */
#chatHubMsgs .txt code, #clanPage .cp-ctxt code, .rquote code, .cp-rquote code { font-family:ui-monospace,'Cascadia Code',monospace; background:#00000055; padding:1px 5px; border-radius:4px; font-size:.88em; }
#chatHubMsgs .txt .mdquote, #clanPage .cp-ctxt .mdquote { display:inline-block; border-left:3px solid #3a4570; padding-left:8px; color:#b8c4d8; }
/* a message that pings ME stands out (inset accent, not a full box — plays nice with the flex row) */
#chatHubMsgs .cmsg.mention { background:#3a2f1233; box-shadow:inset 3px 0 0 #ffcc4d; }
/* clan system line spans the full width, centered */
#chatHubMsgs .cmsg.sys { display:block; text-align:center; }
/* "(edited)" marker */
#chatHubMsgs .cmsg .ed { color:#4f5d75; font-size:11px; margin-left:5px; font-style:italic; }
/* ⋯ action-menu button — floats at the row's top-right (Discord-style); hover to reveal, faint on touch */
#chatHubMsgs .cmenu { position:absolute; top:0; right:4px; display:none; background:#0e1626; border:1px solid #1d2c45; color:#8da2be; cursor:pointer; font-size:15px; line-height:1; padding:1px 6px; border-radius:6px; }
#chatHubMsgs .cmsg:hover .cmenu { display:block; }
#chatHubMsgs .cmenu:hover { color:#5cc8ff; background:#17233a; }
@media (hover: none) { #chatHubMsgs .cmenu { display:block; opacity:.5; } }
/* Discord-style quoted reply above a message */
#chatHubMsgs .rquote { font-size:12px; color:#8da2be; margin-bottom:2px; padding-left:8px; border-left:2px solid #2f4468; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chatHubMsgs .rquote b { color:#9bb6ff; font-weight:700; }
#chatHubMsgs .rquote a { color:#5cc8ff; }

/* floating message action menu (Reply / Edit / Delete) */
#chatMsgMenu { position:fixed; z-index:90; min-width:134px; background:#0e1626; border:1px solid #1d2c45; border-radius:9px; padding:5px; box-shadow:0 10px 30px #000c; font-family:'Chakra Petch',system-ui; }
#chatMsgMenu[hidden] { display:none; }
#chatMsgMenu button { display:block; width:100%; text-align:left; background:none; border:none; color:#cdd9ea; font:600 13px 'Chakra Petch','Twemoji Mozilla',system-ui; padding:8px 11px; border-radius:6px; cursor:pointer; }
#chatMsgMenu button:hover { background:#17233a; color:#fff; }
#chatMsgMenu button[data-mact="del"]:hover { background:#3a1d1d; color:#ffb4b4; }
/* quick-react emoji row at the top of the action menu */
#chatMsgMenu .amreacts { display:flex; gap:1px; padding:2px 2px 6px; margin-bottom:4px; border-bottom:1px solid #1d2c45; }
#chatMsgMenu .amreacts button { background:none; border:none; cursor:pointer; font:15px 'Twemoji Mozilla','Segoe UI Emoji',sans-serif; line-height:1; padding:4px 5px; border-radius:6px; }
#chatMsgMenu .amreacts button:hover { background:#17233a; }
/* reaction chips under a message */
#chatHubMsgs .creacts { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
#chatHubMsgs .creact { display:inline-flex; align-items:center; gap:3px; background:#12233a; border:1px solid #1d2c45; border-radius:10px; padding:1px 7px; color:#cdd9ea; font:600 11px 'Chakra Petch',system-ui; cursor:pointer; }
#chatHubMsgs .creact .re { font:12px 'Twemoji Mozilla','Segoe UI Emoji',sans-serif; }
#chatHubMsgs .creact:hover { border-color:#2f86d6; }
#chatHubMsgs .creact.mine { background:#16324f; border-color:#5cc8ff; color:#bfe4ff; }

/* "↩ Replying to …" bar above the composer */
#chatReplyBar { display:flex; align-items:center; gap:8px; margin:6px 10px 0; padding:6px 10px; background:#0b1a2c; border:1px solid #1d2c45; border-left:3px solid #2f86d6; border-radius:8px; }
#chatReplyBar[hidden] { display:none; }
#chatReplyBar .rt { flex:1; min-width:0; color:#9fb2cc; font:600 12px 'Chakra Petch','Twemoji Mozilla',system-ui; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chatReplyBar #chatReplyX { background:none; border:none; color:#8da2be; cursor:pointer; font-size:13px; padding:0 2px; }
#chatReplyBar #chatReplyX:hover { color:#fff; }
/* DM block toggle in the thread header */
#dmToWrap #dmBlockBtn { flex:0 0 auto; margin-left:6px; background:#2a2030; color:#e6b4b4; border:1px solid #5a3a4a; border-radius:8px; padding:0 10px; font:700 11px system-ui; cursor:pointer; }
#dmToWrap #dmBlockBtn.on { background:#5a2a2a; color:#fff; border-color:#a83232; }
#dmToWrap #dmBlockBtn[hidden] { display:none; }
/* system messages (clan joined/left/etc.) render centered + muted */
#chatHubMsgs .cmsg.sys { color:#7e8aa0; font-style:italic; text-align:center; font-size:12px; }
#chatHubMsgs .cmsg.sys .txt { color:#7e8aa0; }
/* recruit -> one-click Join card */
#chatHubMsgs .rcard { margin-top:4px; }
#chatHubMsgs .rjoin { background:#173a2a; color:#8ff0bd; border:1px solid #2f7f57; border-radius:8px; padding:5px 12px; font:700 12px system-ui; cursor:pointer; }
#chatHubMsgs .rjoin:hover { background:#1d5238; color:#fff; }
#chatHubMsgs .rjoin:disabled { opacity:.6; cursor:default; }
/* "↑ Load older" pager at the top of clan/global/recruit */
#chatHubMsgs .loadold { display:block; margin:0 auto 6px; background:#12233a; color:#8da2be; border:1px solid #1d2c45; border-radius:8px; padding:5px 12px; font:600 10.5px 'Chakra Petch',system-ui; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; }
#chatHubMsgs .loadold:hover { background:#173352; color:#5cc8ff; }
/* pinned clan MOTD */
#chatPin { padding:8px 12px; border-bottom:1px solid #1d2c45; background:#0b1a2c; color:#bcd0f5; font:600 12px 'Chakra Petch',system-ui; line-height:1.4; word-break:break-word; }
#chatPin[hidden] { display:none; }
#chatPin a { color:#5cc8ff; }

/* "N new ↓" jump pill — only shown when scrolled up */
#chatNewPill { position:absolute; left:50%; transform:translateX(-50%); bottom:96px; z-index:3; border:1px solid #2f86d6; cursor:pointer;
  background:#12263e; color:#5cc8ff; font:600 11px 'Chakra Petch',system-ui; letter-spacing:.04em; padding:6px 14px; border-radius:14px; box-shadow:0 4px 14px #0008; }
#chatNewPill:hover { background:#173352; color:#fff; }
#chatNewPill[hidden] { display:none; }

/* inline error / cooldown toast just above the composer */
.chatToast { margin:0 10px; min-height:0; max-height:0; overflow:hidden; opacity:0; transition:opacity .15s, max-height .15s, padding .15s;
  background:#13241a; border-radius:8px; color:#bff0d8; font:700 12px system-ui; padding:0 10px; }
.chatToast.show { opacity:1; max-height:40px; padding:7px 10px; }
.chatToast.warn { background:#3a1d1d; color:#ffb4b4; }

/* emoji button + popup in the composer */
#chatDock .chatbar #chatEmojiBtn { background:#0b1220; border:1px solid #1d2c45; border-radius:8px; padding:0 10px; font-size:16px; cursor:pointer; flex:0 0 auto; }
#chatDock .chatbar #chatEmojiBtn:hover { border-color:#2f86d6; }
#chatEmojiPop { display:none; position:absolute; right:10px; bottom:56px; z-index:4; flex-wrap:wrap; width:min(250px,84vw); gap:3px; padding:8px;
  background:#0b1220; border:1px solid #1d2c45; border-radius:12px; box-shadow:0 8px 24px #000b; }
#chatEmojiPop.show { display:flex; }
#chatEmojiPop button { width:34px; height:34px; border-radius:8px; border:1px solid #1d2c45; background:#0e1626; font-size:19px; line-height:1; cursor:pointer; padding:0; }
#chatEmojiPop button:hover { background:#16233a; }

/* floating PM / @mention notifications (work even when the dock is closed) */
#chatNotify { position:fixed; right:18px; bottom:74px; z-index:80; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none; }
#chatNotify .chatNote { pointer-events:auto; cursor:pointer; max-width:300px; background:#16203a; border:1px solid #3f56a0; color:#dbe6ff;
  font:600 13px system-ui; padding:10px 14px; border-radius:10px; box-shadow:0 6px 20px #000a; opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chatNotify .chatNote.in { opacity:1; transform:translateY(0); }

/* ---- mobile: full-screen sheet under 560px, keyboard-safe composer ---- */
@media (max-width:560px) {
  #chatDock { right:0; left:0; bottom:0; top:0; width:100%; height:100dvh; border-radius:0; border:none; }
  .chatTabs button { padding:9px 3px; font-size:12px; }
  #chatHubMsgs { padding:12px; }
  #chatDock .chatbar { padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
  #chatDock .chatbar input { font-size:16px; }   /* >=16px stops iOS auto-zoom on focus */
  #chatEmojiPop { width:calc(100vw - 20px); right:10px; left:10px; }
  #chatNewPill { bottom:108px; }
}