:root {
	--odyssey-floating-right-offset: 20px;
	--odyssey-floating-bottom-offset: 20px;
	--odyssey-feedback-bottom-offset: 70px;
	--odyssey-feedback-width: min(400px, calc(100vw - (var(--odyssey-floating-right-offset) * 2)));
}

/* Floating button for text selection */
.odyssey-floating-button {
	position: fixed !important;
	background: rgb(30 30 35 / 70%) !important;
	height: 36px !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 2147483647 !important;
	font-size: 13px !important;
	font-weight: 300 !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px !important;
	/* Ensure visibility in iframes and complex DOMs */
	visibility: visible !important;
	opacity: 1 !important;
	transform: translateZ(0) !important;
	will-change: transform !important;
	/* Prevent button from resizing when content changes */
	width: fit-content !important;
	white-space: nowrap !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	backdrop-filter: blur(8px);
}

.odyssey-floating-button>a {
	color: white !important;
	font-weight: 300 !important;
	text-decoration: none !important;
	border: none !important;
	border-bottom: none !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	background: none !important;
	cursor: pointer !important;
	font-size: 13px !important;
	font-weight: 300 !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
	/* pointer-events controlled by JS - auto for persistent, none for selection popup */
	pointer-events: auto !important;
	color: white !important;
	transition: background-color 0.15s ease, transform 0.1s ease !important;
	padding: 4px 4px !important;
	border-radius: 4px !important;
}

/* Floating button hover effect - native hover plus JS virtual hover share the same visual state */
.odyssey-floating-button>a:hover,
.odyssey-floating-button>a.odyssey-virtual-hover {
	background-color: rgba(255, 255, 255, 0.2) !important;
	transform: scale(1.02) !important;
}

.odyssey-floating-button>a.odyssey-trial-locked {
	color: rgba(255, 255, 255, 0.42) !important;
	opacity: 0.65 !important;
	cursor: not-allowed !important;
	filter: grayscale(1) !important;
}

.odyssey-floating-button>a.odyssey-trial-locked:hover,
.odyssey-floating-button>a.odyssey-trial-locked.odyssey-virtual-hover {
	background-color: transparent !important;
	transform: none !important;
}

.odyssey-trial-expired .odyssey-trial-action {
	color: rgba(255, 255, 255, 0.42) !important;
	filter: grayscale(1) !important;
}

.odyssey-trial-expired .odyssey-trial-action {
	color: rgba(255, 255, 255, 0.42) !important;
	filter: grayscale(1) !important;
}

.odyssey-trial-expired .odyssey-spell-check-link,
.odyssey-trial-expired .odyssey-listen-link,
.odyssey-trial-expired .odyssey-translated-listen-link,
.odyssey-trial-expired .odyssey-translate-link,
.odyssey-trial-expired .odyssey-custom-prompt-link,
.odyssey-trial-expired .odyssey-transcript-link,
.odyssey-trial-expired .odyssey-speak-link,
.odyssey-trial-expired .odyssey-summary-link {
	color: rgba(255, 255, 255, 0.42) !important;
	filter: grayscale(1) !important;
}

/* Floating button for image selection */
.odyssey-image-button {
	isolation: isolate;
	padding-left: 6px !important;
	padding-right: 6px !important;
	position: fixed !important;
	background: rgb(30 30 35 / 70%) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
	height: 36px !important;
	padding-left: 7px !important;
	padding-right: 7px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	z-index: 2147483647 !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out !important;
	pointer-events: auto !important;
	transform: translateZ(0) !important;
	will-change: opacity, visibility !important;
	backdrop-filter: blur(8px);
}

.odyssey-image-button>a {
	color: white !important;
	font-weight: 300 !important;
	text-decoration: none !important;
	font-size: 13px !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, transform 0.1s ease !important;
	padding: 4px 4px !important;
	border-radius: 4px !important;
}

/* Hover effect for image button links */
.odyssey-image-button>a:hover {
	background-color: rgba(255, 255, 255, 0.2) !important;
	transform: scale(1.02) !important;
}

/* Show button on hover - with higher specificity */
.odyssey-image-button.odyssey-show {
	opacity: 1 !important;
	visibility: visible !important;
}

.odyssey-image-button:hover {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Floating button for video selection */
.odyssey-video-button {
	isolation: isolate;
	padding-left: 6px !important;
	padding-right: 6px !important;
	position: fixed !important;
	background: rgb(30 30 35 / 70%) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
	height: 36px !important;
	padding-left: 7px !important;
	padding-right: 7px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	z-index: 2147483647 !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	opacity: 0 !important;
	visibility: hidden !important;

	pointer-events: auto !important;
	transform: translateZ(0) !important;
	will-change: opacity, visibility !important;
	backdrop-filter: blur(8px);
}

.odyssey-video-button>a {
	color: white !important;
	font-weight: 300 !important;
	text-decoration: none !important;
	font-size: 13px !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, transform 0.1s ease !important;
	padding: 4px 4px !important;
	border-radius: 4px !important;
}

/* Hover effect for video button links */
.odyssey-video-button>a:hover {
	background-color: rgba(255, 255, 255, 0.2) !important;
	transform: scale(1.02) !important;
}

/* Show video button on hover */
.odyssey-video-button.odyssey-show {
	opacity: 1 !important;
	visibility: visible !important;
}

.odyssey-video-button:hover {
	opacity: 1 !important;
	visibility: visible !important;
}

.odyssey-image-button>a,
.odyssey-floating-button>a,
.odyssey-video-button>a {
	white-space: nowrap;
}

/* Bottom right persistent chat button - uses same styles but positioned at bottom */
.tab-bottom-floating {
	position: fixed !important;
	bottom: var(--odyssey-floating-bottom-offset) !important;
	right: var(--odyssey-floating-right-offset) !important;
	left: auto !important;
	top: auto !important;
	z-index: 2147483647 !important;
}

.tab-bottom-floating.tab-custom-position {
	left: auto !important;
	bottom: auto !important;
}

/* Persistent button links need pointer-events:auto (not affected by virtual click system) */
.tab-bottom-floating>a {
	pointer-events: auto !important;
	cursor: pointer !important;
}

.tab-bottom-floating .odyssey-hide-link {
	width: 24px !important;
	min-width: 24px !important;
	margin-left: 0px !important;
	text-align: center !important;
	cursor: grab !important;
}

.tab-bottom-floating .odyssey-hide-link.odyssey-persistent-drag-handle-active {
	cursor: grabbing !important;
}

/* Hover effect for persistent button - same style as virtual hover */
.tab-bottom-floating>a:hover {
	background-color: rgba(255, 255, 255, 0.2) !important;
	transform: scale(1.02) !important;
}

/* Link styles for floating buttons */
.odyssey-image-button>a,
.odyssey-video-button>a {
	text-decoration: none !important;
	user-select: none !important;
}

.odyssey-image-button>a:first-child,
.odyssey-floating-button>a:first-child,
.odyssey-video-button>a:first-child {
	margin-left: 0px !important;
}

@media print {

	.odyssey-floating-button,
	.odyssey-image-button,
	.odyssey-video-button {
		display: none !important;
	}
}

/* Shared feedback toast layout for streaming + saved states */
.odyssey-saved-feedback,
.odyssey-streaming-feedback,
.odyssey-download-feedback {
	position: fixed !important;
	bottom: var(--odyssey-feedback-bottom-offset) !important;
	right: var(--odyssey-floating-right-offset) !important;
	background: rgb(30 30 35 / 70%) !important;
	color: white !important;
	padding: 12px 20px !important;
	border-radius: 12px !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px !important;
	z-index: 2147483647 !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	transform: translateY(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
	backdrop-filter: blur(8px);
	width: var(--odyssey-feedback-width) !important;
	max-width: calc(100vw - (var(--odyssey-floating-right-offset) * 2)) !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.odyssey-saved-feedback {
	pointer-events: auto !important;
	cursor: pointer !important;
}

.odyssey-streaming-feedback {
	pointer-events: none !important;
}

.odyssey-download-feedback {
	pointer-events: none !important;
}

.odyssey-saved-feedback .feedback-icon,
.odyssey-saved-feedback .odyssey-feedback-icon,
.odyssey-streaming-feedback .feedback-icon,
.odyssey-streaming-feedback .odyssey-feedback-icon,
.odyssey-download-feedback .feedback-icon,
.odyssey-download-feedback .odyssey-feedback-icon {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	width: auto !important;
	min-width: 20px !important;
	line-height: 1 !important;
	font-size: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.odyssey-saved-feedback.show,
.odyssey-streaming-feedback.show,
.odyssey-download-feedback.show {
	transform: translateY(0) !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.odyssey-saved-feedback .feedback-content,
.odyssey-saved-feedback .odyssey-feedback-content,
.odyssey-streaming-feedback .feedback-content,
.odyssey-streaming-feedback .odyssey-feedback-content,
.odyssey-download-feedback .feedback-content,
.odyssey-download-feedback .odyssey-feedback-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	line-height: 1.3 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.odyssey-saved-feedback .feedback-title,
.odyssey-streaming-feedback .feedback-title,
.odyssey-download-feedback .feedback-title {
	font-size: 17px;
	font-weight: 500;
	margin: 0 !important;
}

.odyssey-saved-feedback .feedback-subtitle,
.odyssey-download-feedback .feedback-subtitle {
	font-size: 15px;
	opacity: 0.7;
	font-weight: 400;
	margin: 0 !important;
}

/* Streaming feedback notification (for real-time text generation) */
.odyssey-streaming-feedback {
	cursor: default !important;
}

.odyssey-download-feedback {
	cursor: default !important;
}

.odyssey-streaming-feedback .feedback-subtitle {
	font-size: 15px;
	opacity: 0.7;
	font-weight: 400;
	margin: 0 !important;
	/* Show only one line with end of text visible (like reasoning container) */
	direction: rtl;
	white-space: nowrap;
	overflow-x: hidden;
	overflow-y: hidden;
	text-overflow: ellipsis;
	width: 100%;
	text-align: left;
	height: 20px;
}
::highlight(ceres-spell-correction-10) { background-color: rgba(255, 0, 0, 0.50); }
::highlight(ceres-spell-correction-9) { background-color: rgba(255, 0, 0, 0.45); }
::highlight(ceres-spell-correction-8) { background-color: rgba(255, 0, 0, 0.40); }
::highlight(ceres-spell-correction-7) { background-color: rgba(255, 0, 0, 0.35); }
::highlight(ceres-spell-correction-6) { background-color: rgba(255, 0, 0, 0.30); }
::highlight(ceres-spell-correction-5) { background-color: rgba(255, 0, 0, 0.25); }
::highlight(ceres-spell-correction-4) { background-color: rgba(255, 0, 0, 0.20); }
::highlight(ceres-spell-correction-3) { background-color: rgba(255, 0, 0, 0.15); }
::highlight(ceres-spell-correction-2) { background-color: rgba(255, 0, 0, 0.10); }
::highlight(ceres-spell-correction-1) { background-color: rgba(255, 0, 0, 0.05); }