/**
 * UX2 SKOAI text box — only on the few boxes whose text goes to SKOAI (Studio's request box, Diskover's question,
 * "Write with SKOAI" fields), to show that SKOAI works on what's typed there: frosted glass, and on focus one bright
 * streak, pink #DB2777 through violet into blue, chases around the border twice, then fades, leaving a calm edge.
 *   <div class="ux2-ai-field">
 *       <textarea class="form-control" rows="3" placeholder="…"></textarea>
 *       <div class="ux2-ai-field-foot"> …hint, then the SKOAI button (.ux2-btn-ai) </div>   optional
 *   </div>
 *   .ux2-ai-field.ux2-ai-box     on a page's own ask box (label, textarea, buttons inside): the box gets the glass and
 *                                the streak and keeps its own padding and layout (Studio's ask, Diskover's composer)
 *   .ux2-ai-field--line          a one-line chat box beside its Ask button (the learner's "Ask about this module")
 * The frost is painted (milky white over a cool slate wash), so it shows on a white page too, where a real backdrop
 * blur would have nothing to blur. Reduced motion / Display → Calm: just the calm edge.
 */
@property --ux2-ai-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.ux2-ai-field {
    /* The streak: clear for most of the way round, then pink into violet into blue, brightest at its head */
    --ux2-ai-streak: transparent 0deg, transparent 285deg, #db2777 305deg, #7c3aed 332deg, #3b82f6 356deg, transparent 360deg;
    position: relative;
    background:
        linear-gradient(180deg, rgb(255 255 255 / .82) 0%, rgb(255 255 255 / .62) 100%),
        linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(15 23 42 / .03), 0 1px 2px rgb(15 23 42 / .05),
        0 8px 24px -14px rgb(15 23 42 / .18);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    transition: box-shadow .3s ease, border-color .3s ease;
}

/* The streak: ::before is crisp on the border, ::after a slightly soft copy for a little glow; both only as rings */
.ux2-ai-field::before,
.ux2-ai-field::after {
    position: absolute;
    inset: -1px;
    z-index: 1;
    padding: 2px;
    content: "";
    pointer-events: none;
    background: conic-gradient(from var(--ux2-ai-a), var(--ux2-ai-streak));
    border-radius: inherit;
    opacity: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.ux2-ai-field::after {
    inset: -3px;
    padding: 4px;
    filter: blur(4px);
}

.ux2-ai-field:focus-within {
    border-color: rgb(109 40 217 / .38);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgb(109 40 217 / .08), 0 10px 28px -14px rgb(109 40 217 / .3);
}

/* Two laps, then the streak fades and the calm edge above is all that's left */
.ux2-ai-field:focus-within::before,
.ux2-ai-field:focus-within::after {
    animation: ux2-ai-run 1.4s linear 2, ux2-ai-show 2.8s ease forwards;
}

.ux2-ai-field:focus-within::after {
    animation: ux2-ai-run 1.4s linear 2, ux2-ai-glow 2.8s ease forwards;
}

@keyframes ux2-ai-run {
    from { --ux2-ai-a: 0deg; }
    to { --ux2-ai-a: 360deg; }
}

@keyframes ux2-ai-show {
    0% { opacity: 0; }
    8%, 85% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes ux2-ai-glow {
    0% { opacity: 0; }
    8%, 85% { opacity: .55; }
    100% { opacity: 0; }
}

/* Holding a textarea of its own: a column, the box first */
.ux2-ai-field:not(.ux2-ai-box) {
    display: flex;
    flex-direction: column;
}

/* A page's own ask box: the glass and the streak win over its own fill, edge and focus ring */
.ux2-ai-field.ux2-ai-box {
    background:
        linear-gradient(180deg, rgb(255 255 255 / .82) 0%, rgb(255 255 255 / .62) 100%),
        linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #e2e8f0;
}

.ux2-ai-field.ux2-ai-box:focus-within {
    background:
        linear-gradient(180deg, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .75) 100%),
        linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border-color: rgb(109 40 217 / .38);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgb(109 40 217 / .08), 0 10px 28px -14px rgb(109 40 217 / .3);
}

.ux2-ai-field.ux2-ai-box > :not(textarea) {
    position: relative;
    z-index: 2;
}

.ux2-ai-field.ux2-ai-box textarea {
    position: relative;
    z-index: 2;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
}

/* A one-line chat box beside its button */
.ux2-ai-field--line {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 12px;
}

.ux2-ai-field.ux2-ai-field--line:not(.ux2-ai-box) > textarea,
.ux2-ai-field.ux2-ai-field--line:not(.ux2-ai-box) > textarea.form-control {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 12px;
}

/* The box inside: no edge, no fill of its own */
.ux2-ai-field:not(.ux2-ai-box) > textarea,
.ux2-ai-field:not(.ux2-ai-box) > textarea.form-control {
    position: relative;
    z-index: 2;
    min-height: 88px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ux2k-ink, #010b13);
    background: transparent !important;
    border: 0 !important;
    border-radius: 16px;
    box-shadow: none !important;
    resize: vertical;
}

.ux2-ai-field > textarea::placeholder {
    color: var(--ux2s-quiet, #7c8ea3);
}

.ux2-ai-field-foot {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px 10px 16px;
}

.ux2-ai-field-foot > :first-child:not(.ux2-btn) {
    margin-right: auto;
    font-size: 12.5px;
    color: var(--ux2k-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
    .ux2-ai-field:focus-within::before,
    .ux2-ai-field:focus-within::after {
        animation: none;
    }
}

html.ux2-calm .ux2-ai-field:focus-within::before,
html.ux2-calm .ux2-ai-field:focus-within::after {
    animation: none;
}

/* ---------- The round SKOAI button in a chat box (Diskover, the learner's "Ask about this module") ----------
   <button class="ux2-ai-send" aria-label="Ask SKOAI" title="Ask SKOAI"><i class="bi bi-stars" aria-hidden="true"></i></button>
   The SKOAI symbol on violet; on hover it makes a half-turn and a faint pink glow comes up. .is-stop while an answer
   is coming in (a stop square on ink). Words stay on buttons where SKOAI makes something (Create, Draft the …). */
button.ux2-ai-send {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 4px 14px -4px rgb(109 40 217 / .45);
    cursor: pointer;
    transition: box-shadow .2s ease, transform .1s ease;
}

button.ux2-ai-send i {
    display: inline-block;
    transition: transform .5s cubic-bezier(.34, 1.3, .64, 1);
}

button.ux2-ai-send:hover:not(:disabled) {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 6px 18px -4px rgb(219 39 119 / .4);
}

button.ux2-ai-send:hover:not(:disabled):not(.is-stop) i {
    transform: rotate(180deg);
}

button.ux2-ai-send:active:not(:disabled) {
    transform: scale(.94);
}

button.ux2-ai-send:focus-visible {
    outline: 3px solid var(--ux2k-ring, rgb(109 40 217 / .35));
    outline-offset: 2px;
}

button.ux2-ai-send:disabled {
    cursor: default;
    opacity: .4;
    box-shadow: none;
}

button.ux2-ai-send.is-stop {
    background: var(--ux2k-ink, #010b13);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    button.ux2-ai-send i {
        transition: none;
    }

    button.ux2-ai-send:hover:not(:disabled) i {
        transform: none;
    }
}

html.ux2-calm button.ux2-ai-send:hover:not(:disabled) i {
    transform: none;
}

/* ---------- A SKOAI action you point at (.ux2-ai-hover), e.g. SKOAI Studio's tool cards ----------
   When the pointer or keyboard reaches it, the same pink-to-blue streak runs once round its edge, then fades: "this one
   runs SKOAI", at the moment of choosing. Only on hover / focus, never on its own, so a page full of SKOAI actions stays
   calm. The element keeps its own look otherwise. Reduced motion / Display → Calm: nothing moves. */
.ux2-ai-hover {
    --ux2-ai-streak: transparent 0deg, transparent 285deg, #db2777 305deg, #7c3aed 332deg, #3b82f6 356deg, transparent 360deg;
    position: relative;
}

.ux2-ai-hover::after {
    position: absolute;
    inset: -1px;
    z-index: 1;
    padding: 2px; /* the same 2px streak as the SKOAI text boxes, so it looks alike wherever it runs */
    content: "";
    pointer-events: none;
    background: conic-gradient(from var(--ux2-ai-a), var(--ux2-ai-streak));
    border-radius: inherit;
    opacity: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.ux2-ai-hover:hover:not(:disabled):not([aria-disabled="true"])::after,
.ux2-ai-hover:focus-visible::after {
    animation: ux2-ai-run 1.3s linear 1, ux2-ai-once 1.3s ease forwards;
}

@keyframes ux2-ai-once {
    0% { opacity: 0; }
    12%, 78% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ux2-ai-hover::after {
        animation: none !important;
    }
}

html.ux2-calm .ux2-ai-hover::after {
    animation: none !important;
}