/* Toc Toc – Support Chat for WhatsApp · Classic style
   Design by OKMULTIMEDIA - Ok Multimedia y Rubén Silva */

.toctoc {
	--tt-brand: #25d366;
	--tt-brand-dark: #128c4b;
	--tt-head: #0f7a5c;
	--tt-text: #1d2b2a;
	--tt-muted: #5f6f6c;
	--tt-panel: #ffffff;
	--tt-body: #eef3ef;
	--tt-bubble: #ffffff;
	--tt-radius: 18px;
	--tt-shadow: 0 12px 40px rgba(16, 40, 34, .22);
	--tt-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tt-offset: 22px;

	position: fixed;
	bottom: var(--tt-offset);
	z-index: 99990;
	font: 15px/1.45 var(--tt-font);
	color: var(--tt-text);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}
.toctoc, .toctoc *, .toctoc *::before, .toctoc *::after { box-sizing: border-box; }
.toctoc[hidden] { display: none; }
.toctoc--right { right: var(--tt-offset); }
.toctoc--left { left: var(--tt-offset); align-items: flex-start; }

@media (min-width: 768px) { .toctoc--no-desktop { display: none !important; } }
@media (max-width: 767px) { .toctoc--no-mobile { display: none !important; } }

/* ---------- Button ---------- */
.toctoc__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tt-brand);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
	transition: transform .2s ease, box-shadow .2s ease;
}
.toctoc__button:hover { transform: scale(1.06); }
.toctoc__button:focus-visible { outline: 3px solid var(--tt-head); outline-offset: 3px; }
.toctoc__button .toctoc__wa { width: 32px; height: 32px; fill: currentColor; }

/* Label that shows next to the button on wide screens */
.toctoc__label {
	position: absolute;
	right: calc(100% + 12px);
	white-space: nowrap;
	background: #fff;
	color: var(--tt-text);
	font-weight: 600;
	font-size: 14px;
	padding: 8px 14px;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
	opacity: 0;
	transform: translateX(8px);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}
.toctoc--left .toctoc__label { right: auto; left: calc(100% + 12px); transform: translateX(-8px); }
.toctoc.is-ready:not(.is-open) .toctoc__label { opacity: 1; transform: none; }
@media (max-width: 480px) { .toctoc__label { display: none; } }

/* Soft pulse ring that "knocks" for attention */
.toctoc__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--tt-brand);
	opacity: 0;
}
.toctoc.is-ready:not(.is-open) .toctoc__ring { animation: toctoc-knock 2.6s ease-out 1s 3; }

/* ---------- Entrance: drop in with a bounce ---------- */
.toctoc.is-ready .toctoc__button { animation: toctoc-bounce .9s cubic-bezier(.28, .84, .42, 1) both; }

@keyframes toctoc-bounce {
	0%   { transform: translateY(120px) scale(.6); opacity: 0; }
	55%  { transform: translateY(-14px) scale(1.04); opacity: 1; }
	72%  { transform: translateY(5px) scale(.98); }
	86%  { transform: translateY(-3px) scale(1.01); }
	100% { transform: none; opacity: 1; }
}
@keyframes toctoc-knock {
	0%   { transform: scale(1); opacity: .7; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Panel ---------- */
.toctoc__panel {
	width: min(360px, calc(100vw - 2 * var(--tt-offset)));
	background: var(--tt-panel);
	border-radius: var(--tt-radius);
	box-shadow: var(--tt-shadow);
	overflow: hidden;
	transform-origin: bottom right;
	transform: scale(.4) translateY(30px);
	opacity: 0;
	visibility: hidden;
	transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .2s ease, visibility 0s linear .35s;
}
.toctoc--left .toctoc__panel { transform-origin: bottom left; }
.toctoc.is-open .toctoc__panel {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .2s ease, visibility 0s;
}

.toctoc__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 16px 18px;
	background: var(--tt-head);
	color: #fff;
}
.toctoc__avatar {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 20px;
}
.toctoc__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.toctoc__online {
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #4ade80;
	border: 2px solid var(--tt-head);
}
.toctoc__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.toctoc__who strong { font-size: 16px; line-height: 1.25; }
.toctoc__who small { font-size: 12.5px; opacity: .85; }
.toctoc__close {
	flex: none;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}
.toctoc__close:hover { background: rgba(255, 255, 255, .28); }
.toctoc__close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }

.toctoc__body { background: var(--tt-body); padding: 22px 18px; }
.toctoc__bubble {
	position: relative;
	margin: 0;
	max-width: 88%;
	background: var(--tt-bubble);
	padding: 12px 14px;
	border-radius: 4px 14px 14px 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
	opacity: 0;
	transform: translateY(6px);
}
.toctoc.is-open .toctoc__bubble { animation: toctoc-bubble .4s ease .25s forwards; }
@keyframes toctoc-bubble { to { opacity: 1; transform: none; } }

.toctoc__foot { padding: 14px 18px 18px; background: var(--tt-panel); }
.toctoc__start {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 13px 18px;
	border-radius: 999px;
	background: var(--tt-brand);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: background .2s ease, transform .2s ease;
}
.toctoc__start:hover { background: var(--tt-brand-dark); transform: translateY(-1px); }
.toctoc__start:focus-visible { outline: 3px solid var(--tt-head); outline-offset: 3px; }
.toctoc__start .toctoc__wa { width: 22px; height: 22px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
	.toctoc *, .toctoc *::before, .toctoc *::after { animation: none !important; transition: none !important; }
	.toctoc__bubble { opacity: 1; transform: none; }
}