/* ================================================= JoinChat – UI System LoQuiero (Apple Glass Sheet) ================================================= */ /* ================================================= CONTENEDOR PRINCIPAL (Floating Glass) ================================================= */ .joinchat__chatbox{ /* Apple Glass oscuro */ background: linear-gradient( rgba(28,28,30,0.44), rgba(28,28,30,0.44) ) !important; backdrop-filter: blur(26px) !important; -webkit-backdrop-filter: blur(26px) !important; /* Radio del sistema */ border-radius: 24px !important; /* Blur iOS */ backdrop-filter: blur(26px) !important; -webkit-backdrop-filter: blur(26px) !important; /* Sombra flotante (no card) */ box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 24px 48px rgba(0,0,0,0.18) !important; /* Línea superior sutil tipo Apple sheet */ border-top: 1px solid rgba(255,255,255,0.12); /* Espaciado interno */ padding: 16px 16px 14px; box-sizing: border-box; overflow: hidden; /* Motion iOS sheet */ transform: scale(0.96) translateY(4px); opacity: 0; transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 140ms ease-out; } /* FIX: eliminar fade blanco interno JoinChat */ .joinchat__content::after, .joinchat__content:after { display: none !important; content: none !important; } /* Estado visible */ .joinchat--open .joinchat__chatbox{ transform: scale(1) translateY(0); opacity: 1; } /* ================================================= HEADER (barra superior) – Apple Glass ================================================= */ .joinchat__header{ /* Integrado al sheet (no card) */ background: transparent !important; min-height: 52px; padding: 10px 16px; opacity: 0.75; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; /* Separador Apple-style */ border-bottom: 1px solid rgba(255,255,255,0.10); } /* ================================================= ICONO WHATSAPP (header) – Apple Glass ================================================= */ .joinchat__header .joinchat__wa{ width: 72px; /* discreto, jerárquico */ height: auto; fill: rgba(255,255,255,0.88); /* blanco iOS sobre fondo oscuro */ } /* Fuerza color en paths internos */ .joinchat__header .joinchat__wa path{ fill: rgba(255,255,255,0.75); } /* ================================================= BOTÓN CERRAR (Apple iOS standard) ================================================= */ .joinchat__close{ width: 44px; height: 44px; border-radius: 999px; /* Fondo translúcido sobre glass */ background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); transition: background-color 120ms ease-out, transform 80ms ease-out, opacity 120ms ease-out; } /* Hover (desktop) */ @media (hover: hover){ .joinchat__close:hover{ background: rgba(255,255,255,0.24); opacity: 1; } } /* Tap / active (mobile) */ .joinchat__close:active{ background: rgba(255,255,255,0.28); transform: scale(0.96); } /* ================================================= MENSAJE DEL BOT — Apple iMessage / LoQuiero ================================================= */ .joinchat__message--bot{ background: rgba(255,255,255,0.96); color: #0f172a; border-radius: 24px; padding: 10px 14px; font-size: 15px; line-height: 1.35; font-weight: 400; max-width: 85%; /* Sombra Apple suave (misma familia que cards) */ box-shadow: 0 8px 20px rgba(15,23,42,0.12); position: relative; } /* Pico del globo — integrado */ .joinchat__message--bot::before{ content: ""; position: absolute; left: -6px; top: 14px; width: 12px; height: 12px; background: rgba(255,255,255,0.96); border-radius: 3px; transform: rotate(45deg); /* misma sombra que la burbuja */ box-shadow: -2px 2px 6px rgba(15,23,42,0.08); } /* ================================================= CTA INFERIOR – AGENTE ACTIVO (LoQuiero System) ================================================= */ /* CTA PRINCIPAL – JoinChat (BOTÓN REAL) */ .joinchat__agent{ --color: #00a650 !important; --text: #ffffff !important; background: var(--color) !important; color: var(--text) !important; border-radius: 999px !important; /* regla del sistema */ padding: 8px 14px !important; display: flex !important; align-items: center !important; gap: 12px !important; /* SOMBRA CTA OFICIAL LoQuiero */ box-shadow: 0 8px 22px rgba(15,23,42,0.16) !important; box-sizing: border-box; } joinchat__agents{ padding: 8px 0px !important; } /* imagen pegada al boton */ .joinchat__agent__image{ left: -10px !important; } /* Avatar asesor */ .joinchat__agent_image{ width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.18); } /* Texto del CTA */ .joinchat__agent_info{ display: flex; flex-direction: column; gap: 2px; color: var(--text); } .joinchat__agent_info strong{ font-size: 15px; font-weight: 600; line-height: 1.25; } .joinchat__agent_info small{ font-size: 13px; font-weight: 400; opacity: 0.9; } /* Flecha / acción */ .joinchat__agent_out{ margin-left: auto; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.22); color: var(--text); transition: background 120ms ease-out, transform 80ms ease-out; } /* Feedback táctil */ .joinchat__agent_out:active{ transform: scale(0.96); } .joinchat__agent_out:hover{ background: rgba(255,255,255,0.32); } /* ================================================= INPUT CLÁSICO (NO USADO ACTUALMENTE) Se deja comentado por compatibilidad futura ================================================= */ /* .joinchat__input{ } .joinchat__input-text{ } .joinchat__send{ } .joinchat__cta{ } */ /* ================================================= JoinChat – Variables globales (scope plugin) ================================================= */ .joinchat{ --color: #00a650 !important; /* Verde principal LoQuiero */ --text: #ffffff !important; /* Texto blanco */ } /* ================================================= JoinChat – Flecha CTA (control único y limpio) ================================================= */ /* Flecha del CTA (pseudo-elemento real) */ .joinchat__agent::before{ width: 30px !important; height: 30px !important; top: 50% !important; transform: translateY(-50%) !important; background-size: 22px !important; opacity: 0.75; pointer-events: none; /* evita foco fantasma */ } /* Aire interno para que no invada el texto */ .joinchat__agent_online{ padding-right: 44px !important; } /* ================================================= JoinChat – Ajuste MOBILE (escala correcta) No se siente modal gigante ================================================= */ @media (max-width: 768px) { /* CONTENEDOR DEL CHAT */ .joinchat__chatbox{ bottom: 30px !important; width: calc(100vw - 32px) !important; max-width: 360px !important; max-height: 70vh !important; border-radius: 24px !important; /* sistema */ } /* ÁREA SCROLL */ .joinchat__scroll{ padding: 12px !important; } /* HEADER */ .joinchat__header{ min-height: 52px !important; padding: 10px 14px !important; } /* BURBUJA BOT */ .joinchat__message--bot{ font-size: 14px !important; line-height: 1.3 !important; border-radius: 24px !important; } /* CTA AGENTE */ .joinchat__agent{ padding: 8px 10px !important; border-radius: 999px !important; } .joinchat__agent_info strong{ font-size: 14px !important; } .joinchat__agent_info small{ font-size: 12px !important; } .joinchat__agent_image{ width: 36px !important; height: 36px !important; } .joinchat__agent_out{ width: 28px !important; height: 28px !important; } } /* ================================================= JoinChat – Ajuste en páginas de producto Evita superposición con barra "Comprar" ================================================= */ @media (max-width: 768px){ body.single-product .joinchat{ --bottom: 70px; } }