/* Was a full-screen dimmed backdrop (modal-style) -- switched to a
   transparent, click-through positioning container instead, so the
   rest of the page stays visible and interactive while the chat is
   open, the way a corner chat widget is expected to behave (matches
   the CRA chatbot reference: no backdrop, page usable underneath).
   Only .lira-chatbot-box itself re-enables pointer events. */
.lira-chatbot-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
    pointer-events: none;
}

.lira-chatbot-box {
    width: 100%;
    max-width: 380px;
    height: min(600px, 80vh);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
}

/* Floating launcher bubble -- fixed to the same bottom-right corner
   the chat panel opens into, visible on every page (except where the
   chatbot block is suppressed, e.g. the Stripe payment page). Hidden
   while the panel is open (see chatbot.js) since both occupy the same
   corner and would otherwise overlap. */
.lira-chatbot-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4EC5D4, #5A7FFF);
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 24px rgba(90, 127, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1999;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lira-chatbot-launcher:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 28px rgba(90, 127, 255, 0.45);
}

.lira-chatbot-header {
    background: linear-gradient(135deg, #4EC5D4, #5A7FFF);
    color: #ffffff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.lira-chatbot-header-title {
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lira-chatbot-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.lira-chatbot-disclaimer {
    background: #FFFBEB;
    color: #92400E;
    font-size: 0.75rem;
    padding: 10px 14px;
    border-bottom: 1px solid #FDE68A;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.lira-chatbot-disclaimer i {
    margin-top: 2px;
    flex-shrink: 0;
}

.lira-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #F8FAFC;
}

.lira-chatbot-message {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.lira-chatbot-message-bot {
    align-self: flex-start;
    background: #ffffff;
    color: #1F2937;
    border: 1px solid #E2E8F0;
    border-bottom-left-radius: 4px;
}

.lira-chatbot-message-user {
    align-self: flex-end;
    background: #5A7FFF;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.lira-chatbot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 4px;
}

.lira-chatbot-action-btn {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #1F4E79;
    border: 1px solid #5A7FFF;
    text-decoration: none;
    align-self: flex-start;
}

.lira-chatbot-action-btn:hover {
    background: #EFF6FF;
    color: #1F4E79;
}

.lira-chatbot-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #E2E8F0;
    background: #ffffff;
    flex-shrink: 0;
}

.lira-chatbot-input {
    flex: 1;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 0.9rem;
    outline: none;
}

.lira-chatbot-input:focus {
    border-color: #5A7FFF;
}

.lira-chatbot-send {
    background: linear-gradient(135deg, #4EC5D4, #5A7FFF);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lira-chatbot-send:hover {
    opacity: 0.9;
}

@media (max-width: 480px) {
    .lira-chatbot-overlay {
        padding: 0;
        align-items: stretch;
    }

    .lira-chatbot-box {
        max-width: 100%;
        height: 100%;
        /* Dynamic viewport height -- accounts for the mobile browser's
           collapsible address/toolbar so the box matches what's
           actually visible right now, not the largest-possible layout
           viewport. Falls back to the height:100% above on browsers
           that don't support dvh. */
        height: 100dvh;
        border-radius: 0;
    }
}