/* ============================================================
   WhatsApp Elementor Widget v2 – Frontend Styles
   Inline placement only. No sticky / floating logic.
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.waew-wrap {
    display:        inline-flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            8px;
    position:       relative; /* popup uses absolute for "below" */
}

/* Alignment helper applied via Elementor selector on .waew-wrap */
.waew-wrap {
    width: 100%;
}

/* ── Main button ─────────────────────────────────────────── */
.waew-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         14px 26px;
    background:      #25d366;
    color:           #ffffff;
    text-decoration: none;
    border-radius:   50px;
    font-size:       15px;
    font-weight:     600;
    letter-spacing:  0.01em;
    line-height:     1;
    cursor:          pointer;
    border:          none;
    outline:         none;
    transition:      background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
    box-shadow:      0 4px 16px rgba(37,211,102,0.38);
    white-space:     nowrap;
    position:        relative;
    z-index:         1;
}

.waew-btn:hover,
.waew-btn:focus-visible {
    background:  #1da851;
    color:       #ffffff;
    transform:   translateY(-2px);
    box-shadow:  0 8px 24px rgba(37,211,102,0.45);
    text-decoration: none;
}

.waew-btn:active {
    transform: translateY(0) scale(0.97);
}

.waew-btn-icon {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.waew-btn-icon svg {
    width:  22px;
    height: 22px;
    fill:   currentColor;
    display: block;
}

/* ── Popup ───────────────────────────────────────────────── */
.waew-popup {
    width:         300px;
    background:    #fff;
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 6px 32px rgba(0,0,0,0.16);
}

/* Above: rendered before the button in DOM (flex column) */
.waew-popup--above {
    order: -1; /* appears above the button */
    animation: waew-popup-in-above 0.32s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Below: rendered after the button in DOM (flex column) */
.waew-popup--below {
    order: 1;
    animation: waew-popup-in-below 0.32s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes waew-popup-in-above {
    from { opacity:0; transform:translateY(12px) scale(0.92); }
    to   { opacity:1; transform:translateY(0)    scale(1); }
}

@keyframes waew-popup-in-below {
    from { opacity:0; transform:translateY(-12px) scale(0.92); }
    to   { opacity:1; transform:translateY(0)     scale(1); }
}

/* Header */
.waew-popup-header {
    background:  #075e54;
    padding:     10px 12px;
    display:     flex;
    align-items: center;
    gap:         10px;
}

.waew-popup-avatar {
    width:            38px;
    height:           38px;
    border-radius:    50%;
    background:       rgba(255,255,255,0.18);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    color:            #fff;
}

.waew-popup-meta {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    overflow:       hidden;
}

.waew-agent-name {
    font-size:    13px;
    font-weight:  700;
    color:        #fff;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow:ellipsis;
}

.waew-agent-role {
    font-size:   11px;
    color:       rgba(255,255,255,0.8);
    display:     flex;
    align-items: center;
    gap:         4px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow:ellipsis;
}

.waew-online-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    #4dff91;
    flex-shrink:   0;
    animation:     waew-blink 2s ease-in-out infinite;
}

@keyframes waew-blink {
    0%,100% { opacity:1; }
    50%     { opacity:0.35; }
}

.waew-close {
    background:   transparent;
    border:       none;
    padding:      4px;
    cursor:       pointer;
    color:        rgba(255,255,255,0.75);
    border-radius:50%;
    display:      flex;
    align-items:  center;
    transition:   background 0.18s, color 0.18s;
    flex-shrink:  0;
    line-height:  0;
}

.waew-close:hover {
    background: rgba(255,255,255,0.18);
    color:      #fff;
}

/* Chat body */
.waew-popup-body {
    background: #ece5dd;
    padding:    14px 12px 10px;
}

.waew-popup-bubble {
    background:    #ffffff;
    border-radius: 0 10px 10px 10px;
    padding:       10px 12px 6px;
    max-width:     90%;
    display:       inline-block;
    box-shadow:    0 1px 3px rgba(0,0,0,0.10);
    position:      relative;
}

/* Tail on the bubble */
.waew-popup-bubble::before {
    content:          '';
    position:         absolute;
    top:              0;
    left:             -7px;
    border:           7px solid transparent;
    border-top-color: #ffffff;
    border-left:      0;
}

.waew-popup-msg {
    margin:      0 0 4px;
    font-size:   13.5px;
    line-height: 1.55;
    color:       #303030;
    word-break:  break-word;
}

.waew-msg-time {
    display:    block;
    font-size:  10px;
    color:      #888;
    text-align: right;
    margin-top: 2px;
}

/* Footer / CTA */
.waew-popup-footer {
    padding:    10px 12px 12px;
    background: #fff;
}

.waew-popup-cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    width:           100%;
    padding:         10px 14px;
    background:      #25d366;
    color:           #ffffff !important;
    text-decoration: none !important;
    border-radius:   8px;
    font-size:       13.5px;
    font-weight:     600;
    transition:      background 0.2s;
}

.waew-popup-cta:hover {
    background: #1da851;
    color: #ffffff !important;
}

/* ── Accessibility ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .waew-btn          { transition: none; }
    .waew-btn:hover    { transform: none; }
    .waew-popup--above,
    .waew-popup--below { animation: none; }
    .waew-online-dot   { animation: none; }
}