/* ===== Siblia Custom UI — Left Sidebar & Chat Sidebar ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* --- Left Sidebar: Tighter spacing + better font --- */
.left-sidebar > ul > li > a {
   margin: 1px 0 !important;
   padding: 6px 8px !important;
   font-family: 'Poppins', sans-serif !important;
   font-size: 14px !important;
   font-weight: 500 !important;
   color: #2c2c2c !important;
   border-radius: 8px !important;
   line-height: 22px !important;
   transition: all 0.2s ease;
}
.left-sidebar > ul > li > a:hover {
   background: rgba(123, 45, 142, 0.08) !important;
   color: #7B2D8E !important;
}
.left-sidebar > ul > li > a img {
   height: 20px !important;
   width: 20px !important;
   margin-right: 10px !important;
   opacity: 0.8;
}
.left-sidebar > ul > li > a:hover img {
   opacity: 1;
}

/* --- Chat Sidebar: Card design with header --- */
.chat-container {
   border-radius: 12px !important;
   border: 1px solid #e8e8e8 !important;
   box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
   margin: 8px 5px !important;
   overflow: hidden !important;
}

/* Chat Header with title */
.chat-container .online-toggle {
   background: #fafafa !important;
   border-bottom: 1px solid #eee !important;
   padding: 12px 14px !important;
}
.chat-container .online-toggle h3 {
   font-family: 'Poppins', sans-serif !important;
   font-size: 16px !important;
   font-weight: 600 !important;
   color: #333 !important;
}

/* Flat tabs (not button-like) */
.chat-container .wo_chat_tabs {
   border-bottom: 2px solid #f0f0f0 !important;
   margin: 0 !important;
   padding: 0 !important;
   background: #fafafa;
}
.chat-container .wo_chat_tabs li {
   margin: 0 !important;
   flex: 1;
}
.chat-container .wo_chat_tabs li a {
   font-family: 'Poppins', sans-serif !important;
   border-radius: 0 !important;
   background: transparent !important;
   padding: 10px 8px !important;
   font-size: 13px !important;
   font-weight: 500 !important;
   color: #888 !important;
   border-bottom: 2px solid transparent !important;
   margin-bottom: -2px !important;
   transition: all 0.2s ease;
   text-align: center;
}
.chat-container .wo_chat_tabs li a:hover {
   background: transparent !important;
   color: #7B2D8E !important;
}
.chat-container .wo_chat_tabs li.active a {
   background: transparent !important;
   color: #7B2D8E !important;
   border-bottom-color: #7B2D8E !important;
   font-weight: 600 !important;
}

/* Search box styling */
.chat-container .wow_chat_search {
   padding: 10px 12px !important;
   order: -1 !important;
   background: #fff;
}
.chat-container .wow_chat_search input {
   font-family: 'Poppins', sans-serif !important;
   border-radius: 20px !important;
   background: #f5f5f5 !important;
   border: 1px solid #e8e8e8 !important;
   padding: 8px 16px !important;
   font-size: 13px !important;
   height: 36px !important;
   transition: border-color 0.2s;
}
.chat-container .wow_chat_search input:focus {
   border-color: #7B2D8E !important;
   background: #fff !important;
   outline: none !important;
}

/* Reorder: search above tabs */
.chat-container .online-content-toggler {
   display: flex;
   flex-direction: column;
}

/* Chat list items */
.chat-container .chat-list-cont {
   font-family: 'Poppins', sans-serif;
}

/* === DARK MODE === */
body[data-mode='night'] .left-sidebar > ul > li > a,
body.night-mode .left-sidebar > ul > li > a {
   color: #d0d0d8 !important;
}
body[data-mode='night'] .left-sidebar > ul > li > a:hover,
body.night-mode .left-sidebar > ul > li > a:hover {
   background: rgba(155, 89, 182, 0.12) !important;
   color: #d4a5f5 !important;
}

body[data-mode='night'] .chat-container,
body.night-mode .chat-container {
   background: #1e1e2e !important;
   border-color: #2a2a3e !important;
   box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
body[data-mode='night'] .chat-container .online-toggle,
body.night-mode .chat-container .online-toggle {
   background: #1a1a2a !important;
   border-bottom-color: #2a2a3e !important;
}
body[data-mode='night'] .chat-container .online-toggle h3,
body.night-mode .chat-container .online-toggle h3 {
   color: #e0e0e8 !important;
}
body[data-mode='night'] .chat-container .wo_chat_tabs,
body.night-mode .chat-container .wo_chat_tabs {
   background: #1a1a2a !important;
   border-bottom-color: #2a2a3e !important;
}
body[data-mode='night'] .chat-container .wo_chat_tabs li a,
body.night-mode .chat-container .wo_chat_tabs li a {
   color: #888 !important;
}
body[data-mode='night'] .chat-container .wo_chat_tabs li.active a,
body.night-mode .chat-container .wo_chat_tabs li.active a {
   color: #d4a5f5 !important;
   border-bottom-color: #d4a5f5 !important;
}
body[data-mode='night'] .chat-container .wow_chat_search input,
body.night-mode .chat-container .wow_chat_search input {
   background: #252535 !important;
   border-color: #3a3a4e !important;
   color: #d0d0d8 !important;
}
body[data-mode='night'] .chat-container .wow_chat_search,
body.night-mode .chat-container .wow_chat_search {
   background: #1e1e2e !important;
}