/* mChat-style chat — theme-neutral (rgba + inherit) so it works on all three themes */
#fb-chat { border:1px solid rgba(127,127,127,.30); border-radius:7px; overflow:hidden; margin-top:8px; }
#fb-chat .chat-head { background:rgba(127,127,127,.12); padding:8px 13px; font-weight:bold; border-bottom:1px solid rgba(127,127,127,.25); }
#chat-log { height:var(--chat-log-h, 360px); overflow-y:auto; padding:4px 0; }
.chat-text img.bbimg { max-width:100%; max-height:var(--chat-img-max, 240px); width:auto; height:auto; border-radius:6px; cursor:zoom-in; display:block; margin:3px 0; }
.chat-loading { padding:14px; text-align:center; }
.chat-msg { display:flex; gap:10px; padding:7px 13px; border-bottom:1px solid rgba(127,127,127,.10); position:relative; }
.chat-msg:hover { background:rgba(127,127,127,.06); }
.chat-av { width:32px; height:32px; border-radius:4px; flex:0 0 32px; object-fit:cover; background:rgba(127,127,127,.15); }
.chat-body { flex:1; min-width:0; }
.chat-meta { font-size:12px; line-height:1.4; }
.chat-meta .username { font-weight:bold; text-decoration:none; }
.chat-time { opacity:.6; margin-left:7px; font-size:11px; }
.chat-edited { opacity:.55; margin-left:5px; font-size:10px; font-style:italic; }
.chat-edited[title] { cursor:help; text-decoration:underline dotted; text-underline-offset:2px; }
.chat-text { word-wrap:break-word; overflow-wrap:break-word; }
.chat-text img { max-width:100%; }
.chat-text blockquote { margin:4px 0; padding:4px 8px; border-left:3px solid rgba(127,127,127,.4); background:rgba(127,127,127,.07); }
.chat-actions { position:absolute; top:6px; right:10px; display:flex; gap:2px; opacity:0; transition:opacity .12s; }
.chat-msg:hover .chat-actions { opacity:1; }
.chat-actions button { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:none; border-radius:5px; background:transparent; color:#9aa0a6; cursor:pointer; transition:background .12s, color .12s; }
.chat-actions button:hover { background:rgba(127,127,127,.16); color:#3a3f44; }
.chat-actions button[data-act="del"]:hover { background:rgba(224,49,49,.14); color:#e03131; }
.chat-actions svg { display:block; }
.chat-foot { display:flex; justify-content:space-between; padding:5px 13px; font-size:11px; opacity:.75; border-top:1px solid rgba(127,127,127,.18); }
.chat-foot .chat-err { color:#d24; opacity:1; font-weight:bold; }
.chat-inputbar { display:flex; gap:8px; align-items:center; padding:10px 12px; border-top:1px solid rgba(127,127,127,.25); background:rgba(127,127,127,.06); }
#chat-input { flex:1; padding:8px 12px; border:1px solid rgba(127,127,127,.40); border-radius:18px; background:rgba(127,127,127,.05); color:inherit; font:inherit; }
#chat-input:focus { outline:none; border-color:rgba(127,127,127,.7); }
#chat-send { border-radius:18px; }
.chat-editing #chat-input { border-color:#c90; box-shadow:0 0 0 2px rgba(204,153,0,.2); }

/* toolbar + smilies */
.chat-toolwrap { border-top:1px solid rgba(127,127,127,.18); background:rgba(127,127,127,.05); }
.chat-tools { display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:9px 12px; }
.chat-tools button, .chat-tools select { background:rgba(127,127,127,.10); border:1px solid rgba(127,127,127,.30); color:inherit; border-radius:4px; cursor:pointer; font:inherit; font-size:12px; min-width:27px; height:27px; padding:0 6px; }
.chat-tools button:hover { background:rgba(127,127,127,.22); }
.chat-tools .sep { width:1px; height:18px; background:rgba(127,127,127,.30); margin:0 4px; }
.chat-palette { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; }
.chat-palette .sw { width:18px; height:18px; border-radius:3px; cursor:pointer; border:1px solid rgba(0,0,0,.25); }
.chat-smilies { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:9px 12px; }
.chat-smilies span { cursor:pointer; font-size:18px; line-height:1; padding:3px; border-radius:4px; }
.chat-smilies span:hover { background:rgba(127,127,127,.20); }
.chat-toggle { background:rgba(127,127,127,.10); border:1px solid rgba(127,127,127,.30); color:inherit; border-radius:6px; cursor:pointer; font-size:14px; height:34px; min-width:34px; padding:0 6px; flex:0 0 auto; }
.chat-toggle:hover { background:rgba(127,127,127,.22); }

/* mentions */
/* system broadcast lines (logins, voice joins) — italic, standout, [SERVER]-tagged */
.chat-system { display:flex; align-items:center; gap:7px; padding:4px 13px; font-style:italic; background:rgba(214,160,0,.07); border-left:3px solid rgba(214,160,0,.55); color:#9aa0a6; }
.chat-system .chat-sys-tag { font-style:normal; font-weight:700; font-size:10px; letter-spacing:.05em; padding:1px 5px; border-radius:3px; background:rgba(214,160,0,.22); color:#d6a000; flex:0 0 auto; }
.chat-system .chat-sys-text { flex:1; min-width:0; }
.chat-system .chat-time { opacity:.55; font-size:10px; margin-left:auto; }

.chat-mention { background:rgba(127,127,180,.18); border-radius:3px; padding:0 3px; font-weight:bold; }
.chat-mention-you { background:rgba(220,160,0,.30); }
.chat-msg-mention { border-left:3px solid #d6a000; padding-left:10px; background:rgba(220,160,0,.06); }
/* presence truncates gracefully; mute toggle in header */
.chat-foot #chat-presence { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:72%; }
.chat-head { position:relative; }
.chat-mute { float:right; background:none; border:none; cursor:pointer; line-height:0; padding:4px 6px; opacity:.85; color:inherit; }
.chat-mute:hover { opacity:1; }
/* compact embed on the board index */
.chat-embed { margin-bottom:16px; }
.chat-embed #chat-log { height:var(--chat-embed-h, 200px); }
.chat-openfull { font-size:11px; font-weight:normal; margin-left:8px; text-decoration:none; opacity:.8; }

/* ---- rooms: two-column layout ---- */
.chat-cols { display:flex; align-items:stretch; }
.chat-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-rooms { flex:0 0 200px; border-left:1px solid rgba(127,127,127,.25); display:flex; flex-direction:column; min-height:0; background:rgba(127,127,127,.04); }
.chat-rooms-head { padding:8px 10px; font-size:12px; border-bottom:1px solid rgba(127,127,127,.2); display:flex; justify-content:space-between; align-items:center; gap:4px; }
.chat-rooms-actions button { background:none; border:1px solid rgba(127,127,127,.3); border-radius:4px; cursor:pointer; color:inherit; font-size:11px; padding:2px 6px; margin-left:4px; white-space:nowrap; }
.chat-rooms-actions button:hover { background:rgba(127,127,127,.15); }
#room-list { overflow-y:auto; flex:1; }
.room-row { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; cursor:pointer; border-bottom:1px solid rgba(127,127,127,.10); font-size:13px; }
.room-row:hover { background:rgba(127,127,127,.10); }
.room-row.active { background:rgba(127,127,180,.18); }
.room-row.active .room-name, .room-row.unread .room-name { font-weight:bold; }
.room-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.room-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#d6336c; margin-right:5px; vertical-align:middle; }
.room-actions { display:flex; gap:1px; opacity:0; transition:opacity .1s; flex:0 0 auto; }
.room-row:hover .room-actions, .room-row.active .room-actions { opacity:.7; }
.room-actions button { background:none; border:none; cursor:pointer; color:inherit; padding:3px 4px; line-height:0; }
.room-actions button:hover { opacity:1; }
/* name + lock group on the left; truncate long names */
.room-left { display:flex; align-items:center; gap:5px; min-width:0; flex:1 1 auto; }
.room-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-lock { display:inline-flex; opacity:.55; flex:0 0 auto; }
/* clean inline icons (currentColor, theme-aware) — match the message-action style */
.room-actions button svg, .chat-style svg, .chat-mute svg { width:15px; height:15px; display:block; }
.room-lock svg { width:14px; height:14px; display:block; }
.chat-modal-h svg { width:15px; height:15px; vertical-align:-3px; margin-right:5px; }
.chat-locked svg { width:14px; height:14px; vertical-align:-2px; }
.chat-locked { padding:26px 16px; text-align:center; }

/* ---- modals (appended to <body>, theme-neutral white card) ---- */
.chat-modal-ov { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; z-index:9999; padding:8vh 12px 12px; }
.chat-modal { background:#fff; color:#222; width:420px; max-width:100%; border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.45); overflow:hidden; }
.chat-modal-h { background:#f0f2f5; padding:11px 15px; font-weight:bold; border-bottom:1px solid #dde1e7; position:relative; color:#1d6fa5; }
.chat-modal-x { position:absolute; right:9px; top:8px; background:none; border:none; font-size:15px; cursor:pointer; color:#888; }
.chat-modal-b { padding:15px; }
.chat-modal-b label { display:block; margin-bottom:12px; font-weight:bold; font-size:13px; color:#333; }
.chat-modal-b input[type=text], .chat-modal-b input[type=password], .chat-modal-b select, .chat-modal-b textarea { width:100%; padding:7px 9px; border:1px solid #bbb; border-radius:4px; font:inherit; box-sizing:border-box; font-weight:normal; margin-top:3px; }
.chat-modal-b input[type=checkbox] { width:auto; margin-right:6px; }
.chat-modal-b .muted { font-weight:normal; color:#666; margin-top:0; }
.chat-modal-f { padding:12px 15px; border-top:1px solid #dde1e7; text-align:right; background:#f7f8fa; }

@media (max-width:640px) {
  .chat-cols { flex-direction:column; }
  .chat-rooms { flex-basis:auto; border-left:none; border-top:1px solid rgba(127,127,127,.25); }
  #room-list { max-height:160px; }
}

/* ---- cosmetics: hats on avatar ---- */
.chat-avwrap { position:relative; display:inline-block; width:32px; height:32px; flex:0 0 32px; }
.chat-hat { position:absolute; left:25%; top:-13px; transform:translateX(-50%); width:26px; height:26px; pointer-events:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* header User Style button (mirrors the mute toggle) */
.chat-style { background:none; border:none; cursor:pointer; float:right; margin-left:4px; line-height:0; padding:4px 6px; color:inherit; opacity:.85; }
.chat-style:hover { opacity:1; }

/* User Style picker */
.cos-modal { width:460px; }
.cos-tabs { display:flex; gap:6px; margin-bottom:10px; }
.cos-tab { flex:1; padding:7px; border:1px solid #ccc; background:#f4f4f4; border-radius:5px; cursor:pointer; font-weight:bold; color:#444; }
.cos-tab.active { background:#1d6fa5; color:#fff; border-color:#1d6fa5; }
.cos-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px; max-height:340px; overflow-y:auto; overflow-x:hidden; }
.cos-cell { border:2px solid transparent; border-radius:7px; padding:6px 4px; text-align:center; cursor:pointer; background:#f7f7f7; position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; }
.cos-cell:hover { background:#eee; }
.cos-cell.active { border-color:#1d6fa5; background:#e7f1f8; }
/* uniform, centred preview box — images scale to fit, never blow out the cell */
.cos-prev { width:100%; height:44px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cos-cell img { max-width:42px; max-height:42px; width:auto; height:auto; object-fit:contain; }
.cos-none { display:inline-flex; align-items:center; justify-content:center; width:100%; height:44px; font-size:22px; color:#aaa; }
.cos-cap { font-size:10px; color:#555; margin-top:3px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* picker: search bar, post hint, locked rewards, status */
.cos-toolbar { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.cos-search { flex:1; min-width:0; padding:5px 9px; border:1px solid #ccc; border-radius:5px; font:inherit; }
.cos-hint { font-size:11px; white-space:nowrap; }
.cos-cell { position:relative; }
.cos-lock { position:absolute; top:3px; right:3px; width:17px; height:17px; display:flex; align-items:center; justify-content:center; color:#9a7b16; background:rgba(255,255,255,.9); border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.cos-lock svg { width:11px; height:11px; }
.cos-cell.locked { cursor:not-allowed; }
.cos-cell.locked img { filter:grayscale(.85); opacity:.55; }
.cos-cell.locked .cos-cap { opacity:.6; }
.cos-cell.locked:hover { background:#f7f7f7; }
.cos-req { font-size:10px; margin-top:2px; line-height:1.2; }
.cos-req.locked { color:#9a7b16; font-weight:bold; }
.cos-req.met { color:#2e8b57; }
.cos-status { min-height:17px; margin-top:9px; font-size:12px; color:#9a7b16; }
.cos-empty { grid-column:1 / -1; text-align:center; padding:18px 0; }

/* ACP cosmetics catalog */
.cos-admin-grid { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.cos-admin-item { width:124px; text-align:center; border:1px solid rgba(127,127,127,.25); border-radius:6px; padding:8px 6px; }
.cos-admin-prev { height:48px; display:flex; align-items:center; justify-content:center; }
.cos-admin-prev img { max-width:46px; max-height:46px; object-fit:contain; }
.cos-admin-edit { display:flex; flex-direction:column; gap:5px; margin:6px 0 2px; }
.cos-admin-rename { width:100%; font:inherit; font-size:12px; padding:3px 5px; text-align:center; }
.cos-admin-req { font-size:10px; display:flex; align-items:center; justify-content:center; gap:4px; opacity:.85; }
.cos-admin-req input { width:62px; font:inherit; font-size:11px; padding:2px 3px; }
.cos-admin-actions { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.cos-admin-lockflag { font-size:10px; color:#9a7b16; font-weight:bold; }
.cos-admin-del { margin-top:4px; }

/* live typing indicator */
.chat-typing { font-size: 11px; font-style: italic; color: #888; padding: 2px 12px; min-height: 0; }
.chat-flash { animation: chatflash 1.2s ease; }
@keyframes chatflash { 0%,100% { background:transparent; } 30% { background:rgba(255,200,0,.30); } }
.chat-replybar { display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:12px; background:rgba(127,127,127,.10); border-top:1px solid rgba(127,127,127,.2); }
.chat-replybar .rb-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#555; display:flex; align-items:center; gap:5px; }
.chat-replybar .rb-label svg { flex:0 0 auto; opacity:.7; }
.chat-replybar .rb-cancel { background:none; border:none; cursor:pointer; color:#888; font-size:13px; padding:2px 5px; border-radius:4px; }
.chat-replybar .rb-cancel:hover { background:rgba(127,127,127,.2); color:#333; }
.chat-replyquote { display:inline-flex; align-items:center; gap:5px; max-width:100%; margin-bottom:3px; padding:2px 8px 2px 6px; font-size:12px; line-height:1.4; color:#667; background:rgba(127,127,127,.08); border-left:3px solid rgba(127,127,127,.35); border-radius:0 5px 5px 0; cursor:pointer; overflow:hidden; }
.chat-replyquote:hover { background:rgba(127,127,127,.16); }
.chat-replyquote svg { flex:0 0 auto; width:13px; height:13px; opacity:.55; }
.chat-replyquote .rq-user { font-weight:bold; flex:0 0 auto; }
.chat-replyquote .rq-snip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }
.chat-replyquote.rq-deleted { font-style:italic; cursor:default; }

/* site-wide custom cursor (DOM image follows the mouse; supports any size + animated GIF) */
.fb-cursor-on, .fb-cursor-on * { cursor:none !important; }
.fb-cursor-img { position:fixed; top:0; left:0; max-width:64px; max-height:64px; pointer-events:none; z-index:2147483647; will-change:transform; image-rendering:auto; }

/* dice roller */
.chat-dice { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:6px 10px 0; }
.chat-dice-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.6; margin-right:2px; }
.chat-dice-n { background:rgba(127,127,127,.10); border:1px solid rgba(127,127,127,.30); color:inherit; border-radius:4px; cursor:pointer; font:inherit; font-size:13px; font-weight:600; min-width:30px; height:30px; padding:0 8px; }
.chat-dice-n:hover { background:rgba(232,89,12,.18); border-color:rgba(232,89,12,.5); }
.chat-roll { display:inline-flex; align-items:center; gap:2px; flex-wrap:wrap; }
.chat-die { vertical-align:middle; width:20px; height:20px; margin-right:1px; }
.chat-roll-text { margin-left:5px; }
.chat-roll-detail { opacity:.6; font-size:.92em; }

/* custom image smilies */
.chat-smiley { width:auto; height:auto; max-height:38px; max-width:64px; vertical-align:middle; }
.chat-smilies .chat-smiley-pick { cursor:pointer; width:auto; height:auto; max-height:30px; max-width:46px; padding:2px; border-radius:4px; vertical-align:middle; }
.chat-smilies .chat-smiley-pick:hover { background:rgba(127,127,127,.20); }
.chat-dice-btn { font-size:16px; }

/* rock-paper-scissors */
.chat-rps-msg { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.chat-rps { width:auto; height:auto; max-height:24px; vertical-align:middle; }
.chat-rps-msg .chat-roll-detail { text-transform:capitalize; }