figure {
    border: var(--border-panel-outer);
    border-top: var(--border-panel-top);
    background: var(--background-figure);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-base);
    margin: var(--margin) auto;
    font-size: 1rem;
    text-align: center;
    padding: var(--padding) 0;

    figcaption {
        padding: 0 var(--padding) var(--padding) var(--padding);

        p {
            color: var(--color-text-muted);
            font-style: italic;
            max-width: var(--width-content-max);
            font-size: 1rem;
            text-wrap: balance;
            font-weight: bold;
            text-align: center;
            margin: auto;
            line-height: 150%;

            em {
                color: var(--color-text-strong);
            }
        }
    }

    details,
    p.details {
        padding: var(--padding) var(--padding) 0 var(--padding);
        max-width: var(--width-content-max);
        text-align: center;
        text-wrap: balance;
        margin: auto;
        line-height: 150%;
    }

    audio {
        margin: auto;
        padding: var(--padding);
    }

    img,
    video {
        max-height: 80vh;
        max-width: 100%;
    }

    img {
        background-color: var(--color-figure-media-background);
    }

    &.chat-message {
        clear: both;
        display: inline;
        width: 40vw;
        min-width: 270px;
        margin: 0 auto;
        position: relative;
        padding: var(--padding);

        &.me,
        &.other {}

        &.me {
            background: var(--background-chat-me);
            margin-right: 11vw;
        }

        &.other {
            background: var(--background-chat-other);
            margin-left: 11vw;
        }

        blockquote {
            text-align: left;
            display: flex;
            font-style: normal;
            flex-direction: column;
            gap: calc(var(--gap)/2);
            line-height: 130%;

            p {
                width: 100%;
                text-align: left;
            }

            ul,
            ol {
                margin-left: var(--margin);
            }
        }
    }
}