/* AI Shopping Assistant — storefront widget styles.
   Uses CSS logical properties (inset-inline-*, margin-inline-*) throughout
   so the whole widget mirrors automatically under [dir="rtl"] without a
   separate RTL stylesheet — only the handful of things logical properties
   don't cover (icon mirroring) get an explicit [dir="rtl"] override below. */

.asa-widget {
    --asa-primary: #1a73e8;
    --asa-radius: 16px;
    --asa-bg: #ffffff;
    --asa-bg-elevated: #f7f8fa;
    --asa-text: #1c1d21;
    --asa-text-muted: #6b7280;
    --asa-border: #e5e7eb;
    --asa-bubble-user-bg: var(--asa-primary);
    --asa-bubble-user-text: #ffffff;
    --asa-bubble-assistant-bg: #f1f3f5;
    --asa-bubble-assistant-text: #1c1d21;
    --asa-shadow: 0 12px 32px rgba(20, 20, 30, 0.16);

    position: fixed;
    inset-block-end: 20px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--asa-text);
}

.asa-widget[data-position="bottom-right"] { inset-inline-end: 20px; }
.asa-widget[data-position="bottom-left"] { inset-inline-start: 20px; }

/* Dark mode: respects OS preference automatically, and can be forced either
   way via data-asa-theme set by the JS toggle (persisted in localStorage). */
@media (prefers-color-scheme: dark) {
    .asa-widget:not([data-asa-theme="light"]) {
        --asa-bg: #1c1d21;
        --asa-bg-elevated: #26272c;
        --asa-text: #f2f3f5;
        --asa-text-muted: #9a9ca3;
        --asa-border: #34353b;
        --asa-bubble-assistant-bg: #2d2e34;
        --asa-bubble-assistant-text: #f2f3f5;
        --asa-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    }
}
.asa-widget[data-asa-theme="dark"] {
    --asa-bg: #1c1d21;
    --asa-bg-elevated: #26272c;
    --asa-text: #f2f3f5;
    --asa-text-muted: #9a9ca3;
    --asa-border: #34353b;
    --asa-bubble-assistant-bg: #2d2e34;
    --asa-bubble-assistant-text: #f2f3f5;
    --asa-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.asa-icon-moon { display: none; }
.asa-widget[data-asa-theme="dark"] .asa-icon-sun { display: none; }
.asa-widget[data-asa-theme="dark"] .asa-icon-moon { display: block; }

/* Launcher button */
.asa-launcher {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--asa-primary);
    color: #fff;
    box-shadow: var(--asa-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease;
}
.asa-launcher:hover { transform: scale(1.06); }
.asa-launcher:active { transform: scale(0.96); }
.asa-icon-close { display: none; }
.asa-widget.is-open .asa-icon-chat { display: none; }
.asa-widget.is-open .asa-icon-close { display: block; }

.asa-launcher-badge {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    background: #e02424;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
    border: 2px solid var(--asa-bg);
}

/* Chat panel */
.asa-panel {
    position: absolute;
    inset-block-end: 76px;
    inset-inline-end: 0;
    width: 380px;
    max-width: calc(100vw - 24px);
    height: 600px;
    max-height: calc(100vh - 120px);
    background: var(--asa-bg);
    border-radius: var(--asa-radius);
    box-shadow: var(--asa-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--asa-border);
}
.asa-widget[data-position="bottom-left"] .asa-panel {
    inset-inline-start: 0;
    inset-inline-end: auto;
}
.asa-panel[hidden] { display: none; }

.asa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--asa-primary);
    color: #fff;
    flex-shrink: 0;
}
.asa-header-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.asa-header-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.asa-header-actions { display: flex; gap: 4px; }

.asa-icon-btn {
    background: transparent;
    border: none;
    color: inherit;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.9;
}
.asa-icon-btn:hover { background: rgba(255, 255, 255, 0.15); opacity: 1; }
.asa-header .asa-icon-btn { color: #fff; }

/* Body / messages */
.asa-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--asa-bg);
}

.asa-messages { display: flex; flex-direction: column; gap: 10px; }

.asa-message { display: flex; max-width: 88%; }
.asa-message.is-user { align-self: flex-end; justify-content: flex-end; }
.asa-message.is-assistant, .asa-message.is-system { align-self: flex-start; }

.asa-bubble {
    padding: 10px 13px;
    border-radius: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}
.asa-message.is-user .asa-bubble {
    background: var(--asa-bubble-user-bg);
    color: var(--asa-bubble-user-text);
    border-end-end-radius: 4px;
}
.asa-message.is-assistant .asa-bubble {
    background: var(--asa-bubble-assistant-bg);
    color: var(--asa-bubble-assistant-text);
    border-end-start-radius: 4px;
}
.asa-message.is-system .asa-bubble {
    background: transparent;
    color: var(--asa-text-muted);
    font-size: 12.5px;
    text-align: center;
    margin-inline: auto;
}
.asa-message.is-error .asa-bubble {
    background: #fdecea;
    color: #b3261e;
}

.asa-attachment-image {
    max-width: 220px;
    border-radius: 10px;
    margin-block-start: 6px;
    display: block;
}

/* Quick suggestions */
.asa-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.asa-suggestion-chip {
    border: 1px solid var(--asa-border);
    background: var(--asa-bg-elevated);
    color: var(--asa-text);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.asa-suggestion-chip:hover { background: var(--asa-border); }

/* Result cards (products, vehicles, orders, cart items — from ResponseFormatter attachments) */
.asa-cards { display: flex; flex-direction: column; gap: 8px; margin-block-start: 8px; max-width: 88%; }
.asa-card {
    display: block;
    border: 1px solid var(--asa-border);
    background: var(--asa-bg-elevated);
    border-radius: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
}
.asa-card:hover { border-color: var(--asa-primary); }
.asa-card-title { font-weight: 600; font-size: 13.5px; }
.asa-card-meta { color: var(--asa-text-muted); font-size: 12.5px; margin-block-start: 2px; }

/* Typing indicator */
.asa-typing { display: inline-flex; gap: 4px; padding: 8px 4px; align-self: flex-start; }
.asa-typing[hidden] { display: none; }
.asa-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--asa-text-muted);
    animation: asa-typing-bounce 1.2s infinite ease-in-out;
}
.asa-typing span:nth-child(2) { animation-delay: 0.15s; }
.asa-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes asa-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Attachment preview strip (before sending) */
.asa-attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 0;
    border-block-start: 1px solid var(--asa-border);
}
.asa-attachments-preview[hidden] { display: none; }
.asa-file-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--asa-bg-elevated);
    border: 1px solid var(--asa-border);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
    max-width: 160px;
}
.asa-file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asa-file-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--asa-text-muted);
    font-size: 15px;
    line-height: 1;
}
.asa-file-chip img.asa-file-chip-thumb {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
}

/* Composer */
.asa-composer {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 10px 10px;
    border-block-start: 1px solid var(--asa-border);
    background: var(--asa-bg);
}
.asa-textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--asa-border);
    background: var(--asa-bg-elevated);
    color: var(--asa-text);
    border-radius: 12px;
    padding: 9px 12px;
    max-height: 100px;
    font: inherit;
}
.asa-textarea:focus { outline: 2px solid var(--asa-primary); outline-offset: 1px; }
.asa-attach-btn { color: var(--asa-text-muted); }
.asa-attach-btn:hover { background: var(--asa-bg-elevated); }

.asa-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--asa-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.asa-send-btn:disabled { opacity: 0.6; cursor: default; }
.asa-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: asa-spin 0.7s linear infinite;
}
.asa-send-btn[data-loading="true"] .asa-send-icon { display: none; }
.asa-send-btn[data-loading="true"] .asa-spinner { display: inline-block !important; }
@keyframes asa-spin { to { transform: rotate(360deg); } }

.asa-poweredby {
    text-align: center;
    font-size: 10.5px;
    color: var(--asa-text-muted);
    padding: 4px 0 8px;
    margin: 0;
}

/* [dir="rtl"]: logical properties already flip the whole layout (launcher
   corner, panel side, bubble alignment, card direction) — this is only for
   the one directional glyph (the send arrow icon) that needs mirroring. */
[dir="rtl"] .asa-send-icon { transform: scaleX(-1); }

/* Responsive: full-screen sheet on small viewports */
@media (max-width: 480px) {
    .asa-widget { inset-block-end: 12px; }
    .asa-widget[data-position="bottom-right"] { inset-inline-end: 12px; }
    .asa-widget[data-position="bottom-left"] { inset-inline-start: 12px; }
    .asa-launcher { width: 54px; height: 54px; }

    .asa-panel {
        position: fixed;
        inset: 0;
        inset-block-start: env(safe-area-inset-top, 0);
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}