/* wire-message-action-footer-303f1h9159b */

/*
 * h9159b gives each direct message one stable content stack. The bubble and
 * action footer share that stack, so old flex/grid owners can no longer place
 * Reply / React / Copy / Delete beside an image or text bubble.
 */
.message-thread .direct-message[data-message-id]{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:flex-end!important;
  width:100%!important;
  max-width:none!important;
  gap:8px!important;
  margin:8px 0 11px!important;
}

.message-thread .direct-message:not(.own)[data-message-id]{
  justify-content:flex-start!important;
}

.message-thread .direct-message.own[data-message-id]{
  justify-content:flex-end!important;
}

.message-thread .direct-message[data-message-id] > .wire-avatar{
  order:1!important;
  flex:0 0 auto!important;
  align-self:flex-end!important;
  margin-bottom:22px!important;
}

.wire-message-stack-303f1h9159b{
  order:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:3px!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;
}

.direct-message:not(.own) .wire-message-stack-303f1h9159b{
  justify-items:start!important;
}

.direct-message.own .wire-message-stack-303f1h9159b{
  justify-items:end!important;
}

.wire-message-stack-303f1h9159b > .message-bubble{
  position:relative!important;
  inset:auto!important;
  float:none!important;
  order:1!important;
  display:block!important;
  width:fit-content!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  align-self:auto!important;
}

/* Media bubbles keep their native size but never push actions to the side. */
.wire-message-stack-303f1h9159b > .message-bubble .message-media,
.wire-message-stack-303f1h9159b > .message-bubble .message-media img{
  max-width:100%!important;
}

.wire-message-stack-303f1h9159b > .message-bubble .message-media img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-height:520px!important;
  object-fit:contain!important;
}

/* Compact footer beneath the bubble. */
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:auto!important;
  order:2!important;
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  justify-self:start!important;
  width:auto!important;
  min-width:0!important;
  min-height:18px!important;
  height:auto!important;
  margin:1px 0 0!important;
  padding:0!important;
  gap:2px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:.72!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  overflow:visible!important;
  clear:both!important;
}

.direct-message.own
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a{
  justify-content:flex-end!important;
  justify-self:end!important;
}

.message-thread .direct-message:hover
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a,
.message-thread .direct-message:focus-within
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a{
  opacity:1!important;
}

/* Kill the old pill/slab appearance. These are quiet message-footer actions. */
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a > button,
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a form > button,
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a [data-wire-message-delete]{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  min-height:18px!important;
  height:18px!important;
  margin:0!important;
  padding:0 5px!important;
  border:0!important;
  border-radius:5px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#7890a3!important;
  font-size:8px!important;
  font-weight:750!important;
  line-height:18px!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}

.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a > button:hover,
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a form > button:hover,
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a > button:focus-visible,
.wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a form > button:focus-visible{
  background:#0d1d2a!important;
  color:#dbe7f0!important;
  outline:none!important;
  text-decoration:none!important;
}

.wire-message-stack-303f1h9159b
.wire-message-delete-form-303f1h698{
  display:inline-flex!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

.wire-message-stack-303f1h9159b
.wire-message-delete-form-303f1h698 > [data-wire-message-delete]{
  color:#9d6f76!important;
}

.wire-message-stack-303f1h9159b
.wire-message-delete-form-303f1h698 > [data-wire-message-delete]:hover{
  background:rgba(151,65,76,.12)!important;
  color:#e58b94!important;
}

/* Keep reaction chips attached to the bubble, not the footer. */
.wire-message-stack-303f1h9159b
.wire-message-reactions-303f1h680a{
  position:static!important;
}

@media(max-width:980px){
  .wire-message-stack-303f1h9159b{
    max-width:84%!important;
  }

  .wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a{
    min-height:22px!important;
    gap:3px!important;
    opacity:.88!important;
  }

  .wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a > button,
  .wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a form > button,
  .wire-message-stack-303f1h9159b > .wire-message-actions-303f1h680a [data-wire-message-delete]{
    min-height:22px!important;
    height:22px!important;
    padding:0 6px!important;
    font-size:9px!important;
    line-height:22px!important;
  }
}

@media(max-width:680px){
  .message-thread .direct-message[data-message-id]{
    gap:6px!important;
    margin:6px 0 9px!important;
  }

  .message-thread .direct-message[data-message-id] > .wire-avatar{
    margin-bottom:24px!important;
  }

  .wire-message-stack-303f1h9159b{
    max-width:86%!important;
  }
}