/**
 * MsgBox — "Ask the AI about this product" block.
 * Scoped to .msgbox-ask. Fonts/spacing inherit from the theme. Colours come from CSS variables the
 * plugin sets inline (--msgbox-ask-bg / --msgbox-ask-accent, validated server-side). No !important.
 */
.msgbox-ask {
    box-sizing: border-box;
    margin: 1.25em 0;
    padding: 20px;
    border-radius: 12px;
    background: var(--msgbox-ask-bg, #f6f7f9);
    max-width: 100%;
    line-height: 1.4;
}
.msgbox-ask *,
.msgbox-ask *::before,
.msgbox-ask *::after {
    box-sizing: border-box;
}
.msgbox-ask--transparent {
    border: 1px solid #e6e8ee;
}

/* Title — accent colour + sparkle mark at the inline start (bug.co.il-style) */
.msgbox-ask .msgbox-ask__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1.3;
    color: var(--msgbox-ask-accent, #007bff);
}
.msgbox-ask .msgbox-ask__title .msgbox-ask__spark {
    flex: none;
    width: 24px;
    height: 20px;
}

.msgbox-ask__form {
    display: block;
    margin: 0;
}
/* One pill: the input fills it, the send arrow sits inside at the inline end */
.msgbox-ask .msgbox-ask__form .msgbox-ask__field {
    position: relative;
    display: block;
    width: 100%;
}
.msgbox-ask__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Input / send / chips are scoped three levels deep (.msgbox-ask .msgbox-ask__form .msgbox-ask__input = 0,3,0)
   so common theme rules like `.single-product input[type=text]` (0,2,1) or `.woocommerce .cart button` can't
   restyle them. A theme `!important` on colour still wins — accepted limit. */
.msgbox-ask .msgbox-ask__form .msgbox-ask__input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 50px;
    margin: 0;
    padding: 0;
    padding-inline: 20px 54px; /* room for the arrow at the inline end */
    border: 1.5px solid var(--msgbox-ask-accent, #007bff);
    border-radius: 999px;
    background: #fff;
    color: #1f2328;
    font: inherit;
    font-size: 16px; /* prevents iOS zoom-on-focus */
    line-height: normal;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.msgbox-ask .msgbox-ask__form .msgbox-ask__input:focus {
    border-color: var(--msgbox-ask-accent, #007bff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--msgbox-ask-accent, #007bff) 18%, transparent);
}
.msgbox-ask .msgbox-ask__form .msgbox-ask__input:disabled {
    opacity: .6;
    cursor: default;
}
/* Send arrow — a bare accent glyph inside the pill (no filled button). Still a real <button type="submit">,
   scoped under .msgbox-ask .msgbox-ask__form so theme `button[type="submit"]` rules can't restyle it. */
.msgbox-ask .msgbox-ask__form .msgbox-ask__send {
    position: absolute;
    top: 50%;
    inset-inline-end: 7px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--msgbox-ask-accent, #007bff);
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
    transition: background .15s;
}
.msgbox-ask .msgbox-ask__form .msgbox-ask__send svg {
    display: block;
    width: 22px;
    height: 22px;
}
.msgbox-ask .msgbox-ask__form .msgbox-ask__send:hover,
.msgbox-ask .msgbox-ask__form .msgbox-ask__send:focus {
    background: color-mix(in srgb, var(--msgbox-ask-accent, #007bff) 12%, transparent);
    color: var(--msgbox-ask-accent, #007bff);
}
.msgbox-ask .msgbox-ask__form .msgbox-ask__send:focus-visible {
    outline: 2px solid var(--msgbox-ask-accent, #007bff);
    outline-offset: 1px;
}
.msgbox-ask .msgbox-ask__form .msgbox-ask__send:disabled {
    opacity: .45;
    cursor: default;
}
/* RTL: the arrow points left (writing direction). Mirror the glyph only — never the button. */
.msgbox-ask[dir="rtl"] .msgbox-ask__form .msgbox-ask__send svg {
    transform: scaleX(-1);
}

/* Chips: horizontal scroll on narrow screens, wrap on wide ones */
.msgbox-ask__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    min-height: 32px;
}
@media (max-width: 600px) {
    .msgbox-ask__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .msgbox-ask__chips::-webkit-scrollbar {
        display: none;
    }
}
/* Chips — scoped under .msgbox-ask so a theme's `button` / `.single-product button` rules can't recolour
   them (1.4.2 fixed only the send button; the chips still came out in the theme's colour). */
.msgbox-ask .msgbox-ask__chips .msgbox-ask__chip {
    flex: 0 0 auto;
    display: inline-block;
    margin: 0;
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--msgbox-ask-accent, #007bff);
    font: inherit;
    font-size: .9em;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .04);
    min-height: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s, color .15s, box-shadow .15s;
}
.msgbox-ask .msgbox-ask__chips .msgbox-ask__chip:hover,
.msgbox-ask .msgbox-ask__chips .msgbox-ask__chip:focus {
    background: var(--msgbox-ask-accent, #007bff);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.msgbox-ask .msgbox-ask__chips .msgbox-ask__chip:focus-visible {
    outline: 2px solid var(--msgbox-ask-accent, #007bff);
    outline-offset: 2px;
}
/* Loading placeholders (rendered by PHP, replaced by the script): visible on the block's light background */
.msgbox-ask .msgbox-ask__chips .msgbox-ask__chip--placeholder {
    display: inline-block;
    width: 120px;
    height: 32px;
    padding: 0;
    border: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    background: linear-gradient(90deg, rgba(0, 0, 0, .06) 25%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, .06) 75%);
    background-size: 200% 100%;
    cursor: default;
    animation: msgbox-ask-shimmer 1.2s linear infinite;
}
.msgbox-ask .msgbox-ask__chips .msgbox-ask__chip--placeholder:nth-child(2) { width: 96px; }
.msgbox-ask .msgbox-ask__chips .msgbox-ask__chip--placeholder:nth-child(3) { width: 132px; }
@keyframes msgbox-ask-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .msgbox-ask .msgbox-ask__chips .msgbox-ask__chip--placeholder { animation: none; }
}

/* Conversation area — the loader mounts the inline widget iframe here (height 0 until the first ask) */
.msgbox-ask__conv {
    margin-top: 0;
}
.msgbox-ask--active .msgbox-ask__conv {
    margin-top: 12px;
}
.msgbox-ask__conv iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    background: transparent;
}

.msgbox-ask__new {
    display: inline-block;
    margin-top: 8px;
    font-size: .85em;
    color: var(--msgbox-ask-accent, #007bff);
    text-decoration: underline;
    cursor: pointer;
}