.tui-tooltip-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	cursor: help;
}

.trigger-text {
	border-bottom: 1px dotted var(--tooltip-color);
}

.tooltip-indicator {
	font-size: 0.7rem;
	color: var(--tooltip-color);
	opacity: 0.7;
}

.tooltip {
	position: fixed;
	z-index: 99999;
	padding: 0.5rem 0.75rem;
	background: var(--terminal-bg);
	border: 1px solid var(--tooltip-color);
	border-radius: 4px;
	font-size: 0.8rem;
	color: var(--terminal-text);
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	animation: tooltipFadeIn 0.15s ease-out;
	pointer-events: none;
}

@keyframes tooltipFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Arrow styles - simplified for fixed positioning */
.tooltip-arrow {
	position: absolute;
	width: 8px;
	height: 8px;
	background: var(--terminal-bg);
	border: 1px solid var(--tooltip-color);
	border-top: none;
	border-left: none;
}

.tooltip.top .tooltip-arrow {
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
}

.tooltip.bottom .tooltip-arrow {
	top: -5px;
	left: 50%;
	transform: translateX(-50%) rotate(-135deg);
}

.tooltip.left .tooltip-arrow {
	right: -5px;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

.tooltip.right .tooltip-arrow {
	left: -5px;
	top: 50%;
	transform: translateY(-50%) rotate(135deg);
}
