/*
 * Copyright 2026 Element Creations Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.container {
    background-color: var(--cpd-color-bg-subtle-secondary);
    padding: var(--cpd-space-3x);
    border-radius: 8px;
    /* Reserve space for external timestamps, but also cap the width */
    /* Legacy variable: --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
    /* max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px); */
    max-width: min(calc(100% - 2 * 46px), 600px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) min-content min-content;

    svg {
        position: relative;
        grid-column: 1;
        grid-row: 1 / 3;
        width: 16px;
        height: 16px;
        content: "";
        inset: 0;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        margin-top: var(--cpd-space-1x);
    }

    .title,
    .subtitle {
        grid-column: 2;
        overflow-wrap: break-word;
        min-inline-size: 50px;
    }

    .title {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: var(--cpd-font-size-body-md);
        grid-row: 1;
    }

    .subtitle {
        font-size: var(--cpd-font-size-body-sm);
        grid-row: 2;
    }
}
