/* El Contraataque · Community Topic Frame v80
   Header + hero + composer remain visible. Only the conversation scrolls. */

body[data-screen="communityPostDetail"].community-topic-frame-v80{
  --ec80-composer-space:5.35rem;
  --ec80-gold:#b8730b;
  --ec80-line:rgba(77,61,39,.12);
}

/* The AppShell no longer owns vertical scrolling while a topic is open. */
body[data-screen="communityPostDetail"].community-topic-frame-v80 .mobile-content{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  padding-top:.52rem!important;
  padding-bottom:0!important;
  scroll-padding:0!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 #screen-communityPostDetail.is-active{
  display:flex!important;
  flex:1 1 auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 #communityPostDetail{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}

/* The internal Community header is a fixed-height row in the non-scrolling frame. */
body[data-screen="communityPostDetail"].community-topic-frame-v80 #communityPostDetail>.community-hub-header{
  position:relative!important;
  top:auto!important;
  z-index:95!important;
  flex:0 0 auto!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v41-chat-article,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-post-detail{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
}

/* Approved topic hero: always complete. It never collapses or scrolls away. */
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-topic-hero-v41,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-topic-hero-v41.is-compact{
  position:relative!important;
  top:auto!important;
  z-index:72!important;
  flex:0 0 auto!important;
  transform:none!important;
  transition:none!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-topic-hero-v41.is-compact .community-topic-hero-v41__image,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-topic-hero-v41.is-compact .community-topic-hero-v41__copy,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-topic-hero-v41.is-compact .community-topic-hero-v41__copy p,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-topic-hero-v41.is-compact .community-topic-hero-v41__stats{
  transition:none!important;
}

/* Conversation fills the exact space left between hero and composer. */
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-chat-v41,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-chat-v41.post-comments,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-chat-v41 .post-comments{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-chat-v41 .post-comments__head,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-chat-v41.post-comments>.post-comments__head{
  flex:0 0 auto!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-chat-v41 .post-comments__list,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-chat-v41.post-comments>.post-comments__list{
  box-sizing:border-box!important;
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
  scroll-behavior:auto!important;
  scroll-padding-top:2.2rem!important;
  scroll-padding-bottom:calc(var(--ec80-composer-space) + env(safe-area-inset-bottom))!important;
  padding:.12rem 0 calc(var(--ec80-composer-space) + env(safe-area-inset-bottom))!important;
  touch-action:pan-y!important;
}

/* The old v41 scroll controls used .mobile-content and are no longer valid. */
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v41-chat-tools{
  display:none!important;
}

/* Subtle chronological separators: ——— HOY ——— */
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v80-date-separator{
  display:grid!important;
  grid-template-columns:minmax(.75rem,1fr) auto minmax(.75rem,1fr)!important;
  align-items:center!important;
  gap:.62rem!important;
  width:100%!important;
  margin:.55rem 0 .38rem!important;
  color:#8b7960!important;
  font-size:.54rem!important;
  font-weight:900!important;
  letter-spacing:.075em!important;
  line-height:1!important;
  text-align:center!important;
  text-transform:uppercase!important;
  user-select:none!important;
  pointer-events:none!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v80-date-separator::before,
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v80-date-separator::after{
  display:block!important;
  height:1px!important;
  content:""!important;
  background:linear-gradient(90deg,transparent,rgba(139,121,96,.25))!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v80-date-separator::after{
  background:linear-gradient(90deg,rgba(139,121,96,.25),transparent)!important;
}

/* New/latest-message pill floats over the conversation, immediately above composer. */
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v80-latest{
  position:fixed!important;
  z-index:168!important;
  left:50%!important;
  bottom:calc(var(--ec80-composer-space) + .42rem + env(safe-area-inset-bottom) + var(--keyboard-offset,0px))!important;
  display:inline-flex!important;
  min-height:2.15rem!important;
  max-width:min(82vw,18rem)!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.34rem!important;
  border:1px solid rgba(178,108,8,.28)!important;
  border-radius:999px!important;
  padding:.18rem .82rem!important;
  color:#8a5406!important;
  background:rgba(255,250,240,.985)!important;
  box-shadow:0 .42rem 1.15rem rgba(61,43,18,.14)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  transform:translateX(-50%)!important;
  font-size:.61rem!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v80-latest[hidden]{
  display:none!important;
}
body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v80-latest.is-new{
  color:#fff!important;
  border-color:#bd790f!important;
  background:linear-gradient(135deg,#dc9b26,#b87209)!important;
}

/* Keep the existing full-width composer above every scrolling element. */
body[data-screen="communityPostDetail"].community-topic-frame-v80 .post-comment-form.community-v62-composer{
  z-index:170!important;
}

@media(max-width:430px){
  body[data-screen="communityPostDetail"].community-topic-frame-v80 .mobile-content{
    padding-top:.42rem!important;
  }
  body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-topic-hero-v41,
  body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-topic-hero-v41.is-compact{
    margin-bottom:.48rem!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-screen="communityPostDetail"].community-topic-frame-v80 .community-v80-latest{
    scroll-behavior:auto!important;
  }
}
