/*
 * AI Summary Box front-end UI.
 * Every visual selector is scoped beneath .aisb-root so theme/Elementor styles
 * neither leak into this component easily nor receive styles from this file.
 */
.aisb-root {
    --aisb-font: inherit;
    --aisb-brand: #6c5ce7;
    --aisb-text: #17171d;
    --aisb-muted: #6c6d78;
    --aisb-surface: #ffffff;
    --aisb-border: #e8e8ef;
    --aisb-radius: 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    direction: inherit;
    text-align: start;
    font-family: var(--aisb-font), sans-serif;
    line-height: 1.5;
    color: var(--aisb-text);
    isolation: isolate;
    position: relative;
    container: aisb-shortcode / inline-size;
    box-sizing: border-box;
}

.aisb-root,
.aisb-root *,
.aisb-root *::before,
.aisb-root *::after {
    box-sizing: border-box;
}

.aisb-root .aisb-box {
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    font-family: var(--aisb-font), sans-serif !important;
    text-align: start !important;
    direction: inherit !important;
    overflow: hidden;
    transform: translateZ(0);
    animation: aisb-v120-reveal .62s cubic-bezier(.2,.8,.2,1) both;
}

.aisb-root .aisb-copy,
.aisb-root .aisb-providers,
.aisb-root .aisb-kicker,
.aisb-root .aisb-title,
.aisb-root .aisb-subtitle {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.aisb-root .aisb-copy,
.aisb-root .aisb-title,
.aisb-root .aisb-subtitle,
.aisb-root .aisb-kicker,
.aisb-root .aisb-provider-label,
.aisb-root .aisb-provider-arrow {
    font-family: var(--aisb-font), sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
}

.aisb-root .aisb-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px !important;
    padding: 0 !important;
    border: 0 !important;
    color: color-mix(in srgb, var(--aisb-brand) 78%, #4f5160);
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    white-space: nowrap;
}

.aisb-root .aisb-kicker-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--aisb-brand);
    font-size: 16px !important;
    line-height: 1 !important;
    animation: aisb-v120-spark 2.8s ease-in-out infinite;
}

.aisb-root .aisb-title {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--aisb-text) !important;
    font-size: clamp(18px, 2.2vw, 24px) !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
    word-break: normal;
    overflow-wrap: anywhere;
}

.aisb-root .aisb-subtitle {
    display: block;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--aisb-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.85 !important;
    word-break: normal;
    overflow-wrap: anywhere;
}

.aisb-root .aisb-providers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
}

/* Strong, component-only link reset to resist theme/Elementor anchor styles. */
.aisb-root a.aisb-provider,
.aisb-root a.aisb-provider:link,
.aisb-root a.aisb-provider:visited,
.aisb-root a.aisb-provider:hover,
.aisb-root a.aisb-provider:active,
.aisb-root a.aisb-provider:focus {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 11px 14px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    font-family: var(--aisb-font), sans-serif !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    cursor: pointer !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease, color .28s ease !important;
    animation: aisb-v120-chip-in .52s cubic-bezier(.2,.8,.2,1) both;
}

.aisb-root a.aisb-provider:nth-child(2) { animation-delay: .07s; }
.aisb-root a.aisb-provider:nth-child(3) { animation-delay: .14s; }
.aisb-root a.aisb-provider:nth-child(4) { animation-delay: .21s; }

.aisb-root a.aisb-provider:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--aisb-brand) 30%, transparent) !important;
    outline-offset: 3px !important;
}

.aisb-root .aisb-provider-icon {
    position: relative;
    flex: 0 0 auto;
    display: inline-grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 7px !important;
    border: 0 !important;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(22, 24, 35, .08);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease !important;
}

.aisb-root .aisb-provider-icon svg,
.aisb-root .aisb-provider-icon svg * {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    fill: currentColor;
}

.aisb-root .aisb-provider-chatgpt .aisb-provider-icon { color: #101114 !important; }
.aisb-root .aisb-provider-claude .aisb-provider-icon { color: #d97757 !important; }
.aisb-root .aisb-provider-gemini .aisb-provider-icon { color: #8e75b2 !important; }
.aisb-root .aisb-provider-grok .aisb-provider-icon { color: #000000 !important; }

.aisb-root .aisb-provider-label {
    min-width: 0;
    white-space: nowrap;
}

.aisb-root .aisb-provider-arrow {
    flex: 0 0 auto;
    font-size: 13px !important;
    font-weight: 800 !important;
    opacity: .52;
    transition: transform .25s ease, opacity .25s ease !important;
}

.aisb-root a.aisb-provider:hover {
    transform: translateY(-3px) !important;
}

.aisb-root a.aisb-provider:hover .aisb-provider-icon {
    transform: translateY(-1px) scale(1.08) rotate(-2deg);
    box-shadow: 0 8px 19px rgba(22, 24, 35, .12);
}

.aisb-root[dir="rtl"] a.aisb-provider:hover .aisb-provider-arrow {
    transform: translate(-2px, -2px);
    opacity: .9;
}


.aisb-root[dir="ltr"] a.aisb-provider:hover .aisb-provider-arrow {
    transform: translate(2px, -2px);
    opacity: .9;
}

.aisb-root a.aisb-provider:active {
    transform: translateY(-1px) scale(.985) !important;
}

.aisb-root .aisb-ambient {
    pointer-events: none;
    position: absolute;
    z-index: 0;
    display: block;
    width: 230px;
    height: 230px;
    border-radius: 999px;
    filter: blur(10px);
    opacity: .14;
    background: var(--aisb-brand);
    animation: aisb-v120-ambient 8s ease-in-out infinite alternate;
}

.aisb-root .aisb-ambient-one { top: -150px; right: -85px; }
.aisb-root .aisb-ambient-two { bottom: -175px; left: -70px; animation-delay: -3.4s; opacity: .09; }

/* Template 1 — premium light */
.aisb-root .aisb-box.template-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 3vw, 32px);
    padding: 24px !important;
    border: 1px solid color-mix(in srgb, var(--aisb-brand) 13%, var(--aisb-border)) !important;
    border-radius: var(--aisb-radius) !important;
    background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--aisb-brand) 4%, #fff) 100%) !important;
    box-shadow: 0 16px 45px rgba(24, 24, 35, .075) !important;
}

.aisb-root .aisb-box.template-1::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 10%, color-mix(in srgb, var(--aisb-brand) 7%, transparent) 48%, transparent 75%);
    transform: translateX(50%);
    animation: aisb-v120-sheen 7s ease-in-out infinite;
}

.aisb-root .aisb-box.template-1 .aisb-copy { flex: 1 1 440px; max-width: 650px; }

.aisb-root .aisb-box.template-1 a.aisb-provider {
    color: #1d1e24 !important;
    border-color: #e7e7ed !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 6px 18px rgba(25, 26, 36, .055) !important;
}

.aisb-root .aisb-box.template-1 a.aisb-provider:hover {
    color: #17181e !important;
    border-color: color-mix(in srgb, var(--aisb-brand) 36%, #d9dae2) !important;
    background: #fff !important;
    box-shadow: 0 13px 28px color-mix(in srgb, var(--aisb-brand) 13%, rgba(20,20,30,.10)) !important;
}

/* Template 2 — dark aurora */
.aisb-root .aisb-box.template-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) auto;
    align-items: center;
    gap: 24px;
    padding: 30px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 26px !important;
    background: radial-gradient(circle at 90% -20%, color-mix(in srgb, var(--aisb-brand) 38%, transparent), transparent 40%), linear-gradient(135deg,#101116 0%,#181a25 55%,#202333 100%) !important;
    box-shadow: 0 22px 56px rgba(16, 17, 26, .20) !important;
}

.aisb-root .aisb-box.template-2 .aisb-title { color: #fff !important; }
.aisb-root .aisb-box.template-2 .aisb-subtitle { color: #b9bdca !important; }
.aisb-root .aisb-box.template-2 .aisb-kicker { color: color-mix(in srgb, var(--aisb-brand) 50%, #fff) !important; }
.aisb-root .aisb-box.template-2 .aisb-providers { justify-content: flex-end; }

.aisb-root .aisb-box.template-2 a.aisb-provider {
    color: #fff !important;
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.10) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.aisb-root .aisb-box.template-2 a.aisb-provider:hover {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--aisb-brand) 58%, rgba(255,255,255,.25)) !important;
    background: color-mix(in srgb, var(--aisb-brand) 17%, rgba(255,255,255,.08)) !important;
    box-shadow: 0 14px 35px color-mix(in srgb, var(--aisb-brand) 20%, rgba(0,0,0,.18)) !important;
}

/* Template 3 — compact accent card */
.aisb-root .aisb-box.template-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px !important;
    border: 1px solid color-mix(in srgb, var(--aisb-brand) 22%, #e4e5eb) !important;
    border-radius: 18px !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--aisb-brand) 7%, #fff), #fff 52%, #fff) !important;
    box-shadow: 0 11px 30px rgba(25, 25, 34, .06) !important;
}

.aisb-root .aisb-box.template-3::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 0;
    bottom: 12px;
    width: 3px;
    border-radius: 99px 0 0 99px;
    background: var(--aisb-brand);
    box-shadow: 0 0 22px color-mix(in srgb, var(--aisb-brand) 55%, transparent);
}

.aisb-root .aisb-box.template-3 .aisb-title { font-size: clamp(16px, 2vw, 19px) !important; }
.aisb-root .aisb-box.template-3 .aisb-subtitle { font-size: 13px !important; margin-top: 3px !important; }
.aisb-root .aisb-box.template-3 .aisb-kicker { display: none; }

.aisb-root .aisb-box.template-3 a.aisb-provider {
    width: 46px;
    height: 46px;
    padding: 5px !important;
    color: #23242b !important;
    border-color: #e5e5eb !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(24,25,34,.055) !important;
}

.aisb-root .aisb-box.template-3 .aisb-provider-icon {
    width: 34px;
    height: 34px;
    box-shadow: none;
    background: transparent;
}

.aisb-root .aisb-box.template-3 .aisb-provider-label,
.aisb-root .aisb-box.template-3 .aisb-provider-arrow { display: none; }

.aisb-root .aisb-box.template-3 a.aisb-provider:hover {
    border-color: color-mix(in srgb, var(--aisb-brand) 46%, #dadbe2) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--aisb-brand) 15%, rgba(20,20,30,.10)) !important;
}

/* Width-of-component responsiveness: works inside Elementor columns too. */
@container aisb-shortcode (max-width: 760px) {
    .aisb-root .aisb-box.template-1,
    .aisb-root .aisb-box.template-2 {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .aisb-root .aisb-box.template-1 .aisb-copy,
    .aisb-root .aisb-box.template-2 .aisb-copy { max-width: none; flex-basis: auto; }

    .aisb-root .aisb-box.template-1 .aisb-providers,
    .aisb-root .aisb-box.template-2 .aisb-providers { justify-content: stretch; width: 100%; }

    .aisb-root .aisb-box.template-1 a.aisb-provider,
    .aisb-root .aisb-box.template-2 a.aisb-provider { flex: 1 1 145px; }
}

@container aisb-shortcode (max-width: 520px) {
    .aisb-root .aisb-box.template-1,
    .aisb-root .aisb-box.template-2 { padding: 20px !important; border-radius: 20px !important; }

    .aisb-root .aisb-box.template-1 .aisb-providers,
    .aisb-root .aisb-box.template-2 .aisb-providers {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .aisb-root .aisb-box.template-1 a.aisb-provider,
    .aisb-root .aisb-box.template-2 a.aisb-provider {
        width: 100% !important;
        min-height: 50px;
        justify-content: flex-start !important;
    }

    .aisb-root .aisb-box.template-1 .aisb-provider-arrow,
    .aisb-root .aisb-box.template-2 .aisb-provider-arrow { margin-right: auto; }

    .aisb-root .aisb-box.template-3 {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: 17px !important;
    }

    .aisb-root .aisb-box.template-3 .aisb-providers { justify-content: flex-start; }
}

@container aisb-shortcode (max-width: 350px) {
    .aisb-root .aisb-title { font-size: 17px !important; }
    .aisb-root .aisb-subtitle { font-size: 13px !important; }
    .aisb-root .aisb-box.template-1,
    .aisb-root .aisb-box.template-2 { padding: 16px !important; }
}

/* Viewport fallback for browsers that do not apply container queries. */
@media (max-width: 620px) {
    .aisb-root .aisb-provider-icon { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .aisb-root .aisb-box,
    .aisb-root .aisb-kicker-icon,
    .aisb-root .aisb-ambient,
    .aisb-root .aisb-box::after,
    .aisb-root a.aisb-provider {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .aisb-root a.aisb-provider:hover,
    .aisb-root a.aisb-provider:hover .aisb-provider-icon,
    .aisb-root a.aisb-provider:hover .aisb-provider-arrow {
        transform: none !important;
    }
}

@keyframes aisb-v120-reveal {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.992); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes aisb-v120-chip-in {
    from { opacity: 0; transform: translate3d(0, 9px, 0) scale(.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes aisb-v120-spark {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: .82; }
    50% { transform: scale(1.18) rotate(10deg); opacity: 1; }
}

@keyframes aisb-v120-ambient {
    from { transform: translate3d(-6px, -2px, 0) scale(.92); }
    to { transform: translate3d(12px, 9px, 0) scale(1.08); }
}

@keyframes aisb-v120-sheen {
    0%, 68%, 100% { transform: translateX(55%); opacity: 0; }
    76% { opacity: 1; }
    92% { transform: translateX(-55%); opacity: 0; }
}


/* Compatibility notice — scoped to the plugin only. */
.aisb-root .aisb-compat-toast {
    position: absolute !important;
    z-index: 20 !important;
    inset-inline-end: 16px !important;
    bottom: 14px !important;
    max-width: min(360px, calc(100% - 32px)) !important;
    padding: 10px 13px !important;
    border: 1px solid color-mix(in srgb, var(--aisb-brand) 28%, #d9dbe4) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.96) !important;
    color: #24242b !important;
    box-shadow: 0 10px 30px rgba(18,18,28,.12) !important;
    font: 600 12px/1.7 var(--aisb-font), sans-serif !important;
    direction: inherit !important;
    text-align: start !important;
    animation: aisb-toast-in .22s ease both !important;
}
@keyframes aisb-toast-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .aisb-root .aisb-compat-toast { animation:none !important; } }