/* ==========================================================================
   Agent Dnia – Sticky Widget  |  Freedom Brandbook
   ========================================================================== */

:root {
  --ads-bg:         #ffffff;
  --ads-purple:     #360d2b;
  --ads-magenta:    #e50071;
  --ads-text-light: #7a6370;
  --ads-shadow:     0 8px 32px rgba(54,13,43,.16), 0 2px 8px rgba(54,13,43,.08);
  --ads-transition: transform .22s cubic-bezier(.22,1,.36,1),
                    box-shadow .22s cubic-bezier(.22,1,.36,1);
  --adswgt-avatar-size: 76px;
  --adswgt-overlap: 28px;   /* ile awatar nachodzi na kartę */
}

/* --------------------------------------------------------------------------
   Widget wrapper – przezroczysty, tylko flex-kontener
   -------------------------------------------------------------------------- */

#ads-widget {
  position:    fixed;
  display:     flex;
  align-items: center;
  isolation:   isolate;
  z-index:     99999;
  cursor:      pointer;

  opacity:     0;
  transition:  var(--ads-transition);
  animation:   ads-intro .55s cubic-bezier(.22,1,.36,1) 750ms forwards;
}

#ads-widget.ads--right { transform: translateX(100px); }
#ads-widget.ads--left  { transform: translateX(-100px); }

@keyframes ads-intro {
  from { opacity: 0; }
  to   { opacity: 1; transform: translateX(0); }
}

#ads-widget:hover { transform: translateY(-4px); }
#ads-widget:hover .adswgt-card {
  box-shadow: 0 18px 48px rgba(54,13,43,.2), 0 4px 14px rgba(54,13,43,.1);
}

/* --------------------------------------------------------------------------
   Pływający awatar
   -------------------------------------------------------------------------- */

.adswgt-avatar-wrap {
  position:    relative;
  flex-shrink: 0;
  width:       var(--adswgt-avatar-size);
  height:      var(--adswgt-avatar-size);
  z-index:     2;
  /* nachodzi na kartę */
  margin-right: calc(-1 * var(--adswgt-overlap));
}

.adswgt-avatar {
  display:       block;
  width:         var(--adswgt-avatar-size);
  height:        var(--adswgt-avatar-size);
  border-radius: 50%;
  object-fit:    cover;
  object-position: top center;
  border:        3px solid var(--ads-magenta);
  box-shadow:    0 4px 18px rgba(229,0,113,.3), 0 2px 8px rgba(54,13,43,.15);
  position:      relative;
  z-index:       1;
  background:    #fff;
}

/* --------------------------------------------------------------------------
   Ripple
   -------------------------------------------------------------------------- */

.adswgt-avatar-wrap::before,
.adswgt-avatar-wrap::after {
  content:       '';
  position:      absolute;
  inset:         -5px;
  border-radius: 50%;
  border:        2px solid rgba(229,0,113,.4);
  opacity:       0;
  animation:     ads-ripple 2.8s ease-out infinite;
}

.adswgt-avatar-wrap::after { animation-delay: 1.4s; }

@keyframes ads-ripple {
  0%   { transform: scale(1);    opacity: .65; }
  70%  { transform: scale(1.6);  opacity: 0;   }
  100% { transform: scale(1.6);  opacity: 0;   }
}

#ads-widget:hover .adswgt-avatar-wrap::before,
#ads-widget:hover .adswgt-avatar-wrap::after {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Karta (biała pigułka z tekstem)
   -------------------------------------------------------------------------- */

.adswgt-card {
  position:      relative;   /* anchor dla .adswgt-close */
  background:    var(--ads-bg);
  border-radius: 100px;
  box-shadow:    var(--ads-shadow);
  border:        1.5px solid rgba(229,0,113,.12);
  transition:    box-shadow .22s cubic-bezier(.22,1,.36,1);
  z-index:       1;

  /* lewy padding uwzględnia nachodzący awatar */
  padding: 14px 30px 14px calc(var(--adswgt-overlap) + 14px);
}

/* --------------------------------------------------------------------------
   Przycisk zamknięcia
   -------------------------------------------------------------------------- */

.adswgt-close {
  position:         absolute;
  top:              -9px;
  right:            -9px;
  width:            22px;
  height:           22px;
  border-radius:    50%;
  background:       var(--ads-purple);
  color:            #fff;
  border:           2px solid #fff;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  padding:          0;
  box-shadow:       0 2px 8px rgba(54,13,43,.25);
  transition:       background .18s ease, transform .18s ease, box-shadow .18s ease;
  z-index:          10;
  /* ukryty domyślnie – pojawia się przy hover na widget */
  opacity:          0;
  transform:        scale(.7);
}

#ads-widget:hover .adswgt-close {
  opacity:    1;
  transform:  scale(1);
}

.adswgt-close:hover {
  background:  var(--ads-magenta);
  box-shadow:  0 3px 12px rgba(229,0,113,.35);
  transform:   scale(1.15);
}

.adswgt-close:focus-visible {
  outline:        2px solid var(--ads-magenta);
  outline-offset: 2px;
}

/* Stan po zamknięciu */
#ads-widget.ads--dismissed {
  opacity:         0 !important;
  transform:       scale(.85) !important;
  pointer-events:  none;
  transition:      opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}

/* --------------------------------------------------------------------------
   Tekst
   -------------------------------------------------------------------------- */

.adswgt-info {
  display:         flex;
  flex-direction:  column;
  gap:             2px;
  min-width:       0;
}

.adswgt-label {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--ads-magenta);
  line-height:    1.2;
  margin-bottom:  2px;
}

.adswgt-name {
  font-size:     16px;
  font-weight:   700;
  color:         var(--ads-purple);
  line-height:   1.25;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     200px;
}

/* Wiersz: telefon + ikona WhatsApp */
.adswgt-phone-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.adswgt-phone {
  font-size:      15px;
  font-weight:    600;
  color:          var(--ads-magenta);
  text-decoration: none;
  line-height:    1.3;
  transition:     opacity .15s ease;
}

.adswgt-phone:hover { opacity: .8; }

/* Ikona WhatsApp (desktop) */
.adswgt-wa-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      #25D366;
  color:           #fff;
  flex-shrink:     0;
  transition:      transform .18s ease, box-shadow .18s ease;
}

.adswgt-wa-link:hover {
  transform:  scale(1.12);
  box-shadow: 0 2px 10px rgba(37,211,102,.4);
}

.adswgt-tooltip {
  font-size:  10px;
  color:      var(--ads-text-light);
  line-height: 1.3;
  margin-top: 3px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Phone badge (mobile FAB)
   -------------------------------------------------------------------------- */

.adswgt-phone-badge {
  display:         none;
  position:        absolute;
  bottom:          1px;
  right:           1px;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--ads-magenta);
  border:          2px solid #fff;
  align-items:     center;
  justify-content: center;
  z-index:         2;
}

/* --------------------------------------------------------------------------
   Mobile overlay (tap-to-call, niewidoczny)
   -------------------------------------------------------------------------- */

.adswgt-mobile-overlay { display: none; }

/* --------------------------------------------------------------------------
   Panel mobilny – wyjeżdża obok FAB gdy agent ma WhatsApp
   Domyślnie ukryty (display:none), aktywowany przez media query na mobile.
   -------------------------------------------------------------------------- */

.adswgt-fab-panel {
  display: none; /* widoczny tylko na mobile przez media query */
}

/* --------------------------------------------------------------------------
   Mobile RWD – FAB (< 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #ads-widget {
    width:           68px;
    height:          68px;
    justify-content: center;
    overflow:        visible;
  }

  #ads-widget:hover { transform: none; }

  .adswgt-avatar-wrap {
    --adswgt-avatar-size: 64px;
    width:        64px;
    height:       64px;
    margin-right: 0;
  }

  .adswgt-avatar {
    width:  64px;
    height: 64px;
  }

  .adswgt-card        { display: none; }
  .adswgt-phone-badge { display: flex; }

  .adswgt-mobile-overlay {
    display:       block;
    position:      absolute;
    inset:         0;
    border-radius: 50%;
    z-index:       3;
  }

  /* --- Panel mobilny WhatsApp --- */

  .adswgt-fab-panel {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            6px;
    position:       absolute;
    top:            50%;

    background:              rgba(255, 255, 255, 0.92);
    backdrop-filter:         blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius:           18px;
    padding:                 10px 14px 12px;
    box-shadow:              0 8px 32px rgba(54,13,43,.14), 0 2px 10px rgba(54,13,43,.08);
    white-space:             nowrap;
    pointer-events:          none;
    opacity:                 0;
    transition:              opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1);
  }

  /* Widget po prawej → panel wyjeżdża w lewo */
  #ads-widget.ads--right .adswgt-fab-panel {
    right:     calc(100% + 12px);
    transform: translateY(-50%) translateX(14px);
  }

  /* Widget po lewej → panel wyjeżdża w prawo */
  #ads-widget.ads--left .adswgt-fab-panel {
    left:      calc(100% + 12px);
    transform: translateY(-50%) translateX(-14px);
  }

  #ads-widget.ads--expanded .adswgt-fab-panel {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(-50%) translateX(0);
  }

  .adswgt-fab-agent-name {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .04em;
    color:          var(--ads-purple);
    text-align:     right;
    line-height:    1.2;
    opacity:        .65;
  }

  .adswgt-fab-actions {
    display: flex;
    gap:     8px;
  }

  .adswgt-fab-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    color:           #fff;
    text-decoration: none;
    flex-shrink:     0;
    opacity:         0;
    transform:       scale(.5);
    transition:      opacity .2s ease, transform .28s cubic-bezier(.22,1,.36,1),
                     box-shadow .18s ease;
  }

  .adswgt-fab-btn--phone {
    background: var(--ads-magenta);
    box-shadow: 0 3px 12px rgba(229,0,113,.3);
  }

  .adswgt-fab-btn--wa {
    background: #25D366;
    box-shadow: 0 3px 12px rgba(37,211,102,.3);
  }

  #ads-widget.ads--expanded .adswgt-fab-btn--phone {
    opacity:          1;
    transform:        scale(1);
    transition-delay: .06s;
  }

  #ads-widget.ads--expanded .adswgt-fab-btn--wa {
    opacity:          1;
    transform:        scale(1);
    transition-delay: .13s;
  }

  .adswgt-fab-btn:active { transform: scale(.92); }

  /* Overlay wyłączony gdy jest WhatsApp – tap obsługuje JS */
  .ads--has-whatsapp .adswgt-mobile-overlay { display: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #ads-widget {
    animation: none;
    opacity:   1;
    transform: none;
  }
  .adswgt-avatar-wrap::before,
  .adswgt-avatar-wrap::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Placeholder avatar
   -------------------------------------------------------------------------- */

.adswgt-avatar--placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #f5f0f3;
}