/* ============================================================
   public/css/site-chat.css -- WEB-02 (CHAT-SITIO-2026-09)
   Widget de chat de la ficha (App\Livewire\Site\ChatWidget,
   resources/views/livewire/site/chat-widget.blade.php).

   Se carga SIN bloquear el render (rel=preload + onload, ver
   property-detail.blade.php). La raiz del widget nace `hidden` y esta
   hoja la destapa: si el CSS no ha llegado no se ve nada a medio pintar.
   Todo el widget es position: fixed -> cero CLS, nada empuja al heroe.

   Estetica del sitio (Wander-like): Epilogue, blanco/negro, verde del
   boton Reserve (#12723e, .ficha-cta-verde de site.css).
     <  1280px  burbuja redonda de 60px abajo a la derecha; se esconde
                cuando el cuadro de reserva pasa por debajo (clase
                .dn-chat-tapado en <html>, la pone la vista).
     >= 1280px  tarjeta vertical grande en el margen derecho, a la altura
                de la galeria (el contenedor deja 120px de margen).
   Modal: hoja completa en celular; panel de 400px abajo a la derecha
   desde 641px. Botones y campos >= 48px; fuera de @media nada fijo pasa
   de 390px (tests/Feature/Livewire/Site/ChatWidgetTest.php lo revisa).
   ============================================================ */

.dn-chat[hidden] {
  display: block;
}

.dn-chat {
  --dn-chat-verde: #12723e;
  --dn-chat-verde-hover: #0e5c31;
  --dn-chat-tinta: var(--site-ink, #232323);
  --dn-chat-gris: var(--site-neutral-70, #717171);
  --dn-chat-borde: var(--site-neutral-10, #ebebeb);
  --dn-chat-fondo-suave: var(--site-neutral-05, #f7f7f7);
  --dn-chat-curva: cubic-bezier(.165, .84, .44, 1);
  font-family: var(--site-font-family, 'Epilogue', 'Epilogue Fallback', system-ui, sans-serif);
  color: var(--dn-chat-tinta);
}

.dn-chat button,
.dn-chat input,
.dn-chat textarea {
  font-family: inherit;
}

.dn-chat__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Lanzador: burbuja (celular / tableta / laptop chica) ─────── */

.dn-chat__lanzador {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 60px;
  height: 60px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dn-chat-verde);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms var(--dn-chat-curva), opacity 200ms ease, box-shadow 200ms ease, visibility 0s linear 0s;
}

.dn-chat__lanzador:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .12);
}

.dn-chat__lanzador:active {
  transform: scale(.96);
}

.dn-chat__lanzador:focus-visible {
  outline: 3px solid var(--dn-chat-tinta);
  outline-offset: 3px;
}

.dn-chat__lanzador.is-cargando {
  opacity: .75;
}

/* No tapa el boton Reserve ni el cuadro de reserva: mientras el cuadro
   pasa por debajo, la burbuja se va (y sale del orden de tabulacion). */
.dn-chat-tapado .dn-chat__lanzador {
  opacity: 0;
  transform: scale(.85);
  visibility: hidden;
  pointer-events: none;
  transition: transform 200ms var(--dn-chat-curva), opacity 200ms ease, visibility 0s linear 200ms;
}

.dn-chat__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.dn-chat__icono svg {
  width: 32px;
  height: 32px;
  display: block;
}

.dn-chat__icono-punto {
  fill: var(--dn-chat-verde);
}

.dn-chat__lanzador-texto,
.dn-chat__lanzador-sub {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dn-chat__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 2px solid #ffffff;
  background: var(--site-error, #d22200);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ── Lanzador: tarjeta vertical grande (escritorio ancho) ─────── */

@media (min-width: 1280px) {
  .dn-chat__lanzador {
    /* A la altura de la galeria: su centro queda a ~346px del borde de
       arriba (topbar 112 + 24 de aire + la mitad de sus 420px). En una
       ventana baja, al centro de la ventana. */
    top: min(346px, 50%);
    bottom: auto;
    right: 12px;
    /* Cabe en el margen del contenedor (120px hasta 1440, luego crece). */
    width: clamp(96px, calc((100vw - 1440px) / 2 + 88px), 168px);
    height: auto;
    padding: 20px 10px 18px;
    flex-direction: column;
    gap: 12px;
    border-radius: 16px;
    border: 1px solid var(--dn-chat-borde);
    background: #ffffff;
    color: var(--dn-chat-tinta);
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
    transform: translateY(-50%);
  }

  .dn-chat__lanzador:hover {
    border-color: var(--site-neutral-20, #dddddd);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    transform: translateY(calc(-50% - 2px));
  }

  .dn-chat__lanzador:active {
    transform: translateY(-50%) scale(.98);
  }

  .dn-chat__icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--dn-chat-verde);
    color: #ffffff;
    transition: background-color 250ms var(--dn-chat-curva);
  }

  .dn-chat__lanzador:hover .dn-chat__icono {
    background: var(--dn-chat-verde-hover);
  }

  .dn-chat__lanzador-texto,
  .dn-chat__lanzador-sub {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .dn-chat__lanzador-texto {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .dn-chat__lanzador-sub {
    font-size: 12px;
    line-height: 1.35;
    color: var(--dn-chat-gris);
  }

  .dn-chat__badge {
    top: 8px;
    right: 8px;
  }

  /* La tarjeta vive en el margen: nunca se esconde por el cuadro de reserva. */
  .dn-chat-tapado .dn-chat__lanzador {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%);
  }
}

/* ── Modal ─────────────────────────────────────────────────────── */

.dn-chat__fondo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .4);
}

.dn-chat__panel {
  position: fixed;
  inset: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: var(--dn-chat-tinta);
  overflow: hidden;
  outline: none;
  animation: dn-chat-entrar 220ms var(--dn-chat-curva);
}

@keyframes dn-chat-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 641px) {
  .dn-chat__panel {
    inset: auto 24px 24px auto;
    width: 400px;
    height: 680px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .24);
  }
}

.dn-chat__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--dn-chat-borde);
  flex: 0 0 auto;
}

.dn-chat__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dn-chat__cabecera-textos {
  flex: 1 1 auto;
  min-width: 0;
}

.dn-chat__titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.dn-chat__subtitulo {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--dn-chat-gris);
}

.dn-chat__cerrar {
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dn-chat-tinta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dn-chat__cerrar:hover {
  background: var(--dn-chat-fondo-suave);
}

.dn-chat__cerrar:focus-visible,
.dn-chat__cambiar:focus-visible,
.dn-chat__enviar:focus-visible {
  outline: 3px solid var(--dn-chat-tinta);
  outline-offset: 2px;
}

/* Tarjeta de contexto */

.dn-chat__contexto {
  flex: 0 0 auto;
  margin: 12px 16px 0;
  padding: 10px 12px;
  border: 1px solid var(--dn-chat-borde);
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;
}

.dn-chat__contexto-foto {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--dn-chat-fondo-suave);
}

.dn-chat__contexto-datos {
  min-width: 0;
  grid-column: auto / -1;
}

.dn-chat__contexto-nombre {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dn-chat__contexto-linea {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dn-chat-gris);
}

.dn-chat__contexto-linea .material-symbols-outlined {
  font-size: 18px;
  line-height: 1.1;
  flex: 0 0 auto;
}

.dn-chat__contexto-total {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dn-chat-tinta);
}

.dn-chat__cambiar {
  grid-column: 1 / -1;
  min-height: 48px;
  width: 100%;
  padding: 0 16px;
  border: 1px solid var(--site-neutral-20, #dddddd);
  border-radius: 99px;
  background: #ffffff;
  color: var(--dn-chat-tinta);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.dn-chat__cambiar:hover {
  background: var(--dn-chat-fondo-suave);
}

.dn-chat__cambiar .material-symbols-outlined {
  font-size: 20px;
}

/* Hilo */

.dn-chat__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  /* Lo que sube se desvanece bajo la tarjeta de contexto en vez de cortarse seco. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}

.dn-chat__hilo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dn-chat__msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  box-sizing: border-box;
}

.dn-chat__msg--equipo {
  align-self: flex-start;
  background: var(--dn-chat-fondo-suave);
  border-bottom-left-radius: 4px;
}

.dn-chat__msg--huesped {
  align-self: flex-end;
  background: var(--dn-chat-tinta);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.dn-chat__msg-autor {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dn-chat-gris);
}

.dn-chat__msg-texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dn-chat__msg-hora {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--dn-chat-gris);
}

.dn-chat__msg--huesped .dn-chat__msg-hora {
  color: rgba(255, 255, 255, .72);
  text-align: right;
}

.dn-chat__nota {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dn-chat-gris);
  text-align: center;
}

/* Formulario del primer contacto */

.dn-chat__form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dn-chat__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dn-chat__contacto {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dn-chat__etiqueta {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dn-chat-tinta);
}

.dn-chat__etiqueta--sub {
  font-weight: 600;
}

.dn-chat__ayuda {
  margin: -6px 0 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dn-chat-gris);
}

.dn-chat__input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--site-neutral-40, #c2c2c2);
  border-radius: 12px;
  background: #ffffff;
  color: var(--dn-chat-tinta);
  /* 16px: iOS no hace zoom al enfocar. */
  font-size: 16px;
  line-height: 1.4;
}

.dn-chat__input:focus {
  outline: 2px solid var(--dn-chat-verde);
  outline-offset: 0;
  border-color: var(--dn-chat-verde);
}

.dn-chat__input[aria-invalid="true"] {
  border-color: var(--site-error, #d22200);
}

.dn-chat__input--area {
  min-height: 96px;
  resize: vertical;
}

.dn-chat__error {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--site-error-dk, #891600);
}

.dn-chat__aviso {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--site-callout-error-bg, #fbe9e5);
  color: var(--site-error-dk, #891600);
  font-size: 14px;
  line-height: 1.45;
}

.dn-chat__trampa {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dn-chat__enviar {
  min-height: 48px;
  min-width: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 99px;
  background: var(--dn-chat-verde);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 250ms var(--dn-chat-curva);
}

.dn-chat__enviar:hover {
  background: var(--dn-chat-verde-hover);
}

.dn-chat__enviar:disabled {
  opacity: .6;
  cursor: progress;
}

.dn-chat__enviar .material-symbols-outlined {
  font-size: 20px;
}

.dn-chat__enviar--ancho {
  width: 100%;
}

.dn-chat__privacidad {
  margin: -4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dn-chat-gris);
  text-align: center;
}

/* Composer (despues del primer envio) */

.dn-chat__composer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--dn-chat-borde);
  background: #ffffff;
}

.dn-chat__composer-fila {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.dn-chat__input--composer {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 128px;
  resize: none;
  border-radius: 24px;
  padding: 12px 16px;
}

@media (prefers-reduced-motion: reduce) {
  .dn-chat__lanzador,
  .dn-chat-tapado .dn-chat__lanzador,
  .dn-chat__icono,
  .dn-chat__enviar {
    transition: none;
  }

  .dn-chat__panel {
    animation: none;
  }
}