/* ============================================================
   Stickers y burbujas de diálogo
   ------------------------------------------------------------
   Capa: componente
   ============================================================ */

/* ═══════════════════════════════════════════════════
   STICKERS (gatas)
═══════════════════════════════════════════════════ */
.gata-msg, .gata-wrap {
  display: flex; align-items: flex-end;
  gap: 18px; margin: 32px 0;
}
.gata-msg.derecha, .gata-wrap.derecha { flex-direction: row-reverse; }

.sticker-gata {
  width: 92px; min-width: 92px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.14));
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  border-radius: 0 !important;
  background: transparent !important;
}
.gata-msg:hover .sticker-gata,
.gata-wrap:hover .sticker-gata { transform: scale(1.1) rotate(-4deg); }
.gata-msg.derecha:hover .sticker-gata,
.gata-wrap.derecha:hover .sticker-gata { transform: scale(1.1) rotate(4deg); }

.gata-bubble {
  position: relative; max-width: 460px;
  padding: 16px 20px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 20px 20px 20px 6px;
  font-size: .9rem; line-height: 1.65; color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s, background var(--t), border-color .25s;
  cursor: default;
}
.gata-msg:hover .gata-bubble,
.gata-wrap:hover .gata-bubble {
  transform: translateY(-5px) scale(1.015);
  background: var(--gata-bg-hover, var(--bg2));
  border-color: rgba(var(--accent-rgb),.5);
  box-shadow: 0 0 0 4px var(--accent-dim), var(--shadow-accent);
}
.gata-msg.derecha .gata-bubble,
.gata-wrap.derecha .gata-bubble { border-radius: 20px 20px 6px 20px; }

/* ── Equivalente táctil de :hover en stickers/burbujas ──
   En iOS el primer tap dispara :hover y queda pegado; reemplazamos por
   una clase JS .is-touched que se aplica brevemente al tocar la zona. */
.gata-msg.is-touched .sticker-gata,
.gata-wrap.is-touched .sticker-gata { transform: scale(1.1) rotate(-4deg); }
.gata-msg.derecha.is-touched .sticker-gata,
.gata-wrap.derecha.is-touched .sticker-gata { transform: scale(1.1) rotate(4deg); }
.gata-msg.is-touched .gata-bubble,
.gata-wrap.is-touched .gata-bubble {
  transform: translateY(-5px) scale(1.015);
  background: var(--gata-bg-hover, var(--bg2));
  border-color: rgba(var(--accent-rgb),.5);
  box-shadow: 0 0 0 4px var(--accent-dim), var(--shadow-accent);
}

/* Colas */
.gata-msg:not(.derecha) .gata-bubble::before,
.gata-wrap:not(.derecha) .gata-bubble::before { content:''; position:absolute; left:-9px; bottom:14px; border-width:8px 11px 8px 0; border-style:solid; border-color:transparent var(--border) transparent transparent; transition:border-color .25s; }
.gata-msg:not(.derecha) .gata-bubble::after,
.gata-wrap:not(.derecha) .gata-bubble::after  { content:''; position:absolute; left:-6.5px; bottom:15px; border-width:6.5px 9px 6.5px 0; border-style:solid; border-color:transparent var(--gata-bg, var(--card)) transparent transparent; transition:border-color .25s; }
.gata-msg:hover:not(.derecha) .gata-bubble::before,
.gata-wrap:hover:not(.derecha) .gata-bubble::before,
.gata-msg.is-touched:not(.derecha) .gata-bubble::before,
.gata-wrap.is-touched:not(.derecha) .gata-bubble::before { border-color:transparent rgba(var(--accent-rgb),.5) transparent transparent; }
.gata-msg:hover:not(.derecha) .gata-bubble::after,
.gata-wrap:hover:not(.derecha) .gata-bubble::after,
.gata-msg.is-touched:not(.derecha) .gata-bubble::after,
.gata-wrap.is-touched:not(.derecha) .gata-bubble::after  { border-color:transparent var(--gata-bg-hover, var(--bg2)) transparent transparent; }
.gata-msg.derecha .gata-bubble::before,
.gata-wrap.derecha .gata-bubble::before { content:''; position:absolute; right:-9px; bottom:14px; border-width:8px 0 8px 11px; border-style:solid; border-color:transparent transparent transparent var(--border); transition:border-color .25s; }
.gata-msg.derecha .gata-bubble::after,
.gata-wrap.derecha .gata-bubble::after  { content:''; position:absolute; right:-6.5px; bottom:15px; border-width:6.5px 0 6.5px 9px; border-style:solid; border-color:transparent transparent transparent var(--gata-bg, var(--card)); transition:border-color .25s; }
.gata-msg:hover.derecha .gata-bubble::before,
.gata-wrap:hover.derecha .gata-bubble::before,
.gata-msg.derecha.is-touched .gata-bubble::before,
.gata-wrap.derecha.is-touched .gata-bubble::before { border-color:transparent transparent transparent rgba(var(--accent-rgb),.5); }
.gata-msg:hover.derecha .gata-bubble::after,
.gata-wrap:hover.derecha .gata-bubble::after,
.gata-msg.derecha.is-touched .gata-bubble::after,
.gata-wrap.derecha.is-touched .gata-bubble::after  { border-color:transparent transparent transparent var(--gata-bg-hover, var(--bg2)); }

/* Dark mode burbujas */
body.dark-mode .gata-bubble { background:var(--gata-bg, var(--card)); border-color:rgba(var(--accent-rgb),.18); }
body.dark-mode .gata-msg:hover .gata-bubble,
body.dark-mode .gata-wrap:hover .gata-bubble,
body.dark-mode .gata-msg.is-touched .gata-bubble,
body.dark-mode .gata-wrap.is-touched .gata-bubble { background:var(--gata-bg-hover, var(--bg2)); border-color:rgba(var(--accent-rgb),.5); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.06), var(--shadow-accent); }
body.dark-mode .gata-msg:not(.derecha) .gata-bubble::after,
body.dark-mode .gata-wrap:not(.derecha) .gata-bubble::after  { border-color:transparent var(--gata-bg, var(--card)) transparent transparent; }
body.dark-mode .gata-msg:hover:not(.derecha) .gata-bubble::after,
body.dark-mode .gata-wrap:hover:not(.derecha) .gata-bubble::after,
body.dark-mode .gata-msg.is-touched:not(.derecha) .gata-bubble::after,
body.dark-mode .gata-wrap.is-touched:not(.derecha) .gata-bubble::after  { border-color:transparent var(--gata-bg-hover, var(--bg2)) transparent transparent; }
body.dark-mode .gata-msg.derecha .gata-bubble::after,
body.dark-mode .gata-wrap.derecha .gata-bubble::after  { border-color:transparent transparent transparent var(--gata-bg, var(--card)); }
body.dark-mode .gata-msg:hover.derecha .gata-bubble::after,
body.dark-mode .gata-wrap:hover.derecha .gata-bubble::after,
body.dark-mode .gata-msg.derecha.is-touched .gata-bubble::after,
body.dark-mode .gata-wrap.derecha.is-touched .gata-bubble::after  { border-color:transparent transparent transparent var(--gata-bg-hover, var(--bg2)); }

.gata-nombre {
  font-family: var(--font-mono);
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent-strong); margin-bottom: 7px;
  transition: color var(--t);
}
html.dark-mode .gata-nombre, body.dark-mode .gata-nombre { color: var(--accent); }