/* El Contraataque · Community Layout v83
   Corrección directa del detalle: composer realmente pegado al viewport y mensajes mucho más anchos/legibles. */

body[data-screen="communityPostDetail"]{
  --ec83-composer-h:3.65rem;
  --ec83-safe-bottom:env(safe-area-inset-bottom,0px);
}

/* El detalle usa todo el ancho útil. Header y hero conservan respiración; el chat llega a los bordes. */
body[data-screen="communityPostDetail"] .mobile-content{
  padding-left:0!important;
  padding-right:0!important;
  padding-bottom:0!important;
  scroll-padding-bottom:0!important;
  overflow:hidden!important;
}
body[data-screen="communityPostDetail"] #screen-communityPostDetail.is-active,
body[data-screen="communityPostDetail"] #communityPostDetail{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
body[data-screen="communityPostDetail"] #communityPostDetail>.community-hub-header,
body[data-screen="communityPostDetail"] #communityPostDetail .community-topic-hero-v41{
  width:calc(100% - 1rem)!important;
  margin-left:.5rem!important;
  margin-right:.5rem!important;
}

/* Conversación a ancho completo y con el máximo alto disponible. */
body[data-screen="communityPostDetail"] .post-comments.community-chat-v41,
body[data-screen="communityPostDetail"] .community-chat-v41.post-comments,
body[data-screen="communityPostDetail"] .community-v41-chat-article .post-comments{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-radius:1rem 1rem 0 0!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
body[data-screen="communityPostDetail"] .post-comments>.post-comments__head,
body[data-screen="communityPostDetail"] .community-chat-v41.post-comments>.post-comments__head{
  min-height:3rem!important;
  padding:0 .72rem!important;
  border-radius:1rem 1rem 0 0!important;
}
body[data-screen="communityPostDetail"] .post-comments>.post-comments__list,
body[data-screen="communityPostDetail"] .community-chat-v41.post-comments>.post-comments__list,
body[data-screen="communityPostDetail"] .community-chat-v41 .post-comments__list{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-padding-bottom:calc(var(--ec83-composer-h) + .72rem)!important;
  padding:.18rem .34rem calc(var(--ec83-composer-h) + .72rem)!important;
}

/* Comentarios: avatar compacto y casi todo el ancho reservado al texto. */
body[data-screen="communityPostDetail"] .community-chat-v41 .post-comment,
body[data-screen="communityPostDetail"] .post-comments__list .post-comment{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:2rem minmax(0,1fr)!important;
  align-items:start!important;
  gap:.4rem!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:.42rem .2rem .5rem!important;
}
body[data-screen="communityPostDetail"] .community-chat-v41 .post-comment>.avatar,
body[data-screen="communityPostDetail"] .post-comments__list .post-comment>.avatar{
  width:2rem!important;
  height:2rem!important;
  min-width:2rem!important;
  font-size:.62rem!important;
}
body[data-screen="communityPostDetail"] .post-comment>div:not(.avatar),
body[data-screen="communityPostDetail"] .post-comment__content,
body[data-screen="communityPostDetail"] .community-v53-message-wrap{
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
}
body[data-screen="communityPostDetail"] .community-v53-message-bubble,
body[data-screen="communityPostDetail"] .post-comment__body{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-right:0!important;
  padding:.62rem .72rem .66rem!important;
  border-radius:.25rem 1rem 1rem 1rem!important;
  color:#1f1b17!important;
  font-size:17px!important;
  font-weight:500!important;
  line-height:1.38!important;
  letter-spacing:-.012em!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
body[data-screen="communityPostDetail"] .community-v53-message-bubble>strong,
body[data-screen="communityPostDetail"] .post-comment__author,
body[data-screen="communityPostDetail"] .post-comment strong[data-community-v50-user]{
  font-size:15.5px!important;
  line-height:1.15!important;
}
body[data-screen="communityPostDetail"] .community-v53-message-bubble>small,
body[data-screen="communityPostDetail"] .post-comment time{
  font-size:12.5px!important;
}
body[data-screen="communityPostDetail"] .comment-quote,
body[data-screen="communityPostDetail"] .community-v53-message-bubble .comment-quote{
  width:100%!important;
  max-width:none!important;
  margin:.12rem 0 .3rem!important;
  padding:.38rem .52rem!important;
  font-size:14.5px!important;
  line-height:1.3!important;
}
body[data-screen="communityPostDetail"] .post-comment__actions,
body[data-screen="communityPostDetail"] .community-v53-message-actions{
  margin-top:.22rem!important;
  padding-left:0!important;
  font-size:13px!important;
}
body[data-screen="communityPostDetail"] .community-v82-reaction-summary{
  margin:.22rem 0 .05rem!important;
}

/* Portal del composer: hijo directo de BODY, por lo que ningún transform/overflow del phone-frame puede elevarlo. */
body[data-screen="communityPostDetail"]>form.community-v83-composer,
body[data-screen="communityPostDetail"]>.community-v83-composer.post-comment-form{
  box-sizing:border-box!important;
  position:fixed!important;
  z-index:1200!important;
  left:0!important;
  right:0!important;
  bottom:var(--keyboard-offset,0px)!important;
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:.32rem!important;
  width:100vw!important;
  max-width:none!important;
  min-width:0!important;
  min-height:3.35rem!important;
  height:auto!important;
  margin:0!important;
  border:0!important;
  border-top:1px solid rgba(56,45,31,.10)!important;
  border-radius:0!important;
  padding:.38rem max(.45rem,env(safe-area-inset-right)) max(.38rem,var(--ec83-safe-bottom)) max(.45rem,env(safe-area-inset-left))!important;
  background:rgba(255,255,255,.992)!important;
  box-shadow:0 -.3rem .9rem rgba(35,27,17,.055)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  transform:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
}

/* Se elimina el avatar del dock para regalar el máximo ancho al mensaje, estilo chat moderno. */
body[data-screen="communityPostDetail"]>form.community-v83-composer .community-v60-composer-avatar,
body[data-screen="communityPostDetail"]>form.community-v83-composer .community-v62-composer-avatar{
  display:none!important;
}

body[data-screen="communityPostDetail"]>form.community-v83-composer textarea,
body[data-screen="communityPostDetail"]>form.community-v83-composer textarea[name="body"]{
  box-sizing:border-box!important;
  order:1!important;
  display:block!important;
  flex:1 1 0!important;
  visibility:visible!important;
  opacity:1!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:2.7rem!important;
  min-height:2.7rem!important;
  max-height:6.6rem!important;
  margin:0!important;
  overflow-y:auto!important;
  resize:none!important;
  border:1px solid rgba(62,50,34,.10)!important;
  border-radius:1.35rem!important;
  outline:0!important;
  padding:.7rem .86rem!important;
  color:#211d18!important;
  -webkit-text-fill-color:#211d18!important;
  caret-color:#b36e08!important;
  background:#f4f3f0!important;
  box-shadow:none!important;
  font-size:16px!important;
  line-height:1.25!important;
  pointer-events:auto!important;
  user-select:text!important;
  -webkit-user-select:text!important;
}
body[data-screen="communityPostDetail"]>form.community-v83-composer textarea::placeholder{
  color:#8d867d!important;
  -webkit-text-fill-color:#8d867d!important;
  opacity:1!important;
}
body[data-screen="communityPostDetail"]>form.community-v83-composer .comment-image-input,
body[data-screen="communityPostDetail"]>form.community-v83-composer .community-v82-plus,
body[data-screen="communityPostDetail"]>form.community-v83-composer>button[type="submit"]{
  box-sizing:border-box!important;
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  flex:0 0 2.42rem!important;
  width:2.42rem!important;
  height:2.42rem!important;
  min-width:2.42rem!important;
  min-height:2.42rem!important;
  place-items:center!important;
  margin:0!important;
  border-radius:50%!important;
  padding:0!important;
}
body[data-screen="communityPostDetail"]>form.community-v83-composer .comment-image-input{
  order:2!important;
  border:0!important;
  color:#2d2822!important;
  background:transparent!important;
}
body[data-screen="communityPostDetail"]>form.community-v83-composer .community-v82-plus{
  order:3!important;
  border:1.4px solid #2d2822!important;
  color:#2d2822!important;
  background:#fff!important;
}
body[data-screen="communityPostDetail"]>form.community-v83-composer>button[type="submit"]{
  order:4!important;
  border:0!important;
  color:#fff!important;
  background:linear-gradient(145deg,#dc9a1d,#b56b05)!important;
  box-shadow:0 .22rem .55rem rgba(166,98,4,.18)!important;
}
body[data-screen="communityPostDetail"]>form.community-v83-composer .comment-image-input svg,
body[data-screen="communityPostDetail"]>form.community-v83-composer>button[type="submit"] svg{
  width:1.2rem!important;
  height:1.2rem!important;
}

/* Más reciente pegado al composer, no flotando media pantalla por encima. */
body[data-screen="communityPostDetail"] .community-v81-latest,
body[data-screen="communityPostDetail"] .community-v82-live-update{
  bottom:calc(var(--ec83-composer-h) + .32rem + var(--keyboard-offset,0px))!important;
}

/* En iPhone estrecho mantenemos iconos táctiles y sacrificamos padding, no ancho del input. */
@media(max-width:380px){
  body[data-screen="communityPostDetail"]>form.community-v83-composer{
    gap:.22rem!important;
    padding-left:.32rem!important;
    padding-right:.32rem!important;
  }
  body[data-screen="communityPostDetail"]>form.community-v83-composer .comment-image-input,
  body[data-screen="communityPostDetail"]>form.community-v83-composer .community-v82-plus,
  body[data-screen="communityPostDetail"]>form.community-v83-composer>button[type="submit"]{
    flex-basis:2.2rem!important;
    width:2.2rem!important;
    height:2.2rem!important;
    min-width:2.2rem!important;
    min-height:2.2rem!important;
  }
  body[data-screen="communityPostDetail"] .community-v53-message-bubble,
  body[data-screen="communityPostDetail"] .post-comment__body{
    font-size:16.5px!important;
    padding-left:.64rem!important;
    padding-right:.64rem!important;
  }
}