← All changes | asset/css/ai-chatbot/chatbot.css +151 -13 3.5.3 → 3.5.4 View file →

		@@ -33,13 +33,132 @@
33	33	color: var(--wpsc-chatbot-launcher-icon, #ffffff);
34	34	font-size: 22px;
35	35	line-height: 1;
36	36	cursor: pointer;
37		- box-shadow: 0 4px 12px rgba(0,0,0,.2);
38		- z-index: 9999;
	37	+ box-shadow: 0 6px 20px rgba(0,0,0,.28);
	38	+ z-index: 999999;
39	39	will-change: transform;
40	40	}
41	41
	42	+/* Greeting Tooltip */
	43	+.wpsc-chatbot-tooltip {
	44	+ position: fixed;
	45	+ bottom: calc(var(--wpsc-chatbot-offset-bottom, 20px) + 66px);
	46	+ right: var(--wpsc-chatbot-offset-right, 20px);
	47	+ max-width: min(260px, calc(100vw - 40px));
	48	+ display: flex;
	49	+ align-items: flex-start;
	50	+ gap: 6px;
	51	+ background: #fff;
	52	+ border: 1px solid #eee;
	53	+ border-radius: 12px;
	54	+ padding: 10px 8px 10px 14px;
	55	+ box-shadow: 0 10px 28px rgba(0,0,0,.22);
	56	+ z-index: 999998;
	57	+ opacity: 0;
	58	+ visibility: hidden;
	59	+ pointer-events: none;
	60	+ transform: translateY(8px) scale(.95);
	61	+ transform-origin: bottom right;
	62	+ transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
	63	+}
	64	+
	65	+.wpsc-chatbot-tooltip.wpsc-chatbot-tooltip--active {
	66	+ opacity: 1;
	67	+ visibility: visible;
	68	+ pointer-events: auto;
	69	+ transform: translateY(0) scale(1);
	70	+ animation: wpsc-chatbot-tooltip-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
	71	+}
	72	+
	73	+/* A single, gentle bounce (no repeat) so the tooltip visibly pops into place
	74	+ next to the launcher, drawing the eye toward it without being distracting. */
	75	+@keyframes wpsc-chatbot-tooltip-pop {
	76	+ 0% {
	77	+ opacity: 0;
	78	+ transform: translateY(14px) scale(.85);
	79	+ }
	80	+
	81	+ 60% {
	82	+ opacity: 1;
	83	+ transform: translateY(-3px) scale(1.04);
	84	+ }
	85	+
	86	+ 100% {
	87	+ opacity: 1;
	88	+ transform: translateY(0) scale(1);
	89	+ }
	90	+}
	91	+
	92	+.wpsc-chatbot-tooltip::after {
	93	+ content: '';
	94	+ position: absolute;
	95	+ bottom: -6px;
	96	+ right: 24px;
	97	+ width: 12px;
	98	+ height: 12px;
	99	+ background: #fff;
	100	+ border-right: 1px solid #eee;
	101	+ border-bottom: 1px solid #eee;
	102	+ transform: rotate(45deg);
	103	+}
	104	+
	105	+.wpsc-chatbot-tooltip__message {
	106	+ flex: 1;
	107	+ background: none;
	108	+ border: none;
	109	+ padding: 0;
	110	+ margin: 0;
	111	+ font-family: inherit;
	112	+ font-size: 14px;
	113	+ line-height: 1.4;
	114	+ color: #111827;
	115	+ text-align: left;
	116	+ cursor: pointer;
	117	+}
	118	+
	119	+.wpsc-chatbot-tooltip__close {
	120	+ flex-shrink: 0;
	121	+ width: 28px;
	122	+ height: 28px;
	123	+ min-width: 28px;
	124	+ display: flex;
	125	+ align-items: center;
	126	+ justify-content: center;
	127	+ background: none;
	128	+ border: none;
	129	+ border-radius: 50%;
	130	+ padding: 0;
	131	+ font-size: 18px;
	132	+ line-height: 1;
	133	+ color: #6b7280;
	134	+ cursor: pointer;
	135	+}
	136	+
	137	+@media (hover: hover) {
	138	+ .wpsc-chatbot-tooltip__close:hover {
	139	+ background: rgba(0, 0, 0, .06);
	140	+ color: #111827;
	141	+ }
	142	+}
	143	+
	144	+.wpsc-chatbot-tooltip__close:focus-visible,
	145	+.wpsc-chatbot-tooltip__message:focus-visible {
	146	+ outline: 2px solid var(--wpsc-chatbot-launcher-bg, #2271b1);
	147	+ outline-offset: 2px;
	148	+}
	149	+
	150	+@media (prefers-reduced-motion: reduce) {
	151	+ .wpsc-chatbot-tooltip {
	152	+ transition: opacity .01ms linear;
	153	+ transform: none;
	154	+ }
	155	+
	156	+ .wpsc-chatbot-tooltip.wpsc-chatbot-tooltip--active {
	157	+ animation: none;
	158	+ }
	159	+}
	160	+
42	161	/* Widget */
43	162	.wpsc-chatbot {
44	163	position: fixed;
45	164	bottom: var(--wpsc-chatbot-offset-bottom, 20px);
		@@ -51,10 +170,10 @@
51	170	background: #fff;
52	171	border: 1px solid #ddd;
53	172	border-radius: 12px;
54	173	overflow: hidden;
55		- box-shadow: 0 8px 24px rgba(0,0,0,.15);
56		- z-index: 9999;
	174	+ box-shadow: 0 10px 32px rgba(0,0,0,.25);
	175	+ z-index: 999999;
57	176	padding-bottom: env(safe-area-inset-bottom);
58	177	transform-origin: bottom right;
59	178	transform: scale(.8) translateY(20px);
60	179	opacity: 0;
		@@ -169,9 +288,9 @@
169	288	}
170	289
171	290	.wpsc-chatbot__footer {
172	291	flex-shrink: 0;
173		- background: #fff;
	292	+ background: #f5f5f5;
174	293	}
175	294
176	295	.wpsc-chatbot__body,
177	296	.wpsc-chatbot__footer {
		@@ -207,9 +326,9 @@
207	326	height: 100dvh;
208	327	max-width: none;
209	328	max-height: none;
210	329	border-radius: 0;
211		- z-index: 999999;
	330	+ z-index: 9999999;
212	331	}
213	332
214	333	.wpsc-chatbot--fullscreen .wpsc-chatbot__header-title svg {
215	334	width: 35px;
		@@ -331,12 +450,11 @@
331	450	}
332	451
333	452	.wpsc-chatbot__input-group {
334	453	flex-shrink: 0;
335		- padding: 10px;
	454	+ padding: 5px 10px;
336	455	display: flex;
337	456	gap: 10px;
338		- border-top: 1px solid #eee;
339	457	opacity: 1;
340	458	transform: translateY(0);
341	459	}
342	460
		@@ -364,8 +482,17 @@
364	482	font-size: 10px;
365	483	color: #9ca3af;
366	484	}
367	485
	486	+.wpsc-chatbot__warning-message {
	487	+ text-align: center;
	488	+ margin: 0;
	489	+ padding: 5px 10px 0;
	490	+ font-size: 9px;
	491	+ line-height: 1.4;
	492	+ color: #9ca3af;
	493	+}
	494	+
368	495	.wpsc-chatbot__powered-by a {
369	496	display: flex;
370	497	align-items: center;
371	498	justify-content: center;
		@@ -553,11 +680,9 @@
553	680	height: 100dvh;
554	681	max-width: none;
555	682	max-height: none;
556	683	border-radius: 0;
557		- z-index: 9999;
558		- /* Height/top are kept in sync with window.visualViewport via JS while the on-screen
559		- keyboard is open/closing, so a transition here would fight that and lag/jitter. */
	684	+ z-index: 999999;
560	685	transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
561	686	}
562	687
563	688	/* Prevent iOS Safari from auto-zooming the page when the textarea receives focus -
		@@ -575,11 +700,11 @@
575	700	height: 100dvh;
576	701	max-width: none;
577	702	max-height: none;
578	703	border-radius: 0;
579		- z-index: 999999;
	704	+ z-index: 9999999;
580	705	}
581		-
	706	+
582	707	.wpsc-chatbot--expanded .wpsc-chatbot__body {
583	708	padding-left: 2vw;
584	709	padding-right: 2vw;
585	710	}
		@@ -602,8 +727,21 @@
602	727
603	728	.wpsc-chatbot-launcher svg {
604	729	width: 26px;
605	730	height: 26px;
	731	+ }
	732	+
	733	+ .wpsc-chatbot-tooltip {
	734	+ bottom: calc(var(--wpsc-chatbot-offset-bottom, 16px) + 62px);
	735	+ right: var(--wpsc-chatbot-offset-right, 16px);
	736	+ max-width: min(240px, calc(100vw - 32px));
	737	+ }
	738	+
	739	+ .wpsc-chatbot-tooltip__close {
	740	+ width: 36px;
	741	+ height: 36px;
	742	+ min-width: 36px;
	743	+ font-size: 20px;
606	744	}
607	745
608	746	.wpsc-chatbot__header {
609	747	padding: 12px;