/* ==========================================================================
   Tooltip (.sentio-tt)
   ==========================================================================
   Extracted from frontend.css during the Batch 8 mechanical extraction
   (2026-04-18). Behavior-preserving.

   `.sentio-tt` prefix shared with tiktok-feed (Batch 6 — already ported
   via inline-script-port; separate CSS block). Distinct line ranges.
   ========================================================================== */

/* ─── Base ─── */
.sentio-tt {
	position: relative;
	display: inline-block;
	vertical-align: top;
	visibility: visible;
}

/* ─── Trigger ─── */
.sentio-tt__trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease;
	outline: none;
}

.sentio-tt__trigger-img {
	display: inline-block;
	line-height: 0;
}
.sentio-tt__trigger-img .sentio-tt__img {
	display: block;
	width: 80px;
	height: auto;
}

.sentio-tt__trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.sentio-tt__trigger-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	background: #6366f1;
	color: #fff;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-weight: 500;
	white-space: nowrap;
}

.sentio-tt__btn-icon {
	display: inline-flex;
	font-size: 0.9em;
}

/* ─── Indicator (Diff #7) ─── */
.sentio-tt--ind-dotted .sentio-tt__trigger {
	border-bottom: 2px dotted currentColor;
}
.sentio-tt--ind-dashed .sentio-tt__trigger {
	border-bottom: 2px dashed currentColor;
}
.sentio-tt--ind-highlight .sentio-tt__trigger {
	background-color: rgba(99, 102, 241, 0.12);
	padding: 2px 6px;
	border-radius: 3px;
}
.sentio-tt__ind-icon {
	display: inline-flex;
	align-items: center;
	margin-left: 3px;
	opacity: 0.6;
	font-size: 0.8em;
}
.sentio-tt__ind-icon svg {
	width: 1em;
	height: 1em;
}

/* ─── Tooltip Bubble ─── */
.sentio-tt__bubble {
	position: absolute;
	width: max-content;
	max-width: 250px;
	box-sizing: border-box;
	padding: 10px 14px;
	background-color: #333;
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 6px;
	pointer-events: none;
	white-space: normal;
	word-wrap: break-word;
	opacity: 0;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
	transition-duration: 300ms;
	z-index: 100;
}

/* Interactive — pointer events only when active (Diff #6) */
.sentio-tt--interactive.sentio-tt--active .sentio-tt__bubble,
.sentio-tt--interactive.sentio-tt--mode-always .sentio-tt__bubble {
	pointer-events: auto;
}

/* ─── Position: Top ─── */
.sentio-tt--pos-top .sentio-tt__bubble {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	margin-bottom: 8px;
}

/* ─── Position: Bottom ─── */
.sentio-tt--pos-bottom .sentio-tt__bubble {
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	margin-top: 8px;
}

/* ─── Position: Left ─── */
.sentio-tt--pos-left .sentio-tt__bubble {
	right: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(-8px);
	margin-right: 8px;
}

/* ─── Position: Right ─── */
.sentio-tt--pos-right .sentio-tt__bubble {
	left: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(8px);
	margin-left: 8px;
}

/* ─── Arrow (Diff #5) — using em unit from font-size ─── */
.sentio-tt--arrow .sentio-tt__bubble::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border: 0.5em solid transparent;
	color: inherit;
}
/* Arrow positions */
.sentio-tt--arrow.sentio-tt--pos-top .sentio-tt__bubble::after {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top-color: currentColor;
	border-bottom: 0;
}
.sentio-tt--arrow.sentio-tt--pos-bottom .sentio-tt__bubble::after {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-color: currentColor;
	border-top: 0;
}
.sentio-tt--arrow.sentio-tt--pos-left .sentio-tt__bubble::after {
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-left-color: currentColor;
	border-right: 0;
}
.sentio-tt--arrow.sentio-tt--pos-right .sentio-tt__bubble::after {
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-right-color: currentColor;
	border-left: 0;
}

/* ─── Visible State ─── */
.sentio-tt--active .sentio-tt__bubble,
.sentio-tt--mode-always .sentio-tt__bubble {
	opacity: 1;
}

/* Animation visible transforms */
.sentio-tt--active.sentio-tt--pos-top .sentio-tt__bubble,
.sentio-tt--mode-always.sentio-tt--pos-top .sentio-tt__bubble {
	transform: translateX(-50%) translateY(0);
}
.sentio-tt--active.sentio-tt--pos-bottom .sentio-tt__bubble,
.sentio-tt--mode-always.sentio-tt--pos-bottom .sentio-tt__bubble {
	transform: translateX(-50%) translateY(0);
}
.sentio-tt--active.sentio-tt--pos-left .sentio-tt__bubble,
.sentio-tt--mode-always.sentio-tt--pos-left .sentio-tt__bubble {
	transform: translateY(-50%) translateX(0);
}
.sentio-tt--active.sentio-tt--pos-right .sentio-tt__bubble,
.sentio-tt--mode-always.sentio-tt--pos-right .sentio-tt__bubble {
	transform: translateY(-50%) translateX(0);
}

/* ─── Animation: Scale (Diff #3) ─── */
.sentio-tt--anim-scale .sentio-tt__bubble {
	transform-origin: center;
}
.sentio-tt--anim-scale.sentio-tt--pos-top .sentio-tt__bubble {
	transform: translateX(-50%) translateY(-8px) scale(0.8);
}
.sentio-tt--anim-scale.sentio-tt--pos-bottom .sentio-tt__bubble {
	transform: translateX(-50%) translateY(8px) scale(0.8);
}
.sentio-tt--anim-scale.sentio-tt--pos-left .sentio-tt__bubble {
	transform: translateY(-50%) translateX(-8px) scale(0.8);
}
.sentio-tt--anim-scale.sentio-tt--pos-right .sentio-tt__bubble {
	transform: translateY(-50%) translateX(8px) scale(0.8);
}
.sentio-tt--anim-scale.sentio-tt--active.sentio-tt--pos-top .sentio-tt__bubble,
.sentio-tt--anim-scale.sentio-tt--mode-always.sentio-tt--pos-top .sentio-tt__bubble {
	transform: translateX(-50%) translateY(0) scale(1);
}
.sentio-tt--anim-scale.sentio-tt--active.sentio-tt--pos-bottom .sentio-tt__bubble,
.sentio-tt--anim-scale.sentio-tt--mode-always.sentio-tt--pos-bottom .sentio-tt__bubble {
	transform: translateX(-50%) translateY(0) scale(1);
}
.sentio-tt--anim-scale.sentio-tt--active.sentio-tt--pos-left .sentio-tt__bubble,
.sentio-tt--anim-scale.sentio-tt--mode-always.sentio-tt--pos-left .sentio-tt__bubble {
	transform: translateY(-50%) translateX(0) scale(1);
}
.sentio-tt--anim-scale.sentio-tt--active.sentio-tt--pos-right .sentio-tt__bubble,
.sentio-tt--anim-scale.sentio-tt--mode-always.sentio-tt--pos-right .sentio-tt__bubble {
	transform: translateY(-50%) translateX(0) scale(1);
}

/* ─── Animation: Perspective ─── */
.sentio-tt--anim-perspective .sentio-tt__bubble {
	perspective: 700px;
}
.sentio-tt--anim-perspective.sentio-tt--pos-top .sentio-tt__bubble {
	transform: translateX(-50%) translateY(-8px) rotateX(15deg);
	transform-origin: bottom center;
}
.sentio-tt--anim-perspective.sentio-tt--pos-bottom .sentio-tt__bubble {
	transform: translateX(-50%) translateY(8px) rotateX(-15deg);
	transform-origin: top center;
}
.sentio-tt--anim-perspective.sentio-tt--pos-left .sentio-tt__bubble {
	transform: translateY(-50%) translateX(-8px) rotateY(-15deg);
	transform-origin: center right;
}
.sentio-tt--anim-perspective.sentio-tt--pos-right .sentio-tt__bubble {
	transform: translateY(-50%) translateX(8px) rotateY(15deg);
	transform-origin: center left;
}
.sentio-tt--anim-perspective.sentio-tt--active.sentio-tt--pos-top .sentio-tt__bubble,
.sentio-tt--anim-perspective.sentio-tt--mode-always.sentio-tt--pos-top .sentio-tt__bubble {
	transform: translateX(-50%) translateY(0) rotateX(0);
}
.sentio-tt--anim-perspective.sentio-tt--active.sentio-tt--pos-bottom .sentio-tt__bubble,
.sentio-tt--anim-perspective.sentio-tt--mode-always.sentio-tt--pos-bottom .sentio-tt__bubble {
	transform: translateX(-50%) translateY(0) rotateX(0);
}
.sentio-tt--anim-perspective.sentio-tt--active.sentio-tt--pos-left .sentio-tt__bubble,
.sentio-tt--anim-perspective.sentio-tt--mode-always.sentio-tt--pos-left .sentio-tt__bubble {
	transform: translateY(-50%) translateX(0) rotateY(0);
}
.sentio-tt--anim-perspective.sentio-tt--active.sentio-tt--pos-right .sentio-tt__bubble,
.sentio-tt--anim-perspective.sentio-tt--mode-always.sentio-tt--pos-right .sentio-tt__bubble {
	transform: translateY(-50%) translateX(0) rotateY(0);
}

/* ─── Animation: Shift Away ─── */
/* Hidden = closer to trigger, visible = normal position (already handled by base transforms) */

/* ─── Animation: Shift Toward ─── */
.sentio-tt--anim-shift-toward.sentio-tt--pos-top .sentio-tt__bubble {
	transform: translateX(-50%) translateY(4px);
}
.sentio-tt--anim-shift-toward.sentio-tt--pos-bottom .sentio-tt__bubble {
	transform: translateX(-50%) translateY(-4px);
}
.sentio-tt--anim-shift-toward.sentio-tt--pos-left .sentio-tt__bubble {
	transform: translateY(-50%) translateX(4px);
}
.sentio-tt--anim-shift-toward.sentio-tt--pos-right .sentio-tt__bubble {
	transform: translateY(-50%) translateX(-4px);
}
.sentio-tt--anim-shift-toward.sentio-tt--active.sentio-tt--pos-top .sentio-tt__bubble,
.sentio-tt--anim-shift-toward.sentio-tt--mode-always.sentio-tt--pos-top .sentio-tt__bubble {
	transform: translateX(-50%) translateY(0);
}
.sentio-tt--anim-shift-toward.sentio-tt--active.sentio-tt--pos-bottom .sentio-tt__bubble,
.sentio-tt--anim-shift-toward.sentio-tt--mode-always.sentio-tt--pos-bottom .sentio-tt__bubble {
	transform: translateX(-50%) translateY(0);
}
.sentio-tt--anim-shift-toward.sentio-tt--active.sentio-tt--pos-left .sentio-tt__bubble,
.sentio-tt--anim-shift-toward.sentio-tt--mode-always.sentio-tt--pos-left .sentio-tt__bubble {
	transform: translateY(-50%) translateX(0);
}
.sentio-tt--anim-shift-toward.sentio-tt--active.sentio-tt--pos-right .sentio-tt__bubble,
.sentio-tt--anim-shift-toward.sentio-tt--mode-always.sentio-tt--pos-right .sentio-tt__bubble {
	transform: translateY(-50%) translateX(0);
}

/* ─── Rich Content ─── */
.sentio-tt__image {
	margin-bottom: 8px;
	line-height: 0;
}
.sentio-tt__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.sentio-tt__title {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 4px;
}
.sentio-tt__desc {
	font-size: 13px;
	line-height: 1.5;
}
.sentio-tt__cta {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	background: rgba(255,255,255,0.2);
	border-radius: 3px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	cursor: pointer;
}
.sentio-tt__cta:hover {
	background: rgba(255,255,255,0.35);
}

/* ─── Follow Cursor offset (Diff #4) — JS sets --sentio-tt-x ─── */
.sentio-tt--follow .sentio-tt__bubble {
	left: var(--sentio-tt-x, 50%);
}