/* === WhatsApp Dark Theme for Chatwoot 4.14 — v3 cu tail + composer === */

/* === BACKGROUND zonă chat (doodle pattern mai natural) === */
.conversation-panel,
.conversation-panel.bg-n-surface-1 {
  background-color: #0b141a !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M15 20 q4 -7 8 0 t8 0'/><circle cx='55' cy='22' r='5'/><path d='M80 15 l7 7 l-7 7 l-7 -7 z'/><path d='M110 25 q-4 -9 5 -9 q9 0 5 9'/><circle cx='145' cy='20' r='4'/><path d='M170 15 l0 13 m-6 -6 l13 0'/><circle cx='200' cy='25' r='6'/><path d='M20 60 q8 -4 12 4 q4 8 -4 12 q-8 4 -12 -4'/><circle cx='55' cy='65' r='4'/><path d='M85 55 l8 4 l-8 4 l-8 -4 z'/><circle cx='120' cy='62' r='6'/><path d='M145 55 l0 13 l13 -6 z'/><path d='M180 60 q-3 -7 4 -7 q7 0 4 7'/><circle cx='208' cy='68' r='4'/><path d='M15 105 l6 -3 l6 3 l-3 6 l-6 0 z'/><path d='M50 100 q4 0 4 4 q0 4 -4 4 q-4 0 -4 -4'/><circle cx='80' cy='108' r='7'/><path d='M110 100 l13 0 m-6 -6 l0 13'/><path d='M145 105 q8 -4 8 4 q0 8 -8 4'/><circle cx='180' cy='108' r='4'/><path d='M205 100 l4 8 l-8 0 z'/><path d='M22 150 q-4 4 0 8 q4 4 8 0 q4 -4 0 -8 q-4 -4 -8 0'/><circle cx='55' cy='148' r='5'/><path d='M80 142 l4 8 l4 -8'/><path d='M110 152 l8 -4 l0 8 z'/><circle cx='145' cy='150' r='4'/><path d='M170 142 q4 8 8 0 t8 0'/><circle cx='205' cy='152' r='6'/><path d='M18 190 l8 8 l8 -8'/><circle cx='52' cy='192' r='3'/><path d='M78 184 q4 0 4 4 q0 4 -4 4 q-4 0 -4 -4'/><path d='M108 188 l6 6 m0 -6 l-6 6'/><circle cx='140' cy='190' r='5'/><path d='M168 184 l0 13 l13 0'/><circle cx='200' cy='190' r='4'/></g></svg>") !important;
  background-repeat: repeat !important;
  background-size: 220px 220px !important;
}

/* === BUBBLE OUTGOING — VERDE WhatsApp + TAIL === */
.message-bubble-container.justify-end .bg-n-solid-blue {
  background-color: #005c4b !important;
  color: #e9edef !important;
  border-radius: 7.5px !important;
  border-top-right-radius: 0 !important;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13) !important;
  position: relative !important;
}
.message-bubble-container.justify-end .bg-n-solid-blue * {
  color: #e9edef !important;
}
.message-bubble-container.justify-end .bg-n-solid-blue::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: -8px !important;
  width: 8px !important;
  height: 13px !important;
  background: #005c4b !important;
  clip-path: polygon(0 0, 0 100%, 100% 0) !important;
}

/* === BUBBLE INCOMING — gri închis WhatsApp + TAIL === */
.message-bubble-container.justify-start [class*="grid-area:bubble"] > div,
.message-bubble-container.justify-start .left-bubble,
.message-bubble-container.justify-start [class*="bg-n-"]:not([class*="bg-n-alpha"]) {
  background-color: #202c33 !important;
  color: #e9edef !important;
  border-radius: 7.5px !important;
  border-top-left-radius: 0 !important;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13) !important;
  position: relative !important;
}
.message-bubble-container.justify-start [class*="grid-area:bubble"] > div * {
  color: #e9edef !important;
}
.message-bubble-container.justify-start [class*="grid-area:bubble"] > div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -8px !important;
  width: 8px !important;
  height: 13px !important;
  background: #202c33 !important;
  clip-path: polygon(0 0, 100% 100%, 100% 0) !important;
}

/* === NOTĂ PRIVATĂ — galben WhatsApp === */
.message-bubble-container .bg-n-solid-amber {
  background-color: #fff3a8 !important;
  color: #1f2937 !important;
  border-radius: 7.5px !important;
  border-top-right-radius: 0 !important;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.2) !important;
  position: relative !important;
}
.message-bubble-container .bg-n-solid-amber * {
  color: #1f2937 !important;
}
.message-bubble-container.justify-end .bg-n-solid-amber::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: -8px !important;
  width: 8px !important;
  height: 13px !important;
  background: #fff3a8 !important;
  clip-path: polygon(0 0, 0 100%, 100% 0) !important;
}

/* === MESAJE SISTEM === */
.message-bubble-container.justify-center > div,
.message-bubble-container.justify-center [class*="bg-n-"] {
  background-color: rgba(24, 34, 41, 0.85) !important;
  color: #8696a0 !important;
  border-radius: 7.5px !important;
  font-size: 12.5px !important;
}
.message-bubble-container.justify-center * {
  color: #8696a0 !important;
}

/* === META / TIMESTAMP === */
[class*="grid-area:meta"],
[class*="grid-area:meta"] * {
  color: #8696a0 !important;
}
.message-bubble-container.justify-end .bg-n-solid-blue ~ [class*="grid-area:meta"] *,
.bg-n-solid-blue [class*="text-xs"] {
  color: rgba(233,237,239,0.6) !important;
}

/* === DATE SEPARATOR === */
li.min-h-\[4rem\] > * {
  background-color: rgba(24, 34, 41, 0.85) !important;
  color: #8696a0 !important;
  border-radius: 7.5px !important;
}

/* === COMPOSER (zona de scris jos) === */
.resizable-editor-wrapper,
.resizable-editor-wrapper > div:not(.absolute),
footer.bg-n-surface-1,
[class*="reply-box"] {
  background-color: #1f2c34 !important;
  border-color: #2a3942 !important;
}
.resizable-editor-wrapper .ProseMirror,
.resizable-editor-wrapper textarea,
.resizable-editor-wrapper [contenteditable] {
  background-color: #2a3942 !important;
  color: #e9edef !important;
  border-radius: 8px !important;
}
.resizable-editor-wrapper .ProseMirror::placeholder,
.resizable-editor-wrapper [contenteditable]:empty::before {
  color: #8696a0 !important;
}

/* Container general jos sub composer */
.conversation-details-wrap > div:last-child {
  background-color: #1f2c34 !important;
}

/* Fix overflow pentru tail-uri */
[class*="grid-area:bubble"],
[class*="grid-area:bubble"] > div {
  overflow: visible !important;
}

/* === Override notă privată — gri închis cu border galben stânga === */
.message-bubble-container .bg-n-solid-amber {
  background-color: #1f2c34 !important;
  border-left: 4px solid #ffc107 !important;
  border-radius: 7.5px !important;
  border-top-right-radius: 0 !important;
  padding-left: 12px !important;
}
.message-bubble-container .bg-n-solid-amber,
.message-bubble-container .bg-n-solid-amber * {
  color: #e9edef !important;
}
.message-bubble-container.justify-end .bg-n-solid-amber::before {
  background: #1f2c34 !important;
}

/* === Înlocuiește logo Chatwoot din sidebar cu icon WhatsApp === */
img[src*="logo"][src*="chatwoot"],
img[alt*="Chatwoot" i],
.app-logo img,
aside img[src*=".svg"]:first-child,
aside img[class*="logo"] {
  content: url('/wa-icon.svg') !important;
  width: 32px !important;
  height: 32px !important;
}