@use "../../../../../../styles/utils" as *;

.thread-message {
    border-radius: 8px;
    background-color: var(--c--contextuals--background--surface--primary);
    padding-inline: var(--c--globals--spacings--base);
    padding-top: var(--c--globals--spacings--2xs);
    outline: 3px solid transparent;
    transition: outline-color 0.1s ease;
    max-width: 1600px;
}

.thread-message--folded {
    .thread-message__header {
        border-bottom: none;
    }

    .thread-message__footer {
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: hidden;
        display: none;
    }
}

.thread-message[data-trashed="true"] .banner {
    margin-bottom: var(--c--globals--spacings--xs);
}

.thread-message[data-unread="true"] {
    outline-color: var(--c--contextuals--border--semantic--brand--tertiary);
    outline-width: 2px;
}

.thread-message--delivery-failed,
.thread-message--delivery-retry {
    padding-top: 0;
    padding-inline: 0;

    > .banner:first-child {
        border-radius: 6px 6px 0 0;
        border: none;
    }

    > .thread-message__header,
    > .thread-message__body,
    > .thread-message__footer,
    > .thread-message__reply-form,
    > .thread-message__loading {
        padding-inline: var(--c--globals--spacings--base);
    }

    > .thread-message__header {
        padding-top: var(--c--globals--spacings--2xs);
    }
}

.thread-message--delivery-failed {
    outline-color: var(--c--contextuals--border--semantic--error--tertiary);
    outline-width: 2px;
}

.thread-message--delivery-retry {
    outline-color: var(--c--contextuals--border--semantic--warning--tertiary);
    outline-width: 2px;
}

.thread-message__header {
    border-bottom: 1px solid var(--c--contextuals--border--surface--primary);
    padding-bottom: var(--c--globals--spacings--base);
    position: relative;
    margin-bottom: var(--c--globals--spacings--base);
}

.thread-message__header-toggle {
    background: none;
    border-radius: 8px;
    position: absolute;
    left: calc(var(--c--globals--spacings--base) * -1);
    right: calc(var(--c--globals--spacings--base) * -1);
    top: calc(var(--c--globals--spacings--2xs) * -1);
    bottom: 0;
    border: none;
    padding: 0;
    margin: 0;
    display: block;
    cursor: pointer;
    &:disabled {
        cursor: default;
        pointer-events: none;
    }
}

.thread-message__header-toggle + div {
    position: relative;
    pointer-events: none;

    // Enable pointer events for all interactive elements
    button, a, input, textarea, select, .c__tooltip, [role="button"], [tabindex]:not([tabindex="-1"]) {
        pointer-events: auto;
    }
}

.thread-message__header-column--left {
    min-width: 0;
    flex: 1;
}

.thread-message__header-column--right {
    gap: var(--c--globals--spacings--xs);
    flex-shrink: 0;
}

.thread-message__header-actions {
    display: flex;
    flex-direction: row;
    gap: 0;
}

.thread-message__header-content {
    display: flex;
    flex-direction: row;
    gap: var(--c--globals--spacings--base);
    width: 100%;

    & > .thread-message__header-content-avatar {
        flex-shrink: 0;

        .c__avatar {
            height: 2rem;
            width: 2rem;
            font-size: var(--c--globals--font--sizes--sm);
            line-height: 2rem;
        }
    }


    & > .thread-message__header-content-info {
        flex: 1;
        min-width: 0;

        & .thread-message__sender-chip {
            min-width: 0;

            .contact-chip__identity-name {
                font-size: var(--c--globals--font--sizes--md);
            }

        }
    }

}

.thread-message__header-rows {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--c--globals--spacings--base);
    min-width: 0;
}

.thread-message__header-rows > div > * {
    margin-block: 0;
}

.thread-message__metadata {
    display: flex;
    flex-direction: row;
    gap: var(--c--globals--spacings--xs);
    align-items: center;
    font-size: var(--c--globals--font--sizes--xs);
    color: var(--c--contextuals--content--semantic--neutral--secondary);
}

.thread-message__date {
    text-align: right;
}

.thread-message__correspondents {
    display: grid;
    grid-template-columns: max-content 1fr;
    margin: 0;
    column-gap: var(--c--globals--spacings--2xs);
    align-items: baseline;
}

.thread-message__correspondents dt {
    font-size: var(--c--globals--font--sizes--sm);
}
.thread-message__correspondents dd {
    margin: 0;
    word-break: break-word;
    min-width: 0;
}

.thread-message__correspondents .recipient-chip-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.thread-message__body {
    width: 100%;
    height: auto;
    border: none;
    display: block;
}

.thread-message__footer {
    display: flex;
    flex-direction: column;
    gap: var(--c--globals--spacings--xl);
    margin-bottom: var(--c--globals--spacings--base);
}

.thread-message__footer-actions {
    display: flex;
    flex-direction: row;
    gap: var(--c--globals--spacings--base);
}

.thread-message__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-block: var(--c--globals--spacings--base);
}

.thread-message__reply-form {
    margin-bottom: var(--c--globals--spacings--base);
}

.banner:has(.thread-message__external-images-banner) {
    margin-bottom: var(--c--globals--spacings--2xs);
}

.banner:has(+ .thread-message__body) {
    margin-top: calc(var(--c--globals--spacings--xs) * -1);
    margin-bottom: var(--c--globals--spacings--xs);
}
