/* ============================================================
   Messages module — Better Messages dark skin
   All rules scoped to .r33-section-messages to avoid leaking
   into other parts of the page.
   ============================================================ */

/* ── 0. Full-width layout when messages section is active ───── */
.r33-dashboard--messages .r33-top-panels {
    display: none;
}

.r33-dashboard--messages #r33-dashboard-content {
    width: 100%;
}

/* ── 1. Card container ──────────────────────────────────────── */
.r33-section-messages {
    background: linear-gradient(135deg, #1e2235 0%, #181c2e 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* ── 2. Override BM colour variables for dark theme ─────────── */
.r33-section-messages {
    --bm-bg-color:            30, 34, 53;
    --bm-bg-secondary:        24, 28, 46;
    --bm-hover-bg:            38, 44, 68;
    --bm-text-color:          220, 224, 240;
    --bm-border-color:        255, 255, 255, 0.07;
    --bm-border-secondary-color: 255, 255, 255, 0.05;
    --bm-placeholder:         180, 185, 210;
    --bm-scrollbar:           rgba(255, 255, 255, 0.10);
    --bm-scrollbar-active:    rgba(255, 255, 255, 0.25);
    --bm-scrollbar-focus:     rgba(255, 255, 255, 0.40);
    --left-message-bg-color:  38, 44, 68;
    --left-message-text-color: 220, 224, 240;
    --right-message-bg-color: 209, 179, 107;
    --right-message-text-color: 24, 28, 46;
    --main-bm-border-color:   rgba(255, 255, 255, 0.07);
}

/* ── 3. Main wrapper — flush with card ──────────────────────── */
.r33-section-messages .bp-messages-wrap {
    border: none;
    border-radius: 0;
    background: transparent;
    min-height: 560px;
}

/* ── 4. Sidebar — divider + dark background ─────────────────── */
.r33-section-messages .bp-messages-side-threads,
.r33-section-messages .bm-left-side {
    background: rgba(0, 0, 0, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── 5. Header bar ──────────────────────────────────────────── */
.r33-section-messages .bm-chat-header-title,
.r33-section-messages .bm-heading {
    background: rgba(0, 0, 0, 0.20);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.90);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 14px 18px;
}

.r33-section-messages .bm-subheading {
    color: rgba(255, 255, 255, 0.50);
    font-size: 12px;
}

/* ── 6. Search bar ──────────────────────────────────────────── */
.r33-section-messages .bm-user-search-wrap,
.r33-section-messages .bm-user-search {
    background: #22263d;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
}

.r33-section-messages .bm-user-search input,
.r33-section-messages .bm-user-search-wrap input {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: none;
}

.r33-section-messages .bm-user-search input::placeholder,
.r33-section-messages .bm-user-search-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.r33-section-messages .bm-search-popup {
    background: #22263d;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
}

/* ── 7. Thread list items ───────────────────────────────────── */
.r33-section-messages .bm-user {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.r33-section-messages .bm-user:hover {
    background: rgba(209, 179, 107, 0.06);
}

.r33-section-messages .bm-user.bm-active,
.r33-section-messages .bp-messages-active-thread .bm-user {
    background: rgba(209, 179, 107, 0.10);
    border-left: 3px solid #d1b36b;
}

.r33-section-messages .bm-name {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
}

.r33-section-messages .bm-last-message-content {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

.r33-section-messages .bm-time {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
}

/* ── 8. Chat panel ──────────────────────────────────────────── */
.r33-section-messages .bp-messages-single-thread-wrap,
.r33-section-messages .bm-right-side {
    background: transparent;
}

.r33-section-messages .bm-messages-list,
.r33-section-messages .bm-messages-listing {
    background: transparent;
}

/* Incoming messages */
.r33-section-messages .bm-message-content {
    background: rgba(var(--left-message-bg-color), 1);
    color: rgba(var(--left-message-text-color), 1);
    border-radius: 10px 10px 10px 2px;
}

/* Own messages */
.r33-section-messages .bm-message.bm-right-side .bm-message-content,
.r33-section-messages .bm-message-content.bm-right-side {
    border-radius: 10px 10px 2px 10px;
}

.r33-section-messages .bm-message-content-text {
    color: inherit;
}

/* ── 9. Message input editor ────────────────────────────────── */
.r33-section-messages .bm-editor,
.r33-section-messages .bm-editor-content {
    background: #22263d;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
}

.r33-section-messages .bm-editor [data-placeholder]:empty:before {
    color: rgba(255, 255, 255, 0.35);
}

.r33-section-messages .bm-send-message {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.12);
}

/* ── 10. Empty / placeholder state ─────────────────────────── */
.r33-section-messages .bm-placeholder-wrapper,
.r33-section-messages .bp-messages-main-placeholder,
.r33-section-messages .bp-messages-placeholder-message {
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
}

.r33-section-messages .bm-placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.r33-section-messages .bm-placeholder svg,
.r33-section-messages .bm-placeholder-wrapper svg {
    opacity: 0.25;
    filter: invert(1);
}

/* ── 11. Action buttons / icon row ──────────────────────────── */
.r33-section-messages .bm-action-buttons {
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.r33-section-messages .bm-btn,
.r33-section-messages .bm-style-btn {
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.r33-section-messages .bm-btn:hover,
.r33-section-messages .bm-style-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.07);
}

/* ── 12. Scrollbars (webkit) ────────────────────────────────── */
.r33-section-messages ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.r33-section-messages ::-webkit-scrollbar-track {
    background: transparent;
}

.r33-section-messages ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.r33-section-messages ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.30);
}

/* ── 13. Sticky date pills ──────────────────────────────────── */
.r33-section-messages .bm-sticky-date {
    background: rgba(30, 34, 53, 0.85);
    color: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── 14. Unread badge ───────────────────────────────────────── */
.r33-section-messages .bm-unread-count,
.r33-section-messages .bm-draft-indicator {
    background: #d1b36b;
    color: #181c2e;
    font-weight: 700;
    border-radius: 20px;
    font-size: 11px;
}

/* ── 15. Typing indicator ───────────────────────────────────── */
.r33-section-messages .bm-typing__bullet {
    background: rgba(209, 179, 107, 0.7);
}

/* ── 16. Thread info panel (right panel) ────────────────────── */
.r33-section-messages .bm-thread-settings,
.r33-section-messages .bm-thread-settings-container,
.r33-section-messages .bm-thread-info-container {
    background: rgba(0, 0, 0, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── 17. System messages ────────────────────────────────────── */
.r33-section-messages .bm-system-message,
.r33-section-messages .bm-conversation-start {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
}