@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-.3em);
    }
}

.chat-component {

    & .chat-container {

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 1em;
        height: 100vh;

        & .chat-history {

            overflow-y: auto;
            border: 1px solid var(--light-color);
            display: flex;
            flex-direction: column;
            border-radius: 1rem;
            padding: 1em;
            box-shadow: inset 0 1em 3em var(--ultralight-color);
            margin: 1em 0;

            & .chat-bubble {

                max-width: 90%;
                align-self: flex-start;
                border-radius: 1rem;
                margin: 1em;
                padding: 0 1em;
                background-color: var(--bg-color);
                border: 1px solid var(--light-color);

                &.role-user {
                    align-self: flex-end;
                    background-color: var(--primary-color);
                    color: var(--inv-color);
                    border: none;
                    border-bottom-right-radius: 0;
                }

                &.role-bot {
                    border-bottom-left-radius: 0;
                }

                & > div {
                    max-width: 50em;

                    &.typing-indicator {
                        font-size: 180%;
                        line-height: 1;
                        padding-top: .5rem;

                        & span {
                            display: inline-block;
                            animation: typing-bounce 1.4s infinite ease-in-out;

                            &:nth-child(1) {
                                animation-delay: 0s;
                            }

                            &:nth-child(2) {
                                animation-delay: 0.2s;
                            }

                            &:nth-child(3) {
                                animation-delay: 0.4s;
                            }
                        }
                    }
                }
            }

            & .chat-attachments {

                & ul {
                    margin: 0 0 1em 0;

                    & li:after {
                        content: '➔';
                        display: inline-block;
                        rotate: -45deg;
                        margin-left: 0.3em;
                    }
                }

                & a {
                    color: var(--light-color);

                    &:hover {
                        color: var(--primary-color);
                    }
                }

            }
        }

        & form.chat-prompt {

            display: flex;
            gap: 1em;
            margin: 1em 0;

            & textarea {

                flex: 1 1 auto;
                border: 1px solid var(--light-color);
                border-radius: 1rem;
                padding: 1em;
                min-height: 3em;

            }

            & button {
                flex: 0 1 auto;
                background-color: var(--primary-color);
                color: var(--inv-color);
                border: none;
                padding: 1em 2em;
                border-radius: 1rem;
            }

        }

    }

}