/*
 * Visual reskin of /messages/ to match the WLM-inspired identity built for
 * the Chismy Messenger app (chismy-messenger/chismy_messenger). Same color
 * palette (see chismy_messenger/lib/theme/wlm_theme.dart), applied as an
 * overlay on the existing WoWonder chat markup — no chat logic touched,
 * only colors/borders/gradients on the selectors that already exist.
 */

:root {
    --wlm-header-top: #3A8DDE;
    --wlm-header-bottom: #0B5CAD;
    --wlm-accent: #1E6FC9;
    --wlm-panel-bg: #F3F7FC;
    --wlm-tile-bg: #FFFFFF;
    --wlm-tile-border: #D9E4F0;
    --wlm-status-online: #4CAF50;
    --wlm-status-offline: #9AA5B1;
}

/* Overall page background */
.wo_kb_msg_page {
    background-color: var(--wlm-panel-bg);
}

/* Contact/conversation list (left pane) */
.mobilerightpane#wo_msg_left_prt {
    background-color: var(--wlm-panel-bg);
}

.messages-recipients-list {
    background-color: var(--wlm-tile-bg);
    border: 1px solid var(--wlm-tile-border);
    border-radius: 10px;
    margin: 6px 4px;
}

.messages-recipients-list.active {
    background-color: #EAF2FC;
    border-color: var(--wlm-accent);
}

.messages-recipients-list .messages-user-name {
    color: #1B2733;
}

/* Status dot: online = WLM green, offline = WLM gray (matches
   chismy_messenger's WlmStatus.online / WlmStatus.offline colors) */
#wo_nw_msg_page .messages-recipients-list .online_dot .dot {
    background-color: var(--wlm-status-online);
}

#wo_nw_msg_page .messages-recipients-list .online_dot.off_usr .dot {
    background-color: var(--wlm-status-offline);
}

/* Users / Groups tabs */
.wo_msg_tabs > li.active > a,
.wo_msg_tabs > li > a:hover {
    color: var(--wlm-accent);
    border-bottom: 2px solid var(--wlm-accent);
}

/* Unread badge */
.new-message-alert {
    background-color: var(--wlm-accent);
}

/* Open-conversation header (recipient avatar + name), same gradient as the
   Flutter app's header */
.msg_usr_info_top_list {
    background: linear-gradient(180deg, var(--wlm-header-top), var(--wlm-header-bottom));
    border-radius: 0;
}

.msg_usr_info_top_list,
.msg_usr_info_top_list #user-name,
.msg_usr_info_top_list .msg_usr_lst_sen_main,
.msg_usr_info_top_list .feather-chevron-left {
    color: #FFFFFF;
}

.msg_usr_info_top_list .msg_usr_cht_opts_btns .video-icon,
.msg_usr_info_top_list .msg_usr_cht_opts_btns .delete-icon {
    filter: brightness(0) invert(1);
}

/* Search box accent */
.messages-search-users-form .msg_srch_innr input:focus {
    border-color: var(--wlm-accent);
}