/* ═══════════════════════════════════════════════════════════════
   Chat Widget — Frontend CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ──────────────────────────────────────────────── */
:root {
  --cw-primary:        #25D366;
  --cw-primary-dark:   #1da851;
  --cw-radius:         20px;
  --cw-radius-sm:      12px;
  --cw-shadow:         0 8px 40px rgba(0,0,0,.22);
  --cw-shadow-btn:     0 4px 20px rgba(37,211,102,.45);
  --cw-panel-w:        340px;
  --cw-panel-h:        520px;
  --cw-btn-size:       60px;
  --cw-z:              999999;
  --cw-speed:          .28s;
  --cw-ease:           cubic-bezier(.4,0,.2,1);
  --cw-gap:            20px;
}

/* ── Button ─────────────────────────────────────────────────────── */
#cw-fab {
  position:       fixed;
  bottom:         var(--cw-gap);
  right:          var(--cw-gap);
  width:          var(--cw-btn-size);
  height:         var(--cw-btn-size);
  border-radius:  50%;
  background:     var(--cw-primary);
  box-shadow:     var(--cw-shadow-btn);
  cursor:         pointer;
  z-index:        var(--cw-z);
  display:        flex;
  align-items:    center;
  justify-content: center;
  border:         none;
  outline:        none;
  transition:     transform var(--cw-speed) var(--cw-ease),
                  background var(--cw-speed);
  -webkit-tap-highlight-color: transparent;
}

#cw-fab:hover {
  background:   var(--cw-primary-dark);
  transform:    scale(1.1);
}

#cw-fab.cw--left  { right: auto; left: var(--cw-gap); }

/* Pulse ring */
#cw-fab::before {
  content:        '';
  position:       absolute;
  inset:          -4px;
  border-radius:  50%;
  border:         3px solid var(--cw-primary);
  opacity:        .6;
  animation:      cwPulse 2.2s ease-out infinite;
  pointer-events: none;
}
#cw-fab::after {
  content:        '';
  position:       absolute;
  inset:          -12px;
  border-radius:  50%;
  border:         2px solid var(--cw-primary);
  opacity:        .25;
  animation:      cwPulse 2.2s ease-out .7s infinite;
  pointer-events: none;
}

/* Icon inside FAB */
#cw-fab .cw-icon-chat,
#cw-fab .cw-icon-close {
  position:   absolute;
  transition: opacity var(--cw-speed) var(--cw-ease),
              transform var(--cw-speed) var(--cw-ease);
}
#cw-fab .cw-icon-close {
  opacity:   0;
  transform: rotate(-90deg) scale(.6);
}
#cw-fab.cw--open .cw-icon-chat {
  opacity:   0;
  transform: rotate(90deg) scale(.6);
}
#cw-fab.cw--open .cw-icon-close {
  opacity:   1;
  transform: rotate(0deg) scale(1);
}

/* Stop pulse when open */
#cw-fab.cw--open::before,
#cw-fab.cw--open::after {
  animation: none;
  opacity:   0;
}

/* ── Panel ──────────────────────────────────────────────────────── */
#cw-panel {
  position:       fixed;
  bottom:         calc(var(--cw-btn-size) + var(--cw-gap) + 12px);
  right:          var(--cw-gap);
  width:          var(--cw-panel-w);
  max-height:     var(--cw-panel-h);
  background:     #ffffff;
  border-radius:  var(--cw-radius);
  box-shadow:     var(--cw-shadow);
  z-index:        var(--cw-z);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;

  /* hidden state */
  opacity:        0;
  transform:      translateY(16px) scale(.96);
  pointer-events: none;
  transition:     opacity var(--cw-speed) var(--cw-ease),
                  transform var(--cw-speed) var(--cw-ease);
  will-change:    opacity, transform;
}

#cw-panel.cw--left  { right: auto; left: var(--cw-gap); }

#cw-panel.cw--visible {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Panel Header ───────────────────────────────────────────────── */
.cw-header {
  padding:         20px 20px 0;
  background:      linear-gradient(135deg, var(--cw-primary) 0%, #00b09b 100%);
  color:           #fff;
  border-radius:   var(--cw-radius) var(--cw-radius) 0 0;
  flex-shrink:     0;
}

.cw-header__top {
  display:         flex;
  align-items:     center;
  gap:             12px;
  margin-bottom:   14px;
}

.cw-header__avatar {
  width:           46px;
  height:          46px;
  border-radius:   50%;
  background:      rgba(255,255,255,.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       22px;
}

.cw-header__info h3 {
  margin:          0 0 2px;
  font-size:       15px;
  font-weight:     700;
  letter-spacing:  .01em;
}

.cw-header__info p {
  margin:          0;
  font-size:       12px;
  opacity:         .85;
}

.cw-online-dot {
  display:         inline-block;
  width:           7px;
  height:          7px;
  background:      #adffca;
  border-radius:   50%;
  margin-right:    5px;
  vertical-align:  middle;
  box-shadow:      0 0 0 2px rgba(173,255,202,.35);
  animation:       cwBlink 2s ease infinite;
}

/* Tabs in header */
.cw-tabs {
  display:         flex;
  gap:             4px;
  padding:         0 0 0;
}

.cw-tab {
  flex:            1;
  padding:         9px 4px;
  background:      transparent;
  border:          none;
  border-bottom:   3px solid transparent;
  color:           rgba(255,255,255,.75);
  font-size:       12px;
  font-weight:     600;
  cursor:          pointer;
  transition:      color var(--cw-speed), border-color var(--cw-speed);
  text-align:      center;
  letter-spacing:  .02em;
  text-transform:  uppercase;
}

.cw-tab:hover           { color: #fff; }
.cw-tab.cw--active      { color: #fff; border-bottom-color: #fff; }

/* ── Panel Body ─────────────────────────────────────────────────── */
.cw-body {
  overflow-y:      auto;
  flex:            1;
  padding:         18px 16px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.12) transparent;
}

/* ── Greeting ───────────────────────────────────────────────────── */
.cw-greeting {
  background:      #f0faf4;
  border-left:     3px solid var(--cw-primary);
  border-radius:   0 8px 8px 0;
  padding:         10px 14px;
  font-size:       13px;
  color:           #444;
  margin-bottom:   16px;
  line-height:     1.5;
}

/* ── Messenger list ─────────────────────────────────────────────── */
.cw-messengers {
  display:         flex;
  flex-direction:  column;
  gap:             10px;
}

.cw-messenger-btn {
  display:         flex;
  align-items:     center;
  gap:             14px;
  padding:         13px 16px;
  border-radius:   var(--cw-radius-sm);
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  font-size:       14px;
  font-weight:     600;
  color:           #fff;
  transition:      transform var(--cw-speed) var(--cw-ease),
                   filter var(--cw-speed);
  box-shadow:      0 3px 14px rgba(0,0,0,.13);
  -webkit-tap-highlight-color: transparent;
}

.cw-messenger-btn:hover  { transform: translateX(4px); filter: brightness(1.08); }
.cw-messenger-btn:active { transform: translateX(2px) scale(.98); }

.cw-messenger-btn svg,
.cw-messenger-btn img {
  width:    26px;
  height:   26px;
  flex-shrink: 0;
}

.cw-messenger-btn span { flex: 1; }

.cw-messenger-btn .cw-arrow {
  opacity:  .7;
  font-size: 16px;
}

/* ── Callback form ──────────────────────────────────────────────── */
.cw-callback-form {
  display:         flex;
  flex-direction:  column;
  gap:             12px;
}

.cw-field {
  display:         flex;
  flex-direction:  column;
  gap:             5px;
}

.cw-field label {
  font-size:       12px;
  font-weight:     600;
  color:           #666;
  text-transform:  uppercase;
  letter-spacing:  .05em;
}

.cw-field input,
.cw-field select {
  padding:         11px 14px;
  border:          1.5px solid #e0e0e0;
  border-radius:   10px;
  font-size:       14px;
  outline:         none;
  transition:      border-color var(--cw-speed), box-shadow var(--cw-speed);
  width:           100%;
  box-sizing:      border-box;
  background:      #fafafa;
  color:           #333;
  -webkit-appearance: none;
}

.cw-field input:focus,
.cw-field select:focus {
  border-color:    var(--cw-primary);
  box-shadow:      0 0 0 3px rgba(37,211,102,.15);
  background:      #fff;
}

.cw-submit-btn {
  margin-top:      4px;
  padding:         14px;
  background:      linear-gradient(135deg, var(--cw-primary) 0%, #00b09b 100%);
  color:           #fff;
  font-size:       15px;
  font-weight:     700;
  border:          none;
  border-radius:   12px;
  cursor:          pointer;
  transition:      transform var(--cw-speed) var(--cw-ease),
                   filter var(--cw-speed);
  box-shadow:      0 4px 18px rgba(37,211,102,.35);
  letter-spacing:  .02em;
  -webkit-tap-highlight-color: transparent;
}

.cw-submit-btn:hover    { filter: brightness(1.07); transform: translateY(-1px); }
.cw-submit-btn:active   { transform: translateY(0) scale(.98); }
.cw-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Success / Error */
.cw-msg {
  border-radius:   10px;
  padding:         12px 16px;
  font-size:       14px;
  font-weight:     600;
  text-align:      center;
  display:         none;
}
.cw-msg.cw--success { background: #e8fdf0; color: #1a7a44; display: block; }
.cw-msg.cw--error   { background: #fdeaea; color: #a12020; display: block; }

/* ── Footer ─────────────────────────────────────────────────────── */
.cw-footer {
  text-align:      center;
  padding:         6px 16px 12px;
  font-size:       10px;
  color:           #bbb;
  flex-shrink:     0;
}

/* ── Overlay (mobile) ───────────────────────────────────────────── */
#cw-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.35);
  z-index:         calc(var(--cw-z) - 1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition:      opacity var(--cw-speed);
}
#cw-overlay.cw--visible { display: block; }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes cwPulse {
  0%   { transform: scale(1);    opacity: .65; }
  70%  { transform: scale(1.55); opacity: 0;   }
  100% { transform: scale(1.55); opacity: 0;   }
}

@keyframes cwBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #cw-panel {
    position:     fixed;
    bottom:       0;
    left:         0;
    right:        0;
    width:        100%;
    max-height:   90vh;
    border-radius: 20px 20px 0 0;
    transform:    translateY(100%);
  }

  #cw-panel.cw--visible { transform: translateY(0); }

  #cw-fab {
    bottom:  18px;
    right:   18px;
  }

  #cw-overlay { display: block; opacity: 0; pointer-events: none; }
  #cw-overlay.cw--visible { opacity: 1; pointer-events: auto; }
}

@media (max-width: 360px) {
  .cw-header__info h3 { font-size: 14px; }
}