@layer common {
    .message-box {
        display: grid;
        grid-template-columns: max-content auto;
        column-gap: 1rem;
        row-gap: .5rem;

        @media screen and (min-width: 992px) {
            grid-template-columns: max-content max-content;
        }

        img.avatar {
            width: 4rem;
            border: 3px solid var(--primary-border-color);
            border-radius: 5rem;
            align-self: end;
        }

        .content {
            border: 3px solid var(--primary-border-color);
            padding: .5rem 0.8rem 0;
            border-radius: 0.5rem 0.5rem 0.5rem 0;

            p {
                color: var(--text-color);
                font-style: italic;
                font-size: 1rem;
                margin: .1rem 0;

                &:first-child {
                    margin-top: 0;
                }

                &.sub-info {
                    margin-top: 0.5rem;
                    font-size: .8rem;
                    color: var(--neutral-color);
                    font-style: normal;
                }
            }
        }

        .action {
            grid-column: 2 / 3;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 1rem;
            width: fit-content;
            border: 3px solid var(--whatsapp-accent-color);
            padding: .5rem 0.8rem;
            border-radius: 0 0.5rem 0.5rem 0.5rem;
            align-items: center;
            background-color: var(--whatsapp-color);
            color: white;
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
            transition: background-color .1s ease-in-out;

            &:hover {
                background-color: color-mix(in srgb, var(--whatsapp-color), black 15%);
            }

            .site-icon {
                flex-shrink: 0;
                --site-icon-size: 2rem;
                --site-icon-color: white;
            }
        }
    }
}