/* =========================================
			   INTERACTIVITY UI
			   ========================================= */
			.clickable-text {
				cursor: pointer;
				transition: all 0.2s;
				position: relative;
				display: inline-flex;
				align-items: center;
				gap: 4px;
				color: var(--primary);
				font-weight: 500;
				padding: 2px 4px;
				margin: -2px -4px;
				border-radius: 4px;
			}

			.clickable-text:hover {
				background-color: var(--ui-click-bg);
				text-decoration: none;
			}

			.clickable-text:active {
				opacity: 0.7;
			}

			.copy-indicator {
				cursor: copy;
				transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
				padding: 2px 8px;
				border-radius: 6px;
				display: inline;
				position: relative;
				user-select: text;
				word-break: break-all;
				background-color: var(--ui-badge-bg);
				border: 1px solid transparent;
				color: #333;
				font-family: monospace, sans-serif;
				font-size: 0.9em;
			}

			.copy-indicator:hover {
				background-color: #fff;
				border-color: var(--primary);
				color: var(--primary);
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			}

			.copy-indicator::after {
				content: '\f0c5';
				font-family: "Font Awesome 6 Free";
				font-weight: 400;
				margin-left: 6px;
				font-size: 0.85em;
				color: var(--text-secondary);
				display: inline-block;
				vertical-align: middle;
				opacity: 0.7;
			}

			.copy-indicator:hover::after {
				color: var(--primary);
				opacity: 1;
			}

			.copy-indicator.copied {
				background-color: rgba(52, 199, 89, 0.15);
				border-color: var(--success);
				color: var(--success);
			}

			.copy-indicator.copied::after {
				content: '\f00c';
				font-weight: 900;
				color: var(--success);
				transform: scale(1.1);
				opacity: 1;
			}

			.link-icon {
				font-size: 0.75em;
				opacity: 0.8;
				margin-left: 2px;
			}