/**
 * WhatsApp Web Pro + Faster Delivery Custom Theme for Chatwoot
 * Inspired by WhatsApp Web Dark Mode & Faster Delivery Branding
 */

/* ==========================================================================
   1. CSS VARIABLES & SYSTEM OVERRIDES
   ========================================================================== */
:root, html.dark, body.dark, body {
  /* WhatsApp Dark Theme Core */
  --wa-bg-deep: #0b141a;
  --wa-bg-panel: #111b21;
  --wa-bg-header: #202c33;
  --wa-bg-active: #2a3942;
  --wa-bg-hover: #202c33;
  --wa-bubble-out: #005c4b;
  --wa-bubble-in: #202c33;
  --wa-text-primary: #e9edef;
  --wa-text-secondary: #8696a0;
  --wa-text-muted: #667781;
  --wa-border: #222d34;
  --wa-accent-green: #00a884;
  --wa-check-blue: #53bdeb;
  --faster-red: #ef4444;
  --faster-red-hover: #dc2626;

  /* Chatwoot Radix Color Overrides (Dark) */
  --background-color: 17 27 33 !important;       /* #111b21 */
  --surface-1: 17 27 33 !important;              /* #111b21 Left panel */
  --surface-2: 32 44 51 !important;              /* #202c33 Header/Subpanels */
  --surface-active: 42 57 66 !important;         /* #2a3942 Active card */
  --card-color: 32 44 51 !important;
  --background-input-box: 42, 57, 66, 1 !important;

  /* Message Bubble Variables */
  --solid-blue: 0 92 75 !important;              /* #005c4b WhatsApp Outgoing Green */
  --solid-blue-2: 0 92 75 !important;
  --solid-iris: 0 92 75 !important;
  --text-blue: 233 237 239 !important;

  /* Slate Radix Grayscale (WhatsApp Charcoal) */
  --slate-1: 11 20 26 !important;
  --slate-2: 17 27 33 !important;
  --slate-3: 32 44 51 !important;
  --slate-4: 32 44 51 !important;                /* Incoming Bubble */
  --slate-5: 42 57 66 !important;
  --slate-6: 55 66 72 !important;
  --slate-7: 102 119 129 !important;
  --slate-8: 134 150 160 !important;
  --slate-9: 134 150 160 !important;
  --slate-10: 170 181 189 !important;
  --slate-11: 209 215 219 !important;
  --slate-12: 233 237 239 !important;

  /* Borders */
  --border-strong: 34 45 52 !important;
  --border-weak: 34 45 52 !important;
  --border-container: 34 45 52 !important;

  /* Button / Brand */
  --brand: #00a884 !important;
  --button-color: 42 57 66 !important;
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY & BODY
   ========================================================================== */
html, body {
  background-color: #111b21 !important;
  color: #e9edef !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Force dark styling on main wrappers */
#app, .app-wrapper, .dashboard-app {
  background-color: #111b21 !important;
  color: #e9edef !important;
}

/* ==========================================================================
   3. LEFT NAVIGATION SIDEBAR (Icon Rail)
   ========================================================================== */
aside, 
nav[class*="sidebar"],
div[class*="Sidebar"],
.left-nav,
.sidebar--wrap {
  background-color: #202c33 !important;
  border-right: 1px solid #222d34 !important;
}

/* Navigation items hover & active */
nav a:hover, 
aside button:hover,
aside a:hover {
  background-color: #2a3942 !important;
  border-radius: 8px !important;
}

nav a.router-link-active, 
nav a[class*="active"],
aside a[class*="active"] {
  background-color: #2a3942 !important;
  color: #00a884 !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   4. CONVERSATION LIST (Middle Column)
   ========================================================================== */
/* The entire list column background */
div:has(> div > [role="button"][class*="transition"]),
.conversations-sidebar,
div[class*="ChatList"],
div[class*="ConversationList"] {
  background-color: #111b21 !important;
  border-right: 1px solid #222d34 !important;
}

/* Conversation Cards */
[role="button"][class*="transition-all"],
div[class*="ConversationCard"] {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(134, 150, 160, 0.12) !important;
  padding: 12px 14px !important;
  transition: background-color 0.15s ease !important;
}

[role="button"][class*="transition-all"]:hover,
div[class*="ConversationCard"]:hover {
  background-color: #202c33 !important;
}

/* Selected / Active Conversation */
[role="button"][class*="transition-all"].active,
[role="button"][class*="transition-all"][aria-selected="true"],
.bg-n-solid-active,
.bg-n-surface-active {
  background-color: #2a3942 !important;
  border-left: 3.5px solid #00a884 !important;
}

/* Contact Name in Card */
[role="button"] h4,
div[class*="ConversationCard"] h4 {
  color: #e9edef !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}

/* Message snippet in Card */
[role="button"] p,
div[class*="CardMessagePreview"],
div[class*="MessagePreview"] {
  color: #8696a0 !important;
  font-size: 13.5px !important;
}

/* Timestamp in Card */
span[class*="text-n-slate-10"],
div[class*="ConversationCard"] span {
  color: #8696a0 !important;
  font-size: 12px !important;
}

/* Unread Badge */
div[class*="UnreadBadge"],
span[class*="unread-count"],
.badge--unread {
  background-color: #00a884 !important;
  color: #111b21 !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  border-radius: 9999px !important;
  padding: 1px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   5. CHAT VIEWPORT & MESSAGES CONTAINER
   ========================================================================== */
/* WhatsApp Chat Wallpaper: Subtle doodle-like dots pattern over deep dark #0b141a */
main,
.conversation-panel,
div[class*="MessageList"],
.messages-container {
  background-color: #0b141a !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1.2px, transparent 1.2px) !important;
  background-size: 22px 22px !important;
}

/* ==========================================================================
   6. MESSAGE BUBBLES (WhatsApp signature look)
   ========================================================================== */

/* Outgoing Message (Agent / Faster Team) - Signature WhatsApp Dark Green */
.right-bubble,
[class*="right-bubble"],
div[class*="bg-n-solid-blue"] {
  background-color: #005c4b !important;
  color: #e9edef !important;
  border-radius: 8px 8px 0px 8px !important;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.2) !important;
  padding: 6px 9px 6px 10px !important;
  margin-bottom: 3px !important;
  max-width: 75% !important;
  border: none !important;
}

/* Incoming Message (User / Contact) - Signature WhatsApp Dark Gray */
.left-bubble,
[class*="left-bubble"],
div[class*="bg-n-slate-4"] {
  background-color: #202c33 !important;
  color: #e9edef !important;
  border-radius: 8px 8px 8px 0px !important;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.2) !important;
  padding: 6px 9px 6px 10px !important;
  margin-bottom: 3px !important;
  max-width: 75% !important;
  border: none !important;
}

/* Message Text formatting inside bubbles */
.prose-bubble,
.prose-bubble p,
[class*="right-bubble"] p,
[class*="left-bubble"] p {
  color: #e9edef !important;
  font-size: 14.2px !important;
  line-height: 19.5px !important;
  margin: 0 !important;
}

/* Links inside bubbles */
.prose-bubble a {
  color: #53bdeb !important;
  text-decoration: underline !important;
}

/* Message Timestamp & Status Meta */
[class*="MessageMeta"],
div[class*="MessageMeta"] span,
div[class*="MessageMeta"] time {
  color: rgba(233, 237, 239, 0.6) !important;
  font-size: 11px !important;
}

/* Double Checkmark (Read status) */
svg[class*="status--sent"],
svg[class*="status--delivered"],
[class*="MessageStatus"] svg {
  color: #53bdeb !important; /* WhatsApp Blue Double Check */
}

/* Private Internal Notes (Yellow/Amber WhatsApp style) */
div[class*="bg-n-solid-amber"],
div[class*="bg-n-solid-amber"] * {
  background-color: #2b2416 !important;
  border-color: #735118 !important;
  color: #ffd88a !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   7. CHAT HEADER (Top bar)
   ========================================================================== */
header,
div[class*="conversation-header"],
div[class*="ConversationHeader"] {
  background-color: #202c33 !important;
  border-bottom: 1px solid #222d34 !important;
  min-height: 59px !important;
  padding: 8px 16px !important;
}

header h2,
header h3,
header [class*="text-heading"] {
  color: #e9edef !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

header span,
header small {
  color: #8696a0 !important;
  font-size: 12.5px !important;
}

/* ==========================================================================
   8. COMPOSER / INPUT BOX (Bottom area)
   ========================================================================== */
footer,
div[class*="conversation-footer"],
div[class*="Composer"],
div[class*="chat-input-area"] {
  background-color: #202c33 !important;
  border-top: 1px solid #222d34 !important;
  padding: 10px 14px !important;
}

/* Text editor area */
.ProseMirror,
div[class*="ProseMirror"],
div[contenteditable="true"],
textarea[class*="input"],
input[type="text"] {
  background-color: #2a3942 !important;
  border: 1px solid #2a3942 !important;
  border-radius: 8px !important;
  color: #e9edef !important;
  font-size: 14.5px !important;
  padding: 9px 14px !important;
  outline: none !important;
}

.ProseMirror:focus,
div[contenteditable="true"]:focus,
input[type="text"]:focus {
  border-color: #00a884 !important;
}

/* Placeholder */
.ProseMirror p.is-editor-empty:first-child::before,
::placeholder {
  color: #8696a0 !important;
}

/* Send & Action Buttons */
button[class*="bg-n-brand"],
button[class*="send-button"],
button[type="submit"] {
  background-color: #00a884 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

button[class*="bg-n-brand"]:hover,
button[class*="send-button"]:hover,
button[type="submit"]:hover {
  background-color: #02906f !important;
  box-shadow: 0 2px 8px rgba(0, 168, 132, 0.3) !important;
}

/* Faster Danger / Resolve button */
button[class*="bg-n-ruby"],
button[class*="resolve"] {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}
button[class*="bg-n-ruby"]:hover,
button[class*="resolve"]:hover {
  background-color: #dc2626 !important;
}

/* ==========================================================================
   9. RIGHT DETAILS PANEL (Contact / Lead info)
   ========================================================================== */
aside[class*="side-panel"],
div[class*="ContactPanel"],
div[class*="ConversationDetails"] {
  background-color: #111b21 !important;
  border-left: 1px solid #222d34 !important;
}

/* ==========================================================================
   10. POPUPS, DROPDOWNS & MODALS
   ========================================================================== */
div[role="menu"],
div[class*="dropdown"],
div[class*="popover"],
div[class*="dialog"] {
  background-color: #233138 !important;
  border: 1px solid #2f3e46 !important;
  box-shadow: 0 4px 16px rgba(11, 20, 26, 0.4) !important;
  border-radius: 8px !important;
}

div[role="menuitem"]:hover,
div[class*="dropdown-item"]:hover {
  background-color: #182229 !important;
}

/* ==========================================================================
   11. SCROLLBARS (Sleek WhatsApp style)
   ========================================================================== */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: #374248 !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #536067 !important;
}

/* ==========================================================================
   12. FASTER DELIVERY BRAND WATERMARK / STATUS
   ========================================================================== */
body::before {
  content: "Faster Delivery • WhatsApp Pro";
  position: fixed;
  bottom: 6px;
  right: 12px;
  font-size: 10px;
  color: rgba(134, 150, 160, 0.35);
  font-weight: 500;
  pointer-events: none;
  z-index: 99999;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   13. HIDE UNWANTED MENUS (Capitán / Llamadas / Centro de Ayuda / Portals)
   ========================================================================== */
li:has(.i-woot-captain),
li:has(.i-lucide-phone),
li:has(.i-lucide-library-big),
li:has([title*="Captain" i]),
li:has([title*="Capitán" i]),
li:has([title*="Calls" i]),
li:has([title*="Llamadas" i]),
li:has([title*="Portals" i]),
li:has([title*="Portales" i]),
li:has([title*="Centro de ayuda" i]),
li:has([title*="Help Center" i]),
li:has(a[href*="/captain"]),
li:has(a[href*="/calls"]),
li:has(a[href*="/portals"]),
div:has(> button[title*="Captain" i]),
div:has(> button[title*="Capitán" i]),
div:has(> button[title*="Calls" i]),
div:has(> button[title*="Llamadas" i]),
div:has(> button[title*="Portals" i]),
div:has(> button[title*="Portales" i]),
div:has(> button[title*="Help Center" i]),
div:has(> button[title*="Centro de ayuda" i]) {
  display: none !important;
}