/*
 * Chat compartido de Plumagrafito.
 *
 * Todo cuelga de .pgchat para no tocar relatos, formularios ni administración.
 * Criterio de espacio: primero se recortan rellenos, márgenes y adornos; el
 * tamaño de letra de los mensajes se mantiene en 16px para que se lean cómodos.
 */

.pgchat {
  --pgc-verde: var(--green-950, #072b31);
  --pgc-verde-800: var(--green-800, #114750);
  --pgc-vino: var(--wine-700, #8e1b2b);
  --pgc-oro: var(--gold-500, #d3a14b);
  --pgc-crema: var(--cream-50, #fffdf8);
  --pgc-crema-200: var(--cream-200, #f4ead7);
  --pgc-borde: var(--border, #dfcfad);
  --pgc-texto: var(--text, #1f292b);
  --pgc-apagado: var(--muted, #6f716d);
  --pgc-radio: 18px;

  /*
   * La esquina inferior derecha ya la ocupa el botón "¿Necesitas ayuda?"
   * (.help-fab: 50px de alto, a 22px del borde). El chat se apila por encima
   * para no taparlo. Si ese botón cambia de tamaño, basta ajustar este hueco.
   */
  --pgc-hueco-inferior: 84px;
  --pgc-margen-lateral: 22px;

  font-family: inherit;
  color: var(--pgc-texto);
  box-sizing: border-box;
}

.pgchat *,
.pgchat *::before,
.pgchat *::after { box-sizing: border-box; }

/*
 * El navegador oculta [hidden] con display:none, pero cualquier regla de clase
 * con display:flex le gana por especificidad. Sin esto, el panel de emojis, la
 * caja de respuesta y el aviso de mensajes nuevos se quedan siempre a la vista.
 */
.pgchat [hidden],
.pgchat__launcher[hidden] { display: none !important; }

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

/* ------------------------------------------------------------ contenedor */

.pgchat__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--pgc-crema);
  border: 1px solid var(--pgc-borde);
  border-radius: var(--pgc-radio);
  box-shadow: 0 14px 40px rgba(19, 39, 42, .13);
  overflow: hidden;
}

/*
 * Ventana flotante no modal.
 *
 * Siempre position:fixed y colocada con top/right en píxeles: el guion calcula
 * esos dos valores a partir del hero real. Animar sólo esas dos propiedades
 * hace que el paso de "sobre el hero" a "en la esquina" sea continuo, sin
 * saltos ni cambios de altura en el contenido de la página.
 *
 * No lleva fondo oscurecido ni captura clics fuera del panel: el resto de la
 * portada se sigue usando con normalidad.
 */
.pgchat--floating {
  position: fixed;
  /* Valores de partida; el guion los sobrescribe con la posición calculada. */
  top: auto;
  right: var(--pgc-margen-lateral);
  bottom: var(--pgc-hueco-inferior);
  /* Por encima del panel de ayuda (230) y muy por debajo del aviso de
     cookies (1200), que nunca debe quedar tapado. */
  z-index: 240;
  width: min(410px, calc(100vw - 44px));
  display: block;
  transition: top .38s cubic-bezier(.22, .61, .36, 1),
              right .38s cubic-bezier(.22, .61, .36, 1),
              width .28s ease;
}

/*
 * El contenedor no intercepta el ratón: sólo lo hacen el panel y la pestaña.
 * Así el resto de la portada se sigue pulsando y desplazando aunque la ventana
 * quede por encima, sin depender de que la geometría sea exacta.
 */
.pgchat--floating { pointer-events: none; }
.pgchat--floating .pgchat__panel,
.pgchat--floating .pgchat__launcher { pointer-events: auto; }

/* Mientras el guion aún no ha medido nada, la ventana no debe parpadear. */
.pgchat--floating:not(.is-colocado) .pgchat__panel,
.pgchat--floating:not(.is-colocado) .pgchat__launcher { visibility: hidden; }

.pgchat--floating .pgchat__panel {
  height: var(--pgc-alto, 470px);
  max-height: calc(100vh - 120px);
  display: none;
}

/* --- Abierto: tamaño de trabajo (380–440 de ancho, 400–500 de alto) --- */
.pgchat--floating.is-open {
  width: min(410px, calc(100vw - 44px));
  --pgc-alto: clamp(400px, 52vh, 500px);
}

.pgchat--floating.is-open .pgchat__panel { display: flex; }

/* --- Ampliado: más sitio para leer, sin perder la conversación --- */
.pgchat--floating.is-wide {
  width: min(720px, calc(100vw - 44px));
  --pgc-alto: min(78vh, 760px);
}

/* --- Minimizado: sólo queda la pestaña de acceso --- */
.pgchat--floating.is-min .pgchat__panel { display: none; }

/* ---------------------------------------------------------- encabezado */

.pgchat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--pgc-verde) 0%, var(--pgc-verde-800) 100%);
  color: #fff;
  flex: 0 0 auto;
}

.pgchat__heading { min-width: 0; }

.pgchat__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.22rem;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
}

.pgchat__subtitle {
  margin: 1px 0 0;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--pgc-oro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pgchat__tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.pgchat__tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.pgchat__tool:hover,
.pgchat__tool:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: var(--pgc-oro);
  color: #fff;
}

/* ------------------------------------------------------------- mensajes */

.pgchat__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.pgchat__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(212, 161, 75, .07) 0, rgba(212, 161, 75, 0) 60px),
    var(--pgc-crema);
  scrollbar-width: thin;
}

.pgchat__messages:focus-visible { outline: 2px solid var(--pgc-oro); outline-offset: -2px; }

.pgchat__state {
  margin: 18px 0;
  text-align: center;
  color: var(--pgc-apagado);
  font-size: .9rem;
}

.pgchat__msg {
  display: flex;
  gap: 9px;
  margin: 0 0 10px;
  align-items: flex-start;
}

.pgchat__avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pgc-verde-800);
  color: var(--pgc-oro);
  font-size: .85rem;
  font-weight: 700;
  margin-top: 2px;
}

.pgchat__bubble {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--pgc-borde);
  border-radius: 4px 14px 14px 14px;
  padding: 7px 11px 8px;
}

.pgchat__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 1px;
}

.pgchat__meta strong {
  font-size: .82rem;
  font-weight: 700;
  color: var(--pgc-vino);
}

.pgchat__meta small {
  font-size: .7rem;
  color: var(--pgc-apagado);
}

/* El mensaje: 16px, interlineado cómodo. Esto no se reduce. */
.pgchat__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.pgchat__quote {
  margin: 0 0 5px;
  padding: 4px 8px;
  border-left: 3px solid var(--pgc-oro);
  background: var(--pgc-crema-200);
  border-radius: 0 8px 8px 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--pgc-apagado);
}

.pgchat__quote strong { color: var(--pgc-vino); }

.pgchat__msgactions { margin-top: 3px; }

.pgchat__replybtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  color: var(--pgc-apagado);
  cursor: pointer;
}

.pgchat__replybtn:hover,
.pgchat__replybtn:focus-visible { color: var(--pgc-vino); text-decoration: underline; }

/* Aviso de mensajes nuevos: el lector decide cuándo bajar. */
.pgchat__jump {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: var(--pgc-vino);
  color: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(19, 39, 42, .28);
}

/* ------------------------------------------------------------- escribir */

.pgchat__composer {
  flex: 0 0 auto;
  padding: 9px 12px 10px;
  border-top: 1px solid var(--pgc-borde);
  background: var(--pgc-crema-200);
}

.pgchat__reply {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 5px 9px;
  border-left: 3px solid var(--pgc-oro);
  background: #fff;
  border-radius: 0 8px 8px 0;
  font-size: .78rem;
  color: var(--pgc-apagado);
}

.pgchat__reply span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgchat__reply button { border: 0; background: none; cursor: pointer; color: var(--pgc-vino); font-size: .95rem; padding: 0 2px; }

.pgchat__inputrow {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.pgchat__input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  font: inherit;
  font-size: 16px;            /* 16px evita el zoom automático en iOS. */
  line-height: 1.45;
  padding: 8px 11px;
  border: 1px solid var(--pgc-borde);
  border-radius: 14px;
  background: #fff;
  color: var(--pgc-texto);
  max-height: 140px;
  overflow-y: auto;
}

.pgchat__input:focus-visible { outline: 2px solid var(--pgc-oro); outline-offset: 1px; }

.pgchat__emojibtn,
.pgchat__send {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  font: inherit;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.pgchat__emojibtn {
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1px solid var(--pgc-borde);
  color: var(--pgc-apagado);
  font-size: 1.05rem;
}

.pgchat__emojibtn:hover { color: var(--pgc-vino); border-color: var(--pgc-oro); }

.pgchat__send {
  height: 38px;
  padding: 0 17px;
  background: var(--pgc-vino);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
}

.pgchat__send:hover:not(:disabled) { background: var(--wine-800, #741322); }
.pgchat__send:disabled { opacity: .6; cursor: progress; }

.pgchat__emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 7px;
}

.pgchat__emojis button {
  border: 1px solid transparent;
  background: #fff;
  border-radius: 9px;
  font-size: 1.1rem;
  line-height: 1;
  padding: 5px 7px;
  cursor: pointer;
}

.pgchat__emojis button:hover { border-color: var(--pgc-oro); }

.pgchat__notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 0 0;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--pgc-apagado);
}

.pgchat__notice i { color: var(--pgc-oro); }
.pgchat__count { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pgchat__feedback {
  margin: 6px 0 0;
  font-size: .76rem;
  font-weight: 700;
  color: #1f8449;
}

.pgchat__feedback.is-error { color: var(--pgc-vino); }

/* ------------------------------------------------- visitante y bloqueado */

.pgchat__composer--guest,
.pgchat__composer--blocked { text-align: center; }

.pgchat__guesttext,
.pgchat__composer--blocked p {
  margin: 0 0 8px;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--pgc-apagado);
}

.pgchat__composer--blocked p { margin: 0; }

.pgchat__guestactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.pgchat__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--pgc-vino);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--pgc-vino);
}

.pgchat__cta:hover { background: var(--wine-800, #741322); color: #fff; }

.pgchat__cta--soft {
  background: #fff;
  color: var(--pgc-vino);
  border-color: var(--pgc-borde);
}

.pgchat__cta--soft:hover { background: var(--pgc-crema); color: var(--pgc-vino); }

/* -------------------------------------------------------------- lanzador */

.pgchat__launcher {
  position: fixed;
  right: var(--pgc-margen-lateral);
  bottom: var(--pgc-hueco-inferior);
  z-index: 235;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 19px;
  border: 1px solid var(--pgc-oro);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pgc-verde) 0%, var(--pgc-verde-800) 100%);
  color: #fff;
  font: inherit;
  font-size: .87rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(19, 39, 42, .3);
}

.pgchat__launcher:hover { border-color: #fff; }
.pgchat__launcher i { color: var(--pgc-oro); }

.pgchat__badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pgc-vino);
  color: #fff;
  font-size: .7rem;
  display: inline-grid;
  place-items: center;
}

/* ------------------------------------------------------------- pantallas */

/*
 * Tabletas: no hay sitio para una ventana junto al título sin taparlo, así que
 * la ventana se recoge a la esquina y el guion deja de anclarla al hero.
 */
@media (max-width: 1024px) {
  .pgchat--floating.is-open { width: min(400px, calc(100vw - 32px)); }
  .pgchat--floating.is-wide { width: min(560px, calc(100vw - 32px)); }
}

@media (max-width: 640px) {
  /*
   * Móvil: panel inferior pegado al borde. La posición la fija el CSS, no el
   * guion, para respetar el teclado virtual y las áreas seguras del aparato.
   */
  .pgchat--floating {
    top: auto !important;
    right: 0 !important;
    left: 0;
    bottom: 0;
    width: 100%;
    transition: none;
  }

  .pgchat--floating .pgchat__panel {
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    max-height: none;
    /* Compacto al entrar: identifica el sitio y deja ver la portada detrás. */
    height: 46vh;
    height: 46dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Ampliado en móvil: casi toda la pantalla para leer y escribir a gusto. */
  .pgchat--floating.is-wide .pgchat__panel {
    height: 88vh;
    height: 88dvh;
  }

  .pgchat--floating.is-min .pgchat__panel { height: auto; }

  .pgchat__launcher {
    right: 12px;
    bottom: var(--pgc-hueco-inferior);
    padding: 11px 17px;
  }

  .pgchat__subtitle { display: none; }
  .pgchat__title { font-size: 1.08rem; }
  .pgchat__tool span:not(.pgchat__sr) { display: none; }
  .pgchat__tool { padding: 7px 9px; }
  .pgchat__sendlabel { display: none; }
  .pgchat__send { padding: 0 13px; }
  .pgchat__messages { padding: 10px 11px; }
  .pgchat__composer { padding: 8px 10px 9px; }
}

@media (max-width: 400px) {
  .pgchat__msg { gap: 7px; }
  .pgchat__avatar { width: 26px; height: 26px; font-size: .78rem; }
  .pgchat__bubble { padding: 6px 9px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .pgchat * { transition: none !important; animation: none !important; }
}