/* =========================================================
   UFY PHONE — COMENTARIOS DE REELS
   DISEÑO D — BURBUJAS SOBRE EL VIDEO
   ========================================================= */

.ufy-phone-reel-comments-open {
  position: relative;

  overflow: hidden;
}


/* =========================================================
   VIDEO REDUCIDO Y TRANSICIONES
   ========================================================= */

.ufy-phone-reel-comments-open
.ufy-phone-reel-media,
.ufy-phone-reel-comments-open
.ufy-phone-gallery-viewer-media {
  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 42%;

  transition:
    height 220ms ease,
    opacity 180ms ease;
}


.ufy-phone-reel-comments-open
.ufy-phone-reel-video,
.ufy-phone-reel-comments-open
.ufy-phone-gallery-viewer-video {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.ufy-phone-reel-comments-open
.ufy-phone-reel-information,
.ufy-phone-reel-comments-open
.ufy-phone-reel-actions,
.ufy-phone-reel-comments-open
.ufy-phone-reel-mute {
  opacity: 0;

  pointer-events: none;

  transition:
    opacity 140ms ease;
}


.ufy-phone-reel-comments-open
.ufy-phone-reel-type {
  opacity: 1;
}


.ufy-phone-reel-comments-open.is-comments-expanded
.ufy-phone-reel-media,
.ufy-phone-reel-comments-open.is-comments-expanded
.ufy-phone-gallery-viewer-media {
  height: 0;

  opacity: 0;

  pointer-events: none;
}


/* Ocultar Subir Reel mientras comentarios está abierto */

.ufy-phone-reels.is-comments-open
.ufy-phone-reels-upload {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


/* =========================================================
   CAPA PRINCIPAL
   ========================================================= */

.ufy-phone-reel-comments {
  position: absolute;

  left: 0;
  right: 0;
  top: 42%;
  bottom: 0;

  z-index: 40;

  width: 100%;
  height: auto;

  box-sizing: border-box;

  overflow: hidden;

  color: #fff;

  background:
    linear-gradient(
      180deg,
      rgba(10, 11, 17, 0.95),
      rgba(3, 4, 8, 0.98)
    );

  border-radius:
    22px
    22px
    0
    0;

  box-shadow:
    0 -8px 26px
    rgba(0, 0, 0, 0.34);

  transform: translateY(0);

  transition:
    top 220ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 220ms ease;
}


.ufy-phone-reel-comments.is-entering {
  transform: translateY(110%);
}


.ufy-phone-reel-comments[
  data-comments-mode="expanded"
] {
  top: 0;

  border-radius: 0;
}


/* =========================================================
   CABECERA
   ========================================================= */

.ufy-phone-reel-comments-topbar {
  position: absolute;

  left: 0;
  top: 0;

  z-index: 3;

  width: 100%;
  min-height: 86px;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

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

  row-gap: 5px;

  padding:
    8px
    14px
    10px;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.38),
      transparent
    );

  cursor: grab;

  touch-action: none;

  user-select: none;

  -webkit-user-select: none;
}


.ufy-phone-reel-comments-topbar:active {
  cursor: grabbing;
}

/* Barra A — indicador de desplazamiento */

.ufy-phone-reel-comments-handle {
  display: block;

  flex:
    0 0 auto;

  width: 40px;
  height: 4px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 2px 7px
    rgba(0, 0, 0, 0.42);
}





.ufy-phone-reel-comments-heading {
  min-width: 0;

  display: grid;

  justify-items: center;

  row-gap: 1px;

  color: #fff;

  text-align: center;
}


.ufy-phone-reel-comments-heading img {
  display: block;

  width: 42px;
  height: 42px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 3px 7px
      rgba(0, 0, 0, 0.72)
    );
}


.ufy-phone-reel-comments-heading strong {
  display: block;

  font-size: 15px;
  font-weight: 750;
  line-height: 1.1;

  text-shadow:
    0 2px 7px
    rgba(0, 0, 0, 0.76);
}





/* =========================================================
   LISTA FLOTANTE
   ========================================================= */

.ufy-phone-reel-comments-list {
  position: absolute;

  left: 0;
  top: 86px;
  bottom:
    max(
      86px,
      calc(
        72px +
        env(safe-area-inset-bottom)
      )
    );

  z-index: 2;

  width: 100%;

  box-sizing: border-box;

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

  overscroll-behavior: contain;

  scrollbar-width: none;

  padding:
    4px
    7px
    10px;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 3px;

  scroll-behavior: smooth;
}


.ufy-phone-reel-comments-list::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   BURBUJAS
   ========================================================= */

.ufy-phone-reel-comment-bubble {
  position: relative;

  width:
    min(
      78%,
      310px
    );

  min-width: 0;

  box-sizing: border-box;

  padding:
    10px
    11px
    8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius:
    18px
    18px
    18px
    6px;

  background:
    rgba(8, 9, 14, 0.58);

  box-shadow:
    0 8px 20px
    rgba(0, 0, 0, 0.24);

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}


.ufy-phone-reel-comment-bubble.is-left {
  align-self: flex-start;

  margin-right: auto;
}


.ufy-phone-reel-comment-bubble.is-right {
  align-self: flex-end;

  margin-left: auto;

  border-radius:
    18px
    18px
    6px
    18px;

  background:
    rgba(65, 31, 106, 0.58);

  border-color:
    rgba(183, 122, 255, 0.30);
}




/* =========================================================
   CABECERA DE BURBUJA
   ========================================================= */

.ufy-phone-reel-comment-header {
  min-width: 0;

  displa.ufy-phone-reel-comment-header {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 3px;
}y: flex;

  align-items: center;

  gap: 7px;
}


.ufy-phone-reel-comment-avatar {
  flex:
    0 0 auto;

  width: 18px;
  height: 18px;

  box-sizing: border-box;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.42);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #8247c9,
      #321b54
    );

  color: #fff;

  font-size: 8px;
  font-weight: 750;
}


.ufy-phone-reel-comment-avatar img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.ufy-phone-reel-comment-identity {
  min-width: 0;

  display: flex;

  align-items: baseline;

  gap: 3px;
}


.ufy-phone-reel-comment-identity strong {
  min-width: 0;

  overflow: hidden;

  color: #fff;

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.1;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.ufy-phone-reel-comment-identity span {
  flex:
    0 0 auto;

  color:
    rgba(255, 255, 255, 0.54);

  font-size: 7px;
  font-weight: 500;
  line-height: 1;
}


/* =========================================================
   TEXTO DEL COMENTARIO
   ========================================================= */

.ufy-phone-reel-comment-content {
  margin:
    2px 0
    0;

  padding: 0;

  overflow-wrap: anywhere;

  color:
    rgba(255, 255, 255, 0.96);

  font-size: 9px;
  font-weight: 450;
  line-height: 1.15;
}


/* =========================================================
   ACCIONES DE LA BURBUJA
   ========================================================= */

.ufy-phone-reel-comment-footer {
  min-width: 0;

  margin-top: 7px;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    4px 9px;
}


.ufy-phone-reel-comment-footer button {
  appearance: none;

  margin: 0;
  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    rgba(255, 255, 255, 0.64);

  font: inherit;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;

  cursor: pointer;
}


.ufy-phone-reel-comment-footer button:active {
  opacity: 0.65;
}


.ufy-phone-reel-comment-like {
  display: inline-flex;

  align-items: center;

  gap: 3px;
}


.ufy-phone-reel-comment-like img {
  display: block;

  width: 17px;
  height: 17px;

  object-fit: contain;
}


.ufy-phone-reel-comment-like span {
  color:
    rgba(255, 255, 255, 0.72);

  font-size: 9px;
  font-weight: 700;
}


.ufy-phone-reel-comment-edited {
  color:
    rgba(255, 255, 255, 0.42);

  font-size: 8px;
  font-weight: 500;
}


/* =========================================================
   COMENTARIO ELIMINADO
   ========================================================= */

.ufy-phone-reel-comment-bubble.is-deleted {
  width:
    min(
      66%,
      260px
    );

  border-style: dashed;

  background:
    rgba(10, 10, 13, 0.42);
}


.ufy-phone-reel-comment-bubble.is-deleted
.ufy-phone-reel-comment-content {
  margin-top: 4px;

  color:
    rgba(255, 255, 255, 0.48);

  font-style: italic;
}


/* =========================================================
   ESTADOS DE LISTA
   ========================================================= */

.ufy-phone-reel-comments-empty,
.ufy-phone-reel-comments-loading,
.ufy-phone-reel-comments-error {
  width:
    calc(100% - 34px);

  margin:
    auto;

  box-sizing: border-box;

  padding:
    15px
    16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 18px;

  background:
    rgba(6, 7, 11, 0.48);

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  text-align: center;

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}


.ufy-phone-reel-comments-error {
  color:
    #ff9dad;

  border-color:
    rgba(255, 90, 116, 0.30);
}


/* =========================================================
   COMPOSITOR INFERIOR
   Una sola barra; sin tarjeta duplicada
   ========================================================= */

.ufy-phone-reel-comment-composer {
  position: absolute;

  left: 0;
  bottom: 0;

  z-index: 4;

  width: 100%;

  min-height:
    calc(
      68px +
      env(safe-area-inset-bottom)
    );

  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  align-items: end;

  column-gap: 8px;

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

  border-top:
    1px solid
    rgba(255, 255, 255, 0.13);

  background:
    rgba(5, 6, 10, 0.74);

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);
}


.ufy-phone-reel-comment-composer-avatar {
  width: 36px;
  height: 36px;

  box-sizing: border-box;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.44);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #874dd1,
      #2f194f
    );

  color: #fff;

  font-size: 13px;
  font-weight: 750;
}


.ufy-phone-reel-comment-composer-avatar img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.ufy-phone-reel-comment-composer-body {
  min-width: 0;

  display: grid;

  row-gap: 4px;
}


.ufy-phone-reel-comment-state {
  appearance: none;

  justify-self: start;

  max-width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 0;

  background:
    transparent;

  color:
    #c594ff;

  font: inherit;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;

  text-align: left;

  text-overflow: ellipsis;

  white-space: nowrap;

  cursor: pointer;
}


.ufy-phone-reel-comment-state[hidden] {
  display: none;
}


.ufy-phone-reel-comment-composer input {
  appearance: none;

  width: 100%;
  height: 38px;

  min-width: 0;

  box-sizing: border-box;

  margin: 0;

  padding:
    9px
    12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 999px;

  outline: 0;

  background:
    rgba(255, 255, 255, 0.065);

  color: #fff;

  font: inherit;
  font-size: 12px;
  font-weight: 450;
  line-height: 1;
}


.ufy-phone-reel-comment-composer input::placeholder {
  color:
    rgba(255, 255, 255, 0.48);
}


.ufy-phone-reel-comment-composer input:focus {
  border-color:
    rgba(176, 111, 255, 0.70);

  background:
    rgba(255, 255, 255, 0.085);
}


.ufy-phone-reel-comment-send {
  appearance: none;

  min-height: 36px;

  margin: 0;

  padding:
    0 2px;

  border: 0;

  background:
    transparent;

  color:
    #bd83ff;

  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;

  cursor: pointer;
}


.ufy-phone-reel-comment-send:active {
  color: #fff;

  transform:
    scale(0.96);
}


.ufy-phone-reel-comment-send:disabled {
  opacity: 0.42;

  cursor: default;
}



/* =========================================================
   AVISO TEMPORAL
   ========================================================= */

.ufy-phone-reel-comments-toast {
  position: absolute;

  left: 50%;
  bottom:
    max(
      84px,
      calc(
        72px +
        env(safe-area-inset-bottom)
      )
    );

  z-index: 8;

  max-width:
    calc(100% - 40px);

  box-sizing: border-box;

  padding:
    9px
    15px;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 999px;

  background:
    rgba(7, 8, 12, 0.88);

  color:
    rgba(255, 255, 255, 0.94);

  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;

  text-align: center;

  white-space: nowrap;

  transform:
    translateX(-50%);

  box-shadow:
    0 7px 20px
    rgba(0, 0, 0, 0.34);

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);

  animation:
    ufy-phone-reel-comments-toast-in
    180ms ease
    both;
}


@keyframes ufy-phone-reel-comments-toast-in {
  from {
    opacity: 0;

    transform:
      translate(-50%, 8px);
  }

  to {
    opacity: 1;

    transform:
      translate(-50%, 0);
  }
}




/* =========================================================
   PANTALLAS BAJAS
   ========================================================= */

@media (max-height: 700px) {
  .ufy-phone-reel-comments-topbar {
    min-height: 76px;
  }


  .ufy-phone-reel-comments-heading img {
    width: 36px;
    height: 36px;
  }


  .ufy-phone-reel-comments-list {
    top: 76px;

    gap: 10px;

    padding-top: 8px;
  }


  .ufy-phone-reel-comment-bubble {
    padding:
      8px
      10px
      7px;
  }
}

/* =========================================================
   HILO DE COMENTARIO — VERSIÓN A PLEGABLE
   Principal y respuestas dentro de una sola burbuja
   ========================================================= */

.ufy-phone-reel-comment-thread {
  position: relative;

  width:
    min(
      70%,
      270px
    );

  max-width: 100%;
  min-width: 0;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  padding:
    4px
    6px
    3px;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius:
    14px
    14px
    14px
    5px;

  background:
    rgba(18, 19, 27, 0.68);

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}


.ufy-phone-reel-comment-thread:has(
  > .ufy-phone-reel-comment-bubble.is-left
) {
  align-self: flex-start;

  margin-right: auto;
}


.ufy-phone-reel-comment-thread:has(
  > .ufy-phone-reel-comment-bubble.is-right
) {
  align-self: flex-end;

  margin-left: auto;

  border-color:
    rgba(183, 122, 255, 0.30);

  border-radius:
    18px
    18px
    6px
    18px;

  background:
    rgba(65, 31, 106, 0.58);
}


/* Comentario principal */

.ufy-phone-reel-comment-thread
> .ufy-phone-reel-comment-bubble {
  width: 100%;
  max-width: 100%;

  margin: 0;

  padding: 0;

  border: 0;

  border-radius: 0;

  box-sizing: border-box;

  background:
    transparent;

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


/* Botón Ver respuestas + / − */

.ufy-phone-reel-comment-replies-toggle {
  appearance: none;

  width: 100%;

  margin:
    9px
    0
    0;

  padding:
    8px
    2px
    4px;

  border: 0;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.13);

  outline: 0;

  display: block;

  background:
    transparent;

  color:
    rgba(196, 145, 255, 0.96);

  font:
    inherit;

  font-size: 12px;
  font-weight: 650;

  line-height: 1.2;

  text-align: left;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


.ufy-phone-reel-comment-replies-toggle:active {
  opacity: 0.62;
}


/* Lista vertical dentro de la tarjeta */

.ufy-phone-reel-comment-replies {
  position: relative;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    3px
    0
    0
    18px;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  overflow-x: hidden;
}


.ufy-phone-reel-comment-replies[hidden] {
  display: none;
}


/* Línea que conecta las respuestas */

.ufy-phone-reel-comment-replies::before {
  content: "";

  position: absolute;

  left: 6px;
  top: 10px;
  bottom: 9px;

  width: 1px;

  background:
    rgba(196, 145, 255, 0.42);
}


/* Cada respuesta es una fila, nunca otra burbuja */

.ufy-phone-reel-comment-replies
.ufy-phone-reel-comment-bubble,
.ufy-phone-reel-comment-replies
.ufy-phone-reel-comment-bubble.is-left,
.ufy-phone-reel-comment-replies
.ufy-phone-reel-comment-bubble.is-right,
.ufy-phone-reel-comment-replies
.ufy-phone-reel-comment-bubble.is-reply {
  width: 100%;
  max-width: 100%;

  align-self: stretch;

  margin:
    0;

  padding:
    9px
    0;

  border: 0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius: 0;

  box-sizing: border-box;

  background:
    transparent;

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ufy-phone-reel-comment-replies
.ufy-phone-reel-comment-bubble:last-child {
  padding-bottom: 3px;

  border-bottom: 0;
}


/* Quitar conexión antigua de las burbujas */

.ufy-phone-reel-comment-replies
.ufy-phone-reel-comment-bubble::before {
  display: none;
}


/* Impedir que textos largos salgan de la tarjeta */

.ufy-phone-reel-comment-thread
.ufy-phone-reel-comment-content {
  max-width: 100%;

  overflow-wrap: anywhere;

  word-break: break-word;
}