/* wire-message-avatar-placement-303f1h9159d */

/*
 * h683 originally positioned incoming avatars beside a direct .message-bubble.
 * h9159b now wraps the bubble + actions in .wire-message-stack-303f1h9159b,
 * so this patch gives incoming rows an explicit two-column grid:
 *
 *   [ avatar ] [ bubble + compact footer ]
 *
 * This removes all historical flex/order ambiguity.
 */

.message-thread
.direct-message:not(.own)[data-message-id]{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  column-gap:8px!important;
  row-gap:0!important;
  align-items:end!important;
  justify-items:stretch!important;
  justify-content:stretch!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  overflow:visible!important;
}

/* Every supported incoming avatar owner is locked to column 1. */
.message-thread
.direct-message:not(.own)[data-message-id]
> .wire-message-peer-avatar-303f1h683,
.message-thread
.direct-message:not(.own)[data-message-id]
> .avatar,
.message-thread
.direct-message:not(.own)[data-message-id]
> .avatar-xs,
.message-thread
.direct-message:not(.own)[data-message-id]
> .wire-avatar{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:2!important;

  grid-column:1!important;
  grid-row:1!important;
  order:initial!important;

  align-self:end!important;
  justify-self:center!important;

  display:grid!important;
  place-items:center!important;

  flex:none!important;
  flex-basis:auto!important;

  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;

  /*
   * Footer is 20px high plus a 3px gap. Offset by that amount so the avatar
   * bottom aligns with the bottom of the message bubble, not the action footer.
   */
  margin:0 0 23px 0!important;
  padding:0!important;

  float:none!important;
  clear:none!important;
  transform:none!important;

  border:1px solid #3b5269!important;
  border-radius:50%!important;
  background:#16283a!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

/* Image/fallback content fills the circle exactly. */
.message-thread
.direct-message:not(.own)[data-message-id]
> .wire-message-peer-avatar-303f1h683 img,
.message-thread
.direct-message:not(.own)[data-message-id]
> .avatar img,
.message-thread
.direct-message:not(.own)[data-message-id]
> .avatar-xs img,
.message-thread
.direct-message:not(.own)[data-message-id]
> .wire-avatar img{
  display:block!important;
  width:100%!important;
  min-width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  transform:none!important;
}

/* h9159b/c message stack is locked to column 2. */
.message-thread
.direct-message:not(.own)[data-message-id]
> .wire-message-stack-303f1h9159b{
  grid-column:2!important;
  grid-row:1!important;
  order:initial!important;

  align-self:start!important;
  justify-self:start!important;

  width:fit-content!important;
  min-width:0!important;
  max-width:min(76%,560px)!important;

  margin:0!important;
  padding:0!important;

  position:relative!important;
  inset:auto!important;
  float:none!important;
  transform:none!important;
}

/* Own rows remain one clean right-aligned column with no avatar reservation. */
.message-thread
.direct-message.own[data-message-id]{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  justify-items:end!important;
  align-items:start!important;
  overflow:visible!important;
}

.message-thread
.direct-message.own[data-message-id]
> .wire-message-stack-303f1h9159b{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:start!important;
  margin-left:auto!important;
}

.message-thread
.direct-message.own[data-message-id]
> .wire-message-peer-avatar-303f1h683,
.message-thread
.direct-message.own[data-message-id]
> .avatar,
.message-thread
.direct-message.own[data-message-id]
> .avatar-xs,
.message-thread
.direct-message.own[data-message-id]
> .wire-avatar{
  display:none!important;
}

/*
 * Prevent old h683 direct-child bubble/action rules from reserving phantom
 * geometry after h9159b moved those nodes into the stack.
 */
.message-thread
.direct-message:not(.own)[data-message-id]
> .message-bubble,
.message-thread
.direct-message:not(.own)[data-message-id]
> .wire-message-actions-303f1h680a{
  grid-column:2!important;
}

/* Compact footer stays beneath the bubble and never affects avatar placement. */
.message-thread
.direct-message:not(.own)[data-message-id]
.wire-message-avatar-normalized-303f1h9159d
> .wire-message-stack-303f1h9159b
> .wire-message-actions-303f1h680a{
  justify-self:start!important;
  justify-content:flex-start!important;
}

@media(max-width:980px){
  .message-thread
  .direct-message:not(.own)[data-message-id]{
    grid-template-columns:28px minmax(0,1fr)!important;
    column-gap:7px!important;
  }

  .message-thread
  .direct-message:not(.own)[data-message-id]
  > .wire-message-peer-avatar-303f1h683,
  .message-thread
  .direct-message:not(.own)[data-message-id]
  > .avatar,
  .message-thread
  .direct-message:not(.own)[data-message-id]
  > .avatar-xs,
  .message-thread
  .direct-message:not(.own)[data-message-id]
  > .wire-avatar{
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    margin-bottom:25px!important;
  }

  .message-thread
  .direct-message:not(.own)[data-message-id]
  > .wire-message-stack-303f1h9159b{
    max-width:84%!important;
  }
}

@media(max-width:680px){
  .message-thread
  .direct-message:not(.own)[data-message-id]{
    grid-template-columns:28px minmax(0,1fr)!important;
    column-gap:6px!important;
  }

  .message-thread
  .direct-message:not(.own)[data-message-id]
  > .wire-message-stack-303f1h9159b{
    max-width:86%!important;
  }
}