:root {

    --legacyblue-h: 198;
    --legacyblue-s: 97%;
    --legacyblue-l: 43%;
    --legacyblue-500: hsl(var(--legacyblue-h), var(--legacyblue-s), var(--legacyblue-l));
    --legacyblue-500-wcag-text: hsl(204, 100%, 36%);

    /* Body background */
    --white: light-dark(oklch(100% -2 0), oklch(24% 0.01 var(--brand-hue)));
    --body-bg: light-dark(oklch(97% .01 var(--brand-hue)), oklch(0% 0 0));
    /* Main background */

}

body {

    &:has(form footer.appfooter) {
        main {
            padding-bottom: 0rem;
            padding-left: 0;
            margin-left: 0;

            @container (width >=48rem) {
                margin-left: 0.5rem;
            }
        }
    }


}

main {
    border-radius: 1rem;

    @container (width >=48rem) {
        margin: 0.5rem 1.5rem 0.5rem 1.5rem;
        padding-bottom: 0;

        &#main {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
    }

    @container (width <=48rem) {
        margin: 0.75rem;
    }
}

.w-\[min\(38rem\2c 42\%\)\] {
    width: min(38rem, 42%);
}

.max-w-\[26ch\] {
    max-width: 26ch;
}

.w-\[3\.6rem\] {
    width: 3.6rem;
}

.h-\[3\.6rem\] {
    height: 3.6rem;
}

#askInput {
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    color: light-dark(var(--typography-400), #f3f5f9);
}



@property --ask-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

[data-ask-glow] {
    width: min(38rem, 100%);
}

[data-ask-glow],
[data-type-glow] {
    position: relative;
    isolation: isolate;
}

[data-ask-glow]::before,
[data-ask-button]::before {
    content: "";
    position: absolute;
    inset: -15px;
    z-index: -2;
    border-radius: 9999px;
    background: conic-gradient(from var(--ask-a),
            oklch(80% 0.2 320 / .60), oklch(80% 0.1 190 / .55), oklch(83.2% 0.188 56.7 / .35),
            oklch(75.7% 0.235 340.1 / .55), oklch(80% 0.2 320 / .60));
    filter: blur(24px);
    opacity: .38;
    animation: askTurn 16s linear infinite, askBreathe 7s ease-in-out infinite alternate;
}

[data-ask-glow]::after,
[data-type-glow]::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1.5px;
    pointer-events: none;
    background: conic-gradient(from var(--ask-a),
            transparent 0deg, transparent 232deg,
            oklch(80% 0.1 190 / .55) 276deg, oklch(80% 0.2 320) 328deg,
            oklch(75.7% 0.235 340.1) 348deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: askTurn 5.5s linear infinite;
}

[data-ask-glow]::after {
    border-radius: 9999px;
}

[data-ask-glow]:focus-within::before {
    opacity: .62;
}

[data-ask-glow]:focus-within::after {
    animation-duration: 3.2s;
}


[data-type-glow]::after {
    border-radius: 1.2rem;
    border-bottom-left-radius: 0.125rem;
    background: conic-gradient(from var(--ask-a),
            transparent 0deg, transparent 232deg,
            oklch(80% 0.1 190 / .55) 276deg,
            oklch(80% 0.2 320) 328deg,
            oklch(75.7% 0.235 340.1) 348deg,
            transparent 360deg);
}


@keyframes askTurn {
    to {
        --ask-a: 360deg;
    }
}

@keyframes askBreathe {
    from {
        opacity: .26;
    }

    to {
        opacity: .58;
    }
}


@media (max-width: 640px) {
    [data-ask-dock] {
        bottom: .6rem;
        margin-top: 1.5rem;
        gap: .55rem;
        padding: 0 .25rem;
    }
}



/* @media (max-width: 640px) { */
/* @media (max-width: 768px) { */
@media (max-width: 900px) {

    [data-ask-dock] {
        display: none;
    }

    [data-ask-dock].dock-open {
        display: flex;
    }

    [data-ask-button] {
        display: flex !important;
    }
}

[data-ask-button] {
    position: fixed !important;
    bottom: 4rem !important;
    right: 2rem !important;
    left: auto !important;
    z-index: 50;
    display: none;
    padding: 1rem !important;
    ;
    border-radius: 2rem !important;
    box-shadow: 0 10px 26px -14px rgb(0 0 0 / .35);
}

/* ===== ASK BUTTON (mobile toggle + animation) START — remove this block to revert ===== */
[data-ask-button] {
    animation: askFloat 6s ease-in-out infinite, askPulse 5s ease-in-out infinite;
    transition: transform .2s ease, box-shadow .2s ease;

}

[data-ask-button]:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 30px -12px rgb(0 0 0 / .45);
}

[data-ask-button]:active {
    transform: scale(.96);
}

[data-ask-button] svg {
    animation: askSparkle 5s ease-in-out infinite;
}

@keyframes askFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -6px;
    }
}

@keyframes askPulse {
    0% {
        box-shadow: 0 10px 26px -14px rgb(0 0 0 / .35), 0 0 0 0 var(--primary-500, #2563eb);
    }

    70% {
        box-shadow: 0 10px 26px -14px rgb(0 0 0 / .35), 0 0 0 12px transparent;
    }

    100% {
        box-shadow: 0 10px 26px -14px rgb(0 0 0 / .35), 0 0 0 0 transparent;
    }
}

@keyframes askSparkle {

    0%,
    100% {
        transform: rotate(0) scale(1);
    }

    50% {
        transform: rotate(12deg) scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {

    [data-ask-button],
    [data-ask-button] svg {
        animation: none;
    }
}

/* ===== ASK BUTTON (mobile toggle + animation) END ===== */

[data-asst-status]::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 9999px;
    background: var(--success-500);
}

[data-stars] {
    color: var(--warning-500);
    font-size: .9rem;
    letter-spacing: .05em;
}



@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}



[data-pane-toggle] {
    display: none;
}

@media (min-width: 901px) {
    [data-pane-toggle] {
        display: inline-flex;
        align-self: center;
        z-index: 5;
        margin: 0 -1.2rem;
    }

    [data-split][data-collapsed="true"] [data-pane-toggle] {
        margin: 0;
    }
}

/* hidden visually, not removed from the DOM, so the chat pane keeps its state/conversation */
[data-split][data-collapsed="true"] [chat-pane] {
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    visibility: hidden;
}


/* tablet: stack the split vertically */
@media (max-width: 900px) and (min-width: 641px) {
    [data-split] {
        flex-direction: column;
    }

    [chat-pane] {
        width: auto;
        flex: 1 1 52%;
        border-right: none;
        border-bottom: 2px solid var(--surface-100);
    }

    [result-pane] {
        flex: 1 1 48%;
    }

}

/* phone: one pane at a time, switched from the tab bar */
@media (max-width: 640px) {
    .hideButton {
        display: none;
    }

    [data-asst-tabs] {
        display: flex;
    }

    [chat-pane] {
        width: auto;
        flex: 1 1 auto;
        border-right: none;
    }

    [data-mobile="chat"] [result-pane],
    [data-mobile="articles"] [chat-pane] {
        display: none;
    }
}

@media (max-width: 900px) {


    [data-asst-tabs2] {
        display: flex;
    }

    [chat-pane2] {
        width: auto;
        flex: 1 1 auto;
        border-right: none;
    }

    [data-mobile2="chat"] [result-pane2],
    [data-mobile2="articles"] [chat-pane2] {
        display: none;
    }
}

.markdown-body :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.25rem 0 0.5rem;
}

.markdown-body> :first-child {
    margin-top: 0;
}

.markdown-body :is(p, ul, ol, table, pre, blockquote) {
    margin-bottom: 0.75rem;
}

.markdown-body :is(ul, ol) {
    padding-left: 1.25rem;
    list-style: revert;
}

@media (min-width: 768px) {
    .md\:max-w-xs {
        max-width: 20rem;
    }
}


.rounded-bl-sm {
    border-radius: 1.2rem;
    border-bottom-left-radius: 0.125rem
}

.rounded-br-sm {
    border-radius: 1.2rem;
    border-bottom-right-radius: 0.125rem;
}

.self-end {
    align-self: flex-end;
}

.place-items-center {
    place-items: center;
}

.legacyblue-500 {
    --primary-h: var(--legacyblue-h);
    --primary-s: var(--legacyblue-s);
    --primary-l: var(--legacyblue-l);
    --primary-500: var(--legacyblue-500);
    color: var(--legacyblue-500);
}


.p360ProgressBar {
    animation: spin 1.5s linear infinite;
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-width: 8px;
    border-style: solid;
    border-color: var(--white, #fff);
    border-top-color: var(--legacyblue-500, #2563eb);
}

.m-3 {
    margin: 0.75rem;
}

.m-4 {
    margin: 1rem;
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.color-base {
    background-color: light-dark(var(--white), oklch(2% .1 var(--brand-hue)));

}

.body-bg {
    background-color: light-dark(var(--white), var(--body-bg)) !important;
}
.card-base {
    background-color: light-dark(var(--white), oklch(var(--l-200) .025 var(--brand-hue) / .25));
    box-shadow: 0 0 0 1px light-dark(var(--surface-200), var(--surface-200));
}

.chatbotbg {
    /* background-image: conic-gradient(from var(--ask-a), oklch(86% 0.05 300 / .25), oklch(85% 0.06 190 / .45), oklch(88% 0.11 56.7 / .25), oklch(82% 0.13 340.1 / .45), oklch(86% 0.05 300 / .25)); */

    /* background-image: conic-gradient(from var(--ask-a) at 40% 50%,
            oklch(86% 0.05 300 / .25),
            oklch(85% 0.06 190 / .45),
            oklch(88% 0.11 56.7 / .25),
            oklch(82% 0.05 340.1 / .45),
            oklch(86% 0.05 300 / .25)); */

    /* background-image: linear-gradient(225deg, #edf5fd 23%, #fbe1c6 99%, #fef5ec 100%); */
    background-image: conic-gradient(from var(--ask-a) at 40% 50%,
            oklch(91% 0.05 212 / 0.25),
            oklch(91% 0.06 68 / 0.45),
            oklch(91% 0.05 212 / 0.25),
            oklch(91% 0.06 68 / 0.45),
            oklch(91% 0.05 212 / 0.25));

}

html[style*="color-scheme: dark"] .chatbotbg {
    background-image: none;
}

.scale-\[500\%\] {
    --tw-scale-x: 500%;
    --tw-scale-y: 500%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 768px) {
    .md\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

*,
::before,
::after {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;

}