/* ---------------------------------------------------------------------------
   OneClick WP Hello — Chat Teaser Bubble Styles
   Version: 1.0.0
   --------------------------------------------------------------------------- */

.ocwahello-teaser-wrap {
	position: fixed;
	bottom: 90px;
	z-index: 9999997;
	max-width: 240px;
	background: #ffffff;
	border-radius: 12px 12px 0 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 12px 36px 12px 14px;
	/* Animation only plays when the element is shown, not on initial hidden state */
}

/* Visible state — animation plays on reveal */
.ocwahello-teaser-wrap:not([hidden]) {
	animation: ocwahello-teaser-in 0.3s ease forwards;
}

.ocwahello-teaser-wrap.ocwahello-teaser--left  { left: 20px;  border-radius: 12px 12px 12px 0; }
.ocwahello-teaser-wrap.ocwahello-teaser--right { right: 20px; border-radius: 12px 12px 0 12px; }

/* Tail triangle */
.ocwahello-teaser-wrap.ocwahello-teaser--right::after {
	content: '';
	position: absolute;
	bottom: -10px;
	right: 18px;
	border: 6px solid transparent;
	border-top-color: #ffffff;
	border-bottom: none;
}
.ocwahello-teaser-wrap.ocwahello-teaser--left::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 18px;
	border: 6px solid transparent;
	border-top-color: #ffffff;
	border-bottom: none;
}

/* Entrance animation */
@keyframes ocwahello-teaser-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Message text */
.ocwahello-teaser-message {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #1a1a1a;
}

/* Close button */
.ocwahello-teaser-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	color: #999999;
	cursor: pointer;
	padding: 0;
	transition: color 0.15s;
}
.ocwahello-teaser-close:hover,
.ocwahello-teaser-close:focus {
	color: #333333;
	outline: 2px solid #25d366;
	outline-offset: 2px;
}

/* Typing indicator (three animated dots) */
.ocwahello-teaser-typing {
	display: flex;
	gap: 4px;
	align-items: center;
	height: 20px;
}
.ocwahello-teaser-typing span {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #25d366;
	animation: ocwahello-typing-dot 1.2s infinite ease-in-out;
}
.ocwahello-teaser-typing span:nth-child(2) { animation-delay: 0.2s; }
.ocwahello-teaser-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ocwahello-typing-dot {
	0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
	40%            { transform: scale(1);   opacity: 1; }
}

/* Mobile */
@media only screen and (max-width: 768px) {
	.ocwahello-teaser-wrap {
		max-width: calc(100vw - 80px);
		bottom: 80px;
	}
	.ocwahello-teaser-wrap.ocwahello-teaser--left  { left: 10px; }
	.ocwahello-teaser-wrap.ocwahello-teaser--right { right: 10px; }
}