/* ChatBuster — frontend chat widget styles */

#chatbuster-root {
    position: fixed;
    right: var(--cw-right, 20px);
    bottom: var(--cw-bottom, 20px);
    z-index: 2147483000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

#chatbuster-root > * {
    pointer-events: auto;
}

#cw-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: #2563eb;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

#cw-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#cw-toggle:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

#cw-toggle svg {
    width: 26px;
    height: 26px;
    pointer-events: none;
    fill: currentColor;
}

#cw-toggle .cw-icon-close {
    display: none;
}

#cw-toggle.is-open .cw-icon-chat {
    display: none;
}

#cw-toggle.is-open .cw-icon-close {
    display: block;
}

#cw-window {
    width: 340px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    background: #fff;
    animation: cwSlideUp 0.22s ease forwards;
}

#cw-window[hidden] {
    display: none !important;
}

@keyframes cwSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#cw-header {
    padding: 14px 16px;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#cw-close {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}

#cw-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

#cw-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

#cw-close svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
}

#cw-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    background: #fff;
    scrollbar-width: thin;
}

.cw-message {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 16px;
    word-wrap: break-word;
}

.cw-message p {
    margin: 0;
}

.cw-message--bot code {
    background: #e2e8f0;
    padding: 2px 5px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.9em;
}

.cw-message--bot pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 10px 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
}

.cw-message--bot pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.cw-message--bot ul,
.cw-message--bot ol {
    margin: 8px 0;
    padding-left: 20px;
}

.cw-message--bot li {
    margin: 4px 0;
}

.cw-message--bot strong {
    font-weight: 600;
}

.cw-message--bot a {
    color: #2563eb;
    text-decoration: underline;
}

.cw-message--bot blockquote {
    border-left: 3px solid #cbd5e1;
    margin: 8px 0;
    padding-left: 12px;
    color: #64748b;
}

.cw-message--bot {
    background: #f1f5f9;
    color: #1e293b;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.cw-message--user {
    background: #2563eb;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

#cw-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    flex-shrink: 0;
    align-items: flex-end;
}

#cw-input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    resize: none;
    min-height: 34px;
    max-height: 120px;
    overflow-y: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

#cw-input:focus {
    border-color: #2563eb;
}

#cw-send {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

#cw-send:hover {
    background: #1d4ed8;
}

#cw-send:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    #chatbuster-root:not(.cw-embedded) #cw-window {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: none;
        max-height: none;
        border-radius: 0;
        animation: none;
        z-index: 2147483000;
    }

    #chatbuster-root:not(.cw-embedded).is-open #cw-toggle {
        display: none;
    }

    body.cw-chat-open {
        overflow: hidden;
    }
}

/* Embedded mode (Test Chatbot admin page) — render at the same width as the
   storefront widget so admins see what customers actually see. */
.cw-embedded {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    align-items: flex-start;
    pointer-events: auto;
    width: 340px;
    max-width: 100%;
}

.cw-embedded #cw-window {
    width: 340px;
    max-width: 100%;
    height: 600px;
    max-height: none;
    animation: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    border: 1px solid #c3c4c7;
}

.cw-message--error {
    background: #fef2f2;
    color: #991b1b;
    align-self: flex-start;
    border: 1px solid #fecaca;
    border-bottom-left-radius: 4px;
}

/* Streaming bubble: empty bot bubble shown while waiting for the first text
   delta to arrive. The dots animate so the user sees the bot is "thinking"
   instead of dead air. The class is removed by the widget JS as soon as the
   first delta is appended. */
.cw-message--streaming .cw-message__text {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    min-height: 1.4em;
    min-width: 28px;
}

.cw-message--streaming .cw-message__text::before,
.cw-message--streaming .cw-message__text::after,
.cw-message--streaming .cw-message__text {
    /* Three dots via two pseudo-elements + the text node spacer. */
}

.cw-message--streaming .cw-message__text {
    position: relative;
}

.cw-message--streaming .cw-message__text::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow:
        10px 0 0 #94a3b8,
        20px 0 0 #94a3b8;
    animation: cwTypingPulse 1.2s ease-in-out infinite;
}

@keyframes cwTypingPulse {
    0%, 60%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-2px);
    }
}