/* TENIMPER v49.4 — final mobile stabilization / compact reactions */

.comments-section{
  --ti-c49-mobile-gap:10px;
}

/* Reactions: preserve v46 mechanics/design, reduce wasted vertical space. */
.comments-section .character-reactions{
  gap:8px!important;
  margin-top:12px!important;
  padding-top:9px!important;
}

.comments-section .character-reactions__heading,
.comments-section .reaction-heading,
.comments-section [data-reaction-heading]{
  margin-bottom:7px!important;
}

.comments-section .character-reaction{
  min-height:54px!important;
  padding:6px 9px!important;
  border-radius:11px!important;
}

.comments-section .character-reaction__portrait{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
}

.comments-section .character-reaction__label{
  font-size:.82rem!important;
  line-height:1.18!important;
}

.comments-section .character-reaction__count{
  font-size:.72rem!important;
  line-height:1.15!important;
}

/* Keep action row compact and aligned. */
.comments-section .ti-c49-actions{
  min-height:38px;
  margin-top:7px!important;
  gap:6px!important;
}

.comments-section .ti-c49-actions__reply{
  min-height:36px!important;
  padding:6px 8px!important;
  border-radius:8px!important;
}

.comments-section .ti-c49-actions__more{
  flex:0 0 auto;
}

/* Prevent wide content/stickers/reactions from creating horizontal scroll. */
.comments-section,
.comments-section .comment-card,
.comments-section .comment-card *{
  box-sizing:border-box;
}

.comments-section .comment-card{
  max-width:100%;
  min-width:0;
}

.comments-section .comment-card :is(
  .comment-text,
  .character-reactions,
  .ti-c49-actions,
  .comment-inline-form,
  .comment-sticker-picker,
  .ti-sticker-picker-v45
){
  min-width:0;
  max-width:100%;
}

.comments-section img,
.comments-section video{
  max-width:100%;
  height:auto;
}

/* Long names/titles/metadata must not force the card wider. */
.comments-section :is(
  .comment-author,
  .comment-name,
  .comment-card__author,
  .comment-user,
  .comment-role,
  .comment-title
){
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Light touch on reply connector so the thread reads clearly but not heavily. */
.comments-section .ti-c49-card--reply::after{
  opacity:.55!important;
}

/* Reply context is secondary. */
.comments-section .ti-c49-reply-context{
  margin-bottom:6px!important;
  opacity:.82;
}

/* Mobile stabilization */
@media(max-width:700px){
  .comments-section{
    overflow-x:clip;
  }

  .comments-section .comment-card.ti-c49-card{
    margin:10px 0!important;
    padding:12px 11px 11px!important;
    border-radius:12px!important;
  }

  .comments-section .ti-c49-card--reply{
    margin-left:8px!important;
    padding-left:10px!important;
    padding-right:9px!important;
  }

  .comments-section .ti-c49-card--reply::after{
    left:-5px!important;
  }

  .comments-section .comment-avatar{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }

  .comments-section .ti-c49-card--reply .comment-avatar{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }

  .comments-section .comment-text{
    font-size:.97rem!important;
    line-height:1.62!important;
    margin-top:8px!important;
  }

  .comments-section .character-reactions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }

  .comments-section .character-reactions__heading,
  .comments-section .reaction-heading,
  .comments-section [data-reaction-heading]{
    grid-column:1 / -1!important;
  }

  .comments-section .character-reaction{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:6px 7px!important;
  }

  .comments-section .character-reaction__portrait{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }

  .comments-section .character-reaction__label{
    font-size:.78rem!important;
  }

  .comments-section .ti-c49-actions{
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:5px!important;
  }

  .comments-section .ti-c49-actions__reply{
    min-height:40px!important;
  }

  .comments-section .ti-c49-actions__more{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
  }

  .comments-section .ti-c49-thread-toggle{
    margin-left:8px!important;
    min-height:40px!important;
  }

  .comments-section .ti-comment-sticker img{
    max-width:145px!important;
    max-height:145px!important;
  }

  .comments-section .comment-inline-form[open]{
    padding:9px!important;
    border-radius:11px!important;
  }

  .comments-section .comment-inline-form textarea{
    min-height:96px;
    font-size:16px; /* prevents iOS zoom */
  }

  .comments-section .ti-c49-pin-overview{
    margin:10px 0 14px!important;
    padding:10px 11px!important;
  }

  .comments-section .ti-c49-author-pin-mark{
    font-size:.72rem!important;
  }
}

@media(max-width:430px){
  .comments-section .character-reactions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .comments-section .character-reaction{
    min-height:48px!important;
  }

  .comments-section .character-reaction__portrait{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }
}

@media(max-width:350px){
  .comments-section .character-reactions{
    grid-template-columns:1fr!important;
  }
}

/* Desktop polish: keep the four reactions balanced in one row. */
@media(min-width:701px){
  .comments-section .character-reactions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
  }

  .comments-section .character-reactions__heading,
  .comments-section .reaction-heading,
  .comments-section [data-reaction-heading]{
    grid-column:1 / -1!important;
  }

  .comments-section .character-reaction{
    width:100%!important;
    min-width:0!important;
  }
}