/* ==========================================================================
   css/custom_emoji.css — members' custom emoji (js/custom_emoji.js)
   ========================================================================== */

/* ── in messages (room + PM) ─────────────────────────────── */
img.custom_emoji_chat.emo_chat   { width: 28px; height: 28px; margin: -6px 1px; object-fit: contain; }
img.custom_emoji_chat.sticker_chat { max-width: 128px; max-height: 128px; }

/* ── + menu picker ───────────────────────────────────────── */
.ce-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 2px 8px; font-size: 12px; color: #a3a3a3;
}
.ce-manage-btn {
    border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .12); color: #fbbf24;
    border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ce-manage-btn:hover { background: rgba(245, 158, 11, .22); }
.ce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ce-tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px 6px; border: 1px solid transparent; border-radius: 10px;
    background: rgba(255, 255, 255, .04); color: #d4d4d4; cursor: pointer; min-width: 0;
}
.ce-tile:hover, .ce-tile:focus-visible { border-color: #f59e0b; background: rgba(245, 158, 11, .10); outline: none; }
.ce-tile img { width: 44px; height: 44px; object-fit: contain; }
.ce-tile span {
    max-width: 100%; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── manager (element box) ───────────────────────────────── */
.element-box-inner:has(.ce-mgr) { max-width: 520px; }
.ce-mgr { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ce-mgr h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; padding-right: 44px; }
.ce-mgr h3 i { color: #f59e0b; }
.ce-count { margin-left: auto; font-size: 12px; font-weight: 600; color: #a3a3a3; }
.ce-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: #a3a3a3; }
.ce-hint b { color: #e5e5e5; }
.ce-upload { display: flex; gap: 8px; flex-wrap: wrap; }
.ce-pick {
    flex: 1 1 180px; display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 12px; border: 1px dashed rgba(255, 255, 255, .25); border-radius: 10px;
    color: #d4d4d4; font-size: 13px;
}
.ce-pick:hover { border-color: #f59e0b; color: #fff; }
.ce-upload-btn, .ce-row-btns button {
    border: 0; border-radius: 10px; cursor: pointer; font-weight: 700;
}
.ce-upload-btn { padding: 10px 16px; background: #f59e0b; color: #1f1300; font-size: 13px; }
.ce-upload-btn:disabled { opacity: .45; cursor: default; }
.ce-mgr-msg { font-size: 12.5px; min-height: 0; }
.ce-mgr-msg:empty { display: none; }
.ce-mgr-msg.ok  { color: #4ade80; }
.ce-mgr-msg.bad { color: #f87171; }
.ce-mgr-list {
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto; max-height: min(52vh, 420px); padding-right: 2px;
}
.ce-empty { margin: 12px 0; text-align: center; color: #737373; font-size: 13px; }
.ce-row {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    border-radius: 10px; background: rgba(255, 255, 255, .04);
}
.ce-row > img { width: 52px; height: 40px; object-fit: contain; flex: none; border-radius: 6px; }
.ce-row > img.is-sticker { width: 52px; height: 52px; }
.ce-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ce-name-line { display: flex; align-items: center; gap: 2px; }
.ce-colon { color: #737373; font-weight: 700; }
.ce-name, .ce-style {
    background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12); color: #f5f5f5;
    border-radius: 7px; font-size: 13px; padding: 4px 7px; min-width: 0;
}
.ce-name { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ce-name:focus, .ce-style:focus { outline: none; border-color: #f59e0b; }
.ce-opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #d4d4d4; }
.ce-share { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ce-mgr .ce-share input { accent-color: #f59e0b; width: 15px; height: 15px; margin: 0; flex: none; }
.ce-mgr .ce-style { width: auto; flex: none; }
.ce-mgr .ce-opts label { white-space: nowrap; }
.ce-row-btns { display: flex; flex-direction: column; gap: 5px; flex: none; }
.ce-row-btns button { width: 32px; height: 30px; font-size: 13px; }
.ce-save { background: rgba(74, 222, 128, .16); color: #4ade80; }
.ce-del  { background: rgba(248, 113, 113, .14); color: #f87171; }
.ce-save:hover { background: rgba(74, 222, 128, .28); }
.ce-del:hover  { background: rgba(248, 113, 113, .26); }

/* ── light themes ────────────────────────────────────────── */
html.cws-tone-light .ce-tile { background: rgba(27,27,27, .05); color: #3f3f3f; }
html.cws-tone-light .ce-bar, html.cws-tone-light .ce-hint { color: #737373; }