/* ==================================================
   ShopBot AI chat widget styles
   ================================================== */
/* Colors/sizing read from CSS custom properties (with sensible
   fallbacks) so both the live storefront widget and the admin Appearance
   preview can theme themselves from the same variable names. Real values
   are set inline per-store by ShopBot_AI_Chat_Widget::render_widget_container()
   (scoped to #shopbot-ai-widget-root) or by admin-appearance.js (scoped to
   #shopbot-ai-preview-frame). */

.shopbot-ai-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--shopbot-ai-primary, #2563eb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 999999;
}

.shopbot-ai-panel {
    position: fixed;
    bottom: 88px;
    right: 20px;
    width: var(--shopbot-ai-width, 320px);
    height: var(--shopbot-ai-height, 420px);
    background: var(--shopbot-ai-panel-bg, #fff);
    border-radius: var(--shopbot-ai-radius, 12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    overflow: hidden;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shopbot-ai-header {
    background: var(--shopbot-ai-primary, #2563eb);
    color: #fff;
    padding: 12px 16px;
    font-weight: 600;
}

.shopbot-ai-messages {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shopbot-ai-message {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: var(--shopbot-ai-msg-radius, 12px);
    font-size: 14px;
    line-height: 1.4;
}

.shopbot-ai-message-user {
    align-self: flex-end;
    background: var(--shopbot-ai-primary, #2563eb);
    color: #fff;
}

.shopbot-ai-message-assistant {
    align-self: flex-start;
    background: var(--shopbot-ai-assistant-bg, #f1f5f9);
    color: var(--shopbot-ai-assistant-text, #0f172a);
}

.shopbot-ai-input-row {
    display: flex;
    border-top: 1px solid #e2e8f0;
    padding: 8px;
    gap: 8px;
}

.shopbot-ai-input-row input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
}

.shopbot-ai-input-row button {
    background: var(--shopbot-ai-primary, #2563eb);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
}

/* Position: bottom-left */
#shopbot-ai-widget-root.shopbot-ai-position-left .shopbot-ai-bubble,
#shopbot-ai-widget-root.shopbot-ai-position-left .shopbot-ai-panel {
    right: auto;
    left: 20px;
}

/* Hide on small screens when enabled in Behavior & Triggers */
@media (max-width: 768px) {
    #shopbot-ai-widget-root.shopbot-ai-hide-mobile .shopbot-ai-bubble,
    #shopbot-ai-widget-root.shopbot-ai-hide-mobile .shopbot-ai-panel {
        display: none !important;
    }
}