/* ============================================================
   WACHAT Public CSS v4 — WordPress-proof Dark Design
   Author: Hakan Aydemir | rafue.com
   ALL colors are hardcoded — NO var() in visual properties
   so zero theme can override them
   ============================================================ */

/* ── RESET — safe targeted ── */
#wachat-wrapper,
#wachat-wrapper *,
#wachat-wrapper *::before,
#wachat-wrapper *::after {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
/* Kill theme text/bg on every child */
#wachat-wrapper * {
    text-shadow: none !important;
    -webkit-text-fill-color: unset !important;
}

/* ── WRAPPER ── */
#wachat-wrapper {
    --wc-btn-bg:          #25D366;
    --wc-btn-color:       #ffffff;
    --wc-hdr-bg:          #25D366;
    --wc-hdr-color:       #ffffff;
    --wc-btn-size:        60px;
    --wc-btn-r:           50%;
    --wc-panel-bg:        #1b1f2e;
    --wc-body-bg:         #1b1f2e;
    --wc-bubble-bg:       #252a3a;
    --wc-bubble-color:    #f0f4ff;
    --wc-input-bg:        #252a3a;
    --wc-input-color:     #f0f4ff;
    --wc-footer-bg:       #161a27;
    --wc-agent-name:      #f0f4ff;
    --wc-agent-role:      #8892a4;
    --wc-tooltip-bg:      #0d0f1a;
    --wc-tooltip-color:   #e8eaf0;
    --wc-input-placeholder: #4a5568;
    --wc-footer-brand:    #3d4459;

    --wc-pos-bottom: 28px;
    --wc-pos-side:   28px;

    position: fixed !important;
    bottom: var(--wc-pos-bottom) !important;
    z-index: 2147483647 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
#wachat-wrapper.wachat-pos-right { right: var(--wc-pos-side) !important; left: auto !important; }
#wachat-wrapper.wachat-pos-left  { left: var(--wc-pos-side) !important; right: auto !important; }


/* ── FAB BUTTON ── */
.wachat-bubble {
    width: var(--wc-btn-size) !important;
    height: var(--wc-btn-size) !important;
    background-color: var(--wc-btn-bg) !important;
    background-image: none !important;
    color: var(--wc-btn-color) !important;
    border-radius: var(--wc-btn-r) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 8px 28px rgba(37,211,102,.5), 0 2px 8px rgba(0,0,0,.3) !important;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease !important;
    position: relative !important;
    user-select: none !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-decoration: none !important;
}
.wachat-bubble:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 36px rgba(37,211,102,.6), 0 4px 14px rgba(0,0,0,.35) !important;
}
.wachat-bubble svg {
    width:  calc(var(--wc-btn-size) * .46) !important;
    height: calc(var(--wc-btn-size) * .46) !important;
    fill: var(--wc-btn-color) !important;
    display: block !important;
    flex-shrink: 0 !important;
    stroke: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wachat-bubble .wachat-bubble-icon-close {
    align-items: center;
    justify-content: center;
}
.wachat-bubble .wachat-bubble-icon-close svg {
    fill: none !important;
    stroke: var(--wc-btn-color) !important;
}

/* pulse ring */
.wachat-pulse-ring {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background-color: var(--wc-btn-bg) !important;
    opacity: 0 !important;
    animation: wc-pulse 2.8s ease-out infinite !important;
    pointer-events: none !important;
}
@keyframes wc-pulse {
    0%   { transform: scale(1);   opacity: .5; }
    100% { transform: scale(2);   opacity: 0;  }
}

/* animations */
.wachat-anim-bounce { animation: wc-bounce 2.2s ease infinite !important; }
@keyframes wc-bounce {
    0%,100% { transform: translateY(0); }
    45%     { transform: translateY(-8px); }
    65%     { transform: translateY(-4px); }
}
.wachat-anim-shake { animation: wc-shake 3.5s ease infinite !important; }
@keyframes wc-shake {
    0%,88%,100% { transform: rotate(0); }
    90% { transform: rotate(-14deg); }
    93% { transform: rotate(14deg); }
    96% { transform: rotate(-8deg); }
    98% { transform: rotate(8deg); }
}
.wachat-anim-pulse { animation: wc-fab-pulse 1.9s ease infinite !important; }
@keyframes wc-fab-pulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.07); }
}
.wachat-anim-none { animation: none !important; }


/* ── TOOLTIP ── */
.wachat-tooltip {
    position: absolute !important;
    bottom: calc(100% + 14px) !important;
    background-color: var(--wc-tooltip-bg) !important;
    background-image: none !important;
    color: var(--wc-tooltip-color) !important;
    padding: 9px 14px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: opacity .2s ease, transform .2s ease !important;
    font-family: inherit !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
    max-width: 220px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.45 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    z-index: 1 !important;
    margin: 0 !important;
    display: block !important;
}
.wachat-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important; left: 50% !important;
    transform: translateX(-50%) !important;
    border: 7px solid transparent !important;
    border-top-color: var(--wc-tooltip-bg) !important;
    display: block !important;
}
.wachat-pos-right .wachat-tooltip { right: 0 !important; left: auto !important; }
.wachat-pos-left  .wachat-tooltip { left: 0 !important; right: auto !important; }
.wachat-bubble:hover .wachat-tooltip,
.wachat-bubble.wachat-tooltip-visible .wachat-tooltip {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


/* ── PANEL ── */
.wachat-panel {
    position: absolute !important;
    bottom: calc(var(--wc-btn-size) + 20px) !important;
    width: 340px !important;
    background-color: var(--wc-panel-bg) !important;
    background-image: none !important;
    border-radius: 22px !important;
    box-shadow:
        0 32px 80px rgba(0,0,0,.65),
        0 8px 24px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.07) !important;
    overflow: hidden !important;
    transform-origin: bottom right !important;
    animation: wc-panel-in .32s cubic-bezier(.34,1.46,.64,1) both !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.wachat-pos-right .wachat-panel { right: 0 !important; left: auto !important; }
.wachat-pos-left  .wachat-panel { left: 0 !important; right: auto !important; }

@keyframes wc-panel-in {
    from { opacity: 0; transform: scale(.88) translateY(14px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}


/* ── HEADER ── */
.wachat-panel-header {
    background-color: var(--wc-hdr-bg) !important;
    background-image: none !important;
    padding: 20px 18px 18px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}
.wachat-panel-header::before {
    content: '' !important;
    position: absolute !important;
    width: 160px !important; height: 160px !important;
    border-radius: 50% !important;
    background-color: rgba(0,0,0,.12) !important;
    top: -70px !important; right: -40px !important;
    pointer-events: none !important;
    display: block !important;
}
.wachat-panel-header::after {
    content: '' !important;
    position: absolute !important;
    width: 90px !important; height: 90px !important;
    border-radius: 50% !important;
    background-color: rgba(255,255,255,.07) !important;
    bottom: -40px !important; left: -10px !important;
    pointer-events: none !important;
    display: block !important;
}

.wachat-header-content {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}
.wachat-header-avatar-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}
.wachat-header-avatars {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wachat-header-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2.5px solid rgba(255,255,255,.45) !important;
    background-color: rgba(0,0,0,.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.wachat-header-avatar:not(:first-child) { margin-left: -10px !important; }
.wachat-header-avatar img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
    border-radius: 50% !important;
    margin: 0 !important; padding: 0 !important;
    border: none !important;
}

.wachat-header-online {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.88) !important;
    font-family: inherit !important;
    margin: 0 !important; padding: 0 !important;
}
.wachat-header-online-dot {
    width: 7px !important; height: 7px !important;
    border-radius: 50% !important;
    background-color: #a8ffbc !important;
    box-shadow: 0 0 6px rgba(168,255,188,.9) !important;
    flex-shrink: 0 !important;
    animation: wc-blink 2s ease infinite !important;
    display: inline-block !important;
    margin: 0 !important;
}
@keyframes wc-blink {
    0%,100% { opacity: 1; }
    50%     { opacity: .35; }
}

.wachat-header-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    line-height: 1.2 !important;
    letter-spacing: -.3px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: none !important;
}
.wachat-header-sub {
    font-size: 12px !important;
    color: rgba(255,255,255,.78) !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    display: block !important;
    background: none !important;
}

.wachat-close {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important;
    background-color: rgba(0,0,0,.22) !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background-color .15s ease !important;
    border: none !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.wachat-close:hover { background-color: rgba(0,0,0,.38) !important; }
.wachat-close svg {
    stroke: #ffffff !important;
    fill: none !important;
    width: 12px !important; height: 12px !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
}


/* ── PANEL BODY ── */
.wachat-panel-body {
    padding: 16px 16px 12px !important;
    background-color: var(--wc-body-bg) !important;
    background-image: none !important;
    max-height: 330px !important;
    overflow-y: auto !important;
    margin: 0 !important;
    border: none !important;
}
.wachat-panel-body::-webkit-scrollbar { width: 3px !important; }
.wachat-panel-body::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.1) !important;
    border-radius: 3px !important;
}


/* ── GREETING BUBBLE ── */
.wachat-greeting-wrap {
    display: flex !important;
    align-items: flex-end !important;
    gap: 9px !important;
    margin-bottom: 14px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}
.wachat-greeting-avatar {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important;
    background-color: var(--wc-hdr-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border: 2px solid #2e3448 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wachat-greeting-avatar img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
    margin: 0 !important; padding: 0 !important;
    border: none !important; border-radius: 50% !important;
}
.wachat-greeting-bubble {
    background-color: var(--wc-bubble-bg) !important;
    background-image: none !important;
    border: 1px solid #2e3448 !important;
    border-radius: 4px 16px 16px 16px !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    color: var(--wc-bubble-color) !important;
    line-height: 1.55 !important;
    font-family: inherit !important;
    max-width: calc(100% - 42px) !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: block !important;
}


/* ── SIRAYLI MESAJLAR ── */
.wachat-seq-wrap {
    display: flex !important;
    align-items: flex-end !important;
    gap: 9px !important;
}
.wachat-seq-bubble {
    background-color: var(--wc-bubble-bg) !important;
    border: 1px solid #2e3448 !important;
    border-radius: 4px 16px 16px 16px !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    color: var(--wc-bubble-color) !important;
    line-height: 1.55 !important;
    font-family: inherit !important;
    max-width: calc(100% - 42px) !important;
    margin: 0 !important;
    animation: wc-fadein .3s ease !important;
}
@keyframes wc-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wachat-typing-bubble {
    background-color: var(--wc-bubble-bg) !important;
    border: 1px solid #2e3448 !important;
    border-radius: 4px 16px 16px 16px !important;
    padding: 11px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.wachat-typing-bubble span {
    width: 7px !important; height: 7px !important;
    border-radius: 50% !important;
    background: #7a8499 !important;
    display: inline-block !important;
    animation: wc-dot 1.2s infinite !important;
}
.wachat-typing-bubble span:nth-child(2) { animation-delay: .2s !important; }
.wachat-typing-bubble span:nth-child(3) { animation-delay: .4s !important; }
@keyframes wc-dot {
    0%,80%,100% { transform: scale(.7); opacity:.4; }
    40%          { transform: scale(1);  opacity:1;  }
}
.wachat-typing-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.wachat-typing-inline span {
    width: 7px !important; height: 7px !important;
    border-radius: 50% !important;
    background: #7a8499 !important;
    display: inline-block !important;
    animation: wc-dot 1.2s infinite !important;
}
.wachat-typing-inline span:nth-child(2) { animation-delay: .2s !important; }
.wachat-typing-inline span:nth-child(3) { animation-delay: .4s !important; }


.wachat-agents-list {
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--wc-bubble-bg) !important;
    background-image: none !important;
    border: 1px solid #2e3448 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}
.wachat-agent-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    transition: background-color .12s !important;
    background-color: transparent !important;
    background-image: none !important;
    text-decoration: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}
.wachat-agent-item:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.wachat-agent-item:hover {
    background-color: rgba(255,255,255,.04) !important;
}

.wachat-agent-avatar {
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important; padding: 0 !important;
}
.wachat-agent-avatar img {
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    border: 2px solid #2e3448 !important;
    margin: 0 !important; padding: 0 !important;
}
.wachat-avatar-placeholder {
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important;
    background-image: linear-gradient(135deg, #25D366, #1ebe5d) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    border: 2px solid #2e3448 !important;
    margin: 0 !important; padding: 0 !important;
    line-height: 1 !important;
}
.wachat-status-dot {
    width: 10px !important; height: 10px !important;
    border-radius: 50% !important;
    border: 2px solid #252a3a !important;
    position: absolute !important;
    bottom: 0 !important; right: 0 !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
}
.wachat-status-dot.online  { background-color: #22c55e !important; }
.wachat-status-dot.offline { background-color: #4b5563 !important; }

.wachat-agent-info {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important; padding: 0 !important;
}
.wachat-agent-name {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--wc-agent-name) !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
    background: none !important;
    line-height: 1.3 !important;
}
.wachat-agent-role {
    font-size: 11.5px !important;
    color: var(--wc-agent-role) !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    padding: 0 !important;
    background: none !important;
    line-height: 1.3 !important;
}
.wachat-chat-btn {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background-color: var(--wc-btn-bg) !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(37,211,102,.35) !important;
    border: none !important;
    margin: 0 !important; padding: 0 !important;
    cursor: pointer !important;
}
.wachat-chat-btn:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 6px 18px rgba(37,211,102,.5) !important;
}
.wachat-chat-btn svg {
    width: 17px !important; height: 17px !important;
    fill: #ffffff !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
    stroke: none !important;
}


/* ── SINGLE AGENT CARD ── */
.wachat-single-card {
    background-color: var(--wc-bubble-bg) !important;
    background-image: none !important;
    border: 1px solid #2e3448 !important;
    border-radius: 16px !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    margin-bottom: 13px !important;
    margin-top: 0 !important;
    box-shadow: none !important;
}
.wachat-single-card-avatar {
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important; padding: 0 !important;
}
.wachat-single-card-avatar img {
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    border: 2.5px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
    margin: 0 !important; padding: 0 !important;
}
.wachat-single-card-placeholder {
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;
    background-image: linear-gradient(135deg, #25D366, #1ebe5d) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    border: 2.5px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
    margin: 0 !important; padding: 0 !important;
    line-height: 1 !important;
}
.wachat-single-card-info {
    flex: 1 !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important;
}
.wachat-single-card-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--wc-agent-name) !important;
    font-family: inherit !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
    background: none !important;
    line-height: 1.3 !important;
}
.wachat-single-card-role {
    font-size: 12px !important;
    color: var(--wc-agent-role) !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    font-family: inherit !important;
    display: block !important;
    padding: 0 !important;
    background: none !important;
    line-height: 1.3 !important;
}
.wachat-single-card-status {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 7px !important;
    margin-bottom: 0 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #22c55e !important;
    font-family: inherit !important;
    padding: 0 !important;
    background: none !important;
}
.wachat-single-card-status-dot {
    width: 7px !important; height: 7px !important;
    border-radius: 50% !important;
    background-color: #22c55e !important;
    box-shadow: 0 0 6px rgba(34,197,94,.7) !important;
    animation: wc-blink 2s ease infinite !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    margin: 0 !important; padding: 0 !important;
}


/* ── INPUTS ── */
.wachat-input-group {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.wachat-input-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--wc-input-placeholder) !important;
    margin-bottom: 7px !important;
    font-family: inherit !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    background: none !important;
    padding: 0 !important;
}
.wachat-input-label svg {
    fill: #4a5568 !important;
    stroke: none !important;
    width: 12px !important; height: 12px !important;
}

.wachat-input {
    width: 100% !important;
    padding: 11px 14px !important;
    background-color: var(--wc-input-bg) !important;
    background-image: none !important;
    border: 1px solid #2e3448 !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    color: var(--wc-input-color) !important;
    font-family: inherit !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    display: block !important;
    outline: none !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.wachat-input::placeholder { color: var(--wc-input-placeholder) !important; }
.wachat-input:focus {
    border-color: #25D366 !important;
    background-color: rgba(37,211,102,.05) !important;
    box-shadow: 0 0 0 3px rgba(37,211,102,.15) !important;
}

.wachat-input-send-row {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 0 !important; padding: 0 !important;
    border: none !important; background: none !important;
}
.wachat-input-send-row .wachat-input { flex: 1 !important; }

.wachat-send-btn {
    width: 44px !important; height: 44px !important;
    border-radius: 12px !important;
    background-color: var(--wc-btn-bg) !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(37,211,102,.4) !important;
    margin: 0 !important; padding: 0 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.wachat-send-btn:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 6px 20px rgba(37,211,102,.55) !important;
}
.wachat-send-btn svg {
    stroke: #ffffff !important;
    fill: none !important;
    width: 17px !important; height: 17px !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
}


/* ── FOOTER ── */
.wachat-panel-footer {
    padding: 13px 16px 15px !important;
    background-color: var(--wc-footer-bg) !important;
    background-image: none !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    margin: 0 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}
.wachat-footer-cta {
    width: 100% !important;
    padding: 13px 16px !important;
    background-color: var(--wc-btn-bg) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease !important;
    font-family: inherit !important;
    border: none !important;
    box-shadow: 0 5px 20px rgba(37,211,102,.45) !important;
    letter-spacing: -.1px !important;
    line-height: 1 !important;
    margin: 0 !important;
    outline: none !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.wachat-footer-cta:hover {
    opacity: .92 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 26px rgba(37,211,102,.55) !important;
}
.wachat-footer-cta svg {
    fill: #ffffff !important;
    stroke: none !important;
    width: 17px !important; height: 17px !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
    flex-shrink: 0 !important;
}
.wachat-footer-brand {
    text-align: center !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    font-size: 10px !important;
    color: var(--wc-footer-brand) !important;
    font-family: inherit !important;
    letter-spacing: .2px !important;
    padding: 0 !important;
    background: none !important;
    display: block !important;
}
.wachat-footer-brand a {
    color: var(--wc-footer-brand) !important;
    text-decoration: none !important;
}
.wachat-footer-brand a:hover { color: var(--wc-agent-role) !important; }


/* ── FLOATING PILL ── */
.wachat-layout-floating_button_group .wachat-bubble {
    width: auto !important;
    border-radius: 30px !important;
    padding: 0 !important;
    height: var(--wc-btn-size) !important;
}
.wachat-bubble-inner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 22px !important;
    height: 100% !important;
    margin: 0 !important;
    background: none !important;
}
.wachat-bubble-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    color: var(--wc-btn-color) !important;
    letter-spacing: -.1px !important;
    margin: 0 !important; padding: 0 !important;
    background: none !important;
}


/* ── RESPONSIVE ── */
@media (max-width: 480px) {
    #wachat-wrapper { bottom: 16px !important; }
    #wachat-wrapper.wachat-pos-right { right: 14px !important; }
    #wachat-wrapper.wachat-pos-left  { left: 14px !important; }
    .wachat-panel { width: calc(100vw - 28px) !important; min-width: 280px !important; }
}
@media (min-width: 769px) { #wachat-wrapper.hide-desktop { display: none !important; } }
@media (max-width: 768px) { #wachat-wrapper.hide-mobile  { display: none !important; } }

/* ── BALON MESAJ ── */
.wachat-balloon {
    position: absolute !important;
    bottom: calc(100% + 12px) !important;
    right: 0 !important;
    background: #fff !important;
    color: #1a1a2e !important;
    border-radius: 16px 16px 4px 16px !important;
    padding: 12px 36px 12px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
    pointer-events: auto !important;
    animation: wc-balloon-in .35s cubic-bezier(.34,1.56,.64,1) !important;
    z-index: 9999 !important;
    max-width: 260px !important;
    white-space: normal !important;
}
@keyframes wc-balloon-in {
    from { opacity:0; transform: scale(.8) translateY(10px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
}
.wachat-balloon-close {
    position: absolute !important;
    top: 6px !important; right: 8px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 11px !important;
    color: #aaa !important;
    padding: 2px !important;
    line-height: 1 !important;
}
.wachat-balloon-close:hover { color: #555 !important; }

/* ── SEQ CTA GLOW ── */
.wachat-footer-cta.wachat-cta-glow {
    animation: wc-cta-glow 1.2s ease-in-out infinite !important;
}
@keyframes wc-cta-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); transform: scale(1); }
    50%      { box-shadow: 0 0 18px 6px rgba(37,211,102,0.55); transform: scale(1.04); }
}