/* ==========================================================================
   KunjMart — Live chat widget (Tawk.to) layout & visibility
   Visual/positioning only — does not change chat behavior or API calls.
   ========================================================================== */

:root {
    --km-chat-offset-x: 24px;
    --km-chat-offset-y: 24px;
    --km-chat-z: 100000;
}

/* Prevent horizontal scroll clipping of fixed chat launcher */
html,
body {
    overflow-x: clip;
}

/* ── Tawk.to minimized launcher & bubble ── */
#tawkchat-minified-wrapper,
#tawkchat-container,
#tawk-bubble-container,
.tawk-min-container,
.tawk-max-container,
div[class*="tawk-min"],
iframe[title*="chat" i],
iframe[title*="Chat" i],
iframe[id*="tawk" i] {
    z-index: var(--km-chat-z) !important;
}

#tawkchat-minified-wrapper,
#tawk-bubble-container,
.tawk-min-container {
    position: fixed !important;
    right: var(--km-chat-offset-x) !important;
    bottom: var(--km-chat-offset-y) !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    max-width: calc(100vw - (var(--km-chat-offset-x) * 2)) !important;
    overflow: visible !important;
    pointer-events: none;
}

#tawkchat-minified-wrapper > *,
#tawk-bubble-container > *,
.tawk-min-container > * {
    pointer-events: auto;
}

/* Circular launcher — shadow & subtle float */
#tawkchat-minified-wrapper .tawk-button-circle,
#tawk-bubble-container .tawk-button-circle,
.tawk-min-container .tawk-button-circle,
.tawk-button-circle {
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.22) !important;
    border-radius: 999px !important;
    animation: km-chat-float 3.2s ease-in-out infinite;
}

/* "Speak to Us" / preview bubble — above launcher, no overlap */
#tawkchat-minified-wrapper .tawk-message-preview,
#tawk-bubble-container .tawk-message-preview,
.tawk-min-container .tawk-message-preview,
.tawk-message-preview,
div[class*="tawk-message"] {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    bottom: calc(100% + 12px) !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
    max-width: min(260px, calc(100vw - 48px)) !important;
    white-space: normal !important;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.14) !important;
    border-radius: 12px !important;
    z-index: calc(var(--km-chat-z) + 1) !important;
}

/* Close (X) on preview badge */
#tawkchat-minified-wrapper .tawk-close,
#tawk-bubble-container .tawk-close,
.tawk-min-container .tawk-close,
.tawk-close,
button[class*="tawk-close"] {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: calc(var(--km-chat-z) + 2) !important;
}

/* Notification bell — top-right of badge, not on launcher */
#tawkchat-minified-wrapper .tawk-notification,
#tawk-bubble-container .tawk-notification,
.tawk-min-container .tawk-notification,
.tawk-notification,
span[class*="tawk-notification"] {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: calc(var(--km-chat-z) + 3) !important;
}

/* Expanded chat panel */
#tawkchat-container,
.tawk-max-container {
    right: var(--km-chat-offset-x) !important;
    bottom: var(--km-chat-offset-y) !important;
    left: auto !important;
    max-height: min(640px, calc(100vh - var(--km-chat-offset-y) - 16px)) !important;
}

/* Keep homepage back-to-top FAB clear of chat (left side) */
.km-homepage .kmh-fab {
    right: auto;
    left: var(--km-chat-offset-x);
    bottom: var(--km-chat-offset-y);
    z-index: 9990;
}

@keyframes km-chat-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (max-width: 767px) {
    :root {
        --km-chat-offset-x: 16px;
        --km-chat-offset-y: 16px;
    }

    #tawkchat-minified-wrapper .tawk-message-preview,
    #tawk-bubble-container .tawk-message-preview,
    .tawk-min-container .tawk-message-preview,
    .tawk-message-preview {
        max-width: min(220px, calc(100vw - 32px)) !important;
        bottom: calc(100% + 10px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tawkchat-minified-wrapper .tawk-button-circle,
    #tawk-bubble-container .tawk-button-circle,
    .tawk-min-container .tawk-button-circle,
    .tawk-button-circle {
        animation: none !important;
    }
}