/* WhatsApp Theme v2.6 - Fixed scroll areas to have white backgrounds like WhatsApp Web */
:root {
  --wa-header: #075E54;
  --wa-header-alt: #128C7E;
  --wa-send: #25D366;
  --wa-outgoing: #DCF8C6;
  --wa-incoming: #FFFFFF;
  --wa-bg: #ded5ce;
  --wa-grey-bg: #f0f2f5;
  /* WhatsApp grey for panels */
  --wa-white: #ffffff;
  /* White for lists and panels */
  --text: #111;
  --muted: #6b6b6b;
  --divider: #e6e6e6;
}

/* Main chat container background */
/* Main chat container background */
.sb-main.sb-admin {
  background: var(--wa-bg) !important;
}

/* Fix login/account page background to be white */
.sb-main:not(.sb-admin) {
  background: #fff !important;
}

.sb-chat {
  background: var(--wa-bg) !important;
}

/* FIX: Scroll areas should be WHITE like WhatsApp Web */
.sb-scroll-area {
  background: var(--wa-white) !important;
}

/* Top app/header bar - FORCE GREEN EVERYWHERE */
.sb-header,
.sb-topbar,
.sb-navbar,
.header,
.topbar,
.sb-admin .sb-header,
.sb-area-conversations .sb-header,
.sb-area-users .sb-header,
.sb-area-settings .sb-header,
.sb-area-reports .sb-header {
  background: var(--wa-header) !important;
  color: #fff !important;
  border-bottom: none !important;
}

.sb-scroll-area .sb-header {
  background: var(--wa-header-alt) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Ensure all icons and text in headers are white */
.sb-header .icon,
.sb-topbar .icon,
.topbar .icon,
.sb-header .sb-title,
.sb-header .title,
.sb-header span,
.sb-header div {
  color: #fff !important;
}

.sb-header a,
.sb-header button {
  color: #fff !important;
}

.sb-header .sb-icon-user,
.sb-header .sb-icon-close {
  color: #fff !important;
}

/* Left sidebar and conversation list - WHITE BACKGROUND */
.sb-sidebar,
.sidebar,
.conversations-list {
  background: var(--wa-white) !important;
  border-right: 1px solid var(--divider);
}

.sb-user-conversations {
  background: var(--wa-white) !important;
}

.conversation-item,
.sb-conversation,
.sb-user-conversations>li {
  background: transparent;
  border-radius: 0;
  border-left: none !important;
  border-bottom: 1px solid #f0f0f0;
  /* Separator lines */
}

.conversation-item.active,
.sb-conversation.active,
.conversation-item:hover,
.sb-user-conversations>li:hover,
.sb-user-conversations>li.sb-active {
  background: #f0f2f5 !important;
  /* Grey hover color */
  border-left: none !important;
}

/* Active chat highlight */
.sb-user-conversations>li.sb-active {
  background: #f0f2f5 !important;
}

.conversation-item .name,
.sb-conversation .name {
  color: var(--text);
  font-weight: 500;
}

.conversation-item .meta,
.sb-conversation .meta,
.conversation-item .preview {
  color: var(--muted);
}

/* Chat area background - BEIGE */
.sb-chat,
.chat,
.chat-body {
  background: var(--wa-bg) !important;
}

.sb-list {
  background: var(--wa-bg) !important;
}

/* FIX: Conversation container background */
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-conversation {
  background: var(--wa-bg) !important;
}

/* FIX: All sb-top elements - GREY BACKGROUND */
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-admin-list>div.sb-top,
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-conversation>div.sb-top,
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-user-details.sb-active>div.sb-top,
.sb-top {
  background: var(--wa-grey-bg) !important;
  border-bottom: 1px solid var(--divider) !important;
}

/* FIX: Date label at top of conversation */
body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-conversation>div.sb-top>div.sb-label-date-top,
.sb-label-date-top {
  background: #ded5ce !important;
}

body>div.sb-main.sb-admin.sb-cloud>main>div.sb-area-conversations.sb-active>div>div.sb-conversation>div.sb-top>div.sb-label-date-top span,
.sb-label-date-top span {
  background: #c5e2ee !important;
  color: #1a1a1a !important;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Incoming bubbles (left) - From support agents */
.sb-list>div:not(.sb-right),
.message.incoming,
.bubble.incoming {
  background: var(--wa-incoming) !important;
  color: var(--text) !important;
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  border: none !important;
}

.sb-list>div:not(.sb-right) .sb-message,
.sb-list>div:not(.sb-right) .sb-message a {
  color: var(--text) !important;
}

/* Outgoing bubbles (right) - From customer */
.sb-list>div.sb-right,
.message.outgoing,
.bubble.outgoing,
.sb-message-right {
  background: var(--wa-outgoing) !important;
  color: var(--text) !important;
  border-radius: 12px 0 12px 12px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  border: none !important;
}

.sb-list>div.sb-right .sb-message,
.sb-list>div.sb-right .sb-message a {
  color: var(--text) !important;
}

/* Bubble timestamps */
.sb-message .sb-time,
.sb-message .time,
.message .time,
.bubble .time {
  color: var(--muted) !important;
  font-size: 11px !important;
  opacity: 0.6;
  margin-top: 2px;
  display: block;
  text-align: right;
}

/* Composer/Editor area - WHITE BACKGROUND */
.sb-editor {
  background: var(--wa-grey-bg) !important;
  /* Light grey background */
  border-top: 1px solid var(--divider);
  padding: 10px 15px;
}

.sb-input,
.composer input,
.message-input textarea {
  background: #fff !important;
  /* White input box */
  color: var(--text) !important;
  border: none !important;
  border-radius: 8px;
  /* Slightly rounded like WA Web */
  padding: 12px 15px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.sb-input::placeholder,
.message-input::placeholder {
  color: #9aa0a6;
}

.sb-input:focus {
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Send button */
.sb-submit,
.sb-send,
.send-button,
button.send {
  background: transparent !important;
  /* Transparent background */
  color: var(--wa-header) !important;
  /* Green icon */
  border: none !important;
  width: 40px;
  height: 40px;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-submit i,
.sb-send i {
  color: var(--wa-header) !important;
  font-size: 20px;
}

/* Top conversation title bar inside chat */
.sb-conversation-header,
.chat-header {
  background: var(--wa-header-alt) !important;
  color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sb-conversation-header .title,
.sb-conversation-header .sb-message,
.chat-header .title {
  color: #fff !important;
}

.sb-conversation-header .sb-icon,
.sb-conversation-header i {
  color: #fff !important;
}

/* Right info panel - WHITE BACKGROUND like WhatsApp Web */
.sb-right-panel,
.right-panel,
.sb-user-details,
.sb-user-details.sb-active {
  background: var(--wa-white) !important;
  /* WHITE background for right panel */
  border-left: 1px solid var(--divider);
}

/* FIX: User details scroll area - WHITE */
.sb-user-details .sb-scroll-area,
.sb-user-details.sb-active .sb-scroll-area {
  background: var(--wa-white) !important;
}

/* FIX: Profile list panels - WHITE */
.sb-panel-conversation-details,
.sb-profile-list,
.sb-panel-details {
  background: var(--wa-white) !important;
}

/* FIX: User details lists - WHITE */
.sb-profile-list ul,
.sb-profile-list ul li {
  background: transparent !important;
}

/* Misc icons */
.sb-icon,
.icon {
  color: var(--muted);
}

/* Settings Icon Fix - MAKE IT WHITE */
#sb-settings>i,
.sb-icon-settings,
.sb-admin-nav .sb-icon-settings,
.sb-nav .sb-icon-settings {
  color: #fff !important;
  /* Forced white for visibility on dark sidebar */
  opacity: 1 !important;
}

/* Make other sidebar icons white too if they are on the dark strip */
.sb-admin-nav i,
.sb-nav i {
  color: #fff !important;
}

/* Override blue links to green scheme */
a,
.link,
.sb-link {
  color: var(--wa-header-alt) !important;
}

/* FIX: Sidebar icons on hover */
.sb-admin-nav a:hover i,
.sb-nav a:hover i {
  color: #fff !important;
  /* Keep icons white on hover */
}

/* FIX: Sidebar tooltip text color */
.sb-admin-nav a span,
.sb-nav a span {
  color: #000 !important;
  /* Tooltip text black */
  font-weight: 500 !important;
}

a:hover {
  color: var(--wa-header) !important;
}

/* Dividers */
.hr,
.divider,
.sb-user-conversations>li {
  border-color: var(--divider);
}

/* Compact bubble padding */
.sb-list>div {
  padding: 6px 7px 8px 9px !important;
  margin-bottom: 2px !important;
}

.sb-list>div.sb-right {
  margin-bottom: 2px !important;
}

/* Round avatars */
.avatar,
.sb-avatar,
.sb-list .sb-thumb>img {
  border-radius: 50%;
}

/* Loading indicator color */
.sb-loading:after {
  border-top-color: var(--wa-header) !important;
}

/* Focus and active states */
input:focus,
textarea:focus,
button:focus {
  outline: none;
}

/* Remove default blue color from shared.scss */
.sb-list>div {
  background-color: var(--wa-incoming) !important;
}

.sb-list>div.sb-right {
  background-color: var(--wa-outgoing) !important;
  color: var(--text) !important;
}

/* Message text colors */
.sb-message {
  color: var(--text) !important;
}

.sb-list>div.sb-right .sb-message {
  color: var(--text) !important;
}

/* Fix for User Menu Dropdown Visibility - White background, dark text */
.sb-account .sb-menu,
.sb-menu {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.sb-account .sb-menu li,
.sb-menu li {
  color: var(--text) !important;
  background: transparent !important;
}

.sb-account .sb-menu li:hover,
.sb-menu li:hover {
  background-color: #f5f5f5 !important;
  color: var(--text) !important;
}

.sb-account .sb-name {
  color: var(--text) !important;
}

/* FIX: Mobile menu text color */
.sb-mobile,
.sb-mobile a,
.sb-menu-mobile .sb-mobile a,
.sb-header .sb-mobile a {
  color: #000 !important;
}

/* FIX: Date label background and text color - Override incoming message styles */
.sb-list>div.sb-label-date,
.sb-label-date-top {
  background: #ded5ce !important;
  /* Chat background */
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  /* Add vertical spacing */
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
  float: none !important;
}

.sb-list>div.sb-label-date span,
.sb-label-date-top span {
  background: #c5e2ee !important;
  color: #1a1a1a !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  display: inline-block !important;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.1) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}