/* Estilo VYNKO de la conversación (pedido del dueño 2026-10-30 con captura: "vamos a usar el chat por defecto de VYNKO"): el de por defecto (data-chat-theme="classic"; el de BlackBerry ahora es "bbm", css/chat-clasico.css). Fondo de cielo con el logo, burbujas de vidrio (las mías azules con borde blanco, las de la otra persona blancas), letra de máquina de escribir, la V de recibido (azul) / leído (verde) y la barra de escribir como cápsula de vidrio con botones redondos. Citas tiene su propio diseño (.dx-vynko-chat, css/dx-chat-vynko.css) y no se toca. */ #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat), #chatPeekMessages[data-chat-theme="classic"] { /* Fondo del dueño (2026-10-30, "esta va a quedar por defecto, le pones el logo de VYNKO como marca de agua"): ondas azul cielo con el logo suave en el centro (img/chat/fondo-vynko.jpg). Los degradados de abajo solo se ven si no carga. */ --vkc-photo: url('../img/chat/fondo-vynko.jpg'); --chat-bg: var(--vkc-photo), radial-gradient(120% 60% at 50% 100%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #3b8fe8 0%, #5aaaf3 40%, #8cc8fb 75%, #cfe8ff 100%); --chat-header-color: #0b2c4d; --chat-bubble-mine-bg: rgba(59, 130, 246, .30); --chat-bubble-mine-color: #0b1f3a; --chat-bubble-theirs-bg: rgba(255, 255, 255, .92); --chat-bubble-theirs-color: #1f2937; --chat-font: 'Courier Prime', 'Courier New', ui-monospace, monospace; } #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) { background: var(--chat-bg) !important; background-size: cover !important; background-position: center !important; } /* Encabezado transparente sobre el cielo, nombre oscuro, llamadas en círculos */ #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-head { background: rgba(255,255,255,.18) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.45) !important; box-shadow: none !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-head, #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-head * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-head #chatPeerName { color: #0b2c4d !important; font-weight: 800; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-head .mp-chat-status { color: #33557a !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-back-btn { color: #0b2c4d !important; background: transparent !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-call-btn { width: 46px !important; height: 46px !important; border-radius: 50% !important; border: 2px solid #0b2c4d !important; background: rgba(255,255,255,.25) !important; color: #0b2c4d !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #startFriendCallBtn { background: linear-gradient(135deg, #22d3ee, #14b8a6) !important; border-color: #0b2c4d !important; color: #0b2c4d !important; } /* La línea con el clima (⛅) */ #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-theme-divider-line { background: rgba(255,255,255,.8) !important; } /* Burbujas de vidrio */ #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-messages { background: transparent !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-bubble, #chatPeekMessages[data-chat-theme="classic"] .mp-chat-bubble { font-family: var(--chat-user-font, var(--chat-font)) !important; border-radius: 18px !important; box-shadow: 0 6px 18px rgba(15, 52, 104, .12) !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-bubble.mine, #chatPeekMessages[data-chat-theme="classic"] .mp-chat-bubble.mine { background: var(--chat-bubble-mine-bg) !important; color: var(--chat-user-text-color, var(--chat-bubble-mine-color)) !important; border: 1.5px solid rgba(255,255,255,.85) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-bubble:not(.mine), #chatPeekMessages[data-chat-theme="classic"] .mp-chat-bubble:not(.mine) { background: var(--chat-bubble-theirs-bg) !important; color: var(--chat-user-text-color, var(--chat-bubble-theirs-color)) !important; border: 1px solid rgba(255,255,255,.95) !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-bubble::before, #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-bubble::after { display: none !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-bubble p { font-family: inherit !important; font-size: 1.02rem !important; line-height: 1.45 !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-bubble-time { color: #5b6b80 !important; font-family: inherit !important; font-size: .74rem !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-bubble.mine .mp-chat-bubble-time { color: #33557a !important; } /* La V: gris enviado, azul recibido, verde leído (chatTicksHtml en client.js) */ .mp-chat-ticks.vk-v { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; vertical-align: -3px; margin-left: 4px; background: #9ca3af; color: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .mp-chat-ticks.vk-v svg { width: 10px; height: 10px; display: block; } .mp-chat-ticks.vk-v.delivered { background: #2563eb; } .mp-chat-ticks.vk-v.read { background: #16a34a; } /* Barra de escribir como la referencia del dueño (2026-10-30, "eso debe estar largo así como la otra imagen"): "+" para adjuntar (sin círculo), el campo largo con el emoji adentro, la cámara y el micrófono en un círculo de color (al escribir, ese círculo es el de enviar). El regalo 🎁 se pasó al menú del "+" (public/chat-list-vynko.js). */ #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-input-bar { margin: 0 !important; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important; gap: 8px !important; align-items: center !important; border-radius: 22px 22px 0 0 !important; background: rgba(255,255,255,.55) !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.85) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -6px 20px rgba(15, 52, 104, .08) !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-input-emoji-wrap { flex: none; } /* Orden: + | campo | (emoji encima del campo) | cámara | micrófono o enviar */ #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .vkc-attach-wrap { order: 1; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatInput { order: 2; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .vkc-emoji-wrap { order: 3; margin-left: -50px !important; z-index: 2; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatQuickCameraBtn { order: 4; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatMicBtn, #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatSendBtn { order: 5; } #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm #chatGiftBtn { display: none !important; } /* Íconos sin círculo */ #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm .mp-chat-input-icon { flex: none; width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; color: #0b2c4d !important; display: grid !important; place-items: center !important; } #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm .mp-chat-input-icon.hidden { display: none !important; } #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm .mp-chat-input-icon svg { width: 24px !important; height: 24px !important; } /* "+" en vez del clip */ #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatAttachBtn svg { display: none !important; } #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatAttachBtn::before { content: '+'; font: 300 2.1rem/1 system-ui, sans-serif; color: #0b2c4d; margin-top: -3px; } /* Emoji dentro del campo, a la derecha */ #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatEmojiBtn { width: 42px !important; height: 42px !important; color: #4b6584 !important; } #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatEmojiPicker { left: auto !important; right: 0 !important; } /* El campo largo */ #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm textarea#chatInput { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; min-height: 46px !important; padding: 12px 52px 12px 18px !important; border-radius: 24px !important; background: rgba(255,255,255,.95) !important; border: 1px solid rgba(11,44,77,.12) !important; color: #0b1f3a !important; font-family: 'Courier Prime', 'Courier New', monospace !important; font-size: 16px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.04); } /* Micrófono y enviar: círculo de color VYNKO */ #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm #chatMicBtn, #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm #chatSendBtn { width: 48px !important; height: 48px !important; min-width: 48px; border-radius: 50% !important; background: linear-gradient(135deg, #38bdf8, #7c3aed) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(99, 102, 241, .35) !important; border: 0 !important; } #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm #chatMicBtn.hidden, #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm #chatSendBtn.hidden { display: none !important; } /* Estilo BlackBerry: sin la V redonda, con la letra de siempre (✓ / D / R). En los demás estilos, la V. */ .mp-chat-ticks.vk-v .vk-bbm { display: none; } #chatPanel[data-chat-theme="bbm"] .mp-chat-ticks.vk-v, #chatPeekMessages[data-chat-theme="bbm"] .mp-chat-ticks.vk-v { width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; vertical-align: baseline; } #chatPanel[data-chat-theme="bbm"] .mp-chat-ticks.vk-v svg, #chatPeekMessages[data-chat-theme="bbm"] .mp-chat-ticks.vk-v svg { display: none; } #chatPanel[data-chat-theme="bbm"] .mp-chat-ticks.vk-v .vk-bbm, #chatPeekMessages[data-chat-theme="bbm"] .mp-chat-ticks.vk-v .vk-bbm { display: inline; font-weight: 900; } /* Teléfonos angostos o con letra grande (el dueño 2026-11-04, foto del Android de un amigo: el campo de escribir quedaba tan angosto que "Escribí algo, pues…" salía en 4 renglones). El campo dejaba 70 px de margen por dentro y la letra de máquina es ancha: aquí se le da el espacio al texto. Sirve en cualquier orden de los botones. */ @media (max-width: 420px) { #messagesView #chatForm textarea#chatInput, #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm textarea#chatInput { padding: 10px 12px !important; font-size: 15px !important; } #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm textarea#chatInput { padding-right: 40px !important; } #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .vkc-emoji-wrap { margin-left: -42px !important; } #chatPanel .mp-chat-input-bar, #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) .mp-chat-input-bar { gap: 4px !important; padding-left: 6px !important; padding-right: 6px !important; } #messagesView #chatForm .mp-chat-input-icon, #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm .mp-chat-input-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; } #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm #chatEmojiBtn { width: 34px !important; height: 34px !important; } #messagesView #chatForm #chatMicBtn, #messagesView #chatForm #chatSendBtn, #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm #chatMicBtn, #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm #chatSendBtn { width: 42px !important; height: 42px !important; min-width: 42px !important; } /* Las burbujas usaban 3/4 del ancho: en un teléfono angosto con letra grande cada frase salía en 8 renglones. */ #messagesView li.mp-chat-bubble { max-width: 88% !important; } /* Un solo renglón como WhatsApp: el texto de ejemplo no se parte (estiraba el campo hacia arriba) y el campo crece solo cuando de verdad se escribe mucho. */ #messagesView #chatForm textarea#chatInput, #messagesView #chatPanel[data-chat-theme="classic"]:not(.dx-vynko-chat) #chatForm textarea#chatInput { min-height: 42px !important; line-height: 20px !important; padding-top: 11px !important; padding-bottom: 11px !important; } #messagesView #chatForm textarea#chatInput::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }