/* ==================================================================
   Chat Puente — página completa del cliente.
   Capa específica de esta página sobre tricapi-theme.css — misma
   arquitectura que style.css + chat.css en el dashboard real: tokens y
   componentes base ahí, layout de esta pantalla acá.

   Tema OSCURO SUAVE, a propósito — ni el blanco puro (encandila a
   cualquiera que abra esto de noche, que es buena parte del tráfico de
   un chat de ventas), ni el negro casi puro del panel interno (ese es
   correcto para una herramienta de trabajo densa, no para una charla).
   Un dark mode cómodo tipo WhatsApp/Telegram: gris azulado, no negro
   puro, con el índigo de marca resaltando fuerte por contraste.

   Estilea las clases REALES que emite chat-page.js (.cp-row/.cp-bubble/
   .cp-mine/.cp-system/.cp-meta/.cp-sticker/.cp-reactions/...) — nunca
   un vocabulario propio que el JS no use.
   ================================================================== */

:root {
  /* Repisa los tokens de tricapi-theme.css con una paleta propia de
     esta página — el resto del archivo sigue usando los mismos nombres
     de variable (var(--bg-body), var(--text)...), así que no hace falta
     tocar cada regla una por una. */
  --bg-body: #14151d;
  --bg-sidebar: #191a24;
  --bg-card: #20212d;
  --bg-input: #262735;
  --text: #ececf3;
  --text-secondary: #c7c8d4;
  --text-muted: #9294a6;
  --text-muted-dark: #82849a;
  --text-muted-darker: #6c6e83;
  --border: #2a2b39;
  --border-hover: #383a4c;
  --border-medium: #313241;
  --success: #34d399;
  --success-light: #34d399;
  --warning: #fbbf24;
  --warning-light: #fbbf24;
  --danger: #f87171;
  --danger-light: #f87171;
  /* Wash neutro para .btn-icon/.btn-secondary/.tc-modal-close — blanco
     sutil sobre oscuro, como en tricapi-theme.css por default; se
     redeclara igual acá para que quede documentado en un solo lugar
     por página, sin depender de que el default de la hoja compartida
     no cambie. */
  --surface-tint: rgba(255, 255, 255, 0.045);
  --surface-tint-hover: rgba(255, 255, 255, 0.08);
  --tint-border: rgba(255, 255, 255, 0.08);

  /* --cp-accent lo pisa chat-page.js con el accent_color de la cuenta
     apenas resuelve el negocio (renderBusiness). Este es el valor antes
     de esa primera respuesta. */
  --cp-accent: var(--brand);
  --cp-accent-dark: var(--brand-dark);
  /* Track del anillo de espera. */
  --cp-surface-2: #34364a;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-body);
  color: var(--text);
  overscroll-behavior: none;
}

.cp-shell {
  height: 100dvh;
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  position: relative;
}

/* ── Header ─────────────────────────────────────────────── */
.cp-top {
  flex: none;
  background: linear-gradient(135deg, var(--cp-accent) 0%, var(--cp-accent-dark) 100%);
  color: #fff;
  padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 11px;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.28);
  position: relative;
  z-index: 2;
}
.cp-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; flex: none;
}
.cp-top-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.cp-biz { font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.cp-presence { font-size: 12px; opacity: .92; display: flex; align-items: center; gap: 6px; }
.cp-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex: none; box-shadow: 0 0 8px rgba(74,222,128,.8); animation: cpPulseDot 2s ease-in-out infinite; }
.cp-dot.cp-off { background: rgba(255,255,255,.55); box-shadow: none; animation: none; }
@keyframes cpPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

.cp-top .btn-icon { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }
.cp-top .btn-icon:hover { background: rgba(255,255,255,.28); color: #fff; }

.cp-banner {
  /* Tinte semitransparente en vez de un hex sólido — así funciona sin
     retocar sobre cualquier fondo, oscuro o claro. */
  flex: none; background: rgba(251, 191, 36, 0.14); color: var(--warning);
  border-bottom: 1px solid rgba(251, 191, 36, 0.28);
  font-size: 12.5px; padding: 7px 14px; text-align: center;
}
.cp-banner[hidden] { display: none; }

/* ── Mensajes ───────────────────────────────────────────── */
.cp-messages {
  flex: 1; overflow-y: auto; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 7px;
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.045) 0%, transparent 55%),
    var(--bg-body);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
}
/* Fondo subido por el negocio (Ajustes → Apariencia): un velo translúcido
   arriba mantiene el texto de las burbujas legible sin importar la foto. */
.cp-messages.cp-has-bg {
  background-image:
    linear-gradient(rgba(var(--bg-body-rgb, 8, 10, 15), 0.72), rgba(var(--bg-body-rgb, 8, 10, 15), 0.72)),
    var(--cp-bg-image, none);
}
.cp-empty { text-align: center; color: var(--text-muted-dark); font-size: 13.5px; padding: 36px 20px; line-height: 1.6; }

/* Filas y burbujas — misma firma asimétrica de 2-3px que
   public/css/chat.css, con el índigo de marca en vez del verde de
   WhatsApp (este chat no muestra un hilo de WhatsApp). Sobre fondo
   claro, la burbuja entrante es blanca con un borde suave y una sombra
   apenas perceptible — "papel" liviano, no un bloque oscuro. */
.cp-row { display: flex; position: relative; }
.cp-row.cp-mine { justify-content: flex-end; }
.cp-row.cp-system { justify-content: center; }

.cp-bubble {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(28, 29, 41, 0.06);
  position: relative;
}
.cp-row:not(.cp-mine):not(.cp-system) .cp-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top-left-radius: 3px;
  color: var(--text);
}
.cp-row.cp-mine .cp-bubble {
  background: linear-gradient(135deg, var(--cp-accent) 0%, var(--cp-accent-dark) 100%);
  border-top-right-radius: 3px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.22);
}
.cp-row.cp-system .cp-bubble {
  background: transparent;
  border: 1px dashed var(--border-hover);
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
  max-width: 88%;
  box-shadow: none;
}
.cp-bubble img { max-width: 100%; border-radius: 8px; display: block; cursor: zoom-in; }
.cp-meta { font-size: 10.5px; opacity: .65; margin-top: 4px; display: flex; gap: 4px; }
.cp-row.cp-mine .cp-meta { justify-content: flex-end; color: rgba(255,255,255,.82); }

/* Sticker nativo: sin burbuja (estilo Telegram). Emoji suelto = texto
   grande; emote del manifiesto = la imagen tal cual, sin recorte ni
   fondo — así se ve igual que en Twitch/Discord. */
.cp-sticker-row { justify-content: flex-start; }
.cp-sticker-row.cp-mine { justify-content: flex-end; }
.cp-sticker { font-size: 46px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(28,29,41,.18)); }
.cp-sticker-img { width: 96px; height: 96px; object-fit: contain; display: block; filter: drop-shadow(0 3px 8px rgba(28,29,41,.2)); }

/* Reacciones — una por persona (ver toggleReaction en chat-rooms.js): el
   chip .cp-mine es SIEMPRE la reacción propia de quien mira la pantalla,
   así que se destaca con un anillo del color de marca sobre cualquier
   fondo de burbuja para que quede claro cuál es "la mía". */
.cp-reactions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.cp-reaction-chip {
  border: 1px solid var(--border-hover); background: var(--bg-input);
  color: var(--text); border-radius: 20px; padding: 3px 9px; font-size: 13px;
  line-height: 1.3; cursor: pointer; display: inline-flex; align-items: center;
  gap: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  transition: transform .1s ease, filter .1s ease;
}
.cp-reaction-chip span { font-size: 11.5px; font-weight: 600; opacity: .85; }
.cp-reaction-chip:hover { transform: scale(1.06); filter: brightness(1.12); }
.cp-reaction-chip.cp-mine {
  background: rgba(var(--primary-rgb), .16);
  border-color: rgba(var(--primary-rgb), .55);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), .28);
}
/* Dentro de una burbuja propia (fondo índigo sólido) los chips ajenos se
   aclaran para seguir siendo legibles; el propio mantiene su anillo, ahora
   en blanco, para no perder la distinción "cuál es la mía". */
.cp-row.cp-mine .cp-reaction-chip { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.32); color: #fff; }
.cp-row.cp-mine .cp-reaction-chip.cp-mine { background: rgba(255,255,255,.34); border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.5); }

/* Barra de reacción rápida al pasar el mouse sobre un mensaje */
.cp-react-bar {
  display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--border-hover);
  border-radius: 20px; padding: 3px; position: absolute; top: -30px; opacity: 0;
  pointer-events: none; transition: opacity .15s ease; box-shadow: 0 6px 18px rgba(28,29,41,.14);
}
.cp-row:hover .cp-react-bar { opacity: 1; pointer-events: auto; }
.cp-row.cp-mine .cp-react-bar { right: 4px; }
.cp-row:not(.cp-mine) .cp-react-bar { left: 4px; }
.cp-react-btn {
  border: none; background: none; cursor: pointer; font-size: 15px;
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .12s ease;
}
.cp-react-btn:hover { background: rgba(var(--primary-rgb), .12); transform: scale(1.2); }
.cp-react-btn-active { background: rgba(var(--primary-rgb), .18); box-shadow: 0 0 0 1.5px rgba(var(--primary-rgb), .55); }

.cp-typing { flex: none; padding: 2px 16px; font-size: 12px; color: var(--text-muted-darker); min-height: 18px; }

/* ── Tarjeta de espera (contador o "en camino") ──────────── */
.cp-wait {
  flex: none; margin: 0 14px 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 1px 3px rgba(28,29,41,.05);
}
.cp-wait[hidden] { display: none; }
.cp-wait-visual { flex: none; width: 52px; height: 52px; position: relative; display: flex; align-items: center; justify-content: center; }

.cp-wait-ring {
  width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(var(--cp-accent) 100%, var(--cp-surface-2) 0);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s linear;
}
.cp-wait-ring[hidden] { display: none; }
.cp-wait-ring::before {
  content: ''; position: absolute; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-card);
}
.cp-wait-ring span { position: relative; font-weight: 700; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }

.cp-radar { width: 52px; height: 52px; position: relative; display: flex; align-items: center; justify-content: center; color: var(--cp-accent); font-size: 18px; }
.cp-radar[hidden] { display: none; }
.cp-radar-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cp-accent);
  opacity: 0; animation: cpRadarPulse 2.2s ease-out infinite;
}
.cp-radar-ring:nth-child(2) { animation-delay: .7s; }
.cp-radar-ring:nth-child(3) { animation-delay: 1.4s; }
@keyframes cpRadarPulse {
  0% { transform: scale(.5); opacity: .55; }
  100% { transform: scale(1.3); opacity: 0; }
}

.cp-wait-text { min-width: 0; flex: 1; }
.cp-wait-title { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.cp-wait-title b { color: var(--cp-accent); font-variant-numeric: tabular-nums; }
.cp-wait-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.cp-wait-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.cp-wait-actions[hidden] { display: none; }

/* ── Preview de imagen antes de enviar ────────────────────── */
.cp-preview {
  flex: none; margin: 0 14px 8px; padding: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 1px 3px rgba(28,29,41,.05);
}
.cp-preview[hidden] { display: none; }
.cp-preview img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.cp-preview .btn-icon { margin-left: auto; }

/* ── Composer ───────────────────────────────────────────── */
.cp-composer-wrap {
  flex: none; border-top: 1px solid var(--border);
  padding: 8px 12px 4px; padding-bottom: max(4px, env(safe-area-inset-bottom));
  background: var(--bg-sidebar);
  position: relative;
}
.cp-composer { display: flex; align-items: flex-end; gap: 6px; position: relative; }
.cp-composer-tools { display: flex; gap: 4px; flex: none; }
.cp-composer textarea.form-control {
  flex: 1; resize: none; max-height: 110px; font-size: 15px;
  padding: 9px 12px; border-radius: 13px;
  background: var(--bg-input); color: var(--text); border-color: var(--border-medium);
}
.cp-composer textarea.form-control::placeholder { color: var(--text-muted-darker); }
.cp-composer .btn-icon {
  width: 36px; height: 36px; border-radius: 10px; font-size: .92rem;
  background: var(--bg-input); border-color: var(--border-medium); color: var(--text-muted);
}
.cp-composer .btn-icon:hover { background: var(--border); color: var(--text); }
.cp-send {
  background: linear-gradient(135deg, var(--cp-accent) 0%, var(--cp-accent-dark) 100%);
  border-color: transparent; color: #fff; width: 40px !important; height: 40px !important; border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}
.cp-send:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(135deg, var(--cp-accent) 0%, var(--cp-accent-dark) 100%); }
.cp-send:disabled { opacity: .4; box-shadow: none; cursor: default; }

/* ── Pickers de emoji / stickers ───────────────────────────
   Panel flotante claro, con la misma sombra "elevada" que el resto de
   las tarjetas — nada de vidrio oscuro acá. */
.cp-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
  max-height: 210px; overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-hover); border-radius: 14px; padding: 10px;
  box-shadow: 0 -8px 28px rgba(28,29,41,.14); z-index: 5;
}
.cp-pop[hidden] { display: none; }
.cp-pop-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.cp-pop-grid-stickers { grid-template-columns: repeat(6, 1fr); }
.cp-pop-grid-emotes { grid-template-columns: repeat(5, 1fr); margin-bottom: 4px; }
.cp-pop-emoji, .cp-pop-sticker, .cp-pop-emote {
  border: none; background: none; cursor: pointer; border-radius: 8px;
  font-size: 20px; padding: 5px; display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, transform .12s ease;
}
.cp-pop-sticker { font-size: 26px; }
.cp-pop-emote img { width: 40px; height: 40px; object-fit: contain; }
.cp-pop-emoji:hover, .cp-pop-sticker:hover, .cp-pop-emote:hover { background: rgba(var(--primary-rgb), .1); transform: scale(1.12); }
.cp-pop-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted-darker); padding: 6px 4px 4px;
}
.cp-pop-label:first-child { padding-top: 2px; }

/* ── Hoja de confianza (sobre .tc-modal-*) ──────────────── */
.cp-sheet-card { max-width: 420px; max-height: 90dvh; overflow-y: auto; }

.cp-trust { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-trust li { display: flex; gap: 9px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; align-items: flex-start; }
.cp-trust li i { color: var(--success); margin-top: 2px; flex: none; }

.cp-recovery {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 13px; padding: 15px; text-align: center; margin-bottom: 14px;
}
.cp-recovery-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted-dark); font-weight: 600; }
.cp-recovery-code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 25px; font-weight: 700; letter-spacing: .09em;
  margin: 7px 0 8px; color: var(--text);
}
.cp-recovery-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 11px; line-height: 1.45; }

.cp-restore { border-top: 1px solid var(--border); padding-top: 13px; }
.cp-restore summary { font-size: 13px; color: var(--text-muted); cursor: pointer; }
.cp-restore summary:hover { color: var(--cp-accent); }
.cp-restore-body { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.cp-restore-body input { flex: 1; min-width: 130px; font-family: ui-monospace, monospace; text-transform: uppercase; }
.cp-restore-error { width: 100%; font-size: 12px; color: var(--danger); min-height: 15px; }

/* ── Estado de carga inicial ────────────────────────────────
   Mientras /api/pub/entry resuelve, ver un blanco sin nada se siente a
   "esto está roto". Tres puntitos con el color de marca — chico,
   silencioso, y desaparece apenas hay algo real que mostrar. */
.cp-loading {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 48px 20px; color: var(--text-muted-darker);
}
.cp-loading span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cp-accent, #6366f1);
  animation: cpLoadingBounce 1.1s ease-in-out infinite;
}
.cp-loading span:nth-child(2) { animation-delay: .15s; }
.cp-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes cpLoadingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-loading span { animation: none; opacity: .8; }
}

@media (max-width: 520px) {
  .cp-shell { border-left: none; border-right: none; }
  .cp-pop-grid { grid-template-columns: repeat(7, 1fr); }
}