/* CHAT RZ — Widget BOTRZ Styles v3
 * Dodano: status operatora (online/busy/offline), 3 stany ukrycia (full/mini/transparent)
 */

:root {
  /* Kolory dymka IDLE: od 2.0.39 DYMEK BOTRZ ich NIE używa (ma stałą semantykę --botrz-connecting/status),
     ALE panel czatu wciąż TAK — widget.css mapuje --botrz-bubble-idle-3/2 → --chatrz-primary (nagłówek,
     przycisk Wyślij). NIE usuwać injekcji z WidgetFrontend — to zepsuje kolor panelu. */
  --botrz-bubble-idle-1: #7AFFFB;
  --botrz-bubble-idle-2: #47ADCC;
  --botrz-bubble-idle-3: #145C9D;

  /* 2.0.39 — CONNECTING / „łączę" (zielony, wzór z ChatGPT). Dymek i mini-dot trzymają STAŁĄ
     semantykę stanu niezależnie od palety postaci (paleta rusza tylko ludzika/Lottie). */
  --botrz-connecting-1: #D1FAE5;
  --botrz-connecting-2: #34D399;
  --botrz-connecting-3: #10A37F;
  --botrz-glow-connecting: rgba(16, 163, 127, 0.4);

  /* Kolory dymka — UNREAD state (czerwony — alert) */
  --botrz-bubble-unread-1: #FF6666;
  --botrz-bubble-unread-2: #ED4444;
  --botrz-bubble-unread-3: #B31919;

  /* Status operatora — kolory dymka (pełny BOTRZ) */
  --botrz-status-online-1: #6EE7B7;
  --botrz-status-online-2: #10B981;
  --botrz-status-online-3: #047857;
  --botrz-status-busy-1: #FCD34D;
  --botrz-status-busy-2: #F59E0B;
  --botrz-status-busy-3: #B45309;
  --botrz-status-offline-1: #D1D5DB;
  --botrz-status-offline-2: #9CA3AF;
  --botrz-status-offline-3: #4B5563;

  /* Glow shadow */
  --botrz-glow-idle: rgba(59, 130, 246, 0.3);
  --botrz-glow-unread: rgba(239, 68, 68, 0.6);
  --botrz-glow-online: rgba(16, 185, 129, 0.5);
  --botrz-glow-busy: rgba(245, 158, 11, 0.5);
  --botrz-glow-offline: rgba(107, 114, 128, 0.4);
}

/* ============================================
   WRAPPER BOTRZ — full state
   ============================================ */
/* 1.0.127 (Radek raport "robocik za maly na telefonie nie zwraca uwagi, dokładnie 2 razy większy"):
   Desktop 96 → 192px, mobile 80 → 160px (2×). BOTRZ jest 90% userów punkt entry — musi być widoczny. */
.chatrz-botrz-wrap {
  position: fixed;
  /* 2.0.10: bottom przeniesione do per-placement classes (3 wartości vertical) */
  width: 192px;
  height: 192px;
  z-index: 999999;
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2))
          drop-shadow(0 0 16px var(--botrz-glow-idle));
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease, top 0.3s ease, bottom 0.3s ease, left 0.3s ease, right 0.3s ease;
  animation: chatrz-breathe 3s ease-in-out infinite;
  will-change: transform;
}
/* 2.0.10 placement 3×3 (top/middle/bottom × left/center/right).
   Center horizontal użyty calc(50% - 96px) zamiast translateX(-50%) — żeby animation
   transform (chatrz-breathe scale+translateY) nie psuł pozycji.
   Middle vertical użyty calc(50% - 96px) na top — analogicznie.
   192px = width/height BOTRZ; 96 = połowa. Mobile: 160/2 = 80 (media query niżej). */
/* Vertical: top */
.chatrz-botrz-wrap.placement-top-left,
.chatrz-botrz-wrap.placement-top-center,
.chatrz-botrz-wrap.placement-top-right { top: var(--botrz-offset-bottom, 20px); }
/* Vertical: middle */
.chatrz-botrz-wrap.placement-middle-left,
.chatrz-botrz-wrap.placement-middle-center,
.chatrz-botrz-wrap.placement-middle-right { top: calc(50% - 96px); }
/* Vertical: bottom (default) */
.chatrz-botrz-wrap.placement-bottom-left,
.chatrz-botrz-wrap.placement-bottom-center,
.chatrz-botrz-wrap.placement-bottom-right { bottom: var(--botrz-offset-bottom, 20px); }

/* Horizontal: left */
.chatrz-botrz-wrap.placement-top-left,
.chatrz-botrz-wrap.placement-middle-left,
.chatrz-botrz-wrap.placement-bottom-left { left: var(--botrz-offset-side, 20px); }
/* Horizontal: right */
.chatrz-botrz-wrap.placement-top-right,
.chatrz-botrz-wrap.placement-middle-right,
.chatrz-botrz-wrap.placement-bottom-right { right: var(--botrz-offset-side, 20px); }
/* Horizontal: center */
.chatrz-botrz-wrap.placement-top-center,
.chatrz-botrz-wrap.placement-middle-center,
.chatrz-botrz-wrap.placement-bottom-center { left: calc(50% - 96px); }
.chatrz-botrz-wrap.is-unread {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25))
          drop-shadow(0 0 24px var(--botrz-glow-unread));
  animation: chatrz-pulse-unread 1.5s ease-in-out infinite;
}
@keyframes chatrz-breathe {
  0%, 100% { transform: scale(1.0) translateY(0); }
  50%      { transform: scale(1.02) translateY(-2px); }
}
@keyframes chatrz-pulse-unread {
  0%, 100% { transform: scale(1.0) translateY(0); }
  50%      { transform: scale(1.05) translateY(-3px); }
}
@media (max-width: 768px) {
  /* 1.0.127 — mobile 80 → 160px (2×). 2.0.10 — placement 3×3 też na mobile.
     Centering: 160/2 = 80 (calc 50% - 80px). */
  .chatrz-botrz-wrap { width: 160px; height: 160px; }
  /* Vertical: top */
  .chatrz-botrz-wrap.placement-top-left,
  .chatrz-botrz-wrap.placement-top-center,
  .chatrz-botrz-wrap.placement-top-right { top: calc(var(--botrz-offset-bottom, 16px) + env(safe-area-inset-top)); }
  /* Vertical: middle */
  .chatrz-botrz-wrap.placement-middle-left,
  .chatrz-botrz-wrap.placement-middle-center,
  .chatrz-botrz-wrap.placement-middle-right { top: calc(50% - 80px); }
  /* Vertical: bottom */
  .chatrz-botrz-wrap.placement-bottom-left,
  .chatrz-botrz-wrap.placement-bottom-center,
  .chatrz-botrz-wrap.placement-bottom-right { bottom: calc(var(--botrz-offset-bottom, 16px) + env(safe-area-inset-bottom)); }
  /* Horizontal: left */
  .chatrz-botrz-wrap.placement-top-left,
  .chatrz-botrz-wrap.placement-middle-left,
  .chatrz-botrz-wrap.placement-bottom-left { left: var(--botrz-offset-side, 16px); }
  /* Horizontal: right */
  .chatrz-botrz-wrap.placement-top-right,
  .chatrz-botrz-wrap.placement-middle-right,
  .chatrz-botrz-wrap.placement-bottom-right { right: var(--botrz-offset-side, 16px); }
  /* Horizontal: center */
  .chatrz-botrz-wrap.placement-top-center,
  .chatrz-botrz-wrap.placement-middle-center,
  .chatrz-botrz-wrap.placement-bottom-center { left: calc(50% - 80px); }
}

.chatrz-botrz-anim {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================================
   DYMEK chat — domyślny (idle, cyan)
   ============================================ */
.chatrz-speech-bubble {
  position: absolute;
  top: 8%;
  left: 25%;
  width: 26px;
  height: 19px;
  background: linear-gradient(135deg,
              var(--botrz-connecting-1) 0%,
              var(--botrz-connecting-2) 50%,
              var(--botrz-connecting-3) 100%);
  border-radius: 10px 10px 3px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 12px var(--botrz-glow-connecting),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 10;
  transition: background 0.4s ease, box-shadow 0.4s ease,
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chatrz-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4px 0 0;
  border-color: var(--botrz-connecting-3) transparent transparent transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
  transition: border-color 0.4s ease;
}
@media (max-width: 768px) {
  .chatrz-speech-bubble {
    width: 21px;
    height: 16px;
    border-radius: 8px 8px 3px 8px;
    top: 6%;
    left: 25%;
  }
  .chatrz-speech-bubble::after {
    border-width: 4px 3px 0 0;
  }
}

/* ============================================
   STATUS OPERATORA — kolor dymka (pełny BOTRZ)
   ============================================ */
.chatrz-botrz-wrap.status-online .chatrz-speech-bubble {
  background: linear-gradient(135deg,
              var(--botrz-status-online-1) 0%,
              var(--botrz-status-online-2) 50%,
              var(--botrz-status-online-3) 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 12px var(--botrz-glow-online),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.chatrz-botrz-wrap.status-online .chatrz-speech-bubble::after {
  border-color: var(--botrz-status-online-3) transparent transparent transparent;
}
.chatrz-botrz-wrap.status-busy .chatrz-speech-bubble {
  background: linear-gradient(135deg,
              var(--botrz-status-busy-1) 0%,
              var(--botrz-status-busy-2) 50%,
              var(--botrz-status-busy-3) 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 12px var(--botrz-glow-busy),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.chatrz-botrz-wrap.status-busy .chatrz-speech-bubble::after {
  border-color: var(--botrz-status-busy-3) transparent transparent transparent;
}
.chatrz-botrz-wrap.status-offline .chatrz-speech-bubble {
  background: linear-gradient(135deg,
              var(--botrz-status-offline-1) 0%,
              var(--botrz-status-offline-2) 50%,
              var(--botrz-status-offline-3) 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 12px var(--botrz-glow-offline),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.chatrz-botrz-wrap.status-offline .chatrz-speech-bubble::after {
  border-color: var(--botrz-status-offline-3) transparent transparent transparent;
}

/* UNREAD wygrywa nad statusem — czerwony zawsze */
.chatrz-botrz-wrap.is-unread .chatrz-speech-bubble,
.chatrz-botrz-wrap.is-unread.status-online .chatrz-speech-bubble,
.chatrz-botrz-wrap.is-unread.status-busy .chatrz-speech-bubble,
.chatrz-botrz-wrap.is-unread.status-offline .chatrz-speech-bubble {
  background: linear-gradient(135deg,
              var(--botrz-bubble-unread-1) 0%,
              var(--botrz-bubble-unread-2) 50%,
              var(--botrz-bubble-unread-3) 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 16px var(--botrz-glow-unread),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: scale(1.15);
}
.chatrz-botrz-wrap.is-unread .chatrz-speech-bubble::after,
.chatrz-botrz-wrap.is-unread.status-online .chatrz-speech-bubble::after,
.chatrz-botrz-wrap.is-unread.status-busy .chatrz-speech-bubble::after,
.chatrz-botrz-wrap.is-unread.status-offline .chatrz-speech-bubble::after {
  border-color: var(--botrz-bubble-unread-3) transparent transparent transparent;
}

/* ============================================
   KROPKI (typing indicator)
   ============================================ */
.chatrz-dots {
  display: flex;
  gap: 3px;
  align-items: center;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.chatrz-dot {
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  opacity: 0.9;
}
.chatrz-dot:nth-child(1) { animation: chatrz-dot-bounce 1.4s ease-in-out infinite; }
.chatrz-dot:nth-child(2) { animation: chatrz-dot-bounce 1.4s ease-in-out 0.2s infinite; }
.chatrz-dot:nth-child(3) { animation: chatrz-dot-bounce 1.4s ease-in-out 0.4s infinite; }
@keyframes chatrz-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
.chatrz-botrz-wrap.is-unread .chatrz-dots {
  opacity: 0;
  display: none;
}
@media (max-width: 768px) {
  .chatrz-dot {
    width: 2.5px;
    height: 2.5px;
  }
  .chatrz-dots { gap: 2px; }
}

/* ============================================
   CYFRA W DYMKU (unread)
   ============================================ */
.chatrz-badge-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  color: white;
  font-size: 10px;
  font-weight: 800;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", sans-serif;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  opacity: 0;
  transition:
    opacity 0.3s ease 0.15s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.chatrz-botrz-wrap.is-unread .chatrz-badge-number {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 768px) {
  .chatrz-badge-number {
    font-size: 8px;
  }
}

/* ============================================
   CLOSE BUTTON (×)
   ============================================ */
.chatrz-close-btn {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  z-index: 30;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  border: 2px solid white;
  line-height: 0;
  user-select: none;
}
/* 1.0.129 — close button widoczny TYLKO na desktop hover-capable devices.
   Mobile (no hover) NIE pokazuje X przy tap — pierwsze tap otwiera chat
   (Radek raport "pierwsze kliknięcie ma otwierać chat, nie X"). */
@media (hover: hover) {
  .chatrz-botrz-wrap:hover .chatrz-close-btn,
  .chatrz-botrz-wrap.show-close .chatrz-close-btn {
    opacity: 1;
    transform: scale(1);
  }
}
.chatrz-close-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

/* ============================================
   MINI KROPKA (collapsed state)
   ============================================ */
.chatrz-mini-dot {
  position: fixed;
  bottom: var(--botrz-offset-bottom, 20px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,
              var(--botrz-connecting-1) 0%,
              var(--botrz-connecting-3) 100%);
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 8px var(--botrz-glow-connecting);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: chatrz-mini-breathe 4s ease-in-out infinite;
  transition: transform 0.2s ease, background 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease, bottom 0.3s ease, left 0.3s ease, right 0.3s ease;
  z-index: 999999;
  will-change: transform;
}
/* 1.0.45 placement classes — mini dot */
.chatrz-mini-dot.placement-right { right: var(--botrz-offset-side, 20px); }
.chatrz-mini-dot.placement-left  { left:  var(--botrz-offset-side, 20px); }
.chatrz-mini-dot.placement-center {
  left: 50%;
  transform: translateX(-50%);
}
.chatrz-mini-dot:hover {
  transform: scale(1.15);
}
@keyframes chatrz-mini-breathe {
  0%, 100% { transform: scale(1.0); }
  50%      { transform: scale(1.05); }
}
@media (max-width: 768px) {
  .chatrz-mini-dot {
    bottom: calc(var(--botrz-offset-bottom, 16px) + env(safe-area-inset-bottom));
  }
  .chatrz-mini-dot.placement-right { right: var(--botrz-offset-side, 16px); }
  .chatrz-mini-dot.placement-left  { left:  var(--botrz-offset-side, 16px); }
}

/* 2.0.39 — status w mini kropce trzyma PEŁNĄ semantykę stanu (online/busy/offline),
 * niezależnie od palety postaci. Wcześniej online+busy zostawały w kolorze schematu = błąd. */
.chatrz-mini-dot.status-online {
  background: linear-gradient(135deg,
              var(--botrz-status-online-1) 0%,
              var(--botrz-status-online-3) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 8px var(--botrz-glow-online);
}
.chatrz-mini-dot.status-busy {
  background: linear-gradient(135deg,
              var(--botrz-status-busy-1) 0%,
              var(--botrz-status-busy-3) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 8px var(--botrz-glow-busy);
}
.chatrz-mini-dot.status-offline {
  background: linear-gradient(135deg,
              var(--botrz-status-offline-1) 0%,
              var(--botrz-status-offline-3) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* UNREAD override — czerwony wygrywa nad wszystkim */
.chatrz-mini-dot.is-unread {
  background: linear-gradient(135deg,
              var(--botrz-bubble-unread-1) 0%,
              var(--botrz-bubble-unread-3) 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 12px var(--botrz-glow-unread);
  animation: chatrz-mini-pulse 1.5s ease-in-out infinite;
}
@keyframes chatrz-mini-pulse {
  0%, 100% { transform: scale(1.0); }
  50%      { transform: scale(1.1); }
}

/* Cyfra w mini kropce */
.chatrz-mini-number {
  color: white;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.3s ease 0.1s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
.chatrz-mini-dot.is-unread .chatrz-mini-number {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   TRANSPARENT STATE (drugi klik X)
   ============================================ */
.chatrz-botrz-wrap.is-transparent,
.chatrz-mini-dot.is-transparent {
  opacity: 0.35;
}
.chatrz-botrz-wrap.is-transparent:hover,
.chatrz-mini-dot.is-transparent:hover {
  opacity: 1.0;
}

/* ============================================
   1.0.137 — Toast preview nad BOTRZ
   Slide-in z dołu po nowej agent_message, fade-out po 8s.
   Klik = open chat (target = window.ChatRZWidget.open()).
   Admin może wyłączyć przez wp_option `show_message_preview=0`.
   ============================================ */
.chatrz-msg-toast {
  position: fixed;
  /* 2.0.41 — pozycja (top/left/right + maxWidth) liczona inline w positionToastBeside (obok BOTRZ,
     ten sam poziom). Bez sztywnego bottom — wcześniej toast wisiał na dole niezależnie od BOTRZ. */
  z-index: 999998; /* tuż pod BOTRZ wrap (999999) */
  max-width: 280px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 10px 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  user-select: none;
}
.chatrz-msg-toast--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.chatrz-msg-toast--fade-out {
  opacity: 0;
  transform: translateY(12px);
}
/* 2.0.41 — klasy pozycji --left/--center/--right USUNIĘTE: positionToastBeside ustawia
   left/right/top/maxWidth inline wg realnego boxu BOTRZ (obok, ten sam poziom). */

.chatrz-msg-toast__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 4px;
  line-height: 1;
}
.chatrz-msg-toast__body {
  font-size: 13px;
  font-weight: 400;
  color: #1f2937;
  line-height: 1.4;
  word-break: break-word;
}

.chatrz-msg-toast:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* 2.2.65 — zachęta BOTRZ: ten sam dymek co toast wiadomości, ale z przyciskiem zamknięcia „×"
   (wisi aż klik/zamknięcie) i lekko cieplejszym akcentem. */
.chatrz-msg-toast--enticement {
  padding-right: 28px; /* miejsce na „×" */
  border: 1px solid rgba(16, 163, 127, 0.35); /* delikatny zielony akcent (ChatGPT-like) */
}
.chatrz-msg-toast__close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 17px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  opacity: 0.65;
  border-radius: 50%;
}
.chatrz-msg-toast__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

/* Mobile — zachowaj zwarty layout (NIE full-width). 1.0.138: zmniejszony z calc(100vw-32px)
   do 260px — wcześniej za szeroki o ~20% na typowych telefonach (Radek raport). */
@media (max-width: 480px) {
  /* 2.0.41 — pozycja i maxWidth liczone inline (positionToastBeside); na wąsko tekst się zawija. */
  .chatrz-msg-toast { max-width: 280px; }
}

/* ============================================
   A11y — reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .chatrz-botrz-wrap,
  .chatrz-speech-bubble,
  .chatrz-dot,
  .chatrz-badge-number,
  .chatrz-mini-dot,
  .chatrz-mini-number,
  .chatrz-msg-toast {
    animation: none !important;
    transition: opacity 0.1s linear !important;
  }
}