/* Fondos VYNKO (pedido del dueño 2026-10-30 con 3 capturas: "creame todas estas paletas de fondo para vynko"):
   30 fondos de chat en azul cielo, blanco y morado -- cielos con nubes, sedas, burbujas, cristal, hojas y noches.
   Las imágenes (720x1280) están en img/chat-themes/vynko/ y sus miniaturas para el selector en .../vynko/mini/.
   En las referencias algunos traían líneas doradas; acá van plateadas/lila (la marca nunca lleva dorado).
   Cada fondo es una fila en CHAT_THEME_CONFIG (public/client.js) + CHAT_THEMES (routes/auth.js) + su bloque acá. */

/* Cielo y nubes */
#messagesView #chatPanel[data-chat-theme="cielo_nubes"],
#chatPeekMessages[data-chat-theme="cielo_nubes"] {
  --chat-bg: url("../img/chat-themes/vynko/cielo_nubes.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="cielo_nubes"] { background: url("../img/chat-themes/vynko/mini/cielo_nubes.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Nubes blancas */
#messagesView #chatPanel[data-chat-theme="nubes_blancas"],
#chatPeekMessages[data-chat-theme="nubes_blancas"] {
  --chat-bg: url("../img/chat-themes/vynko/nubes_blancas.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="nubes_blancas"] { background: url("../img/chat-themes/vynko/mini/nubes_blancas.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Atardecer en las nubes */
#messagesView #chatPanel[data-chat-theme="atardecer_nubes"],
#chatPeekMessages[data-chat-theme="atardecer_nubes"] {
  --chat-bg: url("../img/chat-themes/vynko/atardecer_nubes.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="atardecer_nubes"] { background: url("../img/chat-themes/vynko/mini/atardecer_nubes.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Seda blanca */
#messagesView #chatPanel[data-chat-theme="seda_blanca"],
#chatPeekMessages[data-chat-theme="seda_blanca"] {
  --chat-bg: url("../img/chat-themes/vynko/seda_blanca.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="seda_blanca"] { background: url("../img/chat-themes/vynko/mini/seda_blanca.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Burbujas de cielo */
#messagesView #chatPanel[data-chat-theme="burbujas_cielo"],
#chatPeekMessages[data-chat-theme="burbujas_cielo"] {
  --chat-bg: url("../img/chat-themes/vynko/burbujas_cielo.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="burbujas_cielo"] { background: url("../img/chat-themes/vynko/mini/burbujas_cielo.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Ola celeste */
#messagesView #chatPanel[data-chat-theme="ola_celeste"],
#chatPeekMessages[data-chat-theme="ola_celeste"] {
  --chat-bg: url("../img/chat-themes/vynko/ola_celeste.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="ola_celeste"] { background: url("../img/chat-themes/vynko/mini/ola_celeste.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Cielo de seda */
#messagesView #chatPanel[data-chat-theme="cielo_seda"],
#chatPeekMessages[data-chat-theme="cielo_seda"] {
  --chat-bg: url("../img/chat-themes/vynko/cielo_seda.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="cielo_seda"] { background: url("../img/chat-themes/vynko/mini/cielo_seda.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Velo blanco */
#messagesView #chatPanel[data-chat-theme="velo_blanco"],
#chatPeekMessages[data-chat-theme="velo_blanco"] {
  --chat-bg: url("../img/chat-themes/vynko/velo_blanco.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="velo_blanco"] { background: url("../img/chat-themes/vynko/mini/velo_blanco.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Atardecer lila */
#messagesView #chatPanel[data-chat-theme="atardecer_lila"],
#chatPeekMessages[data-chat-theme="atardecer_lila"] {
  --chat-bg: url("../img/chat-themes/vynko/atardecer_lila.jpg");
  --chat-header-color: #2e1065;
  --chat-header-status-color: #6d4fa8;
  --chat-icon-color: #7c3aed;
  --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #2e1065;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="atardecer_lila"] { background: url("../img/chat-themes/vynko/mini/atardecer_lila.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Aurora pastel */
#messagesView #chatPanel[data-chat-theme="aurora_pastel"],
#chatPeekMessages[data-chat-theme="aurora_pastel"] {
  --chat-bg: url("../img/chat-themes/vynko/aurora_pastel.jpg");
  --chat-header-color: #2e1065;
  --chat-header-status-color: #6d4fa8;
  --chat-icon-color: #7c3aed;
  --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #2e1065;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="aurora_pastel"] { background: url("../img/chat-themes/vynko/mini/aurora_pastel.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Cristal de hielo */
#messagesView #chatPanel[data-chat-theme="cristal_hielo"],
#chatPeekMessages[data-chat-theme="cristal_hielo"] {
  --chat-bg: url("../img/chat-themes/vynko/cristal_hielo.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="cristal_hielo"] { background: url("../img/chat-themes/vynko/mini/cristal_hielo.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Cristal lavanda */
#messagesView #chatPanel[data-chat-theme="cristal_lavanda"],
#chatPeekMessages[data-chat-theme="cristal_lavanda"] {
  --chat-bg: url("../img/chat-themes/vynko/cristal_lavanda.jpg");
  --chat-header-color: #2e1065;
  --chat-header-status-color: #6d4fa8;
  --chat-icon-color: #7c3aed;
  --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #2e1065;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="cristal_lavanda"] { background: url("../img/chat-themes/vynko/mini/cristal_lavanda.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Arena y hojas */
#messagesView #chatPanel[data-chat-theme="arena_hojas"],
#chatPeekMessages[data-chat-theme="arena_hojas"] {
  --chat-bg: url("../img/chat-themes/vynko/arena_hojas.jpg");
  --chat-header-color: #1f2937;
  --chat-header-status-color: #6b7280;
  --chat-icon-color: #6366f1;
  --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #8b5cf6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94);
  --chat-bubble-theirs-color: #1f2937;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="arena_hojas"] { background: url("../img/chat-themes/vynko/mini/arena_hojas.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #8b5cf6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94); }

/* Agua celeste */
#messagesView #chatPanel[data-chat-theme="agua_celeste"],
#chatPeekMessages[data-chat-theme="agua_celeste"] {
  --chat-bg: url("../img/chat-themes/vynko/agua_celeste.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="agua_celeste"] { background: url("../img/chat-themes/vynko/mini/agua_celeste.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Burbujas lila */
#messagesView #chatPanel[data-chat-theme="burbujas_lila"],
#chatPeekMessages[data-chat-theme="burbujas_lila"] {
  --chat-bg: url("../img/chat-themes/vynko/burbujas_lila.jpg");
  --chat-header-color: #2e1065;
  --chat-header-status-color: #6d4fa8;
  --chat-icon-color: #7c3aed;
  --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #2e1065;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="burbujas_lila"] { background: url("../img/chat-themes/vynko/mini/burbujas_lila.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Noche VYNKO */
#messagesView #chatPanel[data-chat-theme="noche_vynko"],
#chatPeekMessages[data-chat-theme="noche_vynko"] {
  --chat-bg: url("../img/chat-themes/vynko/noche_vynko.jpg");
  --chat-header-color: #eef2ff;
  --chat-header-status-color: #a5b4fc;
  --chat-icon-color: #93c5fd;
  --chat-bubble-mine-bg: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(30, 41, 70, 0.88);
  --chat-bubble-theirs-color: #eef2ff;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #818cf8;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="noche_vynko"] { background: url("../img/chat-themes/vynko/mini/noche_vynko.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #3b82f6, #8b5cf6); --chat-bubble-theirs-bg: rgba(30, 41, 70, 0.88); }

/* Perla */
#messagesView #chatPanel[data-chat-theme="perla_puntos"],
#chatPeekMessages[data-chat-theme="perla_puntos"] {
  --chat-bg: url("../img/chat-themes/vynko/perla_puntos.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="perla_puntos"] { background: url("../img/chat-themes/vynko/mini/perla_puntos.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Menta y hojas */
#messagesView #chatPanel[data-chat-theme="menta_hojas"],
#chatPeekMessages[data-chat-theme="menta_hojas"] {
  --chat-bg: url("../img/chat-themes/vynko/menta_hojas.jpg");
  --chat-header-color: #0f2e2a;
  --chat-header-status-color: #3f6f66;
  --chat-icon-color: #0284c7;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #2563eb);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94);
  --chat-bubble-theirs-color: #0f2e2a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #0ea5e9;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="menta_hojas"] { background: url("../img/chat-themes/vynko/mini/menta_hojas.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #2563eb); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94); }

/* Durazno */
#messagesView #chatPanel[data-chat-theme="durazno_esferas"],
#chatPeekMessages[data-chat-theme="durazno_esferas"] {
  --chat-bg: url("../img/chat-themes/vynko/durazno_esferas.jpg");
  --chat-header-color: #1f2937;
  --chat-header-status-color: #6b7280;
  --chat-icon-color: #6366f1;
  --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #8b5cf6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94);
  --chat-bubble-theirs-color: #1f2937;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="durazno_esferas"] { background: url("../img/chat-themes/vynko/mini/durazno_esferas.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #8b5cf6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94); }

/* Rayos de cristal */
#messagesView #chatPanel[data-chat-theme="cristal_diagonal"],
#chatPeekMessages[data-chat-theme="cristal_diagonal"] {
  --chat-bg: url("../img/chat-themes/vynko/cristal_diagonal.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="cristal_diagonal"] { background: url("../img/chat-themes/vynko/mini/cristal_diagonal.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Seda azul */
#messagesView #chatPanel[data-chat-theme="seda_azul"],
#chatPeekMessages[data-chat-theme="seda_azul"] {
  --chat-bg: url("../img/chat-themes/vynko/seda_azul.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="seda_azul"] { background: url("../img/chat-themes/vynko/mini/seda_azul.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Sombra de hojas */
#messagesView #chatPanel[data-chat-theme="sombra_hojas"],
#chatPeekMessages[data-chat-theme="sombra_hojas"] {
  --chat-bg: url("../img/chat-themes/vynko/sombra_hojas.jpg");
  --chat-header-color: #1f2937;
  --chat-header-status-color: #6b7280;
  --chat-icon-color: #6366f1;
  --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #8b5cf6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94);
  --chat-bubble-theirs-color: #1f2937;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="sombra_hojas"] { background: url("../img/chat-themes/vynko/mini/sombra_hojas.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #8b5cf6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94); }

/* Marfil */
#messagesView #chatPanel[data-chat-theme="marfil_curvas"],
#chatPeekMessages[data-chat-theme="marfil_curvas"] {
  --chat-bg: url("../img/chat-themes/vynko/marfil_curvas.jpg");
  --chat-header-color: #1f2937;
  --chat-header-status-color: #6b7280;
  --chat-icon-color: #6366f1;
  --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #8b5cf6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94);
  --chat-bubble-theirs-color: #1f2937;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="marfil_curvas"] { background: url("../img/chat-themes/vynko/mini/marfil_curvas.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #60a5fa, #8b5cf6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94); }

/* Aurora rosa */
#messagesView #chatPanel[data-chat-theme="aurora_rosa"],
#chatPeekMessages[data-chat-theme="aurora_rosa"] {
  --chat-bg: url("../img/chat-themes/vynko/aurora_rosa.jpg");
  --chat-header-color: #2e1065;
  --chat-header-status-color: #6d4fa8;
  --chat-icon-color: #7c3aed;
  --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #2e1065;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="aurora_rosa"] { background: url("../img/chat-themes/vynko/mini/aurora_rosa.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Noche y hojas */
#messagesView #chatPanel[data-chat-theme="noche_hojas"],
#chatPeekMessages[data-chat-theme="noche_hojas"] {
  --chat-bg: url("../img/chat-themes/vynko/noche_hojas.jpg");
  --chat-header-color: #eef2ff;
  --chat-header-status-color: #a5b4fc;
  --chat-icon-color: #93c5fd;
  --chat-bubble-mine-bg: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(30, 41, 70, 0.88);
  --chat-bubble-theirs-color: #eef2ff;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #818cf8;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="noche_hojas"] { background: url("../img/chat-themes/vynko/mini/noche_hojas.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #3b82f6, #8b5cf6); --chat-bubble-theirs-bg: rgba(30, 41, 70, 0.88); }

/* Jade de noche */
#messagesView #chatPanel[data-chat-theme="jade_noche"],
#chatPeekMessages[data-chat-theme="jade_noche"] {
  --chat-bg: url("../img/chat-themes/vynko/jade_noche.jpg");
  --chat-header-color: #ecfdf5;
  --chat-header-status-color: #a7f3d0;
  --chat-icon-color: #a5b4fc;
  --chat-bubble-mine-bg: linear-gradient(135deg, #0ea5e9, #6366f1);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(20, 45, 45, 0.88);
  --chat-bubble-theirs-color: #ecfdf5;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #a5b4fc;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="jade_noche"] { background: url("../img/chat-themes/vynko/mini/jade_noche.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #0ea5e9, #6366f1); --chat-bubble-theirs-bg: rgba(20, 45, 45, 0.88); }

/* Amanecer rosa */
#messagesView #chatPanel[data-chat-theme="amanecer_rosa"],
#chatPeekMessages[data-chat-theme="amanecer_rosa"] {
  --chat-bg: url("../img/chat-themes/vynko/amanecer_rosa.jpg");
  --chat-header-color: #2e1065;
  --chat-header-status-color: #6d4fa8;
  --chat-icon-color: #7c3aed;
  --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #2e1065;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #8b5cf6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="amanecer_rosa"] { background: url("../img/chat-themes/vynko/mini/amanecer_rosa.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #818cf8, #a855f7); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Noche violeta */
#messagesView #chatPanel[data-chat-theme="noche_violeta"],
#chatPeekMessages[data-chat-theme="noche_violeta"] {
  --chat-bg: url("../img/chat-themes/vynko/noche_violeta.jpg");
  --chat-header-color: #eef2ff;
  --chat-header-status-color: #a5b4fc;
  --chat-icon-color: #93c5fd;
  --chat-bubble-mine-bg: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(30, 41, 70, 0.88);
  --chat-bubble-theirs-color: #eef2ff;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #818cf8;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="noche_violeta"] { background: url("../img/chat-themes/vynko/mini/noche_violeta.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #3b82f6, #8b5cf6); --chat-bubble-theirs-bg: rgba(30, 41, 70, 0.88); }

/* Hojas verdes */
#messagesView #chatPanel[data-chat-theme="hojas_verdes"],
#chatPeekMessages[data-chat-theme="hojas_verdes"] {
  --chat-bg: url("../img/chat-themes/vynko/hojas_verdes.jpg");
  --chat-header-color: #0f2e2a;
  --chat-header-status-color: #3f6f66;
  --chat-icon-color: #0284c7;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #2563eb);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94);
  --chat-bubble-theirs-color: #0f2e2a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #0ea5e9;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="hojas_verdes"] { background: url("../img/chat-themes/vynko/mini/hojas_verdes.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #2563eb); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.94); }

/* Mármol blanco */
#messagesView #chatPanel[data-chat-theme="marmol_blanco"],
#chatPeekMessages[data-chat-theme="marmol_blanco"] {
  --chat-bg: url("../img/chat-themes/vynko/marmol_blanco.jpg");
  --chat-header-color: #0b2a4a;
  --chat-header-status-color: #3a6a9a;
  --chat-icon-color: #2563eb;
  --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: rgba(255, 255, 255, 0.5);
  --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92);
  --chat-bubble-theirs-color: #0b2a4a;
  --chat-bubble-theirs-border: rgba(255, 255, 255, 0.35);
  --chat-divider-color: #3b82f6;
  --chat-font: 'Outfit', sans-serif;
}
.mp-chat-theme-swatch-preview[data-chat-theme="marmol_blanco"] { background: url("../img/chat-themes/vynko/mini/marmol_blanco.jpg") center/cover; --chat-bubble-mine-bg: linear-gradient(135deg, #38bdf8, #3b82f6); --chat-bubble-theirs-bg: rgba(255, 255, 255, 0.92); }

/* Vista previa al escoger un fondo (openChatThemePreview en client.js): chat de mentiras a pantalla completa con el
   fondo y las burbujas del tema (los colores llegan en las variables --vkfp-*), y abajo Cancelar / Aplicar. */
.vkfp-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; flex-direction: column;
  background: #0b1020;
  animation: vkfp-in .22s ease-out;
}
.vkfp-overlay.hidden { display: none; }
@keyframes vkfp-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.vkfp-chat {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background-size: cover; background-position: center;
  font-family: var(--vkfp-font);
}
.vkfp-head {
  display: flex; align-items: center; gap: .6rem;
  padding: calc(env(safe-area-inset-top, 0px) + .7rem) .9rem .7rem;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--vkfp-head);
}
.vkfp-back {
  border: 0; background: none; padding: .2rem .4rem;
  font-size: 1.4rem; line-height: 1; color: var(--vkfp-icon); cursor: pointer;
}
.vkfp-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #38bdf8, #8b5cf6); color: #fff; font-weight: 800;
}
.vkfp-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vkfp-who strong { font-size: 1rem; }
.vkfp-who small { font-size: .75rem; color: var(--vkfp-sub); }
.vkfp-tag {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .85); color: #4338ca;
}
.vkfp-msgs {
  flex: 1; min-height: 0; overflow-y: auto;
  list-style: none; margin: 0; padding: 1rem .9rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem;
}
.vkfp-msg {
  max-width: 78%; align-self: flex-start;
  padding: .55rem .8rem .4rem; border-radius: 18px 18px 18px 6px;
  background: var(--vkfp-theirs-bg); color: var(--vkfp-theirs-color);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
  animation: vkfp-pop .25s ease-out;
}
.vkfp-msg.mine {
  align-self: flex-end; border-radius: 18px 18px 6px 18px;
  background: var(--vkfp-mine-bg); color: var(--vkfp-mine-color);
}
.vkfp-msg p { margin: 0; font-size: .95rem; line-height: 1.35; }
.vkfp-msg > span { display: block; text-align: right; font-size: .68rem; opacity: .75; margin-top: .15rem; }
@keyframes vkfp-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.vkfp-typing { display: flex; gap: 4px; padding: .7rem .85rem; }
.vkfp-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .45;
  animation: vkfp-dot 1s infinite ease-in-out;
}
.vkfp-typing span:nth-child(2) { animation-delay: .15s; }
.vkfp-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes vkfp-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: .9; } }
.vkfp-bar { display: flex; gap: .5rem; align-items: center; padding: .5rem .8rem .8rem; }
.vkfp-input {
  flex: 1; padding: .65rem 1rem; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: #94a3b8; font-size: .92rem;
}
.vkfp-send {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--vkfp-mine-bg); color: #fff;
}
.vkfp-actions {
  padding: .85rem 1rem calc(env(safe-area-inset-bottom, 0px) + .9rem);
  background: #ffffff; border-radius: 22px 22px 0 0; margin-top: -14px; position: relative;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .12);
  font-family: 'Outfit', system-ui, sans-serif;
}
.vkfp-name { text-align: center; font-weight: 700; color: #0f172a; margin-bottom: .7rem; }
.vkfp-btns { display: flex; gap: .6rem; }
.vkfp-btns button {
  flex: 1; border: 0; border-radius: 14px; padding: .85rem; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .95rem;
}
.vkfp-cancel { background: #eef2ff; color: #3730a3; }
.vkfp-apply { flex: 1.4 !important; background: linear-gradient(135deg, #38bdf8, #6366f1); color: #fff; }
.vkfp-apply:disabled { opacity: .6; cursor: default; }

/* Letra que se acomoda al fondo (updateChatTone en client.js marca data-chat-tone="light"/"dark" midiendo qué tan
   claro es el fondo de verdad). Pedido del dueño: con un fondo casi blanco se perdían "Hoy" y las fechas, que venían
   en blanco pensando en fondos oscuros. Aplica a TODOS los fondos; Citas (.dx-vynko-chat) y Estilo BlackBerry
   tienen su propio diseño y no se tocan, y en el Estilo VYNKO solo se acomodan las fechas y el aviso. */
#messagesView #chatPanel[data-chat-tone="light"]:not(.dx-vynko-chat):not([data-chat-theme="bbm"]) .mp-chat-date-separator span,
#chatPeekModal #chatPeekMessages[data-chat-tone="light"]:not([data-chat-theme="bbm"]) .mp-chat-date-separator span {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #334155 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
#messagesView #chatPanel[data-chat-tone="dark"]:not(.dx-vynko-chat):not([data-chat-theme="bbm"]) .mp-chat-date-separator span,
#chatPeekModal #chatPeekMessages[data-chat-tone="dark"]:not([data-chat-theme="bbm"]) .mp-chat-date-separator span {
  background: rgba(15, 23, 42, 0.6) !important;
  color: #e2e8f0 !important;
}

#messagesView #chatPanel[data-chat-tone="light"]:not(.dx-vynko-chat):not([data-chat-theme="bbm"]) .mp-chat-privacy-banner {
  background: rgba(255, 255, 255, 0.88);
  color: #4338ca;
}
#messagesView #chatPanel[data-chat-tone="dark"]:not(.dx-vynko-chat):not([data-chat-theme="bbm"]) .mp-chat-privacy-banner {
  background: rgba(15, 23, 42, 0.6);
  color: #c7d2fe;
}

/* Íconos de la barra de escribir (carita, clip, regalo, cámara, micrófono): en fondo claro, ícono oscuro sobre su
   círculo claro; en fondo oscuro, círculo de vidrio oscuro con ícono claro. */
#messagesView #chatPanel[data-chat-tone="light"]:not(.dx-vynko-chat):not([data-chat-theme="bbm"]):not([data-chat-theme="classic"]) .mp-chat-input-icon {
  color: var(--chat-safe-icon, #1e40af) !important;
}
#messagesView #chatPanel[data-chat-tone="dark"]:not(.dx-vynko-chat):not([data-chat-theme="bbm"]):not([data-chat-theme="classic"]) .mp-chat-input-icon {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--chat-safe-icon, #e0e7ff) !important;
}