:root {
    --chat-off-white: 0 0% 100%;
    --chat-deep-steel: 222 47% 11%;
    --chat-steel-foreground: 210 40% 98%;
    --chat-sun-start: 24 95% 53%;
    --chat-sun-end: 35 100% 50%;
    --shadow-chatbot: 0 18px 40px rgba(15, 23, 42, .35);
    --shadow-message: 0 8px 24px rgba(15, 23, 42, .3);
    --chat-border: 0 0% 90%;
    --chat-muted: 0 0% 96%;
    --chat-muted-foreground: 215 15% 45%;
    --chat-foreground: 222 47% 15%
}

.tikt-chatbot-hidden {
    display: none !important
}

.tikt-chatbot-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    height: 56px;
    width: 56px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    background-color: hsl(var(--chat-off-white));
    color: hsl(var(--chat-deep-steel));
    box-shadow: var(--shadow-chatbot);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    z-index: 999999
}

.tikt-chatbot-button:hover {
    transform: scale(1.1)
}

.tikt-chatbot-window {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 380px;
    height: 600px;
    background-color: hsl(var(--chat-off-white));
    border-radius: 16px;
    box-shadow: var(--shadow-chatbot);
    display: flex;
    flex-direction: column;
    z-index: 999999;
    animation: tikt-scale-in .16s ease-out;
    overflow: hidden
}

.tikt-chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid hsl(var(--chat-border))
}

.tikt-chatbot-header-left {
    display: flex;
    align-items: center;
    gap: 10px
}

.tikt-chatbot-online-dot-wrapper {
    position: relative;
    width: 10px;
    height: 10px
}

.tikt-chatbot-online-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background-color: #22c55e
}

.tikt-chatbot-online-dot-ping {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-color: #22c55e;
    opacity: .75;
    animation: tikt-ping 1s cubic-bezier(0, 0, .2, 1) infinite
}

.tikt-chatbot-header-title {
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--chat-foreground))
}

.tikt-chatbot-header-subtitle {
    font-size: 13px;
    color: hsl(var(--chat-muted-foreground))
}

.tikt-chatbot-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 9999px;
    background-color: hsl(var(--chat-muted));
    color: hsl(var(--chat-foreground))
}

.tikt-chatbot-header-buttons {
    display: flex;
    gap: 4px
}

.tikt-chatbot-icon-button {
    height: 32px;
    width: 32px;
    padding: 0;
    border-radius: 9999px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.tikt-chatbot-icon-button:hover {
    background-color: hsl(var(--chat-muted))
}

.tikt-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth
}

.tikt-chatbot-message-row {
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.tikt-chatbot-message-row.right {
    justify-content: flex-end
}

.tikt-chatbot-message-bubble {
    max-width: 75%;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 16px;
    box-shadow: var(--shadow-message);
    word-wrap: break-word;
    overflow-wrap: anywhere
}

.tikt-chatbot-message-bubble-user {
    background-image: linear-gradient(to bottom right, hsl(var(--chat-sun-start)), hsl(var(--chat-sun-end)));
    color: #fff
}

.tikt-chatbot-message-bubble-bot {
    background-color: hsl(var(--chat-deep-steel));
    color: hsl(var(--chat-steel-foreground))
}

.tikt-chatbot-message-bubble-admin {
    background-color: #f97316;
    color: #fff;
    border-top-left-radius: 0
}

.tikt-chatbot-message-system-wrapper {
    display: flex;
    justify-content: center;
    width: 100%
}

.tikt-chatbot-message-system {
    background-color: hsl(var(--chat-muted));
    color: hsl(var(--chat-muted-foreground));
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 9999px
}

.tikt-chatbot-message-bubble a {
    color: #fb923c;
    text-decoration: underline
}

.tikt-chatbot-message-bubble a:hover {
    color: #ea580c
}

.tikt-chatbot-typing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px
}

.tikt-chatbot-typing-dots {
    display: inline-flex;
    gap: 4px
}

.tikt-chatbot-typing-dot {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background-color: currentColor;
    animation: tikt-bounce .6s infinite alternate
}

.tikt-chatbot-typing-dot:nth-child(2) {
    animation-delay: .15s
}

.tikt-chatbot-typing-dot:nth-child(3) {
    animation-delay: .3s
}

.tikt-chatbot-confirm-card {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid hsl(var(--chat-border));
    padding: 10px 12px;
    font-size: 13px;
    box-shadow: 0 6px 20px #0f172a2e
}

.tikt-chatbot-confirm-title {
    font-weight: 600;
    margin-bottom: 4px
}

.tikt-chatbot-confirm-text {
    color: hsl(var(--chat-muted-foreground));
    margin-bottom: 8px;
    font-size: 13px
}

.tikt-chatbot-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px
}

.tikt-chatbot-btn {
    border-radius: 9999px;
    border: 1px solid hsl(var(--chat-border));
    padding: 6px 12px;
    font-size: 13px;
    background-color: #fff;
    cursor: pointer
}

.tikt-chatbot-btn-primary {
    border: none;
    background-color: hsl(var(--chat-deep-steel));
    color: hsl(var(--chat-steel-foreground))
}

.tikt-chatbot-input-wrapper {
    padding: 12px 16px;
    border-top: 1px solid hsl(var(--chat-border))
}

.tikt-chatbot-input-row {
    display: flex;
    gap: 8px
}

.tikt-chatbot-input {
    flex: 1;
    border-radius: 9999px;
    border: 1px solid hsl(var(--chat-border));
    padding: 8px 12px;
    font-size: 14px;
    outline: none
}

.tikt-chatbot-input:focus {
    border-color: hsl(var(--chat-deep-steel))
}

.tikt-chatbot-send-btn {
    border-radius: 9999px;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: hsl(var(--chat-deep-steel));
    color: hsl(var(--chat-steel-foreground));
    display: flex;
    align-items: center;
    justify-content: center
}

.tikt-chatbot-send-btn:disabled,
.tikt-chatbot-input:disabled {
    opacity: .5;
    cursor: not-allowed
}

.tikt-chatbot-icon {
    width: 18px;
    height: 18px;
    display: inline-block
}

@keyframes tikt-ping {
    0% {
        transform: scale(1);
        opacity: .75
    }

    75%,
    to {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes tikt-bounce {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-2px)
    }
}

@keyframes tikt-scale-in {
    0% {
        transform: scale(.96);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.tikt-chatbot-messages::-webkit-scrollbar {
    width: 6px
}

.tikt-chatbot-messages::-webkit-scrollbar-track {
    background: transparent
}

.tikt-chatbot-messages::-webkit-scrollbar-thumb {
    background-color: #94a3b8cc;
    border-radius: 9999px
}

@media(max-width:480px) {
    .tikt-chatbot-window {
        width: 100%;
        right: 0;
        bottom: 0;
        height: 100%;
        border-radius: 0
    }
}