/* BCMonster Community Chat — Royal Blue Theme */

#bcm-chat-widget {
    position: fixed !important;
    bottom: 20px;
    right: 20px;
    width: 480px;
    max-width: calc(100vw - 40px);
    background: #1e293b;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(65,105,225,0.15);
    z-index: 10001 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: box-shadow 0.25s ease, border-radius 0.3s;
    overflow: hidden;
}
#bcm-chat-widget.bcm-dragging {
    box-shadow: 0 16px 56px rgba(65,105,225,0.45), 0 0 0 1px rgba(65,105,225,0.3);
    cursor: grabbing !important;
}
#bcm-chat-widget.bcm-chat-minimized { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; bottom: 34px; }
#bcm-chat-widget.bcm-chat-open { height: 520px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; }

/* ── Header ── */
.bcm-chat-header {
    background: linear-gradient(135deg, #2c4fbd 0%, #4169E1 50%, #5a82f0 100%);
    color: white; padding: 12px 16px; display: flex; align-items: center;
    justify-content: space-between; cursor: grab; user-select: none;
    position: relative; overflow: hidden;
}
.bcm-chat-header::before {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E");
    pointer-events: none;
}
#bcm-chat-widget.bcm-chat-minimized .bcm-chat-header {
    padding: 0; width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: grab;
    box-shadow: 0 4px 16px rgba(65,105,225,0.4);
}
#bcm-chat-widget.bcm-dragging .bcm-chat-header { cursor: grabbing; }
#bcm-chat-widget.bcm-chat-minimized .bcm-chat-title span,
#bcm-chat-widget.bcm-chat-minimized .bcm-chat-controls,
#bcm-chat-widget.bcm-chat-minimized .bcm-drag-handle { display: none; }
/* The DM unread badge is the ONE span that must remain visible on the minimized
   bubble — it tells the user they have unread direct messages without opening chat.
   Its inline display is toggled by JS (flex when count>0), so only override the
   minimized-hides-spans rule; don't force it visible when the count is zero. */
#bcm-chat-widget.bcm-chat-minimized .bcm-chat-title span#bcm-dm-closed-badge[style*="flex"] { display: flex !important; }
/* When chat is OPEN the in-header envelope badge is the indicator, so hide the
   closed-bubble badge to avoid a duplicate. */
#bcm-chat-widget.bcm-chat-open #bcm-dm-closed-badge { display: none !important; }
#bcm-chat-widget.bcm-chat-minimized .bcm-chat-title { gap: 0; }
#bcm-chat-widget.bcm-chat-minimized .bcm-chat-title i.fa-comments { font-size: 1.8rem; }

.bcm-drag-handle { opacity: 0.5; margin-right: 4px; cursor: grab; font-size: 0.8rem; }
.bcm-chat-header:active .bcm-drag-handle { cursor: grabbing; }
.bcm-chat-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; position: relative; z-index: 1; }
.bcm-chat-title i { font-size: 1.1rem; }

.bcm-chat-badge {
    display: none; background: #ef4444; color: white;
    font-size: 0.65rem; font-weight: 700; padding: 2px 6px;
    border-radius: 10px; min-width: 18px; text-align: center;
    box-shadow: 0 2px 6px rgba(239,68,68,0.4);
}
#bcm-chat-widget.bcm-chat-minimized .bcm-chat-badge { position: absolute; top: 2px; right: 2px; padding: 3px 6px; font-size: 0.6rem; }
.bcm-chat-controls { display: flex; gap: 4px; position: relative; z-index: 1; }
.bcm-chat-btn {
    background: rgba(255,255,255,0.25);
    border: none; color: white; width: 30px; height: 30px; border-radius: 8px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.bcm-chat-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.05); }

/* ── Main Area ── */
.bcm-main-area { display: flex; flex: 1 1 0; min-height: 0; overflow: hidden; align-items: stretch; }
.bcm-chat-body { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; min-width: 0; justify-content: flex-start; }

/* Desktop + mobile: ensure the message container chain sizes correctly so
   content anchors to the top and messages fill the remaining space. */
#bcm-chat-widget.bcm-chat-open .bcm-main-area { flex: 1 1 0; min-height: 0; display: flex; flex-direction: row; overflow: hidden; }
#bcm-chat-widget.bcm-chat-open .bcm-chat-body { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; }
#bcm-chat-widget.bcm-chat-open .bcm-chat-messages { flex: 1 1 0; min-height: 0; overflow-y: auto; }
#bcm-chat-widget.bcm-chat-open .bcm-user-info,
#bcm-chat-widget.bcm-chat-open .bcm-mod-panel,
#bcm-chat-widget.bcm-chat-open .bcm-chat-input-wrapper { flex: 0 0 auto; }

/* ── Messages ── */
.bcm-chat-messages {
    flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
    background: #0a0e1a;
}
.bcm-chat-messages::-webkit-scrollbar { width: 5px; }
.bcm-chat-messages::-webkit-scrollbar-track { background: transparent; }
.bcm-chat-messages::-webkit-scrollbar-thumb { background: rgba(65,105,225,0.3); border-radius: 3px; }
.bcm-chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(65,105,225,0.5); }
.bcm-chat-msg { padding: 6px 10px; border-radius: 8px; transition: background 0.15s; animation: bcm-msg-in 0.2s ease; max-width: 100%; }
.bcm-chat-msg:hover { background: rgba(65,105,225,0.06); }
@keyframes bcm-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.bcm-chat-msg-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.bcm-msg-avatar { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 800; color: #fff; flex-shrink: 0; text-transform: uppercase; }
.bcm-chat-msg-user { font-weight: 700; font-size: 0.8rem; color: #5a82f0; }
.bcm-chat-msg-time { font-size: 0.65rem; color: var(--text-muted, #64748b); margin-left: auto; }
.bcm-chat-msg-text { font-size: 0.85rem; color: var(--text-primary, #e2e8f0); word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; line-height: 1.45; padding-left: 28px; max-width: 100%; }
.bcm-chat-msg-image { max-width: 240px; max-height: 200px; border-radius: 8px; margin-top: 4px; margin-left: 28px; cursor: pointer; border: 1px solid rgba(65,105,225,0.2); transition: transform 0.2s, box-shadow 0.2s; display: block; }
.bcm-chat-msg-image:hover { transform: scale(1.02); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.bcm-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 99999; cursor: zoom-out; animation: bcm-fade-in 0.15s ease; }
.bcm-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
@keyframes bcm-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── User Info Bar ── */
.bcm-user-info { display: flex; align-items: center; padding: 0.45rem 0.85rem; background: rgba(65,105,225,0.08); border-bottom: 1px solid rgba(65,105,225,0.12); font-size: 0.8rem; color: var(--text-primary, #f8fafc); font-weight: 600; flex: 0 0 auto; }
.bcm-mod-panel { flex: 0 0 auto; }
.bcm-load-more { width: calc(100% - 20px); margin: 0 auto 8px; padding: 6px 12px; background: rgba(65,105,225,0.08); border: 1px solid rgba(65,105,225,0.2); border-radius: 6px; color: #5a82f0; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.2s; flex: 0 0 auto; }
.bcm-load-more:hover { background: rgba(65,105,225,0.15); }

/* ── Input Area ── */
.bcm-chat-input-wrapper { padding: 8px 12px 12px; background: #1e293b; border-top: 1px solid rgba(65,105,225,0.12); display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.bcm-chat-tools-row { display: flex; gap: 6px; align-items: center; }
.bcm-chat-input-row { display: flex; gap: 6px; align-items: flex-end; }
.bcm-image-preview { position: relative; display: inline-block; margin-bottom: 4px; }
.bcm-image-preview img { max-height: 80px; border-radius: 8px; border: 1px solid rgba(65,105,225,0.3); }
.bcm-image-preview-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #ef4444; color: white; border: none; font-size: 0.65rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
#bcm-chat-message { flex: 1; padding: 9px 12px; background: #0a0e1a; border: 1px solid rgba(65,105,225,0.2); border-radius: 10px; color: var(--text-primary, #f8fafc); font-size: 0.85rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; min-height: 38px; }
#bcm-chat-message:focus { border-color: #4169E1; box-shadow: 0 0 0 2px rgba(65,105,225,0.1); }
#bcm-chat-message::placeholder { color: var(--text-muted, #64748b); }
.bcm-chat-img-btn { background: rgba(65,105,225,0.1); border: 1px solid rgba(65,105,225,0.2); color: #5a82f0; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; font-size: 0.8rem; }
.bcm-chat-img-btn:hover { background: rgba(65,105,225,0.2); border-color: #4169E1; }
.bcm-chat-emoji-btn { background: rgba(65,105,225,0.1); border: 1px solid rgba(65,105,225,0.2); color: #5a82f0; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; font-size: 0.8rem; }
.bcm-chat-emoji-btn:hover { background: rgba(65,105,225,0.2); border-color: #4169E1; }

/* Emoji Picker */
.bcm-emoji-picker {
    background: #0f172a;
    border: 1px solid rgba(65,105,225,0.2);
    border-radius: 10px;
    padding: 0.4rem;
    margin-top: 0.3rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.bcm-emoji-tabs {
    display: flex;
    gap: 0.2rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(65,105,225,0.1);
}
.bcm-emoji-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}
.bcm-emoji-tab:hover { background: rgba(65,105,225,0.1); }
.bcm-emoji-tab.active { background: rgba(65,105,225,0.15); border-color: rgba(65,105,225,0.3); }
.bcm-emoji-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.15rem;
    max-height: 140px;
    overflow-y: auto;
}
.bcm-emoji-hidden { display: none !important; }
.bcm-emoji-item {
    font-size: 1.15rem;
    padding: 0.2rem;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.1s;
    line-height: 1.3;
    user-select: none;
}
.bcm-emoji-item:hover { background: rgba(65,105,225,0.15); }

/* Light mode emoji picker */
[data-theme="light"] .bcm-emoji-picker {
    background: #fff;
    border-color: rgba(65,105,225,0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
[data-theme="light"] .bcm-emoji-tab:hover { background: rgba(65,105,225,0.08); }
[data-theme="light"] .bcm-emoji-tab.active { background: rgba(65,105,225,0.1); border-color: rgba(65,105,225,0.2); }
[data-theme="light"] .bcm-emoji-item:hover { background: rgba(65,105,225,0.08); }
.bcm-chat-send { background: linear-gradient(135deg, #2c4fbd, #4169E1); border: none; color: white; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, box-shadow 0.2s; flex-shrink: 0; }
.bcm-chat-send:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(65,105,225,0.4); }
.bcm-chat-send:active { transform: scale(0.95); }
.bcm-chat-send i { font-size: 0.9rem; }

/* ── Users Sidebar ── */
.bcm-users-sidebar { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid rgba(65,105,225,0.12); background: rgba(15,23,42,0.6); overflow: hidden; }
.bcm-users-header { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; font-size: 0.68rem; font-weight: 700; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid rgba(65,105,225,0.1); flex-shrink: 0; background: rgba(65,105,225,0.05); }
.bcm-online-dot { color: #10b981; font-size: 0.45rem; animation: bcm-pulse 2s infinite; }
@keyframes bcm-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.bcm-users-list { overflow-y: auto; overflow-x: hidden; flex: 1; padding: 4px 0; }
.bcm-users-list::-webkit-scrollbar { width: 3px; }
.bcm-users-list::-webkit-scrollbar-thumb { background: rgba(65,105,225,0.2); border-radius: 2px; }
.bcm-user-entry { display: flex; align-items: center; gap: 5px; padding: 3px 7px; font-size: 0.72rem; color: var(--text-secondary, #cbd5e1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s; cursor: default; line-height: 1.4; }
.bcm-user-entry:hover { background: rgba(65,105,225,0.06); }
.bcm-user-entry span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcm-user-icon { font-size: 0.6rem; flex-shrink: 0; }
.bcm-user-icon.reg  { color: #10b981; }
.bcm-user-icon.anon { color: #475569; }
.bcm-user-anon span { color: #64748b; }
.bcm-users-empty { padding: 10px 7px; font-size: 0.72rem; color: var(--text-muted, #64748b); font-style:normal; text-align: center; }

/* ── Mod ── */
.bcm-mod-badge { display: inline-block; margin-left: 5px; padding: 1px 5px; background: linear-gradient(135deg, #2c4fbd, #4169E1); color: white; font-size: 0.55rem; font-weight: 700; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.bcm-ban-btn { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 0.85rem; opacity: 0.4; transition: opacity 0.2s; padding: 2px 4px; }
.bcm-ban-btn:hover { opacity: 1; }
.bcm-mod-controls { padding: 6px 10px; background: rgba(65,105,225,0.08); border-top: 1px solid rgba(65,105,225,0.2); display: flex; gap: 8px; justify-content: center; }
.bcm-mod-btn { padding: 5px 10px; border: 1px solid rgba(65,105,225,0.3); background: rgba(65,105,225,0.1); color: var(--text-primary, #f8fafc); border-radius: 6px; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.bcm-mod-btn:hover { background: rgba(65,105,225,0.2); }
.bcm-clear-btn:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.5); }

/* ── Resize ── */
.bcm-resize-handle { position: absolute; bottom: 0; right: 0; width: 18px; height: 18px; cursor: se-resize; display: flex; align-items: center; justify-content: center; opacity: 0.4; transition: opacity 0.2s; z-index: 10; color: var(--text-muted, #94a3b8); }
.bcm-resize-handle:hover { opacity: 1; }
.bcm-resize-handle i { font-size: 0.7rem; transform: rotate(90deg); }
#bcm-chat-widget.bcm-chat-minimized .bcm-resize-handle { display: none; }
#bcm-chat-widget.bcm-resizing, #bcm-chat-widget.bcm-resizing * { user-select: none; }
.bcm-user-icon.mod { color: #4169E1; }
.bcm-user-mod span { color: #a855f7; font-weight: 600; }
.bcm-users-sidebar .bcm-mod-badge { font-size: 0.5rem; background: #9333ea; color: #fff; border-radius: 3px; padding: 1px 4px; flex-shrink: 0; margin-left: auto; }

/* ── Mobile ── */
#bcm-chat-widget.bcm-chat-fullscreen { position: fixed !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; z-index: 99999 !important; }
@media (max-width: 480px) {
    #bcm-chat-widget.bcm-chat-open { right: 0; bottom: 0; width: 100%; left: 0; top: 0; height: 100%; max-height: none; }
    .bcm-users-sidebar { width: 110px; }
    .bcm-chat-header { flex: 0 0 auto; }
}

/* ── Light Theme ── */
[data-theme="light"] #bcm-chat-widget { background: #ffffff; box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(65,105,225,0.15); }
[data-theme="light"] .bcm-chat-messages { background: #f8fafc; }
[data-theme="light"] .bcm-chat-msg:hover { background: rgba(65,105,225,0.04); }
[data-theme="light"] .bcm-chat-msg-user { color: #2c4fbd; }
[data-theme="light"] .bcm-chat-msg-text { color: #1e293b; }
[data-theme="light"] #bcm-chat-message { background: #ffffff; border-color: #cbd5e1; color: #1e293b; }
[data-theme="light"] #bcm-chat-message::placeholder { color: #64748b; }
#bcm-dm-input::placeholder { color: rgba(148,163,184,0.75); }
[data-theme="light"] #bcm-dm-input::placeholder { color: #64748b; }
[data-theme="light"] .bcm-chat-input-wrapper { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .bcm-user-info { background: rgba(65,105,225,0.06); border-color: #e2e8f0; color: #1e293b; }
[data-theme="light"] .bcm-load-more { background: rgba(65,105,225,0.05); border-color: #cbd5e1; color: #2c4fbd; }
[data-theme="light"] .bcm-users-sidebar { background: #f1f5f9; border-left-color: #e2e8f0; }
[data-theme="light"] .bcm-users-header { background: #e2e8f0; }
[data-theme="light"] .bcm-user-entry { color: #334155; }
[data-theme="light"] .bcm-user-anon span { color: #94a3b8; }
[data-theme="light"] .bcm-mod-controls { background: rgba(65,105,225,0.04); }
[data-theme="light"] .bcm-mod-btn { color: #1e293b; }
[data-theme="light"] .bcm-chat-img-btn { background: rgba(65,105,225,0.06); border-color: #cbd5e1; color: #2c4fbd; }

/* ── User Tooltip ── */
.bcm-user-tooltip {
    position: fixed; z-index: 100002; width: 280px;
    background: rgba(15, 18, 35, 0.96); border: 1px solid rgba(65,105,225,0.35);
    border-radius: 10px; padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); backdrop-filter: blur(5px);
    pointer-events: auto; animation: bcm-tip-in 0.15s ease-out;
}
@keyframes bcm-tip-in { from { opacity: 0; transform: scale(0.95) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.bcm-tip-username { font-weight: 700; font-size: 0.85rem; color: #7ba4f7; margin-bottom: 6px; white-space: normal; overflow: visible; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.bcm-tip-coin-row { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(65,105,225,0.12); }
.bcm-tip-coin-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.bcm-tip-mining { font-size: 0.78rem; color: #e2e8f0; margin-bottom: 5px; line-height: 1.5; }
.bcm-tip-hashrate { font-weight: 600; font-size: 0.78rem; }
.bcm-tip-spectate { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: linear-gradient(135deg, rgba(65,105,225,0.25), rgba(44,79,189,0.25)); border: 1px solid rgba(65,105,225,0.35); border-radius: 5px; color: #7ba4f7; font-size: 0.7rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.15s; }
.bcm-tip-spectate:hover { background: linear-gradient(135deg, rgba(65,105,225,0.4), rgba(44,79,189,0.4)); color: #fff; }
.bcm-user-entry { cursor: default; }
.bcm-user-entry[data-wallet] { cursor: pointer; }

[data-theme="light"] .bcm-user-tooltip { background: rgba(255,255,255,0.97); border-color: #cbd5e1; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
[data-theme="light"] .bcm-tip-username { color: #2c4fbd; }
[data-theme="light"] .bcm-tip-mining { color: #334155; }
[data-theme="light"] .bcm-tip-coin-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .bcm-tip-spectate { background: rgba(65,105,225,0.08); border-color: rgba(65,105,225,0.25); color: #2c4fbd; }
[data-theme="light"] .bcm-tip-spectate:hover { background: rgba(65,105,225,0.15); color: #1a3380; }

/* Mobile chat fixes */
@media (max-width: 768px) {
    #bcm-chat-widget.bcm-chat-open {
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    #bcm-chat-widget.bcm-chat-minimized {
        width: 60px !important;
        height: 60px !important;
        /* JS owns left/top for bubble drag — no position overrides here */
    }
    .bcm-chat-input-wrapper {
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        flex-shrink: 0;
    }
    /* Ensure messages fill remaining space */
    #bcm-chat-widget.bcm-chat-open .bcm-main-area {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }
    #bcm-chat-widget.bcm-chat-open .bcm-chat-messages {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #bcm-chat-widget.bcm-chat-open .bcm-chat-body {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    /* Keep user-info, mod-panel and input from shrinking so messages get the space */
    #bcm-chat-widget.bcm-chat-open .bcm-user-info,
    #bcm-chat-widget.bcm-chat-open .bcm-mod-panel,
    #bcm-chat-widget.bcm-chat-open .bcm-chat-input-wrapper {
        flex: 0 0 auto;
    }
}

/* ── Message edit UI ───────────────────────────────────────────────────── */
.bcm-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    padding: 2px 4px;
    margin-left: 2px;
    border-radius: 3px;
    transition: opacity 0.15s, background 0.15s;
    line-height: 1;
}
.bcm-chat-msg:hover .bcm-edit-btn {
    opacity: 0.5;
}
.bcm-edit-btn:hover {
    opacity: 1 !important;
    background: rgba(65,105,225,0.12);
}
.bcm-edited-label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    font-style:normal;
    margin-left: 4px;
}
.bcm-edit-area {
    padding: 4px 8px 6px 40px;
}
.bcm-edit-textarea {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(65,105,225,0.4);
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 13px;
    padding: 6px 8px;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
}
.bcm-edit-textarea:focus {
    border-color: #4169E1;
    background: rgba(255,255,255,0.1);
}
/* The base rule above uses near-white text on a translucent white background,
   which is unreadable in light theme — the edit box looked blank. Give light
   theme a solid background and dark text. */
[data-theme="light"] .bcm-edit-textarea {
    background: #ffffff;
    color: #1e293b;
    border-color: rgba(65,105,225,0.45);
}
[data-theme="light"] .bcm-edit-textarea:focus {
    background: #ffffff;
    border-color: #2563eb;
}
.bcm-edit-btn-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.bcm-edit-save-btn,
.bcm-edit-cancel-btn {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
.bcm-edit-save-btn {
    background: #4169E1;
    color: #fff;
}
.bcm-edit-save-btn:hover { background: #3058c8; }
.bcm-edit-cancel-btn {
    background: rgba(255,255,255,0.1);
    color: #aaa;
}
.bcm-edit-cancel-btn:hover { background: rgba(255,255,255,0.18); }
/* ── End message edit UI ───────────────────────────────────────────────── */

/* ── Chat enhancements: reactions, mentions, actions, commands ──────────── */

/* React button in the message meta (hover-reveal, like edit/delete) */
.bcm-react-btn {
    background: none; border: none; cursor: pointer; font-size: 13px;
    opacity: 0; padding: 2px 4px; margin-left: 2px; border-radius: 3px;
    transition: opacity 0.15s, background 0.15s; line-height: 1; color: inherit;
}
.bcm-chat-msg:hover .bcm-react-btn { opacity: 0.5; }
.bcm-react-btn:hover { opacity: 1 !important; background: rgba(65,105,225,0.12); }

/* Reaction picker popup */
.bcm-react-pop {
    position: fixed; z-index: 100000; display: flex; gap: 2px;
    background: #1e293b; border: 1px solid rgba(65,105,225,0.4);
    border-radius: 22px; padding: 4px 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.bcm-react-opt {
    background: none; border: none; cursor: pointer; font-size: 1.15rem;
    line-height: 1; padding: 3px; border-radius: 50%; transition: transform 0.12s, background 0.12s;
}
.bcm-react-opt:hover { transform: scale(1.25); background: rgba(65,105,225,0.18); }
[data-theme="light"] .bcm-react-pop { background: #ffffff; border-color: #cbd5e1; }

/* Reaction chips under a message */
.bcm-msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 28px; }
.bcm-msg-reactions:empty { display: none; }
.bcm-reaction-chip {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(65,105,225,0.12); border: 1px solid rgba(65,105,225,0.25);
    border-radius: 11px; padding: 1px 7px; margin-top: 3px; cursor: pointer;
    font-size: 0.78rem; line-height: 1.4; transition: background 0.15s, border-color 0.15s;
}
.bcm-reaction-chip:hover { background: rgba(65,105,225,0.22); }
.bcm-reaction-chip.mine { background: rgba(65,105,225,0.32); border-color: #4169E1; }
.bcm-reaction-n { font-size: 0.72rem; font-weight: 700; color: var(--text-primary, #e2e8f0); }
[data-theme="light"] .bcm-reaction-chip { background: rgba(65,105,225,0.08); border-color: rgba(65,105,225,0.2); }
[data-theme="light"] .bcm-reaction-chip.mine { background: rgba(65,105,225,0.18); border-color: #4169E1; }
[data-theme="light"] .bcm-reaction-n { color: #1e293b; }

/* @mentions in message text */
.bcm-mention {
    color: #93c5fd; font-weight: 700; background: rgba(65,105,225,0.14);
    border-radius: 4px; padding: 0 3px;
}
.bcm-mention-self { color: #fbbf24; background: rgba(251,191,36,0.16); }
[data-theme="light"] .bcm-mention { color: #2563eb; background: rgba(37,99,235,0.1); }
[data-theme="light"] .bcm-mention-self { color: #b45309; background: rgba(251,191,36,0.22); }
/* A whole message that mentions you gets a subtle left accent */
.bcm-chat-msg:has(.bcm-mention-self) { background: rgba(251,191,36,0.06); border-left: 2px solid rgba(251,191,36,0.5); }

/* /me action line */
.bcm-msg-action { font-style: italic; color: #c4b5fd; }
[data-theme="light"] .bcm-msg-action { color: #7c3aed; }

/* @-mention autocomplete popup */
.bcm-mention-pop {
    position: fixed; z-index: 100000; background: #1e293b;
    border: 1px solid rgba(65,105,225,0.4); border-radius: 10px; overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5); max-height: 200px; overflow-y: auto;
}
.bcm-mention-item {
    padding: 6px 12px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
    color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bcm-mention-item.sel, .bcm-mention-item:hover { background: rgba(65,105,225,0.25); }
[data-theme="light"] .bcm-mention-pop { background: #ffffff; border-color: #cbd5e1; }
[data-theme="light"] .bcm-mention-item { color: #1e293b; }
[data-theme="light"] .bcm-mention-item.sel, [data-theme="light"] .bcm-mention-item:hover { background: rgba(65,105,225,0.12); }

/* Local system / command-output lines (ephemeral, your screen only) */
.bcm-chat-sysline {
    font-size: 0.76rem; color: var(--text-muted, #94a3b8); line-height: 1.5;
    padding: 5px 10px; margin: 3px 0; border-left: 2px solid rgba(65,105,225,0.4);
    background: rgba(65,105,225,0.06); border-radius: 0 6px 6px 0;
}
.bcm-chat-sysline code {
    background: rgba(65,105,225,0.18); border-radius: 3px; padding: 0 4px;
    font-size: 0.72rem; color: #93c5fd;
}
[data-theme="light"] .bcm-chat-sysline { color: #475569; }
[data-theme="light"] .bcm-chat-sysline code { color: #2563eb; background: rgba(37,99,235,0.1); }
/* ── End chat enhancements ─────────────────────────────────────────────── */

/* ── Combined launcher caption ("Chat/Message Center") ──────────────────── */
.bcm-launcher-label {
    position: fixed;
    z-index: 9998;                  /* under modal overlays (9999) so it never
                                       covers dialog content like Quick Connect */
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2c4fbd, #4169E1);
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 3px 9px;
    border-radius: 10px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    user-select: none;
    display: none;                  /* JS reveals it when the bubble is minimized */
}
.bcm-launcher-label:hover { filter: brightness(1.1); }
[data-theme="light"] .bcm-launcher-label { box-shadow: 0 3px 10px rgba(37,99,235,0.35); }
/* ── End launcher caption ──────────────────────────────────────────────── */

/* ── Prominent Direct Messages entry bar (open chat window) ─────────────── */
.bcm-dm-entry {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin: 8px 10px 4px;
    background: linear-gradient(135deg, rgba(65,105,225,0.18), rgba(37,99,235,0.10));
    border: 1px solid rgba(65,105,225,0.35);
    border-radius: 10px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.bcm-dm-entry:hover {
    background: linear-gradient(135deg, rgba(65,105,225,0.30), rgba(37,99,235,0.18));
    border-color: rgba(65,105,225,0.6);
}
.bcm-dm-entry:active { transform: scale(0.99); }
.bcm-dm-entry-icon {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg, #2c4fbd, #4169E1); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(65,105,225,0.4);
}
.bcm-dm-entry-text { flex: 1; min-width: 0; }
.bcm-dm-entry-title {
    font-size: 0.82rem; font-weight: 700; color: var(--text-primary, #e2e8f0);
    display: flex; align-items: center; gap: 6px; line-height: 1.2;
}
.bcm-dm-entry-desc {
    font-size: 0.68rem; color: var(--text-muted, #94a3b8); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.bcm-dm-entry-badge {
    display: none; align-items: center; justify-content: center;
    background: #ef4444; color: #fff; font-size: 0.62rem; font-weight: 700;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    box-shadow: 0 1px 4px rgba(239,68,68,0.5);
}
.bcm-dm-entry-arrow { color: var(--text-muted, #94a3b8); font-size: 0.8rem; flex-shrink: 0; }
.bcm-dm-entry.has-unread {
    border-color: rgba(239,68,68,0.55);
    background: linear-gradient(135deg, rgba(239,68,68,0.14), rgba(65,105,225,0.14));
}
.bcm-dm-entry.has-unread .bcm-dm-entry-icon { animation: bcmDmPulse 2s ease-in-out infinite; }
@keyframes bcmDmPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(65,105,225,0.4); }
    50%      { box-shadow: 0 2px 15px rgba(239,68,68,0.75); }
}
[data-theme="light"] .bcm-dm-entry {
    background: linear-gradient(135deg, rgba(65,105,225,0.10), rgba(37,99,235,0.05));
}
[data-theme="light"] .bcm-dm-entry:hover {
    background: linear-gradient(135deg, rgba(65,105,225,0.18), rgba(37,99,235,0.10));
}
[data-theme="light"] .bcm-dm-entry-title { color: #1e293b; }
[data-theme="light"] .bcm-dm-entry-desc { color: #64748b; }
[data-theme="light"] .bcm-dm-entry-arrow { color: #94a3b8; }
/* ── End DM entry bar ──────────────────────────────────────────────────── */

/* ── Always-visible like / heart, pin button, pinned banner ─────────────── */
.bcm-quick-react {
    background: none; border: none; cursor: pointer; font-size: 12px;
    padding: 2px 4px; margin-left: 2px; border-radius: 4px; line-height: 1;
    opacity: 0.65; transition: opacity .15s, background .15s, transform .1s;
}
.bcm-chat-msg:hover .bcm-quick-react { opacity: 1; }
.bcm-quick-react:hover { background: rgba(65,105,225,0.14); transform: scale(1.12); }
.bcm-quick-react.mine { opacity: 1; background: rgba(65,105,225,0.22); }
.bcm-qr-n { font-size: 10px; font-weight: 700; color: var(--text-primary, #e2e8f0); }
[data-theme="light"] .bcm-qr-n { color: #1e293b; }

.bcm-pin-btn {
    background: none; border: none; cursor: pointer; font-size: 11px;
    opacity: 0; padding: 2px 4px; margin-left: 2px; border-radius: 3px;
    transition: opacity .15s, background .15s; line-height: 1;
}
.bcm-chat-msg:hover .bcm-pin-btn { opacity: 0.55; }
.bcm-pin-btn:hover { opacity: 1 !important; background: rgba(251,191,36,0.18); }

.bcm-pinned-banner {
    flex-shrink: 0; margin: 6px 10px 0; padding: 7px 10px;
    background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(65,105,225,0.10));
    border: 1px solid rgba(251,191,36,0.4); border-left: 3px solid #fbbf24;
    border-radius: 8px; font-size: .78rem; line-height: 1.4;
}
.bcm-pinned-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .62rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: #fbbf24; margin-bottom: 3px;
}
.bcm-unpin-btn {
    background: none; border: none; cursor: pointer; color: #fbbf24;
    font-size: 15px; line-height: 1; padding: 0 2px; opacity: .75;
}
.bcm-unpin-btn:hover { opacity: 1; }
.bcm-pinned-body {
    color: var(--text-primary, #e2e8f0);
    overflow-wrap: anywhere; max-height: 4.6em; overflow-y: auto;
}
[data-theme="light"] .bcm-pinned-body { color: #1e293b; }
[data-theme="light"] .bcm-pinned-head { color: #b45309; }
/* ── End likes / pin ────────────────────────────────────────────────────── */

/* ── Mobile keyboard: keep the input row + Send button visible ──────────── */
/* Touch layouts only — desktop is untouched. JS pins the panel to
   window.visualViewport when the keyboard opens; these rules make sure the
   input row survives the squeeze instead of being pushed off-screen. */
@media (max-width: 1024px) and (pointer: coarse) {

    /* The panel is a column: messages flex, input row must never shrink.
       IMPORTANT: do NOT set `display` on #bcm-dm-panel here. That panel is shown
       and hidden with an INLINE style (display:flex / display:none), so a
       `display:flex !important` rule overrode the inline `none` and left the DM
       panel permanently on screen — it covered the chat bubble and appeared as
       soon as the chat input was focused. Only the open chat widget gets a
       display override; the DM panel just gets its column direction, which
       applies whenever its own inline display:flex is active. */
    #bcm-chat-widget.bcm-chat-open {
        display: flex !important;
        flex-direction: column !important;
        overscroll-behavior: contain;
    }
    #bcm-dm-panel {
        flex-direction: column !important;
        overscroll-behavior: contain;
        /* Full-screen on touch, with NO transform. The panel otherwise centers itself
           via transform:translateX(-50%), and a position:fixed element WITH a transform
           gets re-composited by iOS when the keyboard opens — which made the DM panel
           vanish behind the chat the moment the input was focused. Matching the chat
           widget's full-screen, transform-free layout keeps it put. */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }
    /* The corner resize grip is pointless (and overlaps the send button) full-screen. */
    #bcm-dm-resize { display: none !important; }
    #bcm-chat-widget.bcm-chat-open .bcm-chat-input-wrapper,
    #bcm-dm-panel .bcm-dm-input-row {
        flex: 0 0 auto !important;
        position: relative;
        z-index: 2;
    }
    /* Messages area takes the remaining space and scrolls, so a shrinking
       viewport eats into the message list rather than the input row. */
    #bcm-chat-widget.bcm-chat-open .bcm-chat-messages,
    #bcm-chat-widget.bcm-chat-open #bcm-chat-messages,
    #bcm-dm-panel #bcm-dm-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Send button must never be squeezed out by a long input. */
    #bcm-chat-widget.bcm-chat-open .bcm-chat-send,
    #bcm-chat-widget.bcm-chat-open button[type="submit"],
    #bcm-dm-panel #bcm-dm-send {
        flex: 0 0 auto !important;
        min-width: 44px;
    }
    /* Home-indicator clearance, but collapse it when the keyboard is up so no
       dead gap appears between the keyboard and the input row. */
    #bcm-chat-widget.bcm-chat-open .bcm-chat-input-wrapper {
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    #bcm-chat-widget[style*="height"] .bcm-chat-input-wrapper,
    #bcm-dm-panel[style*="height"] .bcm-dm-input-row {
        padding-bottom: 8px !important;
    }
}
/* ── End mobile keyboard handling ───────────────────────────────────────── */

/* Clickable links inside DM bubbles */
.bcm-dm-link { color: #93c5fd; text-decoration: underline; word-break: break-all; }
.bcm-dm-link:hover { color: #bfdbfe; }
/* Inside a "me" bubble the background is royal blue — keep contrast high */
[style*="linear-gradient(135deg,#1e3a8a,#2563eb)"] .bcm-dm-link { color: #e0ecff; }
[data-theme="light"] .bcm-dm-link { color: #2563eb; }

/* Ticker markup remains in chat-widget.js but is NOT styled or shown. The mobile
   CSS block that positioned it was removed after it collapsed the message list.
   Kept hidden rather than ripping out the markup, so it can be restyled later
   without re-adding JS. */
.bcm-users-ticker { display: none !important; }