/*
 * Streamri WhatsApp-inspired dashboard theme
 * Public messages are recolored.
 * Private notes intentionally remain Chatwoot amber.
 */

/* WhatsApp-inspired green palette replacing Chatwoot's blue accents. */
:root {
  --blue-1: 247 255 252;
  --blue-2: 239 252 248;
  --blue-3: 218 248 238;
  --blue-4: 190 241 225;
  --blue-5: 156 231 207;
  --blue-6: 116 216 184;
  --blue-7: 73 197 158;
  --blue-8: 31 178 137;
  --blue-9: 0 168 132;
  --blue-10: 0 150 118;
  --blue-11: 0 128 105;
  --blue-12: 7 94 84;

  --solid-blue: 217 253 211;
  --solid-blue-2: 247 255 250;
  --border-blue: 0, 168, 132, 0.5;
  --border-blue-strong: 0 128 105;
  --text-blue: 7 94 84;
}

.dark {
  --blue-1: 7 20 18;
  --blue-2: 9 28 25;
  --blue-3: 7 48 41;
  --blue-4: 5 64 54;
  --blue-5: 5 79 66;
  --blue-6: 7 96 80;
  --blue-7: 8 115 95;
  --blue-8: 8 137 112;
  --blue-9: 0 168 132;
  --blue-10: 6 186 148;
  --blue-11: 37 211 102;
  --blue-12: 209 250 229;

  --solid-blue: 0 92 75;
  --solid-blue-2: 11 32 29;
  --border-blue: 37, 211, 102, 0.45;
  --border-blue-strong: 37 211 102;
  --text-blue: 209 250 229;
}

/* Chatwoot's n-brand value is compiled directly, so override it here. */
.bg-n-brand {
  background-color: #00a884 !important;
}

.text-n-brand {
  color: #008069 !important;
}

.border-n-brand {
  border-color: #00a884 !important;
}

.outline-n-brand {
  outline-color: #00a884 !important;
}

.hover\:bg-n-brand:hover {
  background-color: #008f72 !important;
}

.hover\:text-n-brand:hover {
  color: #008069 !important;
}

.focus\:outline-n-brand:focus {
  outline-color: #00a884 !important;
}

/* WhatsApp-style public message bubbles. */
.message-bubble-container .bg-n-solid-blue {
  background-color: #d9fdd3 !important;
  color: #111b21 !important;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.message-bubble-container .bg-n-slate-4 {
  background-color: #ffffff !important;
  color: #111b21 !important;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

/*
 * Do not change:
 * .bg-n-solid-amber
 *
 * That is Chatwoot's private-note bubble and remains amber.
 */

/* Conversation background, similar to WhatsApp Web. */
[class*='overflow-y-auto']:has(.message-bubble-container),
[class*='overflow-auto']:has(.message-bubble-container) {
  background-color: #efeae2 !important;
  background-image:
    radial-gradient(
      circle at 12px 12px,
      rgba(11, 20, 26, 0.025) 1px,
      transparent 1.5px
    ) !important;
  background-size: 24px 24px !important;
}

/* Dark-mode public bubbles and conversation background. */
.dark .message-bubble-container .bg-n-solid-blue {
  background-color: #005c4b !important;
  color: #e9edef !important;
}

.dark .message-bubble-container .bg-n-slate-4 {
  background-color: #202c33 !important;
  color: #e9edef !important;
}

.dark [class*='overflow-y-auto']:has(.message-bubble-container),
.dark [class*='overflow-auto']:has(.message-bubble-container) {
  background-color: #0b141a !important;
  background-image:
    radial-gradient(
      circle at 12px 12px,
      rgba(233, 237, 239, 0.025) 1px,
      transparent 1.5px
    ) !important;
}

/* WhatsApp-like selected and unread indicators. */
.bg-n-blue-9 {
  background-color: #00a884 !important;
}

.text-n-blue-11,
.text-n-blue-9 {
  color: #008069 !important;
}

.dark .text-n-blue-11,
.dark .text-n-blue-9 {
  color: #25d366 !important;
}