/* 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: forced explicitly via data-asa-theme, set by JS (light is
   always the default on first visit; the toggle persists the visitor's
   choice in localStorage from then on). No longer follows the OS/browser's
   prefers-color-scheme automatically — see asa-widget.js's applyStoredTheme(). */
.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; }

/* Quick Actions list (redesigned) uses fixed light-mode colors per spec
   (#E5E7EB border, white bg) — override for dark theme so it doesn't look
   broken/inverted when the widget's theme toggle is switched. */
.asa-widget[data-asa-theme="dark"] .asa-quick-list {
    background: var(--asa-bg-elevated);
    border-color: var(--asa-border);
}
.asa-widget[data-asa-theme="dark"] .asa-quick-card { border-top-color: var(--asa-border); }
.asa-widget[data-asa-theme="dark"] .asa-quick-card:hover,
.asa-widget[data-asa-theme="dark"] .asa-quick-card:active { background: var(--asa-bg); }
.asa-widget[data-asa-theme="dark"] .asa-quick-title { color: var(--asa-text); }
.asa-widget[data-asa-theme="dark"] .asa-row-desc { color: var(--asa-text-muted); }
.asa-widget[data-asa-theme="dark"] .asa-row-chevron { color: var(--asa-text-muted); }
.asa-widget[data-asa-theme="dark"] .asa-find-parts-banner .asa-quick-title { color: var(--asa-text); }
.asa-widget[data-asa-theme="dark"] .asa-find-parts-banner .asa-quick-desc { color: var(--asa-text-muted); }

/* 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-launcher-custom-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.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);
}

.asa-launcher-online-dot {
    position: absolute;
    inset-block-end: 2px;
    inset-inline-end: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
}

/* 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;
    gap: 10px;
    padding: 16px;
    background: linear-gradient(135deg, var(--asa-primary), var(--asa-primary));
    background-image: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.15)), linear-gradient(135deg, var(--asa-primary), var(--asa-primary));
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.asa-header-pattern {
    position: absolute;
    inset-inline-end: -10px;
    inset-block-start: -10px;
    opacity: 0.18;
    pointer-events: none;
}

.asa-header-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.asa-header-avatar img { width: 100%; height: 100%; object-fit: cover; }

.asa-header-title {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
}
.asa-header-name { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asa-header-subtitle { font-size: 12px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asa-header-status { display: flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: 0.9; margin-top: 1px; }
.asa-header-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.asa-header-actions { display: flex; gap: 2px; position: relative; z-index: 1; flex-shrink: 0; }

.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);
}

/* Welcome screen — hero, quick actions, vehicle/find-parts card */
.asa-welcome { display: flex; flex-direction: column; gap: 22px; }
.asa-welcome[hidden] { display: none; }

.asa-hero { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }

.asa-welcome-greeting {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--asa-text);
    line-height: 1.25;
}
.asa-welcome-text {
    margin: 0;
    color: var(--asa-text-muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 34ch;
}

.asa-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--asa-text-muted);
    margin: -8px 0 -8px;
}

.asa-quick-list {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
}

.asa-quick-card {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: start;
    background: transparent;
    border: none;
    border-top: 1px solid #F3F4F6;
    border-radius: 0;
    padding: 13px 16px;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease;
}
.asa-quick-card:first-child { border-top: none; }
.asa-quick-card:hover { background: #F9FAFB; }
.asa-quick-card:hover .asa-row-icon {
    background: var(--asa-primary);
    color: #fff;
}
.asa-quick-card:hover .asa-row-chevron {
    transform: translateX(2px);
    color: var(--asa-primary);
}
.asa-quick-card:active { background: #F3F4F6; }

.asa-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--asa-primary) 10%, transparent);
    color: var(--asa-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .asa-row-icon { background: rgba(26, 115, 232, 0.1); }
}

.asa-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.asa-quick-title {
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.35;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.asa-row-desc {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.asa-row-chevron {
    color: #9CA3AF;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.asa-find-parts-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    text-align: start;
    width: 100%;
    background: color-mix(in srgb, var(--asa-primary) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--asa-primary) 22%, transparent);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.asa-find-parts-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}
.asa-find-parts-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--asa-primary) 18%, transparent);
}
.asa-find-parts-banner:active { transform: translateY(0); }
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .asa-find-parts-banner { background: rgba(26, 115, 232, 0.05); border-color: rgba(26, 115, 232, 0.22); }
    .asa-find-parts-banner:hover { box-shadow: 0 10px 24px rgba(26, 115, 232, 0.18); }
}
.asa-find-parts-banner .asa-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--asa-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.asa-find-parts-banner .asa-quick-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 3px;
}
.asa-find-parts-banner .asa-quick-title {
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #111827;
    white-space: normal;
    overflow: visible;
}
.asa-find-parts-banner .asa-quick-desc {
    font-size: 12.5px;
    line-height: 1.4;
    color: #6B7280;
}
.asa-find-parts-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--asa-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 11px;
    white-space: nowrap;
    transition: filter 0.15s ease;
}
.asa-find-parts-banner:hover .asa-find-parts-cta { filter: brightness(1.08); }

.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; }

/* Rich product card */
.asa-card-product-rich {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px;
}
.asa-card-image {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--asa-bg);
}
.asa-card-body { flex: 1; min-width: 0; }
.asa-card-brand {
    color: var(--asa-text-muted);
    font-size: 12px;
    margin-block-start: 1px;
}
.asa-card-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 4px;
    flex-wrap: wrap;
}
.asa-card-price { font-weight: 700; font-size: 14px; }
.asa-card-price-original {
    font-size: 12px;
    color: var(--asa-text-muted);
    text-decoration: line-through;
}
.asa-card-stock {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
}
.asa-card-stock.is-in { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.asa-card-stock.is-out { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.asa-card-actions {
    display: flex;
    gap: 6px;
    margin-block-start: 8px;
}
.asa-card-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.asa-card-btn-primary { background: var(--asa-primary); color: #fff; }
.asa-card-btn-primary:disabled { opacity: 0.5; cursor: default; }
.asa-card-btn-secondary { background: transparent; border: 1px solid var(--asa-border); color: var(--asa-text); }

/* 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: center;
    gap: 8px;
    padding: 12px;
    border-block-start: 1px solid var(--asa-border);
    background: var(--asa-bg);
}
.asa-textarea {
    flex: 1;
    resize: none;
    border: 1.5px solid color-mix(in srgb, var(--asa-primary) 30%, var(--asa-border));
    background: var(--asa-bg);
    color: var(--asa-text);
    border-radius: 14px;
    padding: 10px 14px;
    max-height: 100px;
    font: inherit;
    transition: border-color 0.15s ease;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .asa-textarea { border-color: rgba(26, 115, 232, 0.3); }
}
.asa-textarea:focus { outline: none; border-color: var(--asa-primary); }
.asa-attach-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1.5px solid var(--asa-border);
    color: var(--asa-text-muted);
    background: var(--asa-bg);
    flex-shrink: 0;
}
.asa-attach-btn:hover { background: var(--asa-bg-elevated); border-color: color-mix(in srgb, var(--asa-primary) 30%, var(--asa-border)); }

.asa-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    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;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* [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: 78px; }
    .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;
    }
}