:root {
    --transition: 0.25s;
    --spark: 1.8s;
}


.sparkle-button a {
    --cut: 0.1em;
    --active: 0;
    --bg:
            radial-gradient(
                    40% 50% at center 100%,
                    hsl(270 calc(var(--active) * 97%) 72% / var(--active)),
                    transparent
            ),
            radial-gradient(
                    80% 100% at center 120%,
                    hsl(260 calc(var(--active) * 97%) 70% / var(--active)),
                    transparent
            ),
            hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));
    background: var(--bg);
    font-size: 1.5rem;
    font-weight: 500;
    border: 0;
    cursor: pointer;
    padding: 4px 25px 2px 15px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 0.25em;
    white-space: nowrap;
    border-radius: 100px;
    position: relative;

    transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
    scale: calc(1 + (var(--active) * 0.1));
}

.sparkle-button a:active {
    scale: 1;
}

svg {
    overflow: visible !important;
}

.sparkle path {
    color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
    transform-box: fill-box;
    transform-origin: center;
    fill: currentColor;
    stroke: currentColor;
    -webkit-animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
    animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    transition: color var(--transition);
}

.sparkle-button a:is(:hover, :focus-visible) path {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

@-webkit-keyframes bounce {
    35%, 65% {
        scale: var(--scale);
    }
}

@keyframes bounce {
    35%, 65% {
        scale: var(--scale);
    }
}
.sparkle path:nth-of-type(1) {
    --scale: 0.5;
    --delay: 0.1;
    --base: 40%;
}

.sparkle path:nth-of-type(2) {
    --scale: 1.5;
    --delay: 0.2;
    --base: 20%;
}

.sparkle path:nth-of-type(3) {
    --scale: 2.5;
    --delay: 0.35;
    --base: 30%;
}



@-webkit-keyframes flip {
    to {
        rotate: 360deg;
    }
}

@keyframes flip {
    to {
        rotate: 360deg;
    }
}


.spark:after {
    content: "";
    position: absolute;
    inset: var(--cut);
    border-radius: 100px;
}


@-webkit-keyframes rotate {
    to {
        transform: rotate(90deg);
    }
}

@keyframes rotate {
    to {
        transform: rotate(90deg);
    }
}



@supports(selector(:has(:is(+ *)))) {
    body:has(.sparkle-button a:is(:hover, :focus-visible)) {
        --active: 1;
        --play-state: running;
    }
    .bodydrop {
        display: none;
    }
}

.sparkle-button a:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {
    --active: 1;
    --play-state: runnin;
}





.sparkle-button a:is(:hover, :focus-visible) {
    --active: 1;
    --play-state: running;
}


.sparkle-button {
    position: relative;
    background: transparent !important;
}

@media screen and (max-width: 768px) {
    .sparkle-button {
        bottom: 70px;
        right: 10px;
    }
    #app{
        padding-top: 50px !important;
        margin-bottom: 100px!important;
    }

}

.sparkle-button .particle {
    fill: white;
    width: calc(var(--size, 0.25) * 1rem);
    aspect-ratio: 1;
    position: absolute;
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
    opacity: var(--alpha, 1);
    -webkit-animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
    animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
    transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
    z-index: -1;
    -webkit-animation-play-state: var(--play-state, paused);
    animation-play-state: var(--play-state, paused);
}

.sparkle-button .particle path {
    fill: hsl(0 0% 90%);
    stroke: none;
}



@-webkit-keyframes float-out {
    to {
        rotate: 360deg;
    }
}

@keyframes float-out {
    to {
        rotate: 360deg;
    }
}

.sparkle-button .text {
    translate: 2% -6%;
    letter-spacing: 0.01ch;
    background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
    -webkit-background-clip: text;
    color: rgba(255, 255, 255, 0.5);;
    transition: background var(--transition);
}

.sparkle-button a svg {
    inline-size: 1.25em;
    translate: -25% -5%;
}

:root {
    --brand-primary: #b9338b;
    --brand-secondary: #d17ab3;
    --tablet-mq: 768px;
}

.elektor-gpt{
    padding: 0;
    margin: 0;
}

.flex-col {
    flex-flow: column;
}

.flex-grow {
    flex-grow: 1;
}

.elektor-gpt >div {
    background: linear-gradient(to bottom, var(--brand-primary), var(--brand-secondary));
    padding: 20px;
}

.elektor-gpt-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 20px;
    color: #fff;
    font-size: 14px;
}

.elektor-gpt-messages-container {
    position: relative;
    gap: 20px;
    border-radius: 20px;
    padding: 20px;
    background: #fff;
}

.elektor-gpt-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 100px;
}

.elektor-gpt-scroll:hover {
    background: rgba(0, 0, 0, 0.08);
}

.elektor-gpt-scroll i {
    color: rgba(0, 0, 0, 0.5);
}

.elektor-gpt-messages {
    gap: 20px;
}

.elektor-gpt-item {
    &.elektor-gpt-role-assistant {
        justify-content: flex-start;
    }

    &.elektor-gpt-role-user {
        justify-content: flex-end;
    }

    &.elektor-gpt-role-loading {
        background: linear-gradient(
                to right,
                #000 20%,
                #b9338b 30%,
                #b9338b 70%,
                #000 80%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        background-size: 500% auto;
        animation: textShine 3s ease-in-out infinite;
    }
}

.elektor-gpt-message {
    max-width: 90%;
    padding: 10px 20px;
    background: rgba(209, 122, 179, 0.1);
    border-radius: 20px;

    a {
        color: #000;
        &:hover {
            text-decoration: underline;
        }
    }

    .elektor-gpt-link {
        max-width: 50%;
        display: inline-block;
        padding: 4px 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: middle;
        border-radius: 1000px;
        font-size: 13px;
        color: #b9338b;
        background: rgb(241, 215, 232);
    }

    .elektor-gpt-link:hover {
        background: rgb(235, 209, 226);
    }
}

.elektor-gpt-role-user {
    .elektor-gpt-message {
        background: rgba(209, 122, 179, 0.3);
    }
}

.elektor-gpt-message p:last-child {
    margin-bottom: 0;
}

#elektor-gpt-form-marker {
    position: absolute;
    margin-top: -200px;
}

.elektor-gpt-input-container form {
    flex-flow: column;
    gap: 10px;
}

.elektor-gpt-input-container input,
.elektor-gpt-input-container button {
    border-radius: 20px;
}

.elektor-gpt-clear {
    position: relative;
    flex-shrink: 0;
    margin: 0;
    align-items: center;
    font-weight: normal;
    font-size: 16px;
    color: rgba(0, 0, 0, 1);

    input {
        margin: 0;
    }
}

.elektor-gpt-clear.loading {
    color: transparent;
}

.elektor-gpt-clear.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #000;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@media (max-width: 1024px) {
    .elektor-gpt .c-layout-content {
        margin: 30px 10px;
    }

    .elektor-gpt-message {
        ul, ol {
            padding-left: 20px;
        }
    }
}

@media (min-width: 1024px) {
    .elektor-gpt-header {
        grid-template-columns: 1fr 4fr;
    }

    .elektor-gpt-message {
        max-width: 70%;
    }

    .elektor-gpt-input-container form {
        flex-flow: row;
    }
}

.elektor-gpt .c-layout-page.container {
    background: linear-gradient(to bottom, var(--brand-primary), var(--brand-secondary));
    margin-bottom: -20px;
    padding-bottom: 20px;
}

.elektor-gpt-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 20px;
    color: #fff;
    font-size: 14px;
}

.elektor-gpt-messages-container {
    position: relative;
    gap: 20px;
    border-radius: 20px;
    padding: 20px;
    background: #fff;
}

.elektor-gpt-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 100px;
}

.elektor-gpt-scroll:hover {
    background: rgba(0, 0, 0, 0.08);
}

.elektor-gpt-scroll i {
    color: rgba(0, 0, 0, 0.5);
}

.elektor-gpt-messages {
    gap: 20px;
}

.elektor-gpt-item.elektor-gpt-role-assistant {
    justify-content: flex-start;
}

.elektor-gpt-item.elektor-gpt-role-user {
    justify-content: flex-end;
}

.elektor-gpt-item.elektor-gpt-role-loading {
    background: linear-gradient(to right, #000 20%, var(--brand-primary) 30%, var(--brand-primary) 70%, #000 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 3s ease-in-out infinite;
}

.elektor-gpt-message {
    max-width: 90%;
    padding: 10px 20px;
    background: rgba(209, 122, 179, 0.1);
    border-radius: 20px;
}

.elektor-gpt-message a {
    color: var(--brand-primary);
}

.elektor-gpt-message a:hover {
    text-decoration: underline;
}

.elektor-gpt-link {
    max-width: 50%;
    display: inline-block;
    padding: 4px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 1000px;
    font-size: 13px;
    color: var(--brand-primary);
    background: rgb(241, 215, 232);
}

.elektor-gpt-link:hover {
    background: rgb(235, 209, 226);
}

.elektor-gpt-role-user .elektor-gpt-message {
    background: rgba(209, 122, 179, 0.3);
}

.elektor-gpt-message p:last-child {
    margin-bottom: 0;
}

#elektor-gpt-form-marker {
    position: absolute;
    margin-top: -200px;
}

.elektor-gpt-input-container form {
    flex-flow: column;
    gap: 10px;
}

.elektor-gpt-input-container input,
.elektor-gpt-input-container button {
    border-radius: 20px;
}

.elektor-gpt-clear {
    position: relative;
    flex-shrink: 0;
    margin: 0;
    align-items: center;
    font-weight: normal;
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
}

.elektor-gpt-clear input {
    margin: 0;
}

.elektor-gpt-clear.loading {
    color: transparent;
}

.elektor-gpt-clear.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #000;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@media (max-width: 768px) {
    .elektor-gpt .c-layout-content {
        margin: 30px 10px;
    }

    .elektor-gpt-message ul,
    .elektor-gpt-message ol {
        padding-left: 20px;
    }
}

@media (min-width: 768px) {
    .elektor-gpt-header {
        grid-template-columns: 1fr 4fr;
    }

    .elektor-gpt-message {
        max-width: 70%;
    }

    .elektor-gpt-input-container form {
        flex-flow: row;
    }
}

iframe#gptFrame {
    min-height: calc(100vh - 419px);
}
section.container.Magazine.c-content-tab-1.elektor-gpt {
    max-width: 100% !important;
}