/* ══════════════════════════════════════════
   Chaty Chat Widget — chaty.css v2.0
══════════════════════════════════════════ */

#chaty-widget,
#chaty-widget *,
#chaty-widget *::before,
#chaty-widget *::after {
    box-sizing: border-box !important;
}

#chaty-widget {
    position: fixed !important;
    bottom: 24px !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    width: auto !important;
    max-width: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#chaty-widget.chaty-pos-right { right: 24px !important; left: auto !important; align-items: flex-end !important; }
#chaty-widget.chaty-pos-left  { left: 24px !important; right: auto !important; align-items: flex-start !important; }

/* ── Channel list ── */
#chaty-channels {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;
    opacity: 0 !important;
    transform: translateY(16px) scale(0.96) !important;
    pointer-events: none !important;
    transition: opacity 0.26s ease, transform 0.26s ease !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    border: none !important;
}
.chaty-pos-left #chaty-channels { align-items: flex-start !important; }
#chaty-channels.chaty-open {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: all !important;
}

/* Stagger delays */
#chaty-channels .chaty-channel:nth-child(1) { transition-delay: .00s !important; }
#chaty-channels .chaty-channel:nth-child(2) { transition-delay: .03s !important; }
#chaty-channels .chaty-channel:nth-child(3) { transition-delay: .06s !important; }
#chaty-channels .chaty-channel:nth-child(4) { transition-delay: .09s !important; }
#chaty-channels .chaty-channel:nth-child(5) { transition-delay: .12s !important; }
#chaty-channels .chaty-channel:nth-child(6) { transition-delay: .15s !important; }
#chaty-channels .chaty-channel:nth-child(7) { transition-delay: .18s !important; }
#chaty-channels .chaty-channel:nth-child(8) { transition-delay: .21s !important; }

/* ── Individual channel row ── */
#chaty-widget a.chaty-channel,
#chaty-widget a.chaty-channel:link,
#chaty-widget a.chaty-channel:visited,
#chaty-widget a.chaty-channel:hover,
#chaty-widget a.chaty-channel:active,
#chaty-widget a.chaty-channel:focus {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.chaty-pos-left #chaty-widget a.chaty-channel { flex-direction: row-reverse !important; }

/* ── Label pill ── */
#chaty-widget .chaty-label {
    display: inline-block !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    width: auto !important;
    border: none !important;
    opacity: 0 !important;
    transform: translateX(6px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
}
.chaty-pos-left #chaty-widget .chaty-label { transform: translateX(-6px) !important; }
#chaty-widget .chaty-channel:hover .chaty-label,
#chaty-widget .chaty-channel:focus .chaty-label {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ── Icon circle ── */
#chaty-widget .chaty-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.22) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    float: none !important;
}
#chaty-widget .chaty-channel:hover .chaty-icon { transform: scale(1.1) !important; box-shadow: 0 6px 20px rgba(0,0,0,.30) !important; }
#chaty-widget .chaty-icon svg { width: 24px !important; height: 24px !important; display: block !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; }

/* Brand colours */
#chaty-widget .chaty-icon.icon-whatsapp  { background-color: #25D366 !important; }
#chaty-widget .chaty-icon.icon-email     { background-color: #EA4335 !important; }
#chaty-widget .chaty-icon.icon-telegram  { background-color: #229ED9 !important; }
#chaty-widget .chaty-icon.icon-skype     { background-color: #00AFF0 !important; }
#chaty-widget .chaty-icon.icon-line      { background-color: #06C755 !important; }
#chaty-widget .chaty-icon.icon-signal    { background-color: #3A76F0 !important; }
#chaty-widget .chaty-icon.icon-messenger { background: linear-gradient(135deg,#0099FF,#a033ff) !important; }
#chaty-widget .chaty-icon.icon-form      { background-color: #7c3aed !important; }

/* ══════════════════════════════════════════
   TOGGLE BUTTON — BIG + ANIMATED
══════════════════════════════════════════ */

#chaty-toggle-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    border: none !important;
}
.chaty-pos-left #chaty-toggle-wrap { flex-direction: row-reverse !important; }

/* Contact Us label */
#chaty-toggle-label {
    display: inline-block !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    white-space: nowrap !important;
    border: none !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
}
#chaty-toggle-wrap.chaty-open #chaty-toggle-label {
    opacity: 0 !important;
    transform: translateX(10px) !important;
}
.chaty-pos-left #chaty-toggle-wrap.chaty-open #chaty-toggle-label {
    transform: translateX(-10px) !important;
}

/* THE TOGGLE BUTTON ITSELF */
#chaty-toggle {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    border-radius: 50% !important;
    background: var(--chaty-color, #1a1a2e) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    float: none !important;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent !important;
    /* BOUNCE ANIMATION */
    animation: chatyBounce 2.4s ease-in-out infinite !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.30) !important;
}

/* Stop animation when open */
#chaty-toggle.chaty-open {
    animation: none !important;
    transform: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.28) !important;
}

/* Bounce keyframes */
@keyframes chatyBounce {
    0%   { transform: translateY(0);   }
    20%  { transform: translateY(-8px); }
    40%  { transform: translateY(0);   }
    60%  { transform: translateY(-5px); }
    80%  { transform: translateY(0);   }
    100% { transform: translateY(0);   }
}

/* Pulse ring */
#chaty-toggle::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: var(--chaty-color, #1a1a2e) !important;
    opacity: 0.5 !important;
    animation: chatyPulseRing 2.4s ease-out infinite !important;
    z-index: -1 !important;
    pointer-events: none !important;
}
#chaty-toggle.chaty-open::after {
    animation: none !important;
    opacity: 0 !important;
}

@keyframes chatyPulseRing {
    0%   { transform: scale(1);    opacity: 0.5; }
    60%  { transform: scale(1.55); opacity: 0;   }
    100% { transform: scale(1.55); opacity: 0;   }
}

/* Icon animations inside toggle */
#chaty-toggle svg { position: absolute !important; transition: opacity 0.22s ease, transform 0.28s ease !important; margin: 0 !important; padding: 0 !important; width: 30px !important; height: 30px !important; }
#chaty-toggle .icon-chat  { opacity: 1 !important;  transform: rotate(0deg)   !important; }
#chaty-toggle .icon-close { opacity: 0 !important;  transform: rotate(-90deg) !important; }
#chaty-toggle.chaty-open .icon-chat  { opacity: 0 !important; transform: rotate(90deg)  !important; }
#chaty-toggle.chaty-open .icon-close { opacity: 1 !important; transform: rotate(0deg)   !important; }

/* ── Contact form modal ── */
#chaty-form-modal {
    position: fixed !important;
    bottom: 100px !important;
    right: 24px !important;
    width: 320px !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.18) !important;
    z-index: 100000 !important;
    overflow: hidden !important;
    animation: chatySlideUp 0.26s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}
.chaty-pos-left ~ #chaty-form-modal { right: auto !important; left: 24px !important; }

@keyframes chatySlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
#chaty-form-modal[hidden] { display: none !important; }

.chaty-form-header {
    background: #7c3aed !important;
    color: #fff !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}
.chaty-form-close {
    background: none !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: opacity 0.15s !important;
}
.chaty-form-close:hover { opacity: 1 !important; }

.chaty-form-body {
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: #fff !important;
    margin: 0 !important;
}
.chaty-form-body input,
.chaty-form-body textarea {
    width: 100% !important;
    padding: 10px 13px !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 0.87rem !important;
    color: #333 !important;
    font-family: inherit !important;
    outline: none !important;
    transition: border-color 0.18s !important;
    box-sizing: border-box !important;
    resize: none !important;
    background: #fff !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.chaty-form-body input:focus,
.chaty-form-body textarea:focus { border-color: #7c3aed !important; box-shadow: none !important; }

#chaty-form-submit {
    background: #7c3aed !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 11px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.18s !important;
    font-family: inherit !important;
    width: 100% !important;
    margin: 0 !important;
}
#chaty-form-submit:hover { background: #6d28d9 !important; }

.chaty-form-msg { font-size: 0.85rem !important; text-align: center !important; padding: 6px 0 0 !important; margin: 0 !important; }
.chaty-form-msg.success { color: #16a34a !important; }
.chaty-form-msg.error   { color: #dc2626 !important; }

/* ── Mobile ── */
@media (max-width: 480px) {
    #chaty-widget { bottom: 16px !important; }
    #chaty-widget.chaty-pos-right { right: 16px !important; }
    #chaty-widget.chaty-pos-left  { left: 16px !important; }
    #chaty-form-modal { right: 10px !important; left: 10px !important; width: auto !important; bottom: 90px !important; }
}

@media (prefers-reduced-motion: reduce) {
    #chaty-toggle { animation: none !important; }
    #chaty-toggle::after { animation: none !important; }
    #chaty-channels, .chaty-label, #chaty-toggle svg { transition: none !important; }
}