/*
 * 让“我”发送的消息显示在右侧。
 *
 * 基于 Converse 14 的 DOM：
 *   article.message.chat-msg
 *     └── .chat-msg__content.chat-msg__content--me
 *
 * 只覆盖样式，不修改 dist/，升级 Converse 时保留本文件即可。
 * 如果浏览器不支持 :has()，这些规则会被忽略，界面回退到默认左侧布局。
 */

.conversejs .message.chat-msg:has(.chat-msg__content--me) {
    flex-direction: row-reverse;
}

.conversejs .message.chat-msg:has(.chat-msg__content--me) .chat-msg__content {
    text-align: right;
}

.conversejs .message.chat-msg:has(.chat-msg__content--me) .chat-msg__heading {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.35em;
}

.conversejs .message.chat-msg:has(.chat-msg__content--me) .chat-msg__body {
    text-align: right;
}

/*
 * 可选：给“我”的消息加一个浅色气泡。
 * 启用前先测试图片、文件、引用回复和语音消息，避免挤压媒体。
 *
 * .conversejs .message.chat-msg:has(.chat-msg__content--me) .chat-msg__body {
 *     display: inline-block;
 *     max-width: 80%;
 *     padding: 0.35em 0.6em;
 *     border-radius: 0.5em;
 *     background: var(--highlight-color);
 *     text-align: left;
 * }
 */