#aiBackground {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: -1;
}

#aiBackground svg {
    width: 100%;
    height: 100%;
}
@property --pointer-d {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}
@property --glow-r-mod {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}
@property --glow-boost-mod {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}

#glowing-edge-overlay {
    --color-sens: calc(var(--glow-sens, 30) + 20);
    --stroke: 4px;

    --glow-r-mod: 1;
    --glow-boost-mod: 0%;
    --pointer-d: 0;

    --glow-r-eff: calc(var(--glow-r, 1) * var(--glow-r-mod));
    --glow-boost-eff: calc(var(--glow-boost, 0%) + var(--glow-boost-mod));
    --pointer-°: 45deg;

    --cone-line: conic-gradient(
        from var(--pointer-°) at center, black 25%, transparent 40%, transparent 60%, black 75%
    );
    --cone-glow: conic-gradient(
        from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

    position: fixed;
    inset: 0;
    pointer-events: none;
    isolation: isolate;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#glowing-edge-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    transition: opacity 0.25s ease-out;

    border: var(--stroke) solid transparent;

    background:
        linear-gradient(var(--card-bg) 0 100%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
        radial-gradient(at 80% 55%, color-mix(in hsl, var(--line-color, #d44949), white 20%) 0px, transparent 50%) border-box,
        radial-gradient(at 69% 34%, var(--line-color, #d44949) 0px, transparent 50%) border-box,
        radial-gradient(at 8% 6%, color-mix(in hsl, var(--line-color, #d44949), white 35%) 0px, transparent 50%) border-box,
        radial-gradient(at 41% 38%, color-mix(in hsl, var(--line-color, #d44949), black 12%) 0px, transparent 50%) border-box,
        radial-gradient(at 86% 85%, color-mix(in hsl, var(--line-color, #d44949), white 8%) 0px, transparent 50%) border-box,
        radial-gradient(at 82% 18%, color-mix(in hsl, var(--line-color, #d44949), black 25%) 0px, transparent 50%) border-box,
        radial-gradient(at 51% 4%, color-mix(in hsl, var(--line-color, #d44949), black 5%) 0px, transparent 50%) border-box,
        linear-gradient(color-mix(in hsl, var(--line-color, #d44949), black 15%) 0 100%) border-box;

    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
    mask-image: var(--cone-line);
    -webkit-mask-image: var(--cone-line);
}

#glowing-edge-overlay > .glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    mask-image: var(--cone-glow);
    -webkit-mask-image: var(--cone-glow);

    opacity: calc((var(--pointer-d) - var(--glow-sens, 30)) / (100 - var(--glow-sens, 30)));
    mix-blend-mode: var(--glow-blend, plus-lighter);
}

#glowing-edge-overlay > .glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 var(--stroke) hsl( var(--glow-color, 348deg 100% 51%) / 100%),

        inset 0 0 calc(1px * var(--glow-r-eff)) 0 hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 60%)),
        inset 0 0 calc(3px * var(--glow-r-eff)) 0 hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 50%)),
        inset 0 0 calc(6px * var(--glow-r-eff)) 0 hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 40%)),
        inset 0 0 calc(15px * var(--glow-r-eff)) 0 hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 30%)),
        inset 0 0 calc(25px * var(--glow-r-eff)) 2px hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 20%)),
        inset 0 0 calc(50px * var(--glow-r-eff)) 2px hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 10%)),

        0 0 calc(1px * var(--glow-r-eff)) 0 hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 60%)),
        0 0 calc(3px * var(--glow-r-eff)) 0 hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 50%)),
        0 0 calc(6px * var(--glow-r-eff)) 0 hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 40%)),
        0 0 calc(15px * var(--glow-r-eff)) 0 hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 30%)),
        0 0 calc(25px * var(--glow-r-eff)) 2px hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 20%)),
        0 0 calc(50px * var(--glow-r-eff)) 2px hsl( var(--glow-color, 348deg 100% 51%) / calc(var(--glow-boost-eff) + 10%));
}

/* State 1: "Lettura" (Focus on #chat-input -> .listening) */
body.aiReading #glowing-edge-overlay,
#glowing-edge-overlay.listening {
    opacity: 1;
    --cone-line: linear-gradient(black, black);
    --cone-glow: linear-gradient(black, black);
    animation:
        listenPulse 1.9s ease-in-out infinite,
        listenSize  3.1s ease-in-out infinite,
        listenBoost 2.3s ease-in-out infinite;
}

@keyframes listenPulse {
    0%   { --pointer-d: 58; }
    17%  { --pointer-d: 81; }
    34%  { --pointer-d: 67; }
    51%  { --pointer-d: 100; }
    68%  { --pointer-d: 73; }
    85%  { --pointer-d: 92; }
    100% { --pointer-d: 58; }
}

@keyframes listenSize {
    0%   { --glow-r-mod: 1; }
    29%  { --glow-r-mod: 1.3; }
    62%  { --glow-r-mod: 0.85; }
    100% { --glow-r-mod: 1; }
}

@keyframes listenBoost {
    0%   { --glow-boost-mod: 0%; }
    43%  { --glow-boost-mod: 12%; }
    77%  { --glow-boost-mod: 4%; }
    100% { --glow-boost-mod: 0%; }
}

/* State 2: "Scrittura" (body.aiThinking -> .sending) */
body.aiThinking #glowing-edge-overlay,
#glowing-edge-overlay.sending {
    opacity: 1;
    --glow-r: 2.8;
    --glow-boost: 35%;
    --pointer-d: 100;
    --cone-line: conic-gradient(
        from var(--pointer-°) at center, black 25%, transparent 40%, transparent 60%, black 75%
    );
    --cone-glow: conic-gradient(
        from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
}

.ai-suggested-question .icon {
    display: block;
    color: var(--text-body, #030F13);
}
.ai-suggested-question .body-regular {
    color: var(--surface-accent, #02778E);
}

.ai-suggested-question .btn {
    display: none;
}

#ai-chat {
    display: none;
}

#ai-chat[style*='display: block'] {
    display: flex !important;
}

#open-ai-chat {
    margin-top: 20px;
}

#chat-input-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-button-form-label-gap, 4px);
}

#chat-input {
    background: var(--surface-card, #FFF);
    border-radius: var(--radius-list-item, 16px);
    border: none;
    display: flex;
    padding: var(--spacing-list-item-padding, 12px) var(--spacing-list-item-gap-small, 4px) var(--spacing-list-item-padding, 12px) var(--spacing-list-item-padding, 12px);
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0;
    resize: none;
}
#chat-input:focus {
    border: none;
    outline: none;
}

#send-btn .icon {
    width: 22px;
    height: 22px;
}


.chat-bubble {
    max-width: 80%;
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-list-item, 16px);
    line-height: 1.4;
    font-size: 14px;
    word-wrap: break-word;
}

.chat-bubble.user {
    background: var(--surface-item, #FFF);
    color: var(--text-body, #030F13);

    align-self: flex-end;
    margin-left: auto;
}

.chat-bubble.ai {
    background: var(--color-teal-1000, #02778E);
    color: var(--text-on-dark, #FFF);
}


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    85% {
        transform: scale(0.97);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pulse-animation {
    animation: pulse 1s ease-in-out infinite;
}


.caret {
    border-right: .05em solid #535d6e;
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% {
        border-color: transparent;
    }
}