#ai_chat {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
    width: 100%;
    height: 100vh;

    position: relative;
    overflow: hidden;
    /*background-color: oklch(0.2 0.011 268.074);*/

    #info {
        /*background-color: oklch(0.2 0.011 268.074);*/
        border-bottom: 1px solid var(--border);

        width: 100%;
        height: fit-content;
        text-align: center;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px; /* for horizontal bars */
    }

    /*::-webkit-scrollbar-track {
        background-color: var(--surface1);
    }*/

    #chats {
        width: 100%;
        padding: 2vw;
        padding-right: 15vw;
        display: flex;
        row-gap: 2vh;
        flex-direction: column;
        overflow: scroll;
        flex: 1;

        padding-bottom: 10vh;

        .message {
            min-width: 150px;
            width: fit-content;
            /*height: fit-content;*/
            background-color: var(--surface1);
            /*border-radius: 4px;*/
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            overflow: hidden;
            flex-shrink: 0;
            gap: 8;

            .author {
                background-color: var(--surface2);
                /*width: 100%;*/
                display: block;
                padding-left: 10px;
                padding-top: 5px;
                padding-bottom: 5px;
            }

            .content {
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;

                details {
                    transition: background-color 0.2s ease-out;
                    background-color: var(--surface2);
                    border-radius: 4px;
                    margin-bottom: 10px;

                     &:has(summary:hover) {
                        background-color: var(--hover2);
                        transition: background-color 0.05s ease-in !important;
                    }

                    &:has(summary:active) {
                        background-color: var(--pressed2);
                    }

                    summary {
                        list-style: none;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        user-select: none;
                        padding-left: 10px;
                        padding-right: 10px;
                        padding-top: 8px;
                        padding-bottom: 8px;

                        .icon {
                            /*position: relative;*/
                            height: 22px;
                            width: 22px;

                            /* hugeicons:ai-brain-01 - MIT */
                            --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7 4.5a3 3 0 0 0-2.567 4.554a3.001 3.001 0 0 0 0 5.893M7 4.5a2.5 2.5 0 0 1 5 0v15a2.5 2.5 0 0 1-5 0a3 3 0 0 1-2.567-4.553M7 4.5c0 .818.393 1.544 1 2m-3.567 8.447A3 3 0 0 1 6 13.67m11 5.83a3 3 0 0 0 2.567-4.554a3.001 3.001 0 0 0 0-5.893M17 19.5a2.5 2.5 0 0 1-5 0v-15a2.5 2.5 0 0 1 5 0a3 3 0 0 1 2.567 4.553M17 19.5c0-.818-.393-1.544-1-2m3.567-8.447A3 3 0 0 1 18 10.33'/%3E%3C/svg%3E");
                            background-color: currentColor;
                            -webkit-mask-image: var(--svg);
                            mask-image: var(--svg);
                            -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                            -webkit-mask-size: 100% 100%;
                            mask-size: 100% 100%;
                        }
                    }

                    &[open] summary {
                      border-bottom: 1px solid var(--border2);
                      padding-bottom: 10px;
                    }

                    /* TODO add animation when open/closing*/

                    /* This is the actual text when unfolded*/
                    p {
                        padding-left: 10px;
                        padding-right: 10px;
                        padding-bottom: 8px;
                        padding-top: 10px;
                        color: var(--text-muted);
                        font-size: 14px;
                    }
                }

                p {
                    white-space: pre-wrap;
                }
            }
        }
    }

    #input {
        /*background-color: oklch(0.2 0.011 268.074);*/
        /*position: sticky;*/
        /*border-top: 1px solid var(--border);*/

        width: 100%;
        /*bottom: 0;*/
        padding-bottom: 5vh;
        padding-top: 1vh;
        justify-content: center;
        align-items: center;
        display: flex;

        form {
            background-color: var(--surface1);
            border-radius: 4px;
            border: none;
            width: 90%;
            height: 8vh;
            min-height: 50px;
            outline: unset;
            position: relative;

            outline: 1.5px solid transparent;
            outline-offset: 0; /*Fix the thing resizing for whatever reason*/

            transition:
                outline-color 0.4s ease-out,
                background-color 0.4s ease-out,
                box-shadow 2s ease-out;

            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

            &:hover {
                transition:
                    outline-color 0.15s ease-in,
                    background-color 0.15s ease-in,
                    box-shadow 0.15s  ease-in !important;
                background-color: var(--hover1);
                outline-color: var(--border);

                #submit_button {
                    background-color: var(--hover2);

                    &:hover {
                        background-color: var(--hover3) !important;
                        outline-color: var(--hover3);

                        &:active {
                            background-color:var(--hover3);
                            outline-color: transparent;
                        }
                    }

                    transition:
                        outline-color 0.15s ease-in,
                        background-color 0.15s ease-in,
                        opacity 0.15s ease-in;
                }
            }
            &:has(textarea:focus) {
                transition:
                    outline-color 0.4s ease-in,
                    background-color 0.15s ease-in,
                    box-shadow 2s  ease-in  !important;

                background-color: var(--surface1) !important;
                outline-color: var(--hover3);

                #submit_button {
                    background-color: var(--surface2);
                    outline-color: var(--hover3);

                    transition:
                        outline-color 0.4s ease-in,
                        background-color 0.15s ease-in
                        opacity 0.15s ease-in;

                    &:hover {
                        background-color: var(--hover2);

                        &:active {
                            background-color:var(--hover3);
                            outline-color: transparent;
                        }
                    }
                }
            }

            textarea {
                width: 100%;
                height: 100%;
                /*max-width: 100%;*/
                background-color: transparent;
                border: unset;
                outline: unset;

                padding-left: 2vw;
                padding-right: 8vw;
                padding-top: 2vh;
                resize: none;

                &::placeholder {
                    color: var(--text-muted);
                    opacity: 1;
                }
            }

            /* When the textarea is hidden */
            &:has(textarea:placeholder-shown) #submit_button {
                opacity: 0;
                pointer-events: none;

                transition:
                    outline-color 0.2s ease-out,
                    background-color 0.2s ease-out,
                    opacity 0.2s ease-out !important;
            }

            div {
                position: absolute;
                bottom: 0px;
                z-index: 1;
                pointer-events: none;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;

                #submit_button {
                    z-index: 2;
                    cursor: pointer;
                    pointer-events: auto;
                    height: 40px;
                    width: 40px;
                    position: absolute;
                    right: 2vw;
                    background-color: var(--surface1);
                    border: none;
                    border-radius: 4px;
                    opacity: 1;
                    padding: 5px;

                    outline: 1.5px solid transparent;
                    outline-offset: 0; /*Fix the thing resizing for whatever reason*/

                    /* Transition when clicking off the textarea */
                    transition:
                        outline-color 0.4s ease-out,
                        background-color 0.4s ease-out,
                        opacity 0.15s ease-in;

                    .icon {
                        position: relative;
                        height: 100%;
                        width: 100%;

                        /* famicons:return-down-back-outline */
                        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='m112 352l-64-64l64-64'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M64 288h294c58.76 0 106-49.33 106-108v-20'/%3E%3C/svg%3E");
                        background-color: currentColor;
                        -webkit-mask-image: var(--svg);
                        mask-image: var(--svg);
                        -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                        -webkit-mask-size: 100% 100%;
                        mask-size: 100% 100%;
                    }
                }
            }
        }
    }
}