.squad-forwarded-label{
    display:flex;
    align-items:center;
    gap:5px;
    margin:0 0 6px;
    color:var(--muted);
    font-size:10px;
    font-weight:600;
    letter-spacing:.02em;
}

/* FINAL: the article itself is NEVER a message card. Only .squad-bubble is visible. */
.squad-chat article.squad-message,
.squad-chat article.squad-message.mine,
.squad-chat article.squad-message:not(.mine){
    position:relative !important;
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 0 15px 0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}
.squad-chat article.squad-message:target{
    outline:0 !important;
    box-shadow:none !important;
}
.squad-chat article.squad-message:not(.mine){
    flex-direction:row !important;
    justify-content:flex-start !important;
}
.squad-chat article.squad-message.mine{
    flex-direction:row-reverse !important;
    justify-content:flex-start !important;
}
.squad-chat article.squad-message .squad-stack{
    flex:0 0 60% !important;
    width:60% !important;
    max-width:60% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
.squad-chat article.squad-message:not(.mine) .squad-sender,
.squad-chat article.squad-message:not(.mine) .squad-sender-link{
    text-align:left !important;
}
.squad-chat article.squad-message.mine .squad-sender,
.squad-chat article.squad-message.mine .squad-sender-link{
    text-align:right !important;
}
.squad-chat article.squad-message .squad-bubble{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    border:0 !important;
    box-shadow:none !important;
    color:#fff !important;
}
.squad-chat article.squad-message:not(.mine) .squad-bubble{
    text-align:left !important;
}
.squad-chat article.squad-message.mine .squad-bubble{
    text-align:right !important;
}
.squad-chat article.squad-message .squad-avatar-button{
    flex:0 0 27px !important;
    width:27px !important;
    height:27px !important;
    margin-top:17px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
.squad-chat article.squad-message .squad-avatar{
    width:27px !important;
    height:27px !important;
    border:0 !important;
    box-shadow:none !important;
}
@media(max-width:520px){
    .squad-chat article.squad-message .squad-stack{
        flex-basis:60% !important;
        width:60% !important;
        max-width:60% !important;
    }
}

/* Final requested direction: own text LEFT, other members RIGHT. */
.squad-chat article.squad-message.mine .squad-bubble{
    text-align:left !important;
}
.squad-chat article.squad-message:not(.mine) .squad-bubble{
    text-align:right !important;
}
.squad-chat article.squad-message.mine .squad-sender,
.squad-chat article.squad-message.mine .own-sender,
.squad-chat article.squad-message.mine .squad-sender-link{
    text-align:left !important;
}
.squad-chat article.squad-message:not(.mine) .squad-sender,
.squad-chat article.squad-message:not(.mine) .squad-sender-link{
    text-align:right !important;
}
/* The current user's avatar/profile trigger is intentionally absent. */
.squad-chat article.squad-message.mine .squad-avatar-button{
    display:none !important;
}
/* Keep own message stack on the right, with no avatar taking up space. */
.squad-chat article.squad-message.mine{
    flex-direction:row !important;
    justify-content:flex-end !important;
}
.squad-chat article.squad-message.mine .squad-stack{
    margin-left:auto !important;
    margin-right:0 !important;
}
