/*
 * Icon/trigger styles only — this is the ONLY css that ships on a normal
 * page when trigger mode is "shortcode" (icon in header). It is small on
 * purpose (~1KB) and cacheable, so its real-world cost after the first
 * page view on a site is effectively zero. The heavy chat UI rules live
 * in widget-panel.css and are only requested the moment someone opens
 * the chat.
 */

#wpgs_floating_btn { cursor: pointer; }

/* Legacy floating mode: bottom-right bubble fixed over the page. */
.wpgs-trigger-floating#wpgs_floating_btn {
	position: fixed; bottom: 25px; right: 25px; z-index: 99998;
	animation: wpgs_pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.wpgs-trigger-floating .wpgs-fab { width: 65px; height: 65px; }

/* Header/shortcode mode: sits inline wherever [guest_support_icon] is placed. */
.wpgs-trigger-inline#wpgs_floating_btn {
	position: relative; display: inline-flex; vertical-align: middle;
}
.wpgs-trigger-inline .wpgs-fab { width: 38px; height: 38px; }
.wpgs-trigger-inline .wpgs-fab svg { width: 20px; height: 20px; }

/* Hollow/outline variant for the header icon — no filled background, no
   colored shadow, follows currentColor so it automatically matches
   whatever color the theme's other header icons already use. Floating
   mode keeps the solid gradient bubble (.wpgs-fab below) unchanged. */
.wpgs-trigger-inline .wpgs-fab {
	background: transparent;
	border: 1.5px solid currentColor;
	color: inherit;
	box-shadow: none;
	opacity: 0.85;
}
.wpgs-trigger-inline .wpgs-fab:hover {
	opacity: 1;
	background: rgba(127, 127, 127, 0.1);
	box-shadow: none;
	transform: none;
}

.wpgs-fab {
	background: linear-gradient(135deg, #32a459, #2a5298);
	border-radius: 50%;
	box-shadow: 0 10px 20px rgba(30, 60, 114, 0.3);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.wpgs-fab:hover { transform: scale(1.08) translateY(-3px); box-shadow: 0 15px 25px rgba(30, 60, 114, 0.4); }

.wpgs-badge {
	position: absolute; top: -2px; right: -2px;
	background: #ff4757; color: #fff; border-radius: 50%;
	min-width: 20px; height: 20px; padding: 0 4px; font-size: 11px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #fff; font-weight: bold; line-height: 1;
}

@keyframes wpgs_pop { 0%{transform:scale(0);opacity:0;} 100%{transform:scale(1);opacity:1;} }
@keyframes wpgs_spin { 100% { transform: rotate(360deg); } }
.wpgs-spin { animation: wpgs_spin 1s linear infinite; }