/* UX AI Ask Element - front-end search box. Uses light-dark-aware neutrals (not hardcoded
   white/black) so it reads correctly whether the surrounding page/section is a light or dark
   background - a real requirement from the original plan, not just a nice-to-have. */

.uaf-ai-ask-element {
    --uaf-ai-ask-accent: #6c5ce8;
    /* Static fallback only - real value is set by JS (detectBackgroundColor() in
       uaf-ai-ask-element.js), which measures the ACTUAL rendered ancestor background color at
       runtime and overrides this inline, as !important, the moment it runs. This exists purely
       for the brief window before JS executes (or if it ever fails) - see the .dark-scoped
       override below for why a static class-based guess alone isn't reliable enough on its
       own: Flatsome's column "Color: Light" option (which adds this .dark class) is a
       completely separate field from the column's real "Bg Color" - a user can set Color to
       Light while the actual background stays light, and this class-based fallback has no way
       to know that; only the JS measurement can. */
    --uaf-ai-ask-text-color: #333;
    margin: 0 auto;
    position: relative;
}
.dark .uaf-ai-ask-element {
    --uaf-ai-ask-text-color: #fff;
}

/* Builder-iframe-only inert overlay (added by JS when window.frameElement is truthy) -
   physically intercepts clicks so the native input never grabs focus away from Flatsome's
   own element-selection/drag handling. Never present on the real front end. */
.uaf-ai-ask-builder-overlay {
    position: absolute;
    inset: 0;
    /* Was z-index: 5 - too low once the Response Actions buttons existed. Those buttons sit
       inside .uaf-ai-ask-answer, which is position:relative but has no explicit z-index of its
       own (implicit 0) - 5 SHOULD still have out-ranked that in theory, but confirmed live that
       clicks were reaching the new thumb/copy buttons instead of this overlay, breaking builder
       selection specifically near them. A much higher value removes any ambiguity rather than
       chasing the exact stacking nuance - this overlay's entire job is to always win. */
    z-index: 999;
    cursor: pointer;
}

/* Selector is deliberately ".uaf-ai-ask-element .uaf-ai-ask-label", not just
   ".uaf-ai-ask-label" - this is a real <label> element, and Flatsome's own theme.css has a
   global ".dark label{color:#fff}" rule that forces every <label> white inside a column whose
   Color option is set to "Light" (which renders Flatsome's .dark class - confusingly named,
   but confirmed directly in flatsome.css). That rule's specificity is one class + one type
   selector; two classes here (both already present in the DOM - no markup change needed) beats
   it reliably regardless of stylesheet load order, without needing !important, so this
   element's own Label Color/Accent Color settings always win instead of being silently
   overridden by the surrounding column's background setting. */
.uaf-ai-ask-element .uaf-ai-ask-label {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 600;
    /* Falls back to the general Accent Color when Label Color is left empty - independent
       control when set, no extra field needed for the common case. */
    color: var(--uaf-ai-ask-label-color, var(--uaf-ai-ask-accent));
    text-align: var(--uaf-ai-ask-label-align, left);
}

/* "Ask another question" swaps the search form back in and the answer/error box out (or the
   reverse, when a question is submitted) - animated as a collapse/expand pair (max-height +
   opacity) instead of an instant style.display snap, so the transition between the two views
   feels like one continuous motion rather than a jump cut. Default (no class) is the form's
   normal always-visible state; .is-collapsed is opt-in, added only while a question/answer is
   showing. */
.uaf-ai-ask-form {
    overflow: hidden;
    max-height: 320px;
    opacity: 1;
    /* .uaf-ai-ask-row's own :focus-within state adds a 4px outer glow ring (a non-inset
       box-shadow) - without this padding, the overflow:hidden above (needed for max-height to
       actually collapse the form) would clip that ring at the edges since the row is flush
       against the form's own box. The matching negative margin cancels the padding back out
       so the row's rendered position/width is unchanged from before - net-zero visually
       except the glow now has somewhere to go. padding-bottom (not the fixed horizontal
       padding) is what animates to 0 on collapse, matching the same "no phantom leftover
       space at max-height:0" approach used by the email-capture/answer boxes below. */
    padding: 0 6px 6px;
    margin: 0 -6px -6px;
    transition: opacity 0.3s ease, max-height 0.35s ease, padding-bottom 0.35s ease;
}
.uaf-ai-ask-form.is-collapsed {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.uaf-ai-ask-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 62px;
    padding: 6px 6px 6px 22px;
    border-radius: 999px;
    /* Accent-tinted instead of a flat neutral gray - ties the resting state into the same
       "AI era" accent language as the rest of the element (focus glow, LED strip, answer
       box) rather than reading as a plain generic form field. */
    background: color-mix(in srgb, var(--uaf-ai-ask-accent) 6%, rgba(127,127,127,0.05));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--uaf-ai-ask-accent) 16%, rgba(127,127,127,0.18));
    transition: box-shadow 0.18s ease, background 0.18s ease;
}
.uaf-ai-ask-row:focus-within {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--uaf-ai-ask-accent) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--uaf-ai-ask-accent) 8%, transparent);
}

/* Flatsome's own theme CSS gives every input[type=text] site-wide a full styled box
   (white background, border, inset box-shadow, fixed height) via a selector that's
   slightly MORE specific than a single plain class - it was showing through inside this
   pill container, looking like a second, nested search box. !important here is
   deliberate, not lazy: specificity alone is fragile against a theme's own global resets
   (this exact bug already slipped through once with a specificity-only fix) - !important
   guarantees it regardless of what any theme's base styles happen to do. */
.uaf-ai-ask-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    /* var(--uaf-ai-ask-text-color) - NOT currentColor (doesn't reach <input> elements at all),
       NOT accent (isn't guaranteed to read legibly against whatever the real background turns
       out to be). This custom property is set by JS (detectBackgroundColor() in
       uaf-ai-ask-element.js), which measures the REAL rendered ancestor background color at
       runtime, rather than trusting Flatsome's .dark class alone - see that property's own
       definition on .uaf-ai-ask-element for the full reasoning. !important is required
       regardless - Flatsome's own theme.css has a global form-reset rule ("input[type=text],
       input[type=email], ..., select, textarea {color:#333}") with specificity (0,1,1) [an
       attribute selector + the input type], which beats this rule's plain single class
       (0,1,0) and silently wins otherwise - confirmed via direct browser inspection, not
       assumed. */
    color: var(--uaf-ai-ask-text-color) !important;
    caret-color: var(--uaf-ai-ask-accent);
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.uaf-ai-ask-input:focus {
    background: transparent !important;
    box-shadow: none !important;
}
.uaf-ai-ask-input::placeholder {
    /* Same var(--uaf-ai-ask-text-color) as the input's own typed-text color above - see that
       rule's comment. */
    color: var(--uaf-ai-ask-text-color) !important;
    opacity: 0.85;
}

.uaf-ai-ask-submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box;
    border: none !important;
    border-radius: 50% !important;
    /* Self-referential two-tone gradient - the SAME single accent variable, mixed toward
       black for the dark end, rather than a second hardcoded color. Matches the LED
       strip's own "derive everything from one variable" approach elsewhere in this element. */
    background: linear-gradient(135deg, var(--uaf-ai-ask-accent), color-mix(in srgb, var(--uaf-ai-ask-accent) 100%, black 32%));
    /* Defaults to white; auto-switched to a dark color server-side (see
       uaf_ai_ask_is_pale_color() in the shortcode) when the chosen accent is white/pale
       enough that a white icon would nearly disappear against it. */
    color: var(--uaf-ai-ask-icon-color, #fff);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.uaf-ai-ask-submit svg {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
    /* Optical nudge - the icon's own visual weight sits slightly low within its box, same
       class of correction as any asymmetric glyph, not a layout bug. */
    transform: translateY(-2px);
}
.uaf-ai-ask-submit:hover {
    filter: brightness(1.12);
    transform: scale(1.05);
}
.uaf-ai-ask-submit:active {
    transform: scale(0.96);
}

.uaf-ai-ask-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    font-size: 18.5px;
    opacity: 0.8;
}
.uaf-ai-ask-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(127,127,127,0.3);
    border-top-color: var(--uaf-ai-ask-accent);
    animation: uaf-ai-ask-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes uaf-ai-ask-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .uaf-ai-ask-spinner {
        animation: none;
    }
}

/* Collect Email - same accent-tinted card treatment as .uaf-ai-ask-answer below (so it reads
   as part of the same design system, not a bolted-on widget), with a fade-in transition
   triggered by JS toggling .is-visible (see showEmailCapture() in the JS - display:none can't
   itself be transitioned, hence the two-step class approach). max-height/margin-top/padding
   are animated alongside opacity (not just opacity alone) so the box under it (the answer)
   resettles smoothly as this box grows/shrinks, instead of jumping the instant display:none
   snaps in - max-height uses a generous fixed value, never `auto`, since auto can't be
   transitioned to/from. */
.uaf-ai-ask-email-capture {
    position: relative;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--uaf-ai-ask-accent) 22%, transparent);
    background: color-mix(in srgb, var(--uaf-ai-ask-accent) 4%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, max-height 0.35s ease, margin-top 0.35s ease, padding 0.35s ease;
}
.uaf-ai-ask-email-capture.is-visible {
    max-height: 300px;
    margin-top: 14px;
    padding: 16px 18px;
    opacity: 1;
    pointer-events: auto;
}
/* Real flex row instead of padding + position:absolute - the close button reserves its own
   space this way, so the prompt text can never wrap underneath/behind it regardless of how
   narrow the element's own column is (padding-based clearance alone wasn't reliable at small
   widths - confirmed live). */
.uaf-ai-ask-email-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.uaf-ai-ask-email-prompt {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 900;
    color: var(--uaf-ai-ask-accent);
}
.uaf-ai-ask-email-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Same pill-row treatment as the main search bar (.uaf-ai-ask-row/.uaf-ai-ask-input) - Zaki:
   "nice similarly designed input with same accent color and similar to search bar." Name
   (added 2026-07-24, shares this exact ruleset via the compound selector) sits narrower than
   Email since it's the less essential of the two - flex-basis 100px lets it shrink first and
   grow only after Email already has the room it needs. */
.uaf-ai-ask-name-input,
.uaf-ai-ask-email-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: none !important;
    border-radius: 5px;
    /* !important - REAL confirmed bug (2026-07-24, via direct DevTools inspection): unlike the
       main search input, this is a bare <input type="email"> with no wrapping div carrying its
       own visible background - so it's directly matched by wp-admin/theme's own global form
       reset (input[type=email], etc. {background-color:#fff}), which was winning at
       specificity (0,2,0) against this plain class since this property lacked !important.
       That forced the input's REAL rendered background to solid opaque white regardless of
       what this rule intended - which is exactly why white text (correctly detecting a dark
       ambient page/section further up) was landing on a white input: the input's true
       background didn't match what the JS text-color detection was reading from the page. */
    background: color-mix(in srgb, var(--uaf-ai-ask-accent) 6%, rgba(127,127,127,0.05)) !important;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--uaf-ai-ask-accent) 16%, rgba(127,127,127,0.18)) !important;
    padding: 0 16px !important;
    margin: 0;
    font-size: 13.5px;
    /* var(--uaf-ai-ask-text-color) - the JS-measured REAL background value (same as the main
       input above), not a plain .dark-class rule. Confirmed why the class alone can't work:
       Flatsome's .dark on a COLUMN only forces text color, it does NOT itself darken the
       background (only .section.dark does that) - so "Color: Light" without an actual dark Bg
       Color paired with it leaves the real background light while .dark is still present,
       which a class-only rule has no way to detect. Reverted back to this from a brief
       .dark-only experiment on 2026-07-24 - that simpler version could never have solved this
       exact case by design, not just in practice. !important needed regardless - Flatsome's
       own global input reset (input[type=email], etc. {color:#333}) has higher specificity and
       otherwise wins. */
    color: var(--uaf-ai-ask-text-color) !important;
    caret-color: var(--uaf-ai-ask-accent);
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: box-shadow 0.18s ease;
}
/* 30/70 split of the row's available space (Zaki: "name is too small" with the old
   flex-basis:100px approach) - flex-basis 0 on both means the grow ratio (3 vs 7) is the ONLY
   thing deciding width, not each field's own content/placeholder length. Send's own
   flex:0 0 auto width is subtracted first, then what's left is divided 30/70 between these two. */
.uaf-ai-ask-name-input {
    flex: 3 1 0;
}
.uaf-ai-ask-email-input {
    flex: 7 1 0;
}
.uaf-ai-ask-name-input:focus,
.uaf-ai-ask-email-input:focus {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--uaf-ai-ask-accent) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--uaf-ai-ask-accent) 8%, transparent) !important;
}
/* Same var(--uaf-ai-ask-text-color) as the input's own typed-text color above. */
.uaf-ai-ask-name-input::placeholder,
.uaf-ai-ask-email-input::placeholder {
    color: var(--uaf-ai-ask-text-color) !important;
    opacity: 0.85;
}
.uaf-ai-ask-email-submit {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 44px;
    padding: 0 18px;
    margin: 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--uaf-ai-ask-accent), color-mix(in srgb, var(--uaf-ai-ask-accent) 100%, black 32%));
    color: var(--uaf-ai-ask-icon-color, #fff);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 44px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: filter 0.15s ease, transform 0.1s ease;
}
/* Firefox adds an invisible extra inner border/padding to native buttons via this
   pseudo-element - without resetting it, a button can render a couple pixels off vertically
   from a same-height sibling even with identical height/padding declared. */
.uaf-ai-ask-email-submit::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.uaf-ai-ask-email-submit:hover {
    filter: brightness(1.12);
}
.uaf-ai-ask-email-submit:active {
    transform: scale(0.96);
}
.uaf-ai-ask-email-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--uaf-ai-ask-accent) 10%, transparent);
    color: color-mix(in srgb, currentColor 60%, var(--uaf-ai-ask-accent) 20%);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.uaf-ai-ask-email-close:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--uaf-ai-ask-accent) 18%, transparent);
}
.uaf-ai-ask-email-thanks {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--uaf-ai-ask-accent);
}
/* Name + Email + Send all fit on one line down to this width - below it, each gets its own
   full-width line instead of squeezing three controls into too little space (Zaki: "in mobile
   they have to be each one in its own line"). */
@media (max-width: 480px) {
    .uaf-ai-ask-email-form {
        flex-direction: column;
        align-items: stretch;
    }
    .uaf-ai-ask-name-input,
    .uaf-ai-ask-email-input,
    .uaf-ai-ask-email-submit {
        flex: 1 1 auto;
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .uaf-ai-ask-email-capture,
    .uaf-ai-ask-form,
    .uaf-ai-ask-answer,
    .uaf-ai-ask-error {
        transition: none;
    }
}

/* Default (no class) is collapsed - matches the box's original display:none-until-answered
   state - .is-visible expands it. Same max-height/opacity/margin/padding animation approach as
   .uaf-ai-ask-email-capture above, so showing/hiding the answer (including the "Ask another
   question" reset) is a smooth resize rather than an instant snap. */
.uaf-ai-ask-answer {
    position: relative;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    padding: 0 20px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--uaf-ai-ask-accent) 22%, transparent);
    background: color-mix(in srgb, var(--uaf-ai-ask-accent) 4%, transparent);
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--uaf-ai-ask-accent) 35%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, max-height 0.35s ease, margin-top 0.35s ease, padding 0.35s ease;
}
.uaf-ai-ask-answer.is-visible {
    max-height: 2000px;
    margin-top: 14px;
    padding: 22px 20px 18px;
    opacity: 1;
    pointer-events: auto;
}
/* Chasing-light strip along the top edge, always in the element's own accent color - same
   "LED strip" language used elsewhere in UX AI Bot, here driven by a single self-referential
   variable instead of two hardcoded colors, so it always matches whatever accent is set. */
.uaf-ai-ask-answer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--uaf-ai-ask-accent), transparent);
    background-size: 200% 100%;
    animation: uaf-ai-ask-led-strip 2.5s linear infinite;
}
@keyframes uaf-ai-ask-led-strip {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .uaf-ai-ask-answer::before {
        animation: none;
    }
}
/* Response Actions - thumbs up/down + copy, between the answer text and "Ask another question"
   (see uxai_ask_element_shortcode.php). Icons are self-hosted inline SVG (fill="currentColor"),
   not a font/CDN - see the shortcode's own comment for why (Font Awesome turned out not to
   actually be loaded on the front end at all, and a CDN was deliberately rejected).
   Deliberately NOT using var(--uaf-ai-ask-text-color) (the JS-measured real-background value
   used for input text elsewhere in this file) - Zaki's explicit ask for these icons
   specifically is simpler: accent-colored by default, ALWAYS white inside .dark, full stop,
   not adaptively detected. */
.uaf-ai-ask-response-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 8px 0;
}
.uaf-ai-ask-thumb,
.uaf-ai-ask-copy-answer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* box-sizing + explicit 0 padding/border, all !important - Flatsome's own generic button
       reset otherwise wins on specificity (same recurring bug class as .uaf-ai-ask-again's
       text-transform above) and can add its own padding/border/min-width, which is exactly
       what breaks the circle from being a true circle (confirmed live - reported as looking
       like "a misaligned sphere" rather than a clean circle). */
    box-sizing: border-box !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--uaf-ai-ask-accent);
    font-size: 13px;
    line-height: 1 !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.dark .uaf-ai-ask-thumb,
.dark .uaf-ai-ask-copy-answer {
    color: #fff !important;
}
.uaf-ai-ask-thumb:hover,
.uaf-ai-ask-copy-answer:hover {
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
}
/* Inline SVG (fill="currentColor"), not a font icon - sized directly on the svg element,
   same convention as .uaf-ai-ask-submit svg above. */
.uaf-ai-ask-thumb svg,
.uaf-ai-ask-copy-answer svg {
    width: 14px;
    height: 14px;
    display: block;
}
.uaf-ai-ask-thumb.is-selected {
    background: color-mix(in srgb, currentColor 18%, transparent) !important;
}
/* Brief confirmation pulse instead of swapping the icon glyph via JS - simpler, and the color
   shift alone reads clearly as "done" for a one-click action like this. */
.uaf-ai-ask-copy-answer.is-copied {
    color: #2ecc71 !important;
}
/* Static label, not touched by blockReveal()/renderStreamingBlocks() (those only ever replace
   .uaf-ai-ask-answer-text's own children) - block-level, so the answer text below it starts on
   its own line with no extra markup needed. */
.uaf-ai-ask-answer-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 650;
    color: var(--uaf-ai-ask-accent);
}
.uaf-ai-ask-answer-text {
    font-size: 14.5px;
    line-height: 1.6;
}
.uaf-ai-ask-answer-text a {
    font-weight: 650;
    color: var(--uaf-ai-ask-accent);
    text-decoration: underline;
}
.uaf-ai-ask-answer-text a:hover {
    text-decoration: none;
}
.uaf-ai-ask-answer-text h4,
.uaf-ai-ask-answer-text h5,
.uaf-ai-ask-answer-text h6 {
    margin: 14px 0 6px;
    font-weight: 650;
}
.uaf-ai-ask-answer-text h4:first-child,
.uaf-ai-ask-answer-text h5:first-child,
.uaf-ai-ask-answer-text h6:first-child {
    margin-top: 0;
}
.uaf-ai-ask-answer-text p {
    margin: 0 0 10px;
}
.uaf-ai-ask-answer-text ul {
    margin: 0 0 10px;
    padding-left: 20px;
}
.uaf-ai-ask-answer-text li {
    margin-bottom: 4px;
}
.uaf-ai-ask-answer-text strong {
    font-weight: 650;
}
/* Live-streaming text (streamNdjson() in the JS) - plain textContent while partial, replaced
   by the real formatted blocks once the stream ends. The blinking bar at the end signals "more
   is still coming," same purpose as a terminal cursor. */
.uaf-ai-ask-streaming-text::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--uaf-ai-ask-accent);
    animation: uaf-ai-ask-cursor-blink 1s step-end infinite;
}
@keyframes uaf-ai-ask-cursor-blink {
    50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .uaf-ai-ask-streaming-text::after {
        animation: none;
    }
}
/* Each block fades/slides in as it's revealed (see blockReveal() in the JS) - a lighter-weight
   substitute for the character-by-character typewriter now that content renders as real
   HTML blocks instead of a single plain-text string. */
.uaf-ai-ask-block-in {
    animation: uaf-ai-ask-block-in 0.25s ease both;
}
@keyframes uaf-ai-ask-block-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .uaf-ai-ask-block-in {
        animation: none;
    }
}
/* Shown only when the provider's own API reported hitting max_tokens (a real finish_reason/
   stop_reason, not a guess) - see showTruncatedNotice() in the JS. Muted/small so it reads as
   a helpful aside, not an error. */
.uaf-ai-ask-truncated-notice {
    margin: 10px 0 0;
    font-size: 12px;
    font-style: italic;
    color: color-mix(in srgb, currentColor 55%, var(--uaf-ai-ask-accent) 25%);
    opacity: 0.85;
}

/* Filled with the element's own accent color, same as the submit button - text color reuses
   --uaf-ai-ask-icon-color, the exact same pale-accent-detection variable the submit button's
   icon already relies on (see uaf_ai_ask_is_pale_color() in the shortcode): white by default,
   switching to dark automatically whenever the accent itself is pale/white, so this button
   never ends up with unreadable white-on-white text. */
.uaf-ai-ask-again {
    margin-top: 10px;
    border: 1px solid transparent;
    background: var(--uaf-ai-ask-accent);
    color: var(--uaf-ai-ask-icon-color, #fff);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    /* Flatsome's own theme CSS uppercases plain <button> elements by default - override
       explicitly rather than rely on this class alone winning that specificity fight, same
       recurring bug class documented elsewhere in this file. */
    text-transform: none !important;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.uaf-ai-ask-again:hover {
    filter: brightness(0.92);
}
.uaf-ai-ask-again:active {
    transform: scale(0.97);
}

.uaf-ai-ask-error {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    padding: 0 14px;
    border-radius: 8px;
    background: rgba(248,113,113,0.12);
    color: #dc2626;
    font-size: 13.5px;
    opacity: 0;
    transition: opacity 0.3s ease, max-height 0.35s ease, margin-top 0.35s ease, padding 0.35s ease;
}
.uaf-ai-ask-error.is-visible {
    max-height: 300px;
    margin-top: 10px;
    padding: 10px 14px;
    opacity: 1;
}