@use "../../../../../common/styles/variables.scss" as commonVars;
@use "../../../../styles/variables.scss" as vars;


.chat-log {
    background: white;
    overflow-y: auto;

    img {
        max-width: 100%;
        height: auto;
    }

    .chat-message {
        display: flex;
        flex-direction: column;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin: 10px 0 10px 0;
        padding: 0;
        width: auto;

        .sender {
            color: #333;
            display: flex;
            font-weight: bold;

            .delete-message,
            .copy-message {
                color: vars.$default-highlight-color;
            }

            svg {
                display: block;
                height: 22px;
                width: auto;
                margin-right: 5px;
                cursor: pointer;
            }

            .spinner {
                color: #0078d7;
                animation: spin 0.8s linear infinite;
            }

            @keyframes spin {
                from {
                    transform: rotate(0deg);
                }

                to {
                    transform: rotate(360deg);
                }
            }
        }
    }

    a {
        all: unset;
        color: #0066cc;
        text-decoration: none;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }

        &:visited {
            color: vars.$default-highlight-color;
        }

        &:active {
            color: #cc0000;
        }
    }
}

.scroll-to-end {
    border: none;
    border-radius: vars.$default-border-radius;
    cursor: pointer;
    color: #fff;
    text-align: center;
    padding: 0;
    margin: 5px 0 5px 0;
    background-color: #a9a9a963;

    &:hover {
        background-color: #a9a9a982;
    }

    svg {
        height: 21px;
        width: auto;
        margin-top: 5px;
    }
}

.dark-theme {
    .chat-log {
        background: commonVars.$dark-theme-secondary-color;
        color: white;

        .chat-message {
            .sender {
                color: white;

                svg {
                    color: #9730f5;
                }
            }
        }
    }

    .scroll-to-end {
        background: commonVars.$dark-theme-secondary-color;

        &:hover {
            background: #2b2a2a;
        }

        svg {
            color: #666767;
        }
    }

}