/* ==========================================================================
   AI Ticket Assistant — Live Chat widget
   Self-contained: every rule is namespaced under #oata-chat so no theme
   (edge, twenty-one, order forms...) can bleed into it or break the layout.
   ========================================================================== */

#oata-chat,
#oata-chat * {
    box-sizing: border-box;
}

/* Vertical offset so the widget never sits on top of the site's own fixed bars
   (this theme pins a 58px `.er-footer-bar`, published as --er-footer-h).
   chat-widget.js refines --oata-chat-offset by measuring any other fixed
   bottom bar the active theme may use. */
#oata-chat {
    --oata-chat-offset: var(--er-footer-h, 0px);
    --oata-chat-gap: 14px;
}

/* ── Launcher bubble ─────────────────────────────────────────────────────── */
#oata-chat-launcher {
    position: fixed !important;
    bottom: calc(var(--oata-chat-offset) + var(--oata-chat-gap) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147482000 !important;
    width: 60px !important;
    height: 60px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--oata-chat-color, #0B6FE8) !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 30px rgba(6, 22, 48, .35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
#oata-chat-launcher:hover {
    transform: translateY(-2px) scale(1.03) !important;
}
#oata-chat[data-position="right"] #oata-chat-launcher { right: 22px !important; left: auto !important; }
#oata-chat[data-position="left"]  #oata-chat-launcher { left: 22px !important; right: auto !important; }

#oata-chat-launcher .oata-chat-unread {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 11px !important;
    background: #EF4444 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3) !important;
}
#oata-chat-launcher .oata-chat-unread[hidden] { display: none !important; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
#oata-chat-panel {
    position: fixed !important;
    bottom: calc(var(--oata-chat-offset) + 88px + env(safe-area-inset-bottom, 0px)) !important;
    width: 380px !important;
    max-width: calc(100vw - 32px) !important;
    height: 620px !important;
    max-height: calc(100vh - 170px) !important;
    height: min(620px, calc(100dvh - 170px)) !important;
    max-height: min(620px, calc(100dvh - 170px)) !important;
    z-index: 2147482001 !important;
    background: #fff !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(6, 22, 48, .32) !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #101828 !important;
    text-align: left !important;
}
#oata-chat[data-position="right"] #oata-chat-panel { right: 22px !important; left: auto !important; }
#oata-chat[data-position="left"]  #oata-chat-panel { left: 22px !important; right: auto !important; }
#oata-chat-panel.is-open { display: flex !important; }
#oata-chat-panel, #oata-chat-panel * { text-shadow: none !important; }

/* Header */
#oata-chat-head {
    background: var(--oata-chat-color, #0B6FE8) !important;
    color: #fff !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
}
#oata-chat-head .oata-chat-head-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
    flex: 0 0 40px !important;
    overflow: hidden !important;
}
#oata-chat-head .oata-chat-head-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#oata-chat-head .oata-chat-head-text { flex: 1 1 auto !important; min-width: 0 !important; }
#oata-chat-head strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#oata-chat-head small {
    display: block !important;
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, .85) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#oata-chat-head .oata-chat-head-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
#oata-chat-head .oata-chat-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
    flex: 0 0 7px !important;
}
#oata-chat-close {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    opacity: .85 !important;
}
#oata-chat-close:hover { opacity: 1 !important; background: rgba(255, 255, 255, .15) !important; }

/* Body */
#oata-chat-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 16px !important;
    background: #f7f9fc !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Pre-chat form */
#oata-chat-form { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#oata-chat-form p { margin: 0 0 4px !important; font-size: 13.5px !important; color: #475467 !important; }
#oata-chat-form input {
    width: 100% !important;
    padding: 11px 13px !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #101828 !important;
    outline: none !important;
}
#oata-chat-form input:focus { border-color: var(--oata-chat-color, #0B6FE8) !important; box-shadow: 0 0 0 3px rgba(11, 111, 232, .15) !important; }
#oata-chat-form button {
    padding: 11px 16px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--oata-chat-color, #0B6FE8) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}
#oata-chat-form .oata-chat-err { color: #d92d20 !important; font-size: 12.5px !important; min-height: 16px !important; }
#oata-chat-form .oata-chat-skip {
    background: transparent !important;
    color: #667085 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    padding: 4px !important;
}

/* Messages */
.oata-chat-msg {
    max-width: 84% !important;
    padding: 10px 13px !important;
    border-radius: 14px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
}
.oata-chat-msg.visitor {
    align-self: flex-end !important;
    background: var(--oata-chat-color, #0B6FE8) !important;
    color: #fff !important;
    border-bottom-right-radius: 4px !important;
}
.oata-chat-msg.ai,
.oata-chat-msg.admin {
    align-self: flex-start !important;
    background: #fff !important;
    color: #101828 !important;
    border: 1px solid #eaecf0 !important;
    border-bottom-left-radius: 4px !important;
}
.oata-chat-msg.admin { border-left: 3px solid var(--oata-chat-color, #0B6FE8) !important; }
.oata-chat-msg.system {
    align-self: center !important;
    background: #eef4ff !important;
    color: #3538cd !important;
    font-size: 12px !important;
    text-align: center !important;
    max-width: 100% !important;
    border-radius: 10px !important;
}
.oata-chat-msg .oata-chat-msg-meta {
    display: block !important;
    margin-top: 5px !important;
    font-size: 10.5px !important;
    opacity: .7 !important;
}

/* Typing indicator */
.oata-chat-typing-bubble {
    align-self: flex-start !important;
    background: #fff !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 14px !important;
    padding: 12px 15px !important;
    display: flex !important;
    gap: 4px !important;
}
.oata-chat-typing-bubble span {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #98a2b3 !important;
    animation: oataChatBlink 1.2s infinite ease-in-out !important;
}
.oata-chat-typing-bubble span:nth-child(2) { animation-delay: .18s !important; }
.oata-chat-typing-bubble span:nth-child(3) { animation-delay: .36s !important; }
@keyframes oataChatBlink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Footer / composer */
#oata-chat-foot {
    flex: 0 0 auto !important;
    border-top: 1px solid #eaecf0 !important;
    background: #fff !important;
    padding: 10px 12px 12px !important;
}
#oata-chat-quick { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 8px !important; }
#oata-chat-quick button {
    background: #f2f4f7 !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    color: #344054 !important;
    cursor: pointer !important;
}
#oata-chat-quick button:hover { background: #eef4ff !important; color: #175cd3 !important; border-color: #b2ddff !important; }
#oata-chat-composer { display: flex !important; align-items: flex-end !important; gap: 8px !important; }
#oata-chat-input {
    flex: 1 1 auto !important;
    resize: none !important;
    max-height: 110px !important;
    min-height: 42px !important;
    padding: 11px 12px !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #101828 !important;
    background: #fff !important;
    outline: none !important;
}
#oata-chat-input:focus { border-color: var(--oata-chat-color, #0B6FE8) !important; }
#oata-chat-send {
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--oata-chat-color, #0B6FE8) !important;
    color: #fff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
#oata-chat-send:disabled { opacity: .5 !important; cursor: default !important; }
#oata-chat-foot .oata-chat-hint {
    margin-top: 7px !important;
    font-size: 11px !important;
    color: #98a2b3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
#oata-chat-foot .oata-chat-hint a { color: #667085 !important; text-decoration: underline !important; cursor: pointer !important; }
#oata-chat-rate { display: inline-flex !important; gap: 4px !important; }
#oata-chat-rate button {
    background: none !important;
    border: 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    opacity: .55 !important;
    padding: 0 2px !important;
}
#oata-chat-rate button:hover, #oata-chat-rate button.active { opacity: 1 !important; }

/* Closed state */
#oata-chat-panel.is-closed #oata-chat-composer,
#oata-chat-panel.is-closed #oata-chat-quick { display: none !important; }

/* Guest lock: no composer, no shortcuts, no hint - only the sign-in card */
#oata-chat.is-locked #oata-chat-composer,
#oata-chat.is-locked #oata-chat-quick,
#oata-chat.is-locked #oata-chat-foot .oata-chat-hint { display: none !important; }
#oata-chat.is-locked #oata-chat-foot { border-top: 0 !important; background: transparent !important; padding: 0 !important; }
#oata-chat-foot .oata-chat-closed-note { font-size: 12.5px !important; color: #667085 !important; }
#oata-chat-foot .oata-chat-closed-note a { color: var(--oata-chat-color, #0B6FE8) !important; font-weight: 600 !important; text-decoration: underline !important; }

/* ── Inline tool panels (domain check / open a ticket) ───────────────────── */
.oata-chat-tool {
    align-self: stretch !important;
    background: #fff !important;
    border: 1px solid #d6e4ff !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .06) !important;
}
.oata-chat-tool h6 {
    margin: 0 0 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--oata-chat-color, #0B6FE8) !important;
}
.oata-chat-tool p { margin: 0 0 8px !important; font-size: 12.5px !important; color: #475467 !important; }
.oata-chat-tool input,
.oata-chat-tool textarea {
    width: 100% !important;
    padding: 9px 11px !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: #101828 !important;
    background: #fff !important;
    outline: none !important;
    margin-bottom: 7px !important;
}
.oata-chat-tool textarea { resize: vertical !important; min-height: 60px !important; }
.oata-chat-tool input:focus,
.oata-chat-tool textarea:focus { border-color: var(--oata-chat-color, #0B6FE8) !important; }
.oata-chat-tool .oata-chat-tool-row { display: flex !important; gap: 7px !important; align-items: center !important; }
.oata-chat-tool button {
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--oata-chat-color, #0B6FE8) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
}
.oata-chat-tool button.oata-ghost {
    background: #f2f4f7 !important;
    color: #344054 !important;
    border: 1px solid #eaecf0 !important;
}
.oata-chat-tool .oata-chat-tool-msg { font-size: 12.5px !important; color: #475467 !important; margin-top: 6px !important; }
.oata-chat-tool .oata-chat-tool-msg.is-error { color: #b42318 !important; }
.oata-chat-tool .oata-chat-tool-msg.is-ok { color: #027a48 !important; }

/* ── Guest lock (chat is for signed-in clients) ──────────────────────────── */
.oata-chat-locked {
    align-self: stretch !important;
    margin: auto 0 !important;
    text-align: center !important;
    background: #fff !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 14px !important;
    padding: 22px 18px !important;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06) !important;
}
.oata-chat-locked-icon { font-size: 30px !important; line-height: 1 !important; margin-bottom: 10px !important; }
.oata-chat-locked h5 {
    margin: 0 0 8px !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #101828 !important;
}
.oata-chat-locked p {
    margin: 0 0 16px !important;
    font-size: 13px !important;
    color: #475467 !important;
}
.oata-chat-locked .oata-chat-locked-btn {
    display: block !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    background: var(--oata-chat-color, #0B6FE8) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}
.oata-chat-locked .oata-chat-locked-btn:hover { filter: brightness(1.06) !important; }
.oata-chat-locked-links {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 14px !important;
    flex-wrap: wrap !important;
}
.oata-chat-locked-links a {
    font-size: 12.5px !important;
    color: #667085 !important;
    text-decoration: underline !important;
}

/* Result card (availability / ticket confirmation) */
.oata-chat-result {
    align-self: flex-start !important;
    max-width: 92% !important;
    background: #fff !important;
    border: 1px solid #eaecf0 !important;
    border-left: 4px solid var(--oata-chat-color, #0B6FE8) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    color: #101828 !important;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .06) !important;
}
.oata-chat-result.is-available { border-left-color: #12b76a !important; }
.oata-chat-result.is-taken { border-left-color: #f04438 !important; }
.oata-chat-result strong { display: block !important; margin-bottom: 4px !important; font-size: 14px !important; }
.oata-chat-result a {
    display: inline-block !important;
    margin-top: 8px !important;
    color: var(--oata-chat-color, #0B6FE8) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.oata-chat-result a:hover { text-decoration: underline !important; }

/* Mobile: keep the sheet inside the viewport, above the theme's fixed bars.
   Both position variants must be addressed explicitly — `right: 22px` combined
   with `width: 100%` used to push the panel 22px off the left edge. */
@media (max-width: 560px) {
    #oata-chat[data-position="right"] #oata-chat-panel,
    #oata-chat[data-position="left"] #oata-chat-panel {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        bottom: calc(var(--oata-chat-offset) + 8px + env(safe-area-inset-bottom, 0px)) !important;
        /* Tall enough to be usable, but never so tall that the theme's own bars
           or the on-screen keyboard hide the composer. */
        height: min(82dvh, calc(100dvh - var(--oata-chat-offset) - 84px)) !important;
        max-height: min(82dvh, calc(100dvh - var(--oata-chat-offset) - 84px)) !important;
        border-radius: 16px !important;
    }
    #oata-chat-launcher {
        width: 56px !important;
        height: 56px !important;
        font-size: 22px !important;
    }
    #oata-chat[data-position="right"] #oata-chat-launcher { right: 14px !important; left: auto !important; }
    #oata-chat[data-position="left"] #oata-chat-launcher { left: 14px !important; right: auto !important; }

    #oata-chat-head { padding: 12px 14px !important; gap: 10px !important; }
    #oata-chat-head .oata-chat-head-avatar { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; font-size: 17px !important; }
    #oata-chat-head strong { font-size: 14px !important; }
    #oata-chat-close { width: 40px !important; height: 40px !important; font-size: 24px !important; padding: 0 !important; }

    #oata-chat-body { padding: 12px 12px 8px !important; gap: 8px !important; }
    .oata-chat-msg { max-width: 88% !important; font-size: 13.5px !important; padding: 9px 12px !important; }
    .oata-chat-result { max-width: 100% !important; }
    .oata-chat-locked { padding: 18px 14px !important; }

    /* One scrollable row of chips instead of a tall wrapped block */
    #oata-chat-quick {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }
    #oata-chat-quick::-webkit-scrollbar { display: none !important; }
    #oata-chat-quick button { flex: 0 0 auto !important; font-size: 12px !important; padding: 7px 12px !important; }

    /* 16px keeps iOS Safari from zooming the whole page on focus */
    #oata-chat-input {
        font-size: 16px !important;
        min-height: 46px !important;
        padding: 12px !important;
        max-height: 96px !important;
    }
    #oata-chat-send { width: 46px !important; height: 46px !important; font-size: 17px !important; }
    #oata-chat-foot {
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #oata-chat-foot .oata-chat-hint { font-size: 11.5px !important; }

    /* Tool panels: stack the button under the field and give real tap targets */
    .oata-chat-tool { padding: 12px !important; }
    .oata-chat-tool .oata-chat-tool-row { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
    .oata-chat-tool input,
    .oata-chat-tool textarea { font-size: 16px !important; padding: 11px !important; }
    .oata-chat-tool button { min-height: 44px !important; font-size: 13.5px !important; }
    #oata-chat-form input { font-size: 16px !important; }
    #oata-chat-form button { min-height: 46px !important; }
}

/* Very small phones (iPhone SE and similar) */
@media (max-width: 400px) {
    #oata-chat[data-position="right"] #oata-chat-panel,
    #oata-chat[data-position="left"] #oata-chat-panel {
        left: 6px !important;
        right: 6px !important;
        height: min(84dvh, calc(100dvh - var(--oata-chat-offset) - 76px)) !important;
        max-height: min(84dvh, calc(100dvh - var(--oata-chat-offset) - 76px)) !important;
    }
    #oata-chat-launcher { width: 52px !important; height: 52px !important; font-size: 20px !important; }
    #oata-chat-body { padding: 10px 10px 6px !important; }
    .oata-chat-msg { font-size: 13px !important; }
    #oata-chat-head small { font-size: 11px !important; }
}

/* Short screens (landscape phones): make sure the composer stays visible. */
@media (max-height: 520px) {
    #oata-chat[data-position="right"] #oata-chat-panel,
    #oata-chat[data-position="left"] #oata-chat-panel {
        height: calc(100vh - var(--oata-chat-offset) - 76px) !important;
        max-height: calc(100vh - var(--oata-chat-offset) - 76px) !important;
    }
    #oata-chat-head, #oata-chat-quick { display: none !important; }
}

/* Dark-mode friendly (only when the site declares it) */
@media (prefers-color-scheme: dark) {
    html[data-oata-theme="dark"] #oata-chat-panel { background: #0f172a !important; color: #e6edf7 !important; }
}