/* WhatsApp mobile shell — Islamabad WhatsApp + Peshawar WhatBot share this skin */
body.wa-in-erp {
  --wa-bg: #ffffff;
  --wa-panel: #ffffff;
  --wa-row: #ffffff;
  --wa-row-hover: #f5f6f6;
  --wa-row-active: #f0f2f5;
  --wa-border: #e9edef;
  --wa-text: #111b21;
  --wa-muted: #667781;
  --wa-green: #00a884;
  --wa-green-badge: #25d366;
  --wa-chip: #f0f2f5;
  --wa-chip-active: #d9fdd3;
  --wa-chip-active-text: #0a5c36;
  --wa-chat-bg: #efeae2;
  --wa-composer: #f0f2f5;
  --wa-bnav-h: 56px;
}

/* Keep ERP sidebar + topbar — WhatsApp styling only inside the inbox panel */
.wa-bottom-nav,
.wa-erp-drawer,
.wa-drawer-backdrop,
.wa-app-header {
  display: none !important;
}

body.wa-in-erp .wa-shell {
  display: flex;
  height: calc(100vh - 210px) !important;
  min-height: 480px !important;
  border: 1px solid var(--wa-border) !important;
  border-radius: 12px !important;
  background: var(--wa-bg) !important;
  overflow: hidden;
}

.wa-app-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 6px;
  background: var(--wa-bg);
  flex-shrink: 0;
}
.wa-app-title {
  flex: 1;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--wa-text);
  letter-spacing: -0.02em;
}
.wa-icon-btn {
  border: none;
  background: transparent;
  color: var(--wa-muted);
  font-size: 20px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.wa-icon-btn:active { background: var(--wa-row-hover); }
.wa-header-actions { display: flex; gap: 2px; }

.wa-list,
body.wa-in-erp .wa-shell > div:first-child:not(#waChatPane) {
  width: min(420px, 40%) !important;
  flex-shrink: 0;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0;
  background: var(--wa-bg) !important;
  border-right: 1px solid var(--wa-border) !important;
}
.wa-list-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.wa-chats-title { display: none !important; }

.wa-search-wrap,
body.wa-in-erp .wa-shell > div:first-child:not(#waChatPane) > div:first-of-type:not(.wa-app-header):not(.wa-chats-title) {
  padding: 4px 14px 8px !important;
  border-bottom: none !important;
  background: transparent !important;
}
.wa-search-box { position: relative; }
.wa-search-box:before {
  content: "";
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  border: 1.6px solid var(--wa-muted); border-radius: 50%;
  pointer-events: none;
}
#waBotSearchInput,
#waSearchInput {
  width: 100%;
  background: var(--wa-chip) !important;
  border: none !important;
  color: var(--wa-text) !important;
  border-radius: 10px;
  padding: 9px 12px 9px 34px;
  font-size: 14px;
}

.wa-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 14px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wa-filters .chip,
body.wa-in-erp .wa-shell .wa-filters .chip {
  background: var(--wa-chip);
  border: none;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--wa-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.wa-filters .chip.active,
body.wa-in-erp .wa-shell .wa-filters .chip.active {
  background: var(--wa-chip-active);
  color: var(--wa-chip-active-text, #0a5c36);
}

.wa-conv-row {
  display: flex;
  gap: 12px;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--wa-border) !important;
  background: var(--wa-row) !important;
  align-items: center !important;
  cursor: pointer;
}
.wa-conv-row:hover { background: var(--wa-row-hover) !important; }
.wa-conv-row.is-active { background: var(--wa-row-active) !important; }
.wa-row-name {
  font-size: 16px !important;
  font-weight: 600;
  color: var(--wa-text) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-row-preview {
  font-size: 13.5px !important;
  color: var(--wa-muted) !important;
  margin-top: 2px !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}
.wa-row-time { font-size: 12px; color: var(--wa-muted); white-space: nowrap; }
.wa-row-time.unread { color: var(--wa-green-badge); font-weight: 600; }
.wa-unread {
  display: inline-block;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 10px; background: var(--wa-green-badge); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.wabot-row-actions { display: none !important; }

#waChatPane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--wa-chat-bg);
}
body.wa-in-erp #waChatPane > div:first-child {
  flex-shrink: 0;
  background: var(--wa-panel) !important;
  border-bottom: 1px solid var(--wa-border) !important;
  min-height: 56px;
  padding: 6px 10px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
body.wa-in-erp #waChatPane > div:first-child > div:first-of-type { min-width: 0; flex: 1; }
body.wa-in-erp #waChatPane > div:first-child > div:last-of-type {
  margin-left: auto;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}
body.wa-in-erp #waChatPane > div:first-child b {
  font-size: 16px !important;
  color: var(--wa-text) !important;
}
body.wa-in-erp #waChatPane > div:first-child .btn,
body.wa-in-erp #waChatPane > div:first-child a.btn {
  border: none !important;
  border-radius: 18px !important;
  padding: 6px 11px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  background: var(--wa-chip) !important;
  color: var(--wa-text) !important;
  box-shadow: none;
  text-decoration: none;
}
body.wa-in-erp #waConvertBtn {
  background: var(--wa-green) !important;
  color: #fff !important;
}
body.wa-in-erp #waCloseToggleBtn { display: none !important; }
body.wa-in-erp #waMessageList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--wa-chat-bg) !important;
  background-image: none !important;
}
body.wa-in-erp #waAttachMenu,
body.wa-in-erp #waRecHint { flex-shrink: 0; }
body.wa-in-erp #waChatPane > div:last-child {
  flex-shrink: 0;
  background: var(--wa-composer) !important;
  border-top: none !important;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 6px !important;
}
body.wa-in-erp #waComposerInput {
  background: var(--wa-panel) !important;
  color: var(--wa-text) !important;
  border-radius: 24px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  border: none !important;
}
body.wa-in-erp #waAttachBtn.wa-plus {
  width: 42px !important;
  height: 42px !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--wa-muted) !important;
  background: transparent !important;
}
body.wa-in-erp #waRecBtn,
body.wa-in-erp #waSendBtn {
  width: 46px !important;
  height: 46px !important;
  background: var(--wa-green) !important;
  border-radius: 50% !important;
}

.wa-phone-back {
  display: none;
  border: none;
  background: transparent;
  color: var(--wa-text);
  font-size: 22px;
  line-height: 1;
  padding: 0 4px 0 0;
  cursor: pointer;
  flex-shrink: 0;
}
body.wa-in-erp.wa-chat-open .wa-phone-back { display: inline-block !important; }

.wa-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: calc(var(--wa-bnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--wa-panel);
  border-top: 1px solid var(--wa-border);
}
body.wa-bnav-hidden .wa-bottom-nav { display: none !important; }
.wa-bnav-item {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--wa-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px 4px;
  cursor: pointer;
  min-width: 0;
}
.wa-bnav-item.is-active { color: var(--wa-green-badge); }
.wa-bnav-ic { font-size: 20px; line-height: 1; }
.wa-bnav-lb { font-size: 10px; font-weight: 500; }

.wa-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 80;
}
body.wa-drawer-open .wa-drawer-backdrop { display: block; }
.wa-erp-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 86vw);
  z-index: 90;
  background: var(--wa-panel);
  border-right: 1px solid var(--wa-border);
  transform: translateX(-105%);
  transition: transform .2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.wa-drawer-open .wa-erp-drawer { transform: translateX(0); }
.wa-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  border-bottom: 1px solid var(--wa-border);
  color: var(--wa-text);
}
.wa-drawer-head button {
  border: none;
  background: transparent;
  color: var(--wa-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
#waDrawerNav {
  list-style: none;
  margin: 0;
  padding: 10px 8px;
  overflow-y: auto;
  flex: 1;
}
#waDrawerNav a {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--wa-text);
  font-size: 14px;
  font-weight: 500;
}
#waDrawerNav a:hover { background: var(--wa-row-hover); }

body.a360-hide-whatsapp #marketingTabs button[data-t="whatsapp"],
body.a360-hide-whatsapp [data-scf="whatsapp"] { display: none !important; }
body.a360-hide-whatsbot #marketingTabs button[data-t="whatsbot"],
body.a360-hide-whatsbot [data-scf="whatsbot"] { display: none !important; }


/* Chat header actions — only Genuine / Convert are primary */
body.wa-in-erp #waGenuineBtn,
body.wa-in-erp #waConvertBtn {
  background: var(--wa-green) !important;
  color: #fff !important;
  border: none !important;
}
body.wa-in-erp #waNotGenuineBtn,
body.wa-in-erp #waCloseToggleBtn {
  background: transparent !important;
  color: var(--wa-muted) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
body.wa-in-erp #waNotGenuineBtn:hover,
body.wa-in-erp #waCloseToggleBtn:hover {
  background: var(--wa-chip) !important;
  color: var(--wa-text) !important;
}
body.wa-in-erp #waAutoReplyBtn,
body.wa-in-erp #waChatPane > div:first-child a.btn:not(.btn-primary) {
  background: var(--wa-chip) !important;
  color: var(--wa-text) !important;
}

/* Not genuine filter chip — muted, not green highlight */
body.wa-in-erp #waFilterNg.active {
  background: #f0f2f5 !important;
  color: var(--wa-muted) !important;
}
body.wa-in-erp #waFilterNg {
  color: var(--wa-muted) !important;
}
body.wa-in-erp .wa-ng-tag {
  color: var(--wa-muted) !important;
  opacity: 0.75 !important;
  font-weight: 500 !important;
}

@media (max-width: 760px) {
  .wa-list,
  body.wa-in-erp .wa-shell > div:first-child:not(#waChatPane) { width: 100% !important; }
  body.wa-in-erp.wa-chat-open .wa-list,
  body.wa-in-erp.wa-chat-open .wa-shell > div:first-child:not(#waChatPane) { display: none !important; }
  body.wa-in-erp:not(.wa-chat-open) #waChatPane { display: none !important; }
}

@media (min-width: 761px) {
  body.wa-in-erp:not(.wa-chat-open) #waChatPane {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--wa-muted);
    font-size: 15px;
  }
  body.wa-in-erp:not(.wa-chat-open) #waChatPane:empty::after {
    content: "Select a chat to start messaging";
  }
}

/* Islamabad Cloud inbox rows use inline <b> — ensure name/preview/avatar visible */
body.wa-in-erp .wa-conv-row b {
  color: var(--wa-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
body.wa-in-erp .wa-conv-row .wa-avatar,
body.wa-in-erp .wa-conv-row img.wa-avatar {
  flex-shrink: 0 !important;
  display: flex !important;
}
body.wa-in-erp #waMessageList .wa-bubble {
  color: #111b21 !important;
}
body.wa-in-erp #waChatPane b {
  color: var(--wa-text) !important;
}