/* =========================================================
   UFY PHONE — EL CHAT EN EL HOME
   Dos contenidos con división diagonal.
   Este archivo no modifica el Lock Screen.
   ========================================================= */

.ufy-el-chat-preview-host {
  flex: 0 0 auto;

  width: 100%;
  min-width: 0;

  margin-top: 9px;
}


.ufy-el-chat-preview {
  position: relative;
  z-index: 1;

  isolation: isolate;

  display: block;

  width: 100%;
  min-width: 0;

  color: var(--ufy-tone-255,#ffffff);
}


.ufy-el-chat-preview::before {
  content: "";

  position: absolute;
  z-index: -1;

  left: 4%;
  right: 4%;
  top: 10%;
  bottom: 9%;

  border-radius: 24px;

  background:
    radial-gradient(
      circle at 25% 58%,
      rgba(
        198,
        58,
        88,
        0.3
      ),
      transparent 55%
    ),
    radial-gradient(
      circle at 78% 44%,
      rgba(
        110,
        62,
        210,
        0.3
      ),
      transparent 58%
    );

  filter: blur(22px);

  opacity: 0.8;

  pointer-events: none;
}


/* MARCO COMPLETO */

.ufy-el-chat-preview-card {
  position: relative;

  display: block;

  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 2;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.24);

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      #24172f,
      #100d19 72%
    );

  box-shadow:
    0 14px 28px
    rgba(
      4,
      2,
      11,
      0.36
    ),
    0 0 18px
    rgba(
      118,
      69,
      202,
      0.14
    ),
    inset 0 1px 0
    rgba(var(--ufy-rgb-255,255,255,255),0.08);

  box-sizing: border-box;

  transform: translateZ(0);
}


/* Línea diagonal fina. */

.ufy-el-chat-preview[
  data-layout="split"
]
.ufy-el-chat-preview-card::after {
  content: "";

  position: absolute;
  z-index: 8;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(
        214,
        195,
        255,
        0.92
      ),
      rgba(
        145,
        91,
        255,
        0.82
      )
    );

  clip-path:
    polygon(
      67.85% 0,
      68.15% 0,
      32.15% 100%,
      31.85% 100%
    );

  filter:
    drop-shadow(
      0 0 3px
      rgba(
        155,
        102,
        255,
        0.72
      )
    );

  pointer-events: none;
}


/* DOS ZONAS INDEPENDIENTES */

.ufy-el-chat-preview-panel {
  appearance: none;
  -webkit-appearance: none;

  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 0;
  outline: 0;

  background:
    linear-gradient(
      145deg,
      #24172f,
      #100d19 72%
    );

  color: var(--ufy-tone-255,#ffffff);

  text-align: left;

  cursor: pointer;

  transform: translateZ(0);

  transition:
    filter 180ms ease,
    opacity 180ms ease;

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


.ufy-el-chat-preview-panel[hidden] {
  display: none !important;
}


.ufy-el-chat-preview[
  data-layout="single"
]
.ufy-el-chat-preview-panel.is-left {
  clip-path:
    inset(0);
}


.ufy-el-chat-preview[
  data-layout="split"
]
.ufy-el-chat-preview-panel.is-left {
  z-index: 1;

  clip-path:
    polygon(
      0 0,
      68% 0,
      32% 100%,
      0 100%
    );
}


.ufy-el-chat-preview[
  data-layout="split"
]
.ufy-el-chat-preview-panel.is-right {
  z-index: 2;

  clip-path:
    polygon(
      68% 0,
      100% 0,
      100% 100%,
      32% 100%
    );
}


.ufy-el-chat-preview-panel:not(
  :disabled
):active {
  filter:
    brightness(0.86);
}


.ufy-el-chat-preview-panel:focus-visible {
  box-shadow:
    inset 0 0 0 3px
    rgba(
      190,
      153,
      255,
      0.96
    );
}


.ufy-el-chat-preview-panel:disabled {
  cursor: default;
}


/* FOTOS Y REELS */

.ufy-el-chat-preview-media {
  position: absolute;
  inset: 0;

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

  overflow: hidden;

  background:
    radial-gradient(
      circle at 28% 32%,
      rgba(
        119,
        73,
        176,
        0.3
      ),
      transparent 50%
    ),
    linear-gradient(
      145deg,
      #24172f,
      #100d19 72%
    );
}


.ufy-el-chat-preview-image,
.ufy-el-chat-preview-video {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  object-fit: cover;
  object-position: center;

  background: #0d0a13;
}


.ufy-el-chat-preview-panel.is-left
.ufy-el-chat-preview-image,
.ufy-el-chat-preview-panel.is-left
.ufy-el-chat-preview-video {
  object-position:
    42% center;
}


.ufy-el-chat-preview-panel.is-right
.ufy-el-chat-preview-image,
.ufy-el-chat-preview-panel.is-right
.ufy-el-chat-preview-video {
  object-position:
    58% center;
}


/* SOMBRAS PARA LOS NOMBRES */

.ufy-el-chat-preview-shade {
  position: absolute;

  pointer-events: none;
}


.ufy-el-chat-preview-panel.is-left
.ufy-el-chat-preview-shade {
  inset:
    40%
    0
    0;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(
        7,
        5,
        11,
        0.1
      ) 25%,
      rgba(
        7,
        5,
        11,
        0.68
      ) 100%
    );
}


.ufy-el-chat-preview-panel.is-right
.ufy-el-chat-preview-shade {
  inset:
    0
    0
    48%;

  background:
    linear-gradient(
      to top,
      transparent,
      rgba(
        7,
        5,
        11,
        0.08
      ) 32%,
      rgba(
        7,
        5,
        11,
        0.58
      ) 100%
    );
}


/* AVATAR Y USUARIO */

.ufy-el-chat-preview-identity {
  position: absolute;
  z-index: 4;

  display: flex;
  align-items: center;

  min-width: 0;

  gap: 8px;

  pointer-events: none;
}


.ufy-el-chat-preview-identity[hidden] {
  display: none;
}


.ufy-el-chat-preview-panel.is-left
.ufy-el-chat-preview-identity {
  left: 12px;
  bottom: 16px;

  max-width: 38%;
}


.ufy-el-chat-preview-panel.is-right
.ufy-el-chat-preview-identity {
  top: 13px;
  right: 12px;

  max-width: 27%;

  flex-direction: row;
  justify-content: flex-end;
}


.ufy-el-chat-preview-avatar {
  flex: 0 0 34px;

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

  width: 34px;
  height: 34px;

  overflow: hidden;

  border:
    1.5px solid
    rgba(var(--ufy-rgb-255,255,255,255),0.9);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #8558d4,
      #2b183f
    );

  color: var(--ufy-tone-255,#ffffff);

  box-shadow:
    0 3px 10px
    rgba(var(--ufy-rgb-0,0,0,0),0.3);

  box-sizing: border-box;
}


.ufy-el-chat-preview-avatar img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


.ufy-el-chat-preview-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  font-size:calc(14px * var(--ufy-font-scale,1));
  font-weight: 700;
  line-height: 1;
}


.ufy-el-chat-preview-handle {
  min-width: 0;

  overflow: hidden;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.98);

  font-size:calc(13px * var(--ufy-font-scale,1));
  font-weight: 680;
  line-height: 1.15;

  text-overflow: ellipsis;
  white-space: nowrap;

  text-shadow:
    0 1px 5px
    rgba(var(--ufy-rgb-0,0,0,0),0.9);
}


/* El panel único mantiene el nombre abajo. */

.ufy-el-chat-preview[
  data-layout="single"
]
.ufy-el-chat-preview-panel.is-left
.ufy-el-chat-preview-identity {
  max-width:
    calc(100% - 24px);
}


/* PROGRESO */

.ufy-el-chat-preview-progress {
  position: absolute;
  z-index: 5;

  left: 11px;
  right: 11px;
  bottom: 6px;

  display: block;

  height: 2px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(var(--ufy-rgb-255,255,255,255),0.22);

  pointer-events: none;
}


.ufy-el-chat-preview-progress[hidden],
.ufy-el-chat-preview[
  data-layout="split"
]
.ufy-el-chat-preview-progress {
  display: none;
}


.ufy-el-chat-preview-progress-value {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #8f60ff,
      #b276ff,
      #d18aff
    );

  transform: scaleX(0);
  transform-origin: left center;

  will-change: transform;
}


/* CARGA, VACÍO Y ERROR */

.ufy-el-chat-preview-state {
  position: absolute;
  z-index: 12;

  inset: 0;

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

  padding: 24px;

  background:
    linear-gradient(
      145deg,
      #24172f,
      #100d19 72%
    );

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.78);

  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 500;
  line-height: 1.35;

  text-align: center;
}


.ufy-el-chat-preview-state[hidden] {
  display: none;
}


.ufy-el-chat-preview[data-state="loading"]
.ufy-el-chat-preview-state::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      105deg,
      transparent 32%,
      rgba(var(--ufy-rgb-255,255,255,255),0.08) 48%,
      transparent 64%
    );

  transform:
    translateX(-100%);

  animation:
    ufy-el-chat-preview-loading
    1.5s
    ease-in-out
    infinite;
}


.ufy-el-chat-preview-message {
  position: relative;
  z-index: 2;

  display: block;

  max-width: 42%;

  margin: auto;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.82);

  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 500;
  line-height: 1.35;

  text-align: center;
}


/* NOMBRE DE LA APP */

.ufy-el-chat-preview-label {
  display: block;

  width: 100%;

  margin-top: 7px;

  color:
    rgba(var(--ufy-rgb-255,255,255,255),0.86);

  font-size:calc(13.5px * var(--ufy-font-scale,1));
  font-weight: 400;
  line-height: 1.2;

  text-align: center;

  text-shadow:
    0 1px 4px
    rgba(var(--ufy-rgb-0,0,0,0),0.34);
}


.ufy-el-chat-preview-host +
.ufy-phone-app-pages {
  margin-top: 14px;
}


@keyframes ufy-el-chat-preview-loading {
  to {
    transform:
      translateX(100%);
  }
}


/* CELULAR */

@media (max-width: 430px) {
  .ufy-el-chat-preview-host {
    width:
      calc(100% + 36px);

    margin-top:
      calc(
        0px -
        max(
          13px,
          env(safe-area-inset-top)
        )
      );

    margin-left: -18px;
    margin-right: -18px;
  }


  .ufy-el-chat-preview-card {
    height:
      calc(
        max(
          13px,
          env(safe-area-inset-top)
        ) +
        66.6667vw +
        21.3333px
      );

    aspect-ratio: auto;

    border-top: 0;
    border-left: 0;
    border-right: 0;

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


  .ufy-el-chat-preview-panel.is-left
  .ufy-el-chat-preview-identity {
    left: 11px;
    bottom: 15px;

    max-width: 41%;
  }


  .ufy-el-chat-preview-panel.is-right
  .ufy-el-chat-preview-identity {
    top:
      calc(
        max(
          13px,
          env(safe-area-inset-top)
        ) +
        22px
      );

    right: 11px;

    max-width: 27%;
  }


  .ufy-el-chat-preview-avatar {
    flex-basis: 31px;

    width: 31px;
    height: 31px;
  }


  .ufy-el-chat-preview-handle {
    font-size:calc(12px * var(--ufy-font-scale,1));
  }
}


@media (max-width: 360px) {
  .ufy-el-chat-preview-panel.is-left
  .ufy-el-chat-preview-identity {
    left: 9px;
    bottom: 14px;

    gap: 6px;
  }


  .ufy-el-chat-preview-panel.is-right
  .ufy-el-chat-preview-identity {
    right: 9px;

    gap: 6px;
  }


  .ufy-el-chat-preview-avatar {
    flex-basis: 28px;

    width: 28px;
    height: 28px;
  }


  .ufy-el-chat-preview-handle {
    font-size:calc(11px * var(--ufy-font-scale,1));
  }
}


@media (
  prefers-reduced-motion:
  reduce
) {
  .ufy-el-chat-preview-panel {
    transition: none;
  }


  .ufy-el-chat-preview[data-state="loading"]
  .ufy-el-chat-preview-state::before {
    animation: none;
  }
}