.gl-chat {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
    width: 100%;
}

.gl-chat-date {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    padding: 8px 16px;
    margin-top: 1rem;
    background: var(--colors-bg-component-bg-grey-accentued, #DFE5F3);
    color: var(--colors-text-text-secondary, rgba(86, 113, 145, 1));
}

.gl-chat-date:first-of-type {
    margin-top: 0;
}

.gl-chat-message-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
}

.gl-chat-message {
    display: flex;
    gap: 0.5rem;
}

.gl-chat-message__author {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--colors-text-text-primary, #394759);
}

.gl-chat-message__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0;
    border-radius: 4px 16px 16px 4px;
    background-color: var(--colors-bg-component-bg-grey-regular, rgba(240, 243, 250, 1));
    color: var(--colors-text-text-primary, #394759);
}

.gl-chat-message__content p {
    margin: 0;
}

.gl-chat-message__date {
    align-self: flex-end;
    color: var(--colors-text-text-terciary, #8193A8);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.gl-chat-message__content:hover + .gl-chat-message__date {
    opacity: 1;
}

.gl-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.gl-chat-form__textarea {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    min-height: 2.5rem;
    padding: 0.5rem;
    border-radius: var(--border-radius-default);
    border: 1px solid var(--colors-border-border-regular, #F0F3FA);
    background: var(--colors-bg-component-bg-grey-light, #F9FBFF);
    color: var(--colors-text-text-primary, #394759);
    transition: all 0.2s ease-in-out;
}

.gl-chat-form__textarea:focus {
    border-color: var(--colors-product-product, #394759);
    background: var(--colors-product-product-light, rgba(57, 71, 89, 0.08));
    outline: none !important;
    box-shadow: none !important;
}

/* Current user */
.gl-chat-message[data-variant="current-user"] {
    justify-content: flex-end;
}

.gl-chat-message[data-variant="current-user"] .gl-chat-message__author {
    color: var(--colors-text-text-white, #FFFFFF);
}

.gl-chat-message[data-variant="current-user"] .gl-chat-message__content {
    background-color: var(--colors-integrations-sms, rgba(21, 95, 126, 1));
    color: var(--colors-text-text-white, #FFFFFF);
}

.gl-chat-message[data-variant="current-user"] .gl-chat-message__date {
    order: -1;
}

.gl-chat-message[data-variant="current-user"] + .gl-chat-message:not([data-variant="current-user"]) {
    margin-top: 1rem;
}

.gl-chat-message:not([data-variant="current-user"]) + .gl-chat-message[data-variant="current-user"] {
    margin-top: 1rem;
}

.gl-chat-message[data-variant="current-user"] .gl-chat-message__content {
    border-radius: 16px 4px 4px 16px;
}

.gl-chat-message[data-variant="current-user"]:last-child .gl-chat-message__content {
    border-radius: 16px 4px 16px 16px;
}

.gl-chat-message:last-child:not([data-variant="current-user"]) .gl-chat-message__content {
    border-radius: 4px 16px 16px 16px;
}

.gl-chat-message:not([data-variant="current-user"]):first-child .gl-chat-message__content,
.gl-chat-message[data-variant="current-user"] + .gl-chat-message:not([data-variant="current-user"]) .gl-chat-message__content {
    border-radius: 16px 16px 16px 4px !important;
}

.gl-chat-message[data-variant="current-user"]:first-child .gl-chat-message__content,
.gl-chat-message:not([data-variant="current-user"]) + .gl-chat-message[data-variant="current-user"] .gl-chat-message__content {
    border-radius: 16px 16px 4px 16px !important;
}

/* Other */
.modal-body:has(.gl-chat) {
    max-height: 55vh !important;
}

.modal-footer:has(.gl-chat-form) {
    margin-top: 0 !important;
}