.message {
    --Text-primaryNoneBg: var(--base-black);
    --Surface-bgCard: var(--opacity-30w);
    --Text-secondary: var(--opacity-70b);
    --Text-theritory:var(--primary-light-600)
}

@media (prefers-color-scheme: dark) {
    .message {
        --Text-primaryNoneBg: var(--base-white);
        --Surface-bgCard: var(--opacity-30b);
        --Text-secondary: var(--opacity-70w);
        --Text-theritory:var(--primary-dark-600)

    }
}




.message {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0.75rem 0.5rem;
    align-items: flex-start;
    gap: 0.75rem;
    align-self: stretch;

    border-radius: 0.625rem;
    background: var(--Surface-bgTertiary10);
    color: var(--Text-secondary);
    font-size: var(--typeface-size-sm, 0.75rem);
}

.message .messageContainer{
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    width: 100%;
}

.message .systemMessage{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.message .subject {
    color: var(--Text-theritory);
}

.message .friendMessage{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.message.friendBox {
    padding: 0.5rem 0.75rem;
}

.message.friendBox .avatar,  .message.friendBox .avatar img{
    min-width: 2.1875rem;
    width: 2.1875rem;
    height: 2.1875rem;
    border-radius: 0.5rem;

}

.message span, .message time {
    color: var(--Text-primaryNoneBg);

}


.message p {
    width: 100%;
    color: var(--Text-primaryNoneBg);
}

.message>.myButton {
    margin-left: auto;
    border-radius: 0.5rem;
    margin-top: 1rem;
}