/* ============================================
   Better Messages - GRANDMA CAN SEE IT
   Heavy borders, obvious boxes, clear targets
   Matches QA Feedback widget contrast standard
   ============================================ */

/* Main container - thick obvious border */
.bp-messages-wrap {
    border: 3px solid #555 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
}

/* Sidebar panel - thick divider */
.bp-messages-wrap .bp-messages-threads-wrapper {
    border-right: 3px solid #555 !important;
}

/* Chat header - heavy bottom line */
.bp-messages-wrap .chat-header,
.bp-messages-wrap .bp-messages-column-header {
    border-bottom: 3px solid #555 !important;
    background-color: #F8F5EC !important;
    padding: 10px !important;
}

/* Each conversation in the list - thick separators */
.bp-messages-wrap .threads-list .thread,
.bp-messages-wrap .threads-list .thread-item {
    border-bottom: 2px solid #999 !important;
    padding: 12px 10px !important;
}

.bp-messages-wrap .threads-list .thread:hover,
.bp-messages-wrap .threads-list .thread-item:hover {
    background-color: #F8F5EC !important;
}

/* Selected conversation - fat green bar */
.bp-messages-wrap .threads-list .thread.active,
.bp-messages-wrap .threads-list .thread-item.active {
    background-color: #F8F5EC !important;
    border-left: 6px solid #4A4E8A !important;
}

/* ---- MESSAGE BUBBLES ---- */
/* Sent messages */
.bp-messages-wrap .messages-stack.outgoing .content .messages-list .message {
    background-color: #F8F5EC !important;
    border: 2px solid #4A4E8A !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 6px !important;
    color: #1a1a1a !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Received messages */
.bp-messages-wrap .messages-stack.incoming .content .messages-list .message {
    background-color: #fafafa !important;
    border: 2px solid #777 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 6px !important;
    color: #1a1a1a !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* ---- THE INPUT BOX (was invisible) ---- */
.bp-messages-wrap .reply .bp-messages-textarea,
.bp-messages-wrap .reply textarea,
.bp-messages-wrap .reply .emojionearea,
.bp-messages-wrap .reply .emojionearea .emojionearea-editor {
    border: 3px solid #555 !important;
    background-color: #FFFFF0 !important;
    color: #1a1a1a !important;
    border-radius: 8px !important;
    padding: 12px !important;
    min-height: 52px !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
}

/* Reply area container */
.bp-messages-wrap .reply {
    border-top: 3px solid #555 !important;
    padding: 10px !important;
    background-color: #f5f5f0 !important;
}

/* Focus - you KNOW where you are */
.bp-messages-wrap .reply .bp-messages-textarea:focus,
.bp-messages-wrap .reply textarea:focus,
.bp-messages-wrap .reply .emojionearea.focused,
.bp-messages-wrap .reply .emojionearea.focused .emojionearea-editor {
    border-color: #4A4E8A !important;
    outline: 3px solid #D4A84B !important;
    outline-offset: 2px !important;
    background-color: #fff !important;
}

/* Placeholder */
.bp-messages-wrap .reply .emojionearea .emojionearea-editor:empty::before,
.bp-messages-wrap .reply textarea::placeholder {
    color: #777 !important;
    font-size: 17px !important;
    font-style: italic !important;
}

/* ---- SEND BUTTON - BIG GREEN ---- */
.bp-messages-wrap .reply .send-button,
.bp-messages-wrap .reply button[type="submit"] {
    background-color: #4A4E8A !important;
    color: #F0EEE9 !important;
    border: 3px solid #2B2D5E !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    min-height: 52px !important;
    min-width: 52px !important;
    cursor: pointer !important;
}

.bp-messages-wrap .reply .send-button:hover,
.bp-messages-wrap .reply button[type="submit"]:hover {
    background-color: #3a6228 !important;
    border-color: #4A4E8A !important;
}

/* ---- ALL BUTTONS - BIG TOUCH TARGETS ---- */
.bp-messages-wrap button,
.bp-messages-wrap a.button {
    min-height: 48px !important;
    min-width: 48px !important;
    font-size: 16px !important;
}

/* Toolbar icons (emoji, attach, call, video) */
.bp-messages-wrap .reply .toolbar button,
.bp-messages-wrap .chat-header .actions button,
.bp-messages-wrap .chat-header .actions a {
    border: 2px solid #999 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    min-height: 48px !important;
    min-width: 48px !important;
    margin: 3px !important;
    background-color: #fafafa !important;
}

.bp-messages-wrap .reply .toolbar button:hover,
.bp-messages-wrap .chat-header .actions button:hover,
.bp-messages-wrap .chat-header .actions a:hover {
    background-color: #F8F5EC !important;
    border-color: #4A4E8A !important;
}

/* ---- SEARCH BOX ---- */
.bp-messages-wrap .bp-messages-search input,
.bp-messages-wrap input[type="search"],
.bp-messages-wrap input[type="text"] {
    border: 3px solid #555 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 17px !important;
    min-height: 48px !important;
    background-color: #FFFFF0 !important;
}

/* ---- NEW MESSAGE BUTTON ---- */
.bp-messages-wrap .new-message,
.bp-messages-wrap .bp-messages-new-message-button {
    border: 3px solid #2B2D5E !important;
    background-color: #4A4E8A !important;
    color: #F0EEE9 !important;
    border-radius: 8px !important;
    min-height: 48px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
}

/* ---- USER NAMES - BOLD AND BIG ---- */
.bp-messages-wrap .messages-stack .info .name,
.bp-messages-wrap .thread .info .name,
.bp-messages-wrap .messages-stack .name {
    font-weight: 800 !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
}

/* ---- TIMESTAMPS ---- */
.bp-messages-wrap .message-time,
.bp-messages-wrap .timestamp,
.bp-messages-wrap .time {
    font-size: 14px !important;
    color: #555 !important;
    font-weight: 500 !important;
}

/* ---- SCROLLBAR - FAT AND GRABBABLE ---- */
.bp-messages-wrap ::-webkit-scrollbar {
    width: 14px !important;
}
.bp-messages-wrap ::-webkit-scrollbar-track {
    background: #eee !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}
.bp-messages-wrap ::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 6px !important;
    border: 3px solid #eee !important;
}
.bp-messages-wrap ::-webkit-scrollbar-thumb:hover {
    background: #666 !important;
}

/* ---- ONLINE DOT - BIG ---- */
.bp-messages-wrap .online-status,
.bp-messages-wrap .bm-online-indicator {
    width: 16px !important;
    height: 16px !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 1px #555 !important;
}

/* ---- MINI CHAT POPUPS ---- */
.bp-messages-wrap.bp-messages-mini {
    border: 3px solid #555 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
.bp-messages-wrap.bp-messages-mini .chat-header {
    border-bottom: 3px solid #555 !important;
    background-color: #4A4E8A !important;
    color: #F0EEE9 !important;
}

/* ---- DATE SEPARATORS ---- */
.bp-messages-wrap .messages-separator,
.bp-messages-wrap .date-separator {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #555 !important;
    border-top: 2px solid #ccc !important;
    padding-top: 8px !important;
    margin-top: 12px !important;
}

/* ---- UNREAD COUNT BADGE ---- */
.bp-messages-wrap .unread-count,
.bp-messages-wrap .threads-list .thread .unread {
    background-color: #c0392b !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 1px #c0392b !important;
    border-radius: 12px !important;
}

/* ---- BUDDYBOSS PROFILE TABS (around BM) ---- */
#item-nav .item-list-tabs ul li a,
.bp-navs ul li a {
    font-size: 15px !important;
    padding: 10px 16px !important;
    border: 1px solid transparent !important;
}
#item-nav .item-list-tabs ul li.current a,
.bp-navs ul li.current a,
.bp-navs ul li.selected a {
    border-bottom: 3px solid #4A4E8A !important;
    font-weight: 700 !important;
}