/* ============================================================================
   Vynko Citas -- tema visual propio de la conversación con un match.
   Pedido explícito: "toda la conversación de VYNKO" debe verse como la
   referencia (estilo iMessage claro, degradado azul cielo, corazones
   flotantes, burbuja de audio moderna, cápsula de escribir flotante).

   Se activa SOLO con la clase .dx-vynko-chat en #chatPanel -- la pone
   openChat() en client.js cuando activeChatDatingContext es true (chat
   abierto desde un match/bandeja de Citas). El chat de Mensajes de Inicio
   nunca lleva esa clase, así que ninguna regla de acá abajo lo toca.

   Los colores de fondo/encabezado/burbujas se enchufan en las MISMAS
   variables que ya usan los 19 temas de fondo de chat (--chat-bg,
   --chat-bubble-mine-bg, etc. -- ver mi-perfil.css, #chatPanel[data-chat-
   theme="..."]), así heredan gratis toda esa maquinaria (incluida la
   prioridad sobre el reskin claro de toda la app en global-light-theme.css)
   sin tener que repetir esa pelea de especificidad acá. Lo que esas
   variables NO cubren (forma de la burbuja, reacciones, audio, imágenes,
   barra de escribir) se resuelve con selectores propios más abajo. */

#messagesView #chatPanel.dx-vynko-chat {
  --dxv-bg-1: #eaf5ff;
  --dxv-bg-2: #eef2ff;
  --dxv-sky-light: #7dd3fc;
  --dxv-sky: #38bdf8;
  --dxv-sky-deep: #0ea5e9;
  --dxv-ink: #0b2c4d;
  --dxv-sub: #4c86b8;
  --dxv-card: #ffffff;

  --chat-bg: linear-gradient(180deg, var(--dxv-bg-1) 0%, #f3f7ff 45%, var(--dxv-bg-2) 100%);
  --chat-header-color: var(--dxv-ink);
  --chat-header-status-color: var(--dxv-sub);
  --chat-icon-color: var(--dxv-sky-deep);
  --chat-font: inherit;

  --chat-bubble-mine-bg: linear-gradient(135deg, var(--dxv-sky-light), var(--dxv-sky-deep));
  --chat-bubble-mine-color: #ffffff;
  --chat-bubble-mine-border: transparent;
  --chat-bubble-theirs-bg: var(--dxv-card);
  --chat-bubble-theirs-color: var(--dxv-ink);
  --chat-bubble-theirs-border: rgba(56, 189, 248, 0.16);
  --chat-divider-color: var(--dxv-sky);

  /* BUG REAL: "la barra de mensajes se sube tan arriba" -- #chatPanel trae
     1.1rem de padding-bottom de fábrica (mi-perfil.css), pensado para dejar
     aire debajo de la barra de escribir "de toda la vida" (sin cápsula
     propia). La cápsula ya trae su propio aire interno (padding de abajo);
     sumado al de acá quedaba una franja libre de más entre la cápsula y el
     teclado, en vez de quedar pegada justo arriba. */
  padding-bottom: 0.55rem;
}

/* El separador de tema (emoji de fondo elegido en Personalizar chats) no
   aplica acá -- este chat no sigue esa preferencia personal, así que su
   franja/emoji no debe asomar aunque haya quedado activa de una conversación
   anterior. */
#messagesView #chatPanel.dx-vynko-chat #chatThemeDivider {
  display: none !important;
}

/* ---------- Franja de marca "VYNKO" ---------- */
/* Oculta en cualquier chat que no sea de Citas (Mensajes de Inicio, o
   negocio) -- #dxChatBrandBar vive siempre en el HTML de #chatPanel (es un
   solo chat compartido), esto es lo único que decide si se ve. */
.dx-chat-brand-bar {
  display: none;
}

#messagesView #chatPanel.dx-vynko-chat #dxChatBrandBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 -0.1rem 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(56, 189, 248, 0.14);
}

/* BUG REAL: en celular, el chat abierto queda a pantalla completa y
   ".mp-chat-head" es quien normalmente recibe el padding-top que lo separa
   de la barra de estado del sistema (ver mi-perfil.css @media max-width:
   640px). Con la franja de marca arriba de esa fila, quien queda pegado
   contra la barra de estado ahora es #dxChatBrandBar -- había que mover ese
   padding para acá, si no "VYNKO" se aplastaba contra el reloj/batería. */
@media (max-width: 640px) {
  .mp-messages-view.mp-chat-open #chatPanel.dx-vynko-chat #dxChatBrandBar {
    padding-top: env(safe-area-inset-top);
  }
  .mp-messages-view.mp-chat-open #chatPanel.dx-vynko-chat .mp-chat-head {
    padding-top: 0;
  }
}

#messagesView #chatPanel.dx-vynko-chat .dx-chat-brand-back,
#messagesView #chatPanel.dx-vynko-chat .dx-chat-brand-menu {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--dxv-sky-deep);
  cursor: pointer;
}

#messagesView #chatPanel.dx-vynko-chat .dx-chat-brand-menu {
  color: var(--dxv-ink);
}

#messagesView #chatPanel.dx-vynko-chat .dx-chat-brand-back:hover {
  background: rgba(56, 189, 248, 0.12);
}

#messagesView #chatPanel.dx-vynko-chat .dx-chat-brand-logo {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--dxv-sky-light), var(--dxv-sky-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Con la franja de marca arriba, la flecha "de siempre" de la fila del
   avatar sobraría (quedarían dos flechas de volver) -- la de la franja de
   marca es la única visible acá. */
#messagesView #chatPanel.dx-vynko-chat .mp-chat-head .mp-chat-back-btn {
  display: none;
}

/* ---------- Encabezado ---------- */
#messagesView #chatPanel.dx-vynko-chat .mp-chat-head {
  padding-bottom: 0.2rem;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-back-btn {
  color: var(--dxv-sky-deep) !important;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-back-btn:hover {
  background: rgba(56, 189, 248, 0.12);
}

#messagesView #chatPanel.dx-vynko-chat #chatPeerAvatar .mp-avatar-round {
  box-shadow: 0 0 0 2px var(--dxv-card), 0 0 0 4px var(--dxv-sky-light);
}

/* Botones de llamada/video: cuadrados muy redondeados y blancos con ícono
   azul cielo, en vez del círculo con borde blanco pensado para fondo
   oscuro que usa el resto de los temas. */
#messagesView #chatPanel.dx-vynko-chat .mp-chat-call-btn,
#messagesView #chatPanel.dx-vynko-chat .mp-chat-call-btn-outline {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 13px !important;
  background: var(--dxv-card) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(14, 116, 195, 0.18) !important;
  color: var(--dxv-sky-deep) !important;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-call-btn:disabled,
#messagesView #chatPanel.dx-vynko-chat .mp-chat-call-btn-outline:disabled {
  opacity: 0.45 !important;
}

/* ---------- Burbujas ---------- */
/* Radio grande con una esquina "achicada" del lado de quien la manda --
   misma idea que el resto de los temas (border-bottom-*-radius chico como
   "colita"), pero más redondeado y con sombra suave en vez de borde, que es
   lo que le da el aire "orgánico" de la referencia. */
#messagesView #chatPanel.dx-vynko-chat .mp-chat-bubble {
  border-radius: 20px !important;
  border-width: 0 !important;
  box-shadow: 0 2px 10px rgba(19, 62, 106, 0.08);
  padding: 0.6rem 0.9rem !important;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-bubble:not(.mine) {
  border-bottom-left-radius: 7px !important;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-bubble.mine {
  border-bottom-right-radius: 7px !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.32);
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-bubble-time {
  opacity: 0.65;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-bubble:not(.mine) .mp-chat-bubble-time {
  color: var(--dxv-sub);
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-bubble.mine .mp-chat-bubble-time {
  color: rgba(255, 255, 255, 0.85);
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-ticks.read {
  color: #eafcff;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-reply-quote {
  background: rgba(56, 189, 248, 0.12);
  border-left-color: var(--dxv-sky-deep);
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-date-separator span {
  background: var(--dxv-card);
  color: var(--dxv-sub);
  box-shadow: 0 2px 8px rgba(19, 62, 106, 0.08);
}

/* Burbuja "está escribiendo…" -- misma burbuja "theirs", solo recolorea los
   puntitos para que se vean sobre blanco (heredaban opacity/currentColor
   pensado para texto claro). */
#messagesView #chatPanel.dx-vynko-chat .mp-chat-typing-dots span {
  background: var(--dxv-sky-deep);
}

/* ---------- Reacciones ---------- */
/* Insignia flotante, redonda, blanca -- el corazón/emoji elegido se recolorea
   hacia azul cielo con un filtro (no hay forma de "pintar" un emoji de color
   real vía CSS: el glifo lo dibuja la fuente del sistema, así que esto es lo
   más cerca que se puede llegar sin cambiar el emoji guardado en la base). */
#messagesView #chatPanel.dx-vynko-chat .mp-msg-reaction-badge {
  background: var(--dxv-card) !important;
  border: 2px solid var(--dxv-bg-1) !important;
  box-shadow: 0 2px 8px rgba(19, 62, 106, 0.18);
  padding: 0.15rem 0.35rem !important;
  filter: hue-rotate(160deg) saturate(1.6) brightness(1.05);
}

/* ---------- Multimedia ---------- */
#messagesView #chatPanel.dx-vynko-chat .mp-chat-bubble-media {
  padding: 5px !important;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-media {
  border-radius: 16px !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-document {
  background: var(--dxv-bg-1) !important;
  color: var(--dxv-ink) !important;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-document-icon {
  background: linear-gradient(135deg, var(--dxv-sky-light), var(--dxv-sky-deep));
}

/* Audio: es un <audio controls> nativo -- no hay forma de dibujarle un
   waveform propio solo con CSS, pero en Chrome/WebView (el motor real de la
   app empaquetada) sí se pueden recolorear sus controles internos vía los
   pseudo-elementos -webkit-media-controls-*, que es lo que se hace acá para
   que al menos el botón de play y la barra queden en la misma paleta. */
#messagesView #chatPanel.dx-vynko-chat .mp-chat-audio {
  width: 230px !important;
  border-radius: 999px;
  background: var(--dxv-bg-1);
  padding: 0 0.4rem;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-audio::-webkit-media-controls-panel {
  background-color: transparent;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-audio::-webkit-media-controls-play-button,
#messagesView #chatPanel.dx-vynko-chat .mp-chat-audio::-webkit-media-controls-mute-button {
  background-color: var(--dxv-sky-deep);
  border-radius: 50%;
  filter: brightness(1) invert(0);
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-audio::-webkit-media-controls-current-time-display,
#messagesView #chatPanel.dx-vynko-chat .mp-chat-audio::-webkit-media-controls-time-remaining-display {
  color: var(--dxv-sub);
}

/* ---------- Barra de escribir ---------- */
/* Una sola cápsula flotante blanca/celeste muy clara que envuelve TODOS los
   controles -- + / texto / emoji / cámara / mic -- en vez de la fila de
   íconos sueltos sobre el fondo del chat que usa el resto de la app. */
#messagesView #chatPanel.dx-vynko-chat .mp-chat-input-bar {
  background: var(--dxv-card);
  border-radius: var(--radius-pill, 999px);
  padding: 0.35rem 0.4rem;
  box-shadow: 0 6px 22px rgba(19, 62, 106, 0.14);
  gap: 0.2rem;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-input-bar textarea#chatInput {
  background: transparent !important;
  border: none !important;
  color: var(--dxv-ink) !important;
  padding: 0.55rem 0.5rem !important;
  min-height: 36px !important;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-input-bar textarea#chatInput::placeholder {
  color: var(--dxv-sub);
  opacity: 0.8;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-input-bar textarea#chatInput:focus {
  border: none !important;
}

/* Íconos "de paso" (emoji, cámara) -- minimalistas, sin círculo de fondo. */
#messagesView #chatPanel.dx-vynko-chat .mp-chat-input-icon {
  background: transparent !important;
  border: none !important;
  color: var(--dxv-sky-deep) !important;
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-input-icon:hover {
  background: rgba(56, 189, 248, 0.12) !important;
}

/* Selector de emojis: panel claro a tono (venía oscuro, pensado para el
   resto de la app) + tamaño correcto para los <img> de Twemoji, que no
   siguen el font-size del botón como un emoji de texto normal (ver
   chatEmojiBtn en client.js). */
#messagesView #chatPanel.dx-vynko-chat #chatEmojiPicker {
  background: var(--dxv-card);
  border: 1px solid rgba(56, 189, 248, 0.18);
}

#messagesView #chatPanel.dx-vynko-chat #chatEmojiPicker button:hover {
  background: rgba(56, 189, 248, 0.12);
}

#messagesView #chatPanel.dx-vynko-chat #chatEmojiPicker img.emoji {
  height: 1.3em;
  width: 1.3em;
  vertical-align: -0.2em;
}

/* "+" (adjuntar): el único ícono "de paso" que sí queda en un círculo lleno,
   como en la referencia. */
#messagesView #chatPanel.dx-vynko-chat #chatAttachBtn {
  background: var(--dxv-bg-1) !important;
  color: var(--dxv-sky-deep) !important;
}

/* Mic / Enviar: el botón principal, círculo con degradado azul cielo (el
   mismo que las burbujas propias) -- se destaca del resto a propósito. */
#messagesView #chatPanel.dx-vynko-chat #chatMicBtn,
#messagesView #chatPanel.dx-vynko-chat .mp-chat-send-btn {
  background: linear-gradient(135deg, var(--dxv-sky-light), var(--dxv-sky-deep)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

#messagesView #chatPanel.dx-vynko-chat #chatMicBtn:hover,
#messagesView #chatPanel.dx-vynko-chat .mp-chat-send-btn:hover {
  filter: brightness(1.05);
}

#messagesView #chatPanel.dx-vynko-chat .mp-chat-reply-preview {
  background: var(--dxv-bg-1);
  border-color: rgba(56, 189, 248, 0.3);
  color: var(--dxv-ink);
}