/**
 * Hello Plataforma · Chat
 * Estilos tipo mensajería · usa tokens globales --hp-*
 * @since 1.2.0
 */

.hp-chat-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: 0;
  /* Cancela el padding-bottom que el body reserva para la nav fixed,
     porque el chat ya descuenta la nav en su propia altura.
     Así el composer queda pegado justo encima de la nav, sin hueco. */
  margin-bottom: calc(-76px - env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   BLOQUEADO (sin suscripción)
   ============================================================ */
.hp-chat-locked {
  text-align: center;
  padding: 60px 24px;
}
.hp-chat-locked-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hp-bg-card);
  color: var(--hp-purple);
  font-size: 34px;
}
.hp-chat-locked-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--hp-text-primary);
  margin: 0 0 8px;
}
.hp-chat-locked-sub {
  font-size: 15px;
  color: var(--hp-text-secondary);
  max-width: 340px;
  margin: 0 auto 24px;
  line-height: 1.5;
}
.hp-chat-locked-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 99px;
  background: var(--hp-gradient-purple-button);
  color: #FFF;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--hp-shadow-button);
}

/* ============================================================
   CONVERSACIÓN
   ============================================================ */
.hp-chat {
  display: flex;
  flex-direction: column;
  /*
   * Altura = pantalla completa menos:
   *   - header del sitio (sticky arriba, ~56px)
   *   - nav inferior (fixed abajo, ~76px) + safe-area del dispositivo
   * dvh hace que se ajuste solo cuando aparece el teclado.
   */
  --hp-chat-header: 56px;
  --hp-chat-nav: 76px;
  /* Fallback navegadores viejos */
  height: calc(100vh - var(--hp-chat-header) - var(--hp-chat-nav));
  height: calc(100dvh - var(--hp-chat-header) - var(--hp-chat-nav) - env(safe-area-inset-bottom, 0px));
  min-height: 360px;
  background: var(--hp-bg-primary);
  border: 1px solid var(--hp-border-purple);
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  box-shadow:
    0 0 0 0.5px rgba(149, 117, 205, 0.12),
    0 -4px 24px -8px rgba(105, 73, 158, 0.15);
}

.hp-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hp-border-purple);
  background:
    linear-gradient(135deg, rgba(168,135,208,0.10) 0%, rgba(105,73,158,0.04) 100%),
    var(--hp-bg-primary);
  flex-shrink: 0;
}
.hp-chat-head-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hp-gradient-purple-avatar);
  color: #FFF;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow:
    0 0 0 2px var(--hp-bg-primary),
    0 0 0 3.5px rgba(149,117,205,0.35);
}
.hp-chat-head-info { flex: 1; min-width: 0; }
.hp-chat-head-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--hp-text-primary);
  letter-spacing: -0.2px;
}
.hp-chat-head-status {
  font-size: 12px;
  color: var(--hp-text-tertiary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.hp-chat-head-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hp-green-success);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(29,158,117,0.2);
}

/* Botón "Pedir custom" en el header del fan */
.hp-chat-custom-btn,
a.hp-chat-custom-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 99px;
  background: var(--hp-gradient-purple-button);
  background-color: #8261B5; /* fallback si la var no carga */
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  border: none;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 4px 12px -2px rgba(105,73,158,0.45);
  transition: transform 150ms ease, box-shadow 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.hp-chat-custom-btn:hover,
a.hp-chat-custom-btn:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 8px 20px -4px rgba(105,73,158,0.55);
}
.hp-chat-custom-btn:active,
a.hp-chat-custom-btn:active {
  transform: translateY(0);
}
.hp-chat-custom-btn i {
  font-size: 16px;
  color: #FFFFFF !important;
}
/* Brillo sutil animado en el ícono */
.hp-chat-custom-btn i.ti-sparkles {
  animation: hp-sparkle 2.5s ease-in-out infinite;
}
@keyframes hp-sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.12); }
}

/* Mensajes */
.hp-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    radial-gradient(circle at 15% 0%, rgba(149,117,205,0.06), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(168,135,208,0.05), transparent 45%),
    var(--hp-bg-secondary);
  scroll-behavior: smooth;
}
.hp-chat-messages::-webkit-scrollbar { width: 6px; }
.hp-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(149,117,205,0.25);
  border-radius: 99px;
}

.hp-chat-loading,
.hp-chat-thread-empty {
  text-align: center;
  color: var(--hp-text-tertiary);
  font-size: 14px;
  margin: auto;
  padding: 20px;
}
.hp-chat-loading i {
  animation: hp-spin 1s linear infinite;
  display: inline-block;
}
@keyframes hp-spin { to { transform: rotate(360deg); } }

.hp-msg {
  max-width: 76%;
  padding: 10px 15px;
  border-radius: 18px;
  position: relative;
  word-wrap: break-word;
  animation: hp-msg-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes hp-msg-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hp-msg-text {
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.hp-msg-time {
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.65;
  text-align: right;
  font-weight: 500;
}

/* Míos (a la derecha) */
.hp-msg-mine {
  align-self: flex-end;
  background: var(--hp-gradient-purple-button);
  color: #FFF;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 10px -2px rgba(105,73,158,0.35);
}
.hp-msg-mine::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -6px;
  width: 12px;
  height: 14px;
  background: var(--hp-purple-deep);
  border-bottom-left-radius: 14px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
/* De la otra persona (izquierda) */
.hp-msg-theirs {
  align-self: flex-start;
  background: var(--hp-bg-primary);
  color: var(--hp-text-primary);
  border: 1px solid var(--hp-border-purple);
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 6px -2px rgba(105,73,158,0.10);
}
.hp-msg-theirs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -6px;
  width: 12px;
  height: 14px;
  background: var(--hp-bg-primary);
  border-bottom-right-radius: 14px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  border-left: 1px solid var(--hp-border-purple);
}

.hp-chat-error {
  align-self: center;
  background: rgba(192, 69, 69, 0.1);
  color: var(--hp-red-error);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 10px;
}

/* Composer */
.hp-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--hp-border-purple);
  background:
    linear-gradient(0deg, rgba(168,135,208,0.04), transparent),
    var(--hp-bg-primary);
  flex-shrink: 0;
}
.hp-chat-input {
  flex: 1;
  border: 1.5px solid var(--hp-border-purple-strong);
  border-radius: 24px;
  padding: 12px 18px;
  font-size: 14.5px;
  font-family: inherit;
  resize: none;
  outline: none;
  max-height: 120px;
  line-height: 1.4;
  background: var(--hp-bg-secondary);
  color: var(--hp-text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.hp-chat-input:focus {
  border-color: var(--hp-purple);
  box-shadow: 0 0 0 3px rgba(149,117,205,0.12);
}
.hp-chat-input:disabled { opacity: 0.6; }
.hp-chat-send {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--hp-gradient-purple-button);
  color: #FFF;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--hp-shadow-button);
  transition: transform 150ms ease, opacity 150ms ease;
}
.hp-chat-send:hover { transform: scale(1.06); }
.hp-chat-send:active { transform: scale(0.96); }
.hp-chat-send:disabled { opacity: 0.45; cursor: default; transform: none; }

/* ============================================================
   BANDEJA (creadora)
   ============================================================ */
.hp-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.hp-inbox-item,
a.hp-inbox-item {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  text-decoration: none !important;
  color: inherit !important;
  background: var(--hp-bg-primary);
  border: 1px solid var(--hp-border-purple);
  box-shadow: 0 1px 4px -1px rgba(105,73,158,0.08);
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.hp-inbox-item:hover,
a.hp-inbox-item:hover {
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(105,73,158,0.25);
  border-color: var(--hp-border-purple-strong);
}
.hp-inbox-chevron {
  color: var(--hp-text-tertiary) !important;
  font-size: 18px;
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}
.hp-inbox-item:hover .hp-inbox-chevron {
  opacity: 0.8;
  transform: translateX(2px);
}
/* No leídos: barra morada lateral + fondo sutil */
.hp-inbox-item.has-unread {
  background: linear-gradient(90deg, rgba(149,117,205,0.07), var(--hp-bg-primary) 60%);
  border-color: var(--hp-border-purple-strong);
}
.hp-inbox-item.has-unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--hp-gradient-purple-button);
}
.hp-inbox-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hp-gradient-purple-avatar);
  color: #FFF !important;
  font-size: 23px;
  flex-shrink: 0;
  box-shadow:
    0 0 0 2px var(--hp-bg-primary),
    0 0 0 3px rgba(149,117,205,0.25);
}
.hp-inbox-body { flex: 1; min-width: 0; }
.hp-inbox-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 3px;
}
.hp-inbox-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--hp-text-primary) !important;
  letter-spacing: -0.2px;
}
.hp-inbox-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--hp-gradient-purple-button);
  color: #FFF !important;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -1px rgba(105,73,158,0.4);
}
.hp-inbox-preview {
  font-size: 13.5px;
  color: var(--hp-text-secondary) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-inbox-item.has-unread .hp-inbox-preview {
  color: var(--hp-text-primary) !important;
  font-weight: 600;
}

/* Vacío */
.hp-chat-empty {
  text-align: center;
  padding: 60px 24px;
}
.hp-chat-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hp-bg-card);
  color: var(--hp-purple);
  font-size: 30px;
}
.hp-chat-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--hp-text-primary);
  margin: 0 0 6px;
}
.hp-chat-empty-sub {
  font-size: 14px;
  color: var(--hp-text-tertiary);
  margin: 0;
}

/* Badge de chat en nav */
.hp-nav-chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--hp-red-error);
  color: #FFF;
  font-size: 10px;
  font-weight: 800;
  position: absolute;
  top: 2px;
  right: 2px;
}

/* Responsive */
@media (max-width: 600px) {
  .hp-chat {
    /* Mismo cálculo: pantalla menos header y nav · borde superior redondeado
       y pegado abajo (sin radio inferior) para que se sienta nativo */
    min-height: 320px;
    border-radius: 16px 16px 0 0;
  }
  .hp-msg { max-width: 84%; }
  /* En mobile el botón custom solo muestra el ícono */
  .hp-chat-custom-btn span { display: none; }
  .hp-chat-custom-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .hp-chat-custom-btn i { font-size: 18px; }
  .hp-chat-head { padding: 12px 14px; gap: 10px; }
  .hp-chat-head-avatar { width: 42px; height: 42px; font-size: 20px; }
}