/*
 ============================================================
 NUI COMMENTS ONLY
 Style panneau mobile type Facebook
 ============================================================
 */


/*
 * AUCUNE règle html/body.
 * Donc aucun risque de casser le scroll général.
 */


#nuiCommentsOnly{

  position:fixed;

  inset:0;

  z-index:2147483000;

  pointer-events:none;
}


#nuiCommentsOnly.open{

  pointer-events:auto;
}


/* fond au-dessus du panneau */

#nuiCommentsOnly .nui-co-backdrop{

  position:absolute;

  inset:0;

  background:
    rgba(0,0,0,.28);

  opacity:0;

  transition:
    opacity .18s ease;
}


#nuiCommentsOnly.open
.nui-co-backdrop{

  opacity:1;
}


/* =========================================================
   PANNEAU
========================================================= */

#nuiCommentsOnly .nui-co-sheet{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:72dvh;

  max-height:
    calc(100dvh - 70px);

  background:#fff;

  border-radius:
    22px 22px 0 0;

  box-shadow:
    0 -8px 35px
    rgba(0,0,0,.16);

  display:flex;

  flex-direction:column;

  overflow:hidden;

  transform:
    translateY(100%);

  transition:
    transform .22s
    cubic-bezier(.2,.8,.2,1);
}


#nuiCommentsOnly.open
.nui-co-sheet{

  transform:
    translateY(0);
}


/* poignée */

.nui-co-handle{

  width:42px;

  height:5px;

  flex:0 0 5px;

  border-radius:999px;

  background:#c8cdd3;

  margin:
    8px auto 3px;
}


/* =========================================================
   HEADER
========================================================= */

.nui-co-header{

  min-height:55px;

  flex:0 0 55px;

  display:flex;

  align-items:center;

  justify-content:center;

  position:relative;

  padding:0 55px;

  border-bottom:
    1px solid #edf0f3;

  background:#fff;
}


.nui-co-header strong{

  font-size:18px;

  font-weight:800;

  color:#15202b;
}


.nui-co-close{

  position:absolute;

  right:13px;

  width:38px;

  height:38px;

  border:0;

  border-radius:50%;

  background:#f0f3f5;

  color:#111;

  font-size:27px;

  font-weight:300;

  line-height:38px;
}


/* =========================================================
   LISTE
========================================================= */

.nui-co-list{

  flex:1;

  min-height:0;

  overflow-y:auto;

  overflow-x:hidden;

  padding:
    12px 13px 18px;

  -webkit-overflow-scrolling:
    touch;

  overscroll-behavior:
    contain;
}


.nui-co-loading,
.nui-co-empty{

  height:100%;

  min-height:180px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  color:#84909b;

  gap:5px;
}


.nui-co-empty strong{

  color:#20262c;

  font-size:16px;
}


/* =========================================================
   COMMENTAIRE
========================================================= */

.nui-co-comment{

  display:flex;

  align-items:flex-start;

  gap:9px;

  margin:
    4px 0 14px;
}


.nui-co-avatar{

  width:38px;

  height:38px;

  flex:
    0 0 38px;

  border-radius:50%;

  object-fit:cover;

  background:#edf0f3;
}


.nui-co-comment-content{

  min-width:0;

  flex:1;
}


.nui-co-bubble{

  width:fit-content;

  max-width:100%;

  padding:
    8px 12px;

  border-radius:17px;

  background:#f0f2f5;

  color:#111;
}


.nui-co-bubble strong{

  display:block;

  margin-bottom:2px;

  font-size:13px;
}


.nui-co-text{

  font-size:14px;

  line-height:1.38;

  white-space:pre-wrap;

  overflow-wrap:anywhere;
}


.nui-co-comment-actions{

  display:flex;

  align-items:center;

  gap:4px;

  height:25px;

  padding-left:7px;
}


.nui-co-comment-actions button{

  border:0;

  background:transparent;

  padding:2px 3px;

  font-size:14px;

  opacity:.6;
}


.nui-co-comment-actions
button.active{

  opacity:1;
}


.nui-co-comment-actions span{

  font-size:11px;

  color:#77818a;
}


/* =========================================================
   COMPOSER
========================================================= */

.nui-co-form{

  flex:0 0 auto;

  min-height:62px;

  display:flex;

  align-items:center;

  gap:8px;

  padding:
    9px 11px
    max(
      9px,
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid #e8ebee;

  background:#fff;
}


.nui-co-form input{

  flex:1;

  min-width:0;

  height:43px;

  box-sizing:border-box;

  border:0;

  outline:0;

  border-radius:23px;

  padding:0 16px;

  background:#f0f3f5;

  color:#111;

  font-size:15px;
}


.nui-co-form button{

  width:43px;

  height:43px;

  flex:
    0 0 43px;

  border:0;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:0;

  background:
    linear-gradient(
      135deg,
      #14c7c6,
      #0798ec
    );

  color:#fff;

  font-size:21px;
}


/* téléphone */

@media(max-width:600px){

  #nuiCommentsOnly
  .nui-co-sheet{

    height:74dvh;

    border-radius:
      20px 20px 0 0;
  }

}


/* ===== NUI COMMENTS VIEWPORT FIX ===== */

/*
 * UNIQUEMENT le panneau Commentaires.
 * Aucun changement du Feed / body / navigation.
 */

#nuiCommentsOnly{
  position:fixed!important;

  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;

  width:100vw!important;
  height:100dvh!important;

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

  z-index:2147483000!important;

  transform:none!important;
}


/*
 * Le panneau lui-même est FIXE sur l'écran visible.
 * Il ne dépend plus du scroll de la publication.
 */
#nuiCommentsOnly .nui-co-sheet{
  position:fixed!important;

  left:0!important;
  right:0!important;

  top:auto!important;
  bottom:0!important;

  width:100vw!important;

  height:74dvh!important;
  max-height:calc(100dvh - 68px)!important;

  margin:0!important;

  transform:translate3d(
    0,
    100%,
    0
  )!important;

  border-radius:
    22px 22px 0 0!important;
}


#nuiCommentsOnly.open .nui-co-sheet{
  transform:
    translate3d(0,0,0)!important;
}


/*
 * Le champ suit toujours le bas DU PANNEAU,
 * jamais le bas d'une publication.
 */
#nuiCommentsOnly .nui-co-form{
  position:relative!important;

  left:auto!important;
  right:auto!important;
  bottom:auto!important;

  width:100%!important;

  margin-top:auto!important;

  flex:0 0 auto!important;

  box-sizing:border-box!important;
}


/*
 * Seule la liste des commentaires défile.
 */
#nuiCommentsOnly .nui-co-list{
  flex:1 1 auto!important;

  min-height:0!important;

  overflow-y:auto!important;
  overflow-x:hidden!important;

  -webkit-overflow-scrolling:
    touch!important;

  overscroll-behavior:
    contain!important;
}


/*
 * Le titre reste dans le panneau.
 */
#nuiCommentsOnly .nui-co-header{
  position:relative!important;

  top:auto!important;

  flex:0 0 55px!important;
}


/*
 * Téléphone
 */
@media(max-width:600px){

  #nuiCommentsOnly .nui-co-sheet{
    height:74dvh!important;
  }

}

/* =========================================================
   NUI COMMENT HEART STABLE FIX
========================================================= */

/*
 * Le cœur commentaire n'est plus un BUTTON.
 * Il ne peut donc plus être confondu avec les réactions
 * globales des publications.
 */

.nui-co-comment-actions .nui-co-love{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:26px;
  height:25px;

  padding:0 3px;

  cursor:pointer;

  user-select:none;

  -webkit-tap-highlight-color:
    transparent;

  font-size:18px;

  line-height:1;

  opacity:.62;

  transform:none;

  transition:
    transform .12s ease,
    opacity .12s ease;
}


.nui-co-comment-actions
.nui-co-love.active{

  opacity:1;
}


.nui-co-comment-actions
.nui-co-love:active{

  transform:
    scale(.88);
}


.nui-co-love-count{

  font-size:12px;

  color:#77818a;
}