#ai {
    padding: 0 1rem 1rem 1rem;
    /* overflow-y: scroll; */
    height: 100%;
    display: grid;
    row-gap: 16px;
    align-content: start;
    grid-template-rows: 1fr auto;
    &.settings {
        grid-template-rows: auto 1fr auto;
    }

    .title {
        .title();
    }

    input {
        .input();
    }
    textarea {
        .input();
        width: 100%;
    }

    .button {
        .button();
    }

    .panel {
        .panel();
    }

    .header {
        grid-auto-flow: column;
        column-gap: 16px;
        justify-content: left;
        display: none;
        &:is(#ai.settings *) {
            display: grid;
        }

        .button {
            min-height: 2.25rem;
        }

        .password.widget {
            .password_widget();
        }

        label {
            display: grid;
            grid-template-columns: auto auto;
            gap: 12px;
        }
    }

    .main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        column-gap: 1rem;
        overflow: hidden; /* Чтобы поджать .chat */
        
        .chat {
            .panel();
            display: grid;
            row-gap: 16px;
            overflow-y: scroll;
            align-content: start;
            scroll-behavior: smooth;
    
            .msg {
                .panel();
                &:is(.dark *) {
                    color: #c7c7c7;
                }
                .controls {
                    display: grid;
                    grid-auto-flow: column;
                    justify-content: space-between;
                    .role:is(.dark *) {
                        color: #d5bfae;
                    }
                    .del {
                        cursor: pointer;
                        aspect-ratio: 1/1;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 30px;
                        &:is(.dark *) { background-image: var(--icon-trash-dark); }
                        &:is(.light *) { background-image: var(--icon-trash-light); }
                    }
                }
                .content {
                    font-family: var(--monospace);
                    font-size: var(--monospace-size);
                    white-space: pre-wrap;
                }
            }
        }

        .side {
            overflow: auto;
            .panel();

            .select.widget {
                .select_widget();
                .option {
                    display: grid;
                    grid-auto-flow: column;
                    grid-template-columns: 1fr auto;
                    .preset {
                       align-content: center;
                    }
                    .del {
                        aspect-ratio: 1/1;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 30px;
                        &:is(.dark *) { background-image: var(--icon-trash-dark); }
                        &:is(.light *) { background-image: var(--icon-trash-light); }
                    }
                }
            }

            grid-template-rows: auto 12rem 8rem 1fr;

            textarea {
                resize: none;
                height: 100%;
            }
        }
    }


    >.user {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-auto-flow: column;
        column-gap: 16px;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            left: 1px;
            top: 1px;
            z-index: 1;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #1e1d1d;
        }
        &.think::before {
            animation: blink 3s infinite;
            background-color: #bf663b;
        }

        /* Анимация мерцания (blink) */
        @keyframes blink {
            0%   { opacity: 1;  filter: brightness(1); }
            25%  { opacity: 0.6; filter: brightness(0.8); }
            50%  { opacity: 1;  filter: brightness(1.2); }
            75%  { opacity: 0.6; filter: brightness(0.9); }
            100% { opacity: 1;  filter: brightness(1); }
        }

        textarea {
            resize: vertical;
            min-height: 100%;
        }

        .buttons {
            display: grid;
            gap: 0.5rem;
            grid-template-areas:
            "clear settings"
            "send  stop";

            .button {
                height: 2.25rem;
            }

            .send { grid-area: send; }
            .stop { grid-area: stop; }
            .clear { grid-area: clear; }
            .settings { grid-area: settings; }
        }
    }
}