.wcr-highlight-root {
	display: contents;
}

.wcr-highlight {
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-decoration-line: underline;
	text-decoration-color: #b73535;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.wcr-highlight:focus-visible {
	border-radius: 2px;
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.wcr-highlight-toolbar {
	position: fixed;
	z-index: 100002;
	margin: 0;
	padding: 6px 11px;
	border: 1px solid #1d2327;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
	color: #1d2327;
	cursor: pointer;
	font: 14px/1.25 sans-serif;
}

.wcr-highlight-toolbar:hover,
.wcr-highlight-toolbar:focus-visible {
	background: #f2f2f2;
}

.wcr-highlight-toolbar[hidden],
.wcr-highlight-toast[hidden],
.wcr-highlight-overlay[hidden],
.wcr-highlight-comment-form[hidden],
.wcr-highlight-delete[hidden] {
	display: none !important;
}

.wcr-highlight-toast {
	position: fixed;
	z-index: 100003;
	left: 50%;
	bottom: 24px;
	max-width: min(420px, calc(100vw - 32px));
	padding: 8px 12px;
	transform: translateX(-50%);
	border: 1px solid #1d2327;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	color: #1d2327;
	font-size: 14px;
}

.wcr-highlight-overlay {
	position: fixed;
	z-index: 100004;
	inset: 0;
	display: grid;
	align-items: center;
	justify-items: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.42);
}

.wcr-highlight-dialog {
	box-sizing: border-box;
	width: min(520px, 100%);
	max-height: min(720px, calc(100vh - 40px));
	overflow: auto;
	padding: 18px;
	border: 1px solid #d0d0d0;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.24);
	color: #1d2327;
	font-size: 1rem;
}

.wcr-highlight-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.wcr-highlight-dialog-header h2 {
	margin: 0;
	font-size: 1.1rem;
}

.wcr-highlight-close {
	min-width: 32px;
	padding: 2px 7px;
	border: 1px solid #1d2327;
	border-radius: 2px;
	background: #fff;
	color: #1d2327;
	cursor: pointer;
	font-size: 22px;
	line-height: 1.15;
}

.wcr-highlight-quote {
	margin: 0 0 8px;
	padding: 10px 12px;
	border-left: 3px solid #b73535;
	background: #f6f6f6;
	color: inherit;
	font-style: normal;
	white-space: pre-wrap;
}

.wcr-highlight-author,
.wcr-highlight-comments-notice,
.wcr-highlight-dialog-status,
.wcr-highlight-empty {
	margin: 7px 0;
	color: #646970;
}

.wcr-highlight-comments {
	display: grid;
	gap: 8px;
	margin: 14px 0 10px;
}

.wcr-highlight-comment {
	padding: 9px 10px;
	border: 1px solid #dcdcde;
	border-radius: 2px;
	background: #fff;
}

.wcr-highlight-comment.is-mine {
	border-color: #8c8f94;
}

.wcr-highlight-comment p {
	margin: 5px 0 0;
	white-space: pre-wrap;
	word-break: break-word;
}

.wcr-highlight-comment-form {
	margin-top: 14px;
}

.wcr-highlight-comment-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 90px;
	padding: 8px;
	resize: vertical;
	border: 1px solid #8c8f94;
	border-radius: 2px;
	background: #fff;
	color: #1d2327;
	font: inherit;
}

.wcr-highlight-comment-meta,
.wcr-highlight-dialog-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 7px;
}

.wcr-highlight-counter {
	color: #646970;
	font-size: 0.88rem;
}

.wcr-highlight-comment-save,
.wcr-highlight-delete {
	padding: 6px 10px;
	border: 1px solid #1d2327;
	border-radius: 2px;
	background: #fff;
	color: #1d2327;
	cursor: pointer;
	font: inherit;
}

.wcr-highlight-delete {
	color: #8a2424;
}

.wcr-highlight-comment-save:hover,
.wcr-highlight-delete:hover,
.wcr-highlight-close:hover {
	background: #f2f2f2;
}

html.darkify_dark_mode_enabled .wcr-highlight-toolbar,
html.darkify_dark_mode_enabled .wcr-highlight-toast,
html.darkify_dark_mode_enabled .wcr-highlight-dialog,
html.darkify_dark_mode_enabled .wcr-highlight-comment,
html.darkify_dark_mode_enabled .wcr-highlight-comment-form textarea,
html.darkify_dark_mode_enabled .wcr-highlight-comment-save,
html.darkify_dark_mode_enabled .wcr-highlight-delete,
html.darkify_dark_mode_enabled .wcr-highlight-close {
	border-color: #787c82;
	background: #202124;
	color: #f0f0f1;
}

html.darkify_dark_mode_enabled .wcr-highlight-quote {
	background: #2c2d2f;
}

@media (max-width: 600px) {
	.wcr-highlight-overlay {
		align-items: end;
		padding: 10px;
	}

	.wcr-highlight-dialog {
		max-height: calc(100vh - 20px);
		padding: 14px;
	}
}