/* ==========================================================================
   Apeiron Kit — Comment Dock / Ucapan Tamu
   Design standard for all Apeiron Kit widgets.

   Token cascade (per property):
     1. Elementor per-widget control value (inline generated CSS)
     2. Shared plugin design token (defined on :root via frontend.css —
        identical to the dashboard palette and Rubik font)
     3. Hardcoded fallback (the dashboard hex values, W3C-OK as base look)

   Box-shadow is `none` by default for every in-flow surface; only floating
   layers (modal overlays and sticker popovers) use elevation shadows, and
   those layers are configurable via the Style tab.
   Active/focus states use a 1px border in a soft tone so the affordance is
   clear without being harsh.
   ========================================================================== */

.elementor-widget-apeiron-comment-dock .elementor-widget-container {
	box-shadow: none;
	-webkit-box-shadow: none;
}

/* -------------------------------------------------------------------------
   1. Design tokens (scoped to the widget)
   ------------------------------------------------------------------------- */
.apeiron-comment-dock {
	/* Font family follows the shared frontend token, which already
	   self-hosts Rubik and falls back to the system stack — identical to
	   the plugin dashboard. */
	--apeiron-font-family: var(--apeiron-dashboard-font-family, "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

	/* Brand palette — identical to the dashboard tokens (admin-dashboard.css). */
	--apeiron-primary: var(--apeiron-dashboard-primary, #083c57);
	--apeiron-primary-hover: var(--apeiron-dashboard-primary-dark, #062a3d);
	--apeiron-primary-soft: var(--apeiron-dashboard-primary-soft, #f3f7fa);

	/* Form WhatsApp surface language. */
	--apeiron-soft-bg: #f7f7fb;
	--apeiron-surface: var(--apeiron-dashboard-surface, #ffffff);
	--apeiron-surface-soft: var(--apeiron-dashboard-surface-soft, #f9fafb);

	/* Form WhatsApp border hierarchy with dashboard focus colour. */
	--apeiron-border: #e5e7ef;
	--apeiron-border-strong: #d6dae5;
	--apeiron-border-focus: rgba(8, 60, 87, 0.22);

	/* Text uses the exact dashboard palette. */
	--apeiron-text: var(--apeiron-dashboard-text, #1d2939);
	--apeiron-muted: var(--apeiron-dashboard-text-muted, #475467);
	--apeiron-subtle: var(--apeiron-dashboard-text-faint, #98a2b3);

	/* Form WhatsApp hierarchy, rendered with dashboard Rubik. */
	--apeiron-font-size-section: 18px;
	--apeiron-font-size-body: 14px;
	--apeiron-font-size-small: 14px;
	--apeiron-font-size-caption: 12px;
	--apeiron-font-size-label: 14px;
	--apeiron-font-size-pill: 11px;
	--apeiron-font-size-count: 22px;
	--apeiron-font-weight-body: 400;
	--apeiron-font-weight-ui: 400;
	--apeiron-font-weight-label: 500;
	--apeiron-font-weight-title: 500;
	--apeiron-font-weight-heading: 600;
	--apeiron-line-height-ui: 1.45;
	--apeiron-line-height-body: 1.6;
	--apeiron-line-height-heading: 1.35;

	/* Sticker sizing — single custom property consumed everywhere */
	--apeiron-sticker-size: 42px;
	--apeiron-sticker-padding: 3px;
	--apeiron-avatar-size: 40px;
	--apeiron-sticker-avatar-size: var(--apeiron-avatar-size);
	--apeiron-sticker-preview-size: 42px;
	--apeiron-sticker-grid-min: 52px;
	--apeiron-sticker-popup-duration: 0.2s;
	--apeiron-sticker-popup-close-duration: 0.2s;

	/* Comment list */
	--apeiron-comment-gap: 0px;
	--apeiron-comment-columns: 1;

	/* Match Form WhatsApp: 10px controls inside a 14px container. */
	--apeiron-control-radius: 8px;

	/* Danger */
	--apeiron-danger: #b42318;

	width: 100%;
	max-width: 100%;
	background: var(--apeiron-soft-bg);
	border-radius: 8px;
	padding: 28px;
	box-shadow: none;
	-webkit-box-shadow: none;
	border: 1px solid var(--apeiron-border);
	box-sizing: border-box;
	color: var(--apeiron-text);
	font-family: var(--apeiron-font-family);
	font-size: var(--apeiron-font-size-small);
	line-height: var(--apeiron-line-height-body, 1.5);
	position: relative;
}

/* Theme typography must not replace the plugin design language, so the root
   carries the family and every descendant inherits it. Icon glyphs are
   excluded so Font Awesome and SVG icons keep their fonts.
   Descendants must use `inherit`, not the concrete family: re-declaring it
   pins each element directly, and a direct declaration always beats an
   inherited value, so a Typography > Font Family set on any ancestor could
   never reach nested text. `inherit` still blocks theme bleed and still gives
   form controls the plugin font (browsers do not inherit into button/input). */
.elementor-widget-apeiron-comment-dock .apeiron-comment-dock {
	font-family: var(--apeiron-font-family);
}

.elementor-widget-apeiron-comment-dock .apeiron-comment-dock :where(h1, h2, h3, h4, h5, h6, p, span, label, button, input, textarea, select, option) {
	font-family: inherit;
}

.apeiron-comment-dock *,
.apeiron-comment-dock *::before,
.apeiron-comment-dock *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   2. Heading
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-heading {
	margin-top: 0;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--apeiron-border);
	font-size: var(--apeiron-font-size-section);
	font-weight: var(--apeiron-font-weight-heading, 700);
	color: var(--apeiron-text);
	line-height: var(--apeiron-line-height-heading, 1.3);
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   3. Comment form shell
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-form {
	display: grid;
	gap: var(--apeiron-space-gap, 18px);
	margin-bottom: 1.5rem;
	font-family: var(--apeiron-font-family);
}

/* -------------------------------------------------------------------------
   4. Inputs / Textarea / Select
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-form input,
.apeiron-comment-dock .apeiron-kit-comment-form textarea,
.apeiron-comment-dock .apeiron-kit-comment-form select {
	width: 100%;
	padding: 12px 14px;
	min-height: 44px;
	border-radius: var(--apeiron-control-radius);
	border: 1px solid var(--apeiron-border);
	font-size: var(--apeiron-font-size-body);
	line-height: var(--apeiron-line-height-ui, 1.4);
	background: var(--apeiron-surface);
	color: var(--apeiron-text);
	font-family: var(--apeiron-font-family);
	box-shadow: none;
	-webkit-box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--apeiron-transition), background-color var(--apeiron-transition), color var(--apeiron-transition);
}

.apeiron-comment-dock .apeiron-kit-comment-form input:hover,
.apeiron-comment-dock .apeiron-kit-comment-form textarea:hover,
.apeiron-comment-dock .apeiron-kit-comment-form select:hover {
	border-color: var(--apeiron-border-strong);
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.apeiron-comment-dock .apeiron-kit-comment-form textarea {
	resize: vertical;
	min-height: 80px;
	max-height: 160px;
}

/* Focus: 1px soft border, no glow. */
.apeiron-comment-dock .apeiron-kit-comment-form input:focus,
.apeiron-comment-dock .apeiron-kit-comment-form textarea:focus,
.apeiron-comment-dock .apeiron-kit-comment-form select:focus,
.apeiron-comment-dock .apeiron-kit-comment-form input:active,
.apeiron-comment-dock .apeiron-kit-comment-form textarea:active,
.apeiron-comment-dock .apeiron-kit-comment-form select:active,
.apeiron-comment-dock .apeiron-kit-comment-form input:focus-visible,
.apeiron-comment-dock .apeiron-kit-comment-form textarea:focus-visible,
.apeiron-comment-dock .apeiron-kit-comment-form select:focus-visible {
	outline: none;
	border-color: var(--apeiron-border-focus);
	background: var(--apeiron-surface);
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-form input:focus,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-form textarea:focus,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-form select:focus,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-form input:active,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-form textarea:active,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-form select:active,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-form input:focus-visible,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-form textarea:focus-visible,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-form select:focus-visible,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-inline-form input:focus,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-inline-form textarea:focus,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-edit-form textarea:focus,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-inline-form input:active,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-inline-form textarea:active,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-edit-form textarea:active,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-inline-form input:focus-visible,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-inline-form textarea:focus-visible,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-edit-form textarea:focus-visible,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-modal input:focus,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-modal textarea:focus,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-modal input:active,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-modal textarea:active,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-modal input:focus-visible,
.elementor-element.elementor-widget-apeiron-comment-dock .apeiron-comment-dock.uses-default-focus-border-color .apeiron-kit-comment-modal textarea:focus-visible {
	border-color: var(--apeiron-border-focus);
}

.apeiron-comment-dock .apeiron-kit-comment-form input::placeholder,
.apeiron-comment-dock .apeiron-kit-comment-form textarea::placeholder,
.apeiron-comment-dock .apeiron-kit-comment-inline-form input::placeholder,
.apeiron-comment-dock .apeiron-kit-comment-inline-form textarea::placeholder,
.apeiron-comment-dock .apeiron-kit-comment-edit-form textarea::placeholder,
.apeiron-kit-comment-modal input::placeholder,
.apeiron-kit-comment-modal textarea::placeholder {
	color: var(--apeiron-subtle);
	font-size: var(--apeiron-font-size-small);
}

.apeiron-comment-dock .apeiron-kit-comment-form input[readonly] {
	color: var(--apeiron-text);
	cursor: default;
}

/* -------------------------------------------------------------------------
   5. Form labels
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-form-label {
	display: block;
	font-weight: var(--apeiron-font-weight-label, 600);
	font-size: var(--apeiron-font-size-label);
	color: var(--apeiron-text);
	line-height: var(--apeiron-line-height-ui, 1.4);
	margin-bottom: 0.35rem;
}

.apeiron-comment-dock .apeiron-kit-form-field-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.apeiron-comment-dock .apeiron-kit-invited-guest-note {
	margin-top: 8px;
	color: var(--apeiron-muted);
	font-size: var(--apeiron-font-size-caption);
	font-weight: var(--apeiron-font-weight-body, 400);
	line-height: var(--apeiron-line-height-ui, 1.45);
	white-space: pre-line;
}

.apeiron-comment-dock .apeiron-kit-invited-guest-note.is-blocking {
	margin-top: 0;
	color: var(--apeiron-text);
	font-size: var(--apeiron-font-size-caption);
	font-style: italic;
	font-weight: var(--apeiron-font-weight-label, 600);
}

.apeiron-comment-dock .apeiron-kit-invited-guest-note p {
	margin: 0;
}

.apeiron-comment-dock .apeiron-kit-invited-guest-note p + p {
	margin-top: 4px;
}

/* -------------------------------------------------------------------------
   6. Attendance select
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-select {
	display: block;
}

.apeiron-comment-dock .apeiron-kit-comment-select select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23475569'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 12px;
	padding-right: 2.5rem;
}

/* -------------------------------------------------------------------------
   7. Attendance summary
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-attendance-summary {
	width: 100%;
	padding: 10px 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-sizing: border-box;
	text-align: center;
}

.apeiron-comment-dock .apeiron-kit-attendance-summary-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 10px;
	min-width: 0;
}

.apeiron-comment-dock .apeiron-kit-attendance-summary-line {
	display: block;
	flex: 0 1 120px;
	height: 1px;
	min-width: 18px;
	background: var(--apeiron-border);
}

.apeiron-comment-dock .apeiron-kit-attendance-summary-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	max-width: 100%;
	padding: 3px 14px;
	border-radius: 8px;
	background: var(--apeiron-primary);
	color: #fff;
	font-size: var(--apeiron-font-size-caption);
	font-weight: var(--apeiron-font-weight-label, 500);
	line-height: var(--apeiron-line-height-tight, 1.2);
	white-space: nowrap;
}

.apeiron-comment-dock .apeiron-kit-attendance-summary-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
	gap: 8px;
	width: 100%;
}

.apeiron-comment-dock .apeiron-kit-attendance-summary-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	max-width: none;
	padding: 8px;
	border: 1px solid var(--apeiron-border);
	border-radius: 8px;
	background: var(--apeiron-surface);
	box-sizing: border-box;
}

.apeiron-comment-dock.is-attendance-items-equal .apeiron-kit-attendance-summary-item {
	flex: 0 0 96px;
	width: 96px;
}

.apeiron-comment-dock.is-attendance-items-fit-equal .apeiron-kit-attendance-summary-item {
	flex: 0 0 var(--apeiron-attendance-fit-width, auto);
	width: var(--apeiron-attendance-fit-width, auto);
}

.apeiron-comment-dock.is-attendance-items-auto .apeiron-kit-attendance-summary-item {
	flex: 0 0 auto;
	width: auto;
}

.apeiron-comment-dock .apeiron-kit-attendance-summary-count {
	display: block;
	width: 100%;
	color: var(--apeiron-text);
	font-size: var(--apeiron-font-size-count);
	font-weight: var(--apeiron-font-weight-heading, 600);
	line-height: 1;
	letter-spacing: 0;
}

.apeiron-comment-dock .apeiron-kit-attendance-summary-label {
	display: block;
	width: 100%;
	margin-top: 3px;
	color: var(--apeiron-text);
	font-size: var(--apeiron-font-size-caption);
	font-weight: var(--apeiron-font-weight-label, 500);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   8. Submit button
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-form button[type="submit"] {
	background: var(--apeiron-primary);
	background-color: var(--apeiron-primary);
	background-image: none;
	color: #fff;
	border: none;
	min-height: 44px;
	padding: 12px 18px;
	border-radius: var(--apeiron-control-radius);
	cursor: pointer;
	font-weight: var(--apeiron-font-weight-title, 600);
	font-size: var(--apeiron-font-size-body);
	letter-spacing: 0;
	font-family: var(--apeiron-font-family);
	box-shadow: none;
	-webkit-box-shadow: none;
	transition: opacity var(--apeiron-transition), background-color var(--apeiron-transition), color var(--apeiron-transition), border-color var(--apeiron-transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
	line-height: var(--apeiron-line-height-ui, 1.4);
	outline: none;
}

.apeiron-comment-dock .apeiron-kit-comment-form button[type="submit"]:hover:not(:disabled) {
	opacity: 0.85;
	box-shadow: none;
	-webkit-box-shadow: none;
	transform: none;
}

.apeiron-comment-dock .apeiron-kit-comment-form button[type="submit"]:active {
	box-shadow: none;
	-webkit-box-shadow: none;
	transform: none;
}

.apeiron-comment-dock .apeiron-kit-comment-form button[type="submit"]:focus {
	outline: none;
}

.apeiron-comment-dock .apeiron-kit-comment-form.is-loading button[type="submit"] {
	opacity: 0.65;
	cursor: wait;
	pointer-events: none;
}

.apeiron-comment-dock .apeiron-kit-comment-form button[type="submit"]:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   9. Sticker field + trigger + preview + clear
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-sticker-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.apeiron-comment-dock .apeiron-kit-comment-form .apeiron-kit-sticker-field {
	grid-column: 1 / -1;
}

.apeiron-comment-dock .apeiron-kit-sticker-field.is-popup {
	overflow: visible;
}

.apeiron-comment-dock .apeiron-kit-sticker-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.apeiron-comment-dock .apeiron-kit-sticker-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	min-height: 42px;
	padding: 11px 13px;
	border: 1px solid var(--apeiron-border);
	border-radius: var(--apeiron-control-radius);
	background: var(--apeiron-surface);
	color: var(--apeiron-primary);
	font-size: var(--apeiron-font-size-body);
	font-weight: var(--apeiron-font-weight-title, 600);
	line-height: var(--apeiron-line-height-ui, 1.4);
	font-family: var(--apeiron-font-family);
	cursor: pointer;
	gap: 0.45rem;
	box-shadow: none;
	box-sizing: border-box;
	transition: background-color var(--apeiron-transition), color var(--apeiron-transition), border-color var(--apeiron-transition);
}

.apeiron-comment-dock .apeiron-kit-sticker-trigger:focus:not(:focus-visible) {
	background: var(--apeiron-surface);
	color: var(--apeiron-primary);
}

.apeiron-comment-dock .apeiron-kit-sticker-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
	.apeiron-comment-dock .apeiron-kit-sticker-trigger:hover {
		background: var(--apeiron-primary-soft);
		border-color: var(--apeiron-border-strong);
	}
}

.apeiron-comment-dock .apeiron-kit-sticker-preview {
	width: var(--apeiron-sticker-preview-size);
	height: var(--apeiron-sticker-preview-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--apeiron-border);
	border-radius: var(--apeiron-control-radius);
	background: var(--apeiron-surface);
	padding: var(--apeiron-sticker-padding);
	overflow: hidden;
}

.apeiron-comment-dock .apeiron-kit-sticker-preview img,
.apeiron-comment-dock .apeiron-kit-sticker-preview video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.apeiron-comment-dock .apeiron-kit-sticker-clear {
	width: 42px;
	height: 42px;
	min-width: 42px;
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--apeiron-border);
	border-radius: 8px;
	background: var(--apeiron-surface);
	color: var(--apeiron-muted);
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	box-shadow: none;
	position: relative;
	text-indent: -9999px;
	overflow: hidden;
}

.apeiron-comment-dock .apeiron-kit-sticker-clear::before {
	content: "\00d7";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-indent: 0;
	transform: translateY(-0.5px);
}

.apeiron-comment-dock .apeiron-kit-sticker-popover[hidden],
.apeiron-comment-dock .apeiron-kit-sticker-preview[hidden],
.apeiron-comment-dock .apeiron-kit-sticker-clear[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   10. Sticker popover/popup
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-sticker-popover {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--apeiron-sticker-popup-duration) ease;
	overscroll-behavior: contain;
	overflow: hidden;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover[data-sticker-popup-position="bottom"] {
	align-items: flex-end;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover[data-background-scroll="yes"] {
	overscroll-behavior: auto;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-open,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-closing {
	pointer-events: auto;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-closing {
	transition-duration: var(--apeiron-sticker-popup-close-duration);
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-open {
	opacity: 1;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.38);
	transition: background-color var(--apeiron-sticker-popup-duration) ease;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover-panel {
	position: relative;
	z-index: 1;
	width: min(460px, 100%);
	box-sizing: border-box;
	height: auto;
	max-height: min(560px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--apeiron-surface);
	border: 1px solid var(--apeiron-border);
	border-radius: 8px;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
	overflow: hidden;
	transform: translateY(10px) scale(0.985);
	opacity: 0;
	transition: transform var(--apeiron-sticker-popup-duration) ease, opacity var(--apeiron-sticker-popup-duration) ease;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-open .apeiron-kit-sticker-popover-panel {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.apeiron-comment-dock.has-sticker-popup-shadow-disabled .apeiron-kit-sticker-popover-panel {
	box-shadow: none;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover[data-popup-scroll="panel"] .apeiron-kit-sticker-popover-panel {
	overflow-y: auto;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-anim-slide-up .apeiron-kit-sticker-popover-panel,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-anim-slide-down .apeiron-kit-sticker-popover-panel,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-anim-fade .apeiron-kit-sticker-popover-panel,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-anim-none .apeiron-kit-sticker-popover-panel,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-closing .apeiron-kit-sticker-popover-panel {
	transform: none;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-anim-slide-up .apeiron-kit-sticker-popover-panel {
	transform: translateY(24px);
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-anim-slide-down .apeiron-kit-sticker-popover-panel {
	transform: translateY(-24px);
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-anim-none,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-anim-none .apeiron-kit-sticker-popover-panel {
	transition: none;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-closing.is-close-anim-slide-up .apeiron-kit-sticker-popover-panel {
	transform: translateY(-24px);
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-closing.is-close-anim-slide-down .apeiron-kit-sticker-popover-panel {
	transform: translateY(24px);
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-closing.is-close-anim-none,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-closing.is-close-anim-none .apeiron-kit-sticker-popover-panel {
	transition: none;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover.is-open.is-anim-slide-up .apeiron-kit-sticker-popover-panel,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-open.is-anim-slide-down .apeiron-kit-sticker-popover-panel,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-open.is-anim-fade .apeiron-kit-sticker-popover-panel,
.apeiron-comment-dock .apeiron-kit-sticker-popover.is-open.is-anim-none .apeiron-kit-sticker-popover-panel {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.apeiron-kit-sticker-lock-scroll {
	overflow: hidden;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--apeiron-border);
	min-height: 58px;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover-title {
	flex: 1;
	font-size: var(--apeiron-font-size-body);
	font-weight: var(--apeiron-font-weight-heading, 700);
	color: var(--apeiron-text);
	line-height: var(--apeiron-line-height-ui, 1.35);
}

.apeiron-comment-dock .apeiron-kit-sticker-popover-close {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--apeiron-border);
	border-radius: 50%;
	background: var(--apeiron-surface-soft);
	color: var(--apeiron-muted);
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	box-shadow: none;
	flex: 0 0 30px;
	position: relative;
	overflow: hidden;
	text-indent: -9999px;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover-close::before {
	content: "\00d7";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	text-indent: 0;
	transform: translateY(-0.5px);
}

.apeiron-comment-dock .apeiron-kit-sticker-tabs {
	display: flex;
	gap: 8px;
	padding: 12px 16px 0;
}

.apeiron-comment-dock .apeiron-kit-sticker-tab {
	padding: 8px 12px;
	border: 1px solid var(--apeiron-border);
	border-radius: 8px;
	background: var(--apeiron-surface-soft);
	color: var(--apeiron-muted);
	font-size: var(--apeiron-font-size-small);
	font-weight: var(--apeiron-font-weight-title, 600);
	line-height: var(--apeiron-line-height-tight, 1.2);
	cursor: pointer;
	box-shadow: none;
	font-family: var(--apeiron-font-family);
}

.apeiron-comment-dock .apeiron-kit-sticker-tab.is-active {
	background: var(--apeiron-primary);
	border-color: var(--apeiron-primary);
	color: #fff;
}

/* -------------------------------------------------------------------------
   11. Sticker picker / track / grid / options
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-sticker-picker.is-popup-panel {
	display: none;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 14px 16px 16px;
	scrollbar-width: thin;
	scrollbar-color: var(--apeiron-border-strong) transparent;
}

.apeiron-comment-dock .apeiron-kit-sticker-picker.is-popup-panel.is-active {
	display: block;
}

.apeiron-comment-dock .apeiron-kit-sticker-popover[data-popup-scroll="panel"] .apeiron-kit-sticker-picker.is-popup-panel {
	flex: none;
	overflow: visible;
}

.apeiron-comment-dock .apeiron-kit-sticker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--apeiron-sticker-grid-min), 1fr));
	gap: 8px;
}

.apeiron-comment-dock .apeiron-kit-sticker-grid .apeiron-kit-sticker-option {
	width: 100%;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: none;
	max-height: none;
	aspect-ratio: 1 / 1;
}

.apeiron-comment-dock .apeiron-kit-sticker-picker {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	position: relative;
	contain: layout style;
	scrollbar-width: none;
	-ms-overflow-style: none;
	pointer-events: auto;
	z-index: 1;
}

.apeiron-comment-dock .apeiron-kit-sticker-picker::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	background: transparent;
}

.apeiron-comment-dock .apeiron-kit-sticker-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: max-content;
	min-width: max-content;
	flex-shrink: 0;
	flex-grow: 0;
	box-sizing: border-box;
	position: relative;
}

.apeiron-comment-dock .apeiron-kit-reply-sticker-field {
	--apeiron-sticker-size: 36px;
	--apeiron-sticker-padding: 2px;
	--apeiron-sticker-grid-min: 44px;
	width: 100%;
	max-width: 100%;
	margin-bottom: 8px;
	overflow: hidden;
}

.apeiron-comment-dock .apeiron-kit-reply-sticker-field .apeiron-kit-sticker-track {
	gap: 6px;
}

.apeiron-comment-dock .apeiron-kit-reply-sticker-field .apeiron-kit-sticker-option {
	border-radius: var(--apeiron-radius-sm, 8px);
}

.apeiron-comment-dock .apeiron-kit-sticker-option {
	flex: 0 0 auto;
	flex-shrink: 0;
	flex-grow: 0;
	width: var(--apeiron-sticker-size);
	height: var(--apeiron-sticker-size);
	min-width: var(--apeiron-sticker-size);
	min-height: var(--apeiron-sticker-size);
	max-width: var(--apeiron-sticker-size);
	max-height: var(--apeiron-sticker-size);
	border: 1px solid var(--apeiron-border);
	border-radius: var(--apeiron-control-radius);
	background: var(--apeiron-surface);
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--apeiron-sticker-padding);
	margin: 0;
	cursor: pointer;
	position: relative;
	transition: opacity var(--apeiron-transition);
	overflow: hidden;
	box-sizing: border-box;
	pointer-events: auto;
	z-index: 10;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

.apeiron-comment-dock .apeiron-kit-sticker-option:hover {
	opacity: 0.75;
	background: var(--apeiron-surface-soft);
}

.apeiron-comment-dock .apeiron-kit-sticker-option img,
.apeiron-comment-dock .apeiron-kit-sticker-option video {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	display: block;
	object-fit: contain;
	border: none;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;
	pointer-events: none;
}

.apeiron-comment-dock .apeiron-kit-sticker-option.is-selected {
	background: var(--apeiron-primary-soft);
	border-color: var(--apeiron-primary);
	border-width: 1px;
	opacity: 1;
}

.apeiron-comment-dock .apeiron-kit-sticker-option.is-selected:hover {
	opacity: 0.9;
}

/* -------------------------------------------------------------------------
   12. Notices
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-notice {
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--apeiron-primary);
	border-radius: 0;
	font-size: var(--apeiron-font-size-caption);
	text-align: left;
	font-weight: var(--apeiron-font-weight-label, 500);
	border: 0;
	animation: apeironCommentDockNoticeIn 0.2s ease;
	line-height: var(--apeiron-line-height-ui, 1.4);
	box-shadow: none;
	-webkit-box-shadow: none;
}

.apeiron-comment-dock .apeiron-kit-comment-notice.is-position-after_button {
	margin-top: -8px;
	margin-bottom: 0;
}

.apeiron-comment-dock .apeiron-kit-comment-notice.is-position-before_comments {
	margin-bottom: 8px;
}

.apeiron-comment-dock .apeiron-kit-comment-notice.is-error {
	color: var(--apeiron-danger);
	background: transparent;
	border: 0;
}

.apeiron-comment-dock .apeiron-kit-comment-notice.is-toast {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 20;
	max-width: min(320px, calc(100% - 36px));
	margin-top: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
}

@keyframes apeironCommentDockNoticeIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -------------------------------------------------------------------------
   13. Comment list + empty state
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--apeiron-comment-columns), minmax(0, 1fr));
	gap: var(--apeiron-comment-gap);
	background: var(--apeiron-surface);
	border: 1px solid var(--apeiron-border);
	border-radius: 8px;
	overflow: hidden;
}

.apeiron-comment-dock .apeiron-kit-comment-list[hidden] {
	display: none;
}

.apeiron-comment-dock:has(> .apeiron-kit-comment-list[hidden]) {
	padding-bottom: 0;
}

.apeiron-comment-dock .apeiron-kit-comment-list.is-scrollable,
.apeiron-comment-dock .apeiron-kit-comment-list.apeiron-kit-comment-list-scrollable {
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}

.apeiron-comment-dock .apeiron-kit-comment-list.apeiron-kit-comment-list-scrollable {
	max-height: 400px;
}

.apeiron-comment-dock .apeiron-kit-comment-list.is-scrollable::-webkit-scrollbar,
.apeiron-comment-dock .apeiron-kit-comment-list.apeiron-kit-comment-list-scrollable::-webkit-scrollbar {
	width: 5px;
}

.apeiron-comment-dock .apeiron-kit-comment-list.is-scrollable::-webkit-scrollbar-track,
.apeiron-comment-dock .apeiron-kit-comment-list.apeiron-kit-comment-list-scrollable::-webkit-scrollbar-track {
	background: transparent;
}

.apeiron-comment-dock .apeiron-kit-comment-list.is-scrollable::-webkit-scrollbar-thumb,
.apeiron-comment-dock .apeiron-kit-comment-list.apeiron-kit-comment-list-scrollable::-webkit-scrollbar-thumb {
	background: rgba(15, 23, 42, 0.15);
	border-radius: 8px;
}

.apeiron-comment-dock .apeiron-kit-comment-list.is-scrollable::-webkit-scrollbar-thumb:hover,
.apeiron-comment-dock .apeiron-kit-comment-list.apeiron-kit-comment-list-scrollable::-webkit-scrollbar-thumb:hover {
	background: rgba(15, 23, 42, 0.25);
}

/* -------------------------------------------------------------------------
   14. Comment item + cards + replies
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-list > .apeiron-kit-comment-item {
	box-sizing: border-box;
	padding: 14px;
	margin-bottom: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--apeiron-border);
	border-radius: 8px;
	transition: background-color 0.15s ease;
	overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
	.apeiron-comment-dock .apeiron-kit-comment-item:hover {
		background: var(--apeiron-surface-soft);
	}
}

.apeiron-comment-dock .apeiron-kit-comment-list > .apeiron-kit-comment-item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

/* Replies live inside .apeiron-kit-comment-replies; use scoped selectors so
   per-card Style controls can target top-level cards and replies separately. */
.apeiron-comment-dock .apeiron-kit-comment-replies > .apeiron-kit-comment-item.is-reply {
	position: relative;
	padding: 12px 0 0 12px;
	margin-bottom: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.apeiron-comment-dock .apeiron-kit-comment-item.is-reply.has-top-sticker {
	padding-left: 6px;
}

.apeiron-comment-dock .apeiron-kit-comment-wrapper {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

/* -------------------------------------------------------------------------
   15. Comment avatar + comment sticker
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-avatar {
	flex-shrink: 0;
}

.apeiron-comment-dock .apeiron-kit-comment-avatar img {
	width: var(--apeiron-avatar-size);
	height: var(--apeiron-avatar-size);
	border-radius: var(--apeiron-control-radius);
	border: 1px solid var(--apeiron-border);
	display: block;
	object-fit: cover;
}

.apeiron-comment-dock .apeiron-kit-comment-avatar.has-sticker {
	border: none;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

.apeiron-comment-dock .apeiron-kit-comment-sticker {
	width: var(--apeiron-sticker-avatar-size);
	height: var(--apeiron-sticker-avatar-size);
	display: block;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.apeiron-comment-dock .apeiron-kit-comment-sticker .apeiron-kit-sticker-avatar,
.apeiron-comment-dock .apeiron-kit-comment-sticker img.apeiron-kit-sticker-avatar,
.apeiron-comment-dock .apeiron-kit-comment-sticker video.apeiron-kit-sticker-avatar {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	display: block;
	object-fit: cover;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* -------------------------------------------------------------------------
   16. Comment content + author + pill + text + footer
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-content {
	flex: 1;
	min-width: 0;
}

.apeiron-comment-dock .apeiron-kit-comment-info {
	margin-bottom: 0.35rem;
	line-height: var(--apeiron-line-height-ui, 1.4);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.apeiron-comment-dock .apeiron-kit-comment-author {
	font-weight: var(--apeiron-font-weight-title, 600);
	font-size: var(--apeiron-font-size-body);
	color: var(--apeiron-text);
	display: inline;
}

.apeiron-comment-dock .apeiron-kit-comment-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.5rem;
	border-radius: 8px;
	font-size: var(--apeiron-font-size-pill);
	font-weight: var(--apeiron-font-weight-body, 400);
	vertical-align: middle;
	background-color: transparent;
	color: inherit;
}

.apeiron-comment-dock .apeiron-kit-comment-pill.is-icon-only {
	padding: 0.25rem 0.4rem;
	gap: 0;
}

.apeiron-comment-dock .apeiron-kit-comment-pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85em;
	line-height: 1;
	color: inherit;
}

.apeiron-comment-dock .apeiron-kit-comment-pill-icon i,
.apeiron-comment-dock .apeiron-kit-comment-pill-icon svg {
	width: 1em;
	height: 1em;
	color: inherit;
	fill: currentColor;
}

.apeiron-comment-dock .apeiron-kit-comment-pill-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
}

.apeiron-comment-dock .apeiron-kit-comment-pill-text {
	display: inline-block;
	line-height: 1;
	color: inherit;
}

/* Index-based status colors: Elementor controls target these classes. */
.apeiron-comment-dock .apeiron-kit-comment-pill.status-index-0,
.apeiron-comment-dock .apeiron-kit-comment-pill.status-index-1,
.apeiron-comment-dock .apeiron-kit-comment-pill.status-index-2,
.apeiron-comment-dock .apeiron-kit-comment-pill.status-index-3-plus {
	border-style: solid;
	border-width: 0;
	border-color: transparent;
}

.apeiron-comment-dock .apeiron-kit-comment-text {
	margin-top: 0.35rem;
	color: var(--apeiron-muted);
	line-height: 1.6;
	font-size: var(--apeiron-font-size-small);
}

.apeiron-comment-dock .apeiron-kit-comment-content.sticker-position-above_text .apeiron-kit-comment-sticker {
	margin: 0.2rem 0 0.45rem;
}

.apeiron-comment-dock .apeiron-kit-comment-content.sticker-position-below_text .apeiron-kit-comment-sticker {
	margin: 0.45rem 0 0;
}

.apeiron-comment-dock .apeiron-kit-comment-content.sticker-position-top .apeiron-kit-comment-sticker {
	margin: 0 0 0.35rem;
}

.apeiron-comment-dock .apeiron-kit-comment-item.is-reply .apeiron-kit-comment-content.sticker-position-top .apeiron-kit-comment-sticker {
	margin-bottom: 0.25rem;
}

.apeiron-comment-dock .apeiron-kit-comment-content.sticker-position-beside_text .apeiron-kit-comment-text {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

.apeiron-comment-dock .apeiron-kit-comment-content.sticker-position-beside_text .apeiron-kit-comment-text p {
	flex: 1;
	min-width: 0;
}

.apeiron-comment-dock .apeiron-kit-comment-text p {
	margin: 0 0 0.35rem;
}

.apeiron-comment-dock .apeiron-kit-comment-text p:last-child {
	margin-bottom: 0;
}

.apeiron-comment-dock .apeiron-kit-comment-time {
	font-size: var(--apeiron-font-size-caption);
	color: var(--apeiron-subtle);
	display: block;
	font-weight: var(--apeiron-font-weight-body, 400);
	margin-top: 0.35rem;
}

.apeiron-comment-dock .apeiron-kit-comment-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-top: 0.35rem;
}

.apeiron-comment-dock .apeiron-kit-comment-footer .apeiron-kit-comment-time {
	margin-top: 0;
}

.apeiron-comment-dock .apeiron-kit-comment-actions {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.apeiron-comment-dock .apeiron-kit-comment-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--apeiron-muted);
	font: inherit;
	font-size: var(--apeiron-font-size-caption);
	font-weight: var(--apeiron-font-weight-body, 400);
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	text-decoration: none;
}

.apeiron-comment-dock .apeiron-kit-comment-action:focus:not(:focus-visible) {
	background: transparent;
	color: var(--apeiron-muted);
}

.apeiron-comment-dock .apeiron-kit-comment-action:focus-visible {
	color: var(--apeiron-primary);
	background: transparent;
	box-shadow: none;
	outline: none;
}

.apeiron-comment-dock .apeiron-kit-comment-action.is-danger:focus-visible {
	color: var(--apeiron-danger);
}

@media (hover: hover) and (pointer: fine) {
	.apeiron-comment-dock .apeiron-kit-comment-action:hover {
		color: var(--apeiron-primary);
		background: transparent;
		box-shadow: none;
		outline: none;
	}

	.apeiron-comment-dock .apeiron-kit-comment-action.is-danger:hover {
		color: var(--apeiron-danger);
	}
}

/* -------------------------------------------------------------------------
   17. Reply connector lines
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-replies {
	--apeiron-reply-curve-display: none;
	--apeiron-reply-line-color: var(--apeiron-border);
	--apeiron-reply-line-width: 1px;
	--apeiron-reply-curve-radius: 12px;
	--apeiron-reply-connector-top: -18px;
	--apeiron-reply-connector-height: 48px;
	--apeiron-reply-connector-width: 12px;
	--apeiron-reply-dot-x: -12px;
	--apeiron-reply-dot-y: -18px;
	list-style: none;
	margin: 10px 0 0 8px;
	padding: 0 0 0 8px;
	border-left-width: var(--apeiron-reply-line-width);
	border-left-style: solid;
	border-left-color: var(--apeiron-reply-line-color);
	position: relative;
}

.apeiron-comment-dock .apeiron-kit-comment-item.is-reply > .apeiron-kit-comment-replies {
	margin-left: 6px;
	padding-left: 7px;
}

.apeiron-comment-dock .apeiron-kit-comment-replies[hidden] {
	display: none;
}

.apeiron-comment-dock .apeiron-kit-comment-replies > .apeiron-kit-comment-item.is-reply::before {
	content: "";
	display: var(--apeiron-reply-curve-display, none);
	position: absolute;
	left: calc(-1 * var(--apeiron-reply-connector-width, 18px));
	top: var(--apeiron-reply-connector-top, -2px);
	width: var(--apeiron-reply-connector-width, 18px);
	height: var(--apeiron-reply-connector-height, 34px);
	border-left: var(--apeiron-reply-line-width, 1px) solid var(--apeiron-reply-line-color, var(--apeiron-border));
	border-bottom: var(--apeiron-reply-line-width, 1px) solid var(--apeiron-reply-line-color, var(--apeiron-border));
	border-bottom-left-radius: var(--apeiron-reply-curve-radius, 12px);
	pointer-events: none;
}

.apeiron-comment-dock .apeiron-kit-comment-replies > .apeiron-kit-comment-item.is-reply::after {
	content: "";
	display: var(--apeiron-reply-curve-display, none);
	position: absolute;
	left: var(--apeiron-reply-dot-x, 4px);
	top: var(--apeiron-reply-dot-y, 32px);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--apeiron-reply-line-color, var(--apeiron-border));
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   18. Inline reply/edit forms
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-inline-form,
.apeiron-comment-dock .apeiron-kit-comment-edit-form {
	display: grid;
	gap: 8px;
	margin: 12px 0 0 52px;
	padding: 12px;
	border: 1px solid var(--apeiron-border);
	border-radius: var(--apeiron-control-radius);
	background: var(--apeiron-surface-soft);
}

.apeiron-comment-dock .apeiron-kit-comment-edit-form {
	margin: 8px 0 0;
}

.apeiron-comment-dock .apeiron-kit-comment-inline-form input,
.apeiron-comment-dock .apeiron-kit-comment-inline-form textarea,
.apeiron-comment-dock .apeiron-kit-comment-edit-form textarea {
	width: 100%;
	min-height: 40px;
	padding: 10px 12px;
	border: 1px solid var(--apeiron-border);
	border-radius: var(--apeiron-radius-sm, 8px);
	background: var(--apeiron-surface);
	color: var(--apeiron-text);
	font: inherit;
	font-family: var(--apeiron-font-family);
	font-size: var(--apeiron-font-size-small);
	line-height: var(--apeiron-line-height-ui, 1.45);
	outline: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.apeiron-comment-dock .apeiron-kit-comment-inline-form input:focus,
.apeiron-comment-dock .apeiron-kit-comment-inline-form textarea:focus,
.apeiron-comment-dock .apeiron-kit-comment-edit-form textarea:focus,
.apeiron-comment-dock .apeiron-kit-comment-inline-form input:active,
.apeiron-comment-dock .apeiron-kit-comment-inline-form textarea:active,
.apeiron-comment-dock .apeiron-kit-comment-edit-form textarea:active,
.apeiron-comment-dock .apeiron-kit-comment-inline-form input:focus-visible,
.apeiron-comment-dock .apeiron-kit-comment-inline-form textarea:focus-visible,
.apeiron-comment-dock .apeiron-kit-comment-edit-form textarea:focus-visible {
	border-color: var(--apeiron-border-focus);
	outline: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.apeiron-comment-dock .apeiron-kit-comment-inline-form textarea,
.apeiron-comment-dock .apeiron-kit-comment-edit-form textarea {
	min-height: 72px;
	resize: vertical;
}

.apeiron-comment-dock .apeiron-kit-comment-inline-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.apeiron-comment-dock .apeiron-kit-comment-inline-actions button {
	min-height: 36px;
	padding: 8px 12px;
	border: 1px solid var(--apeiron-border);
	border-radius: var(--apeiron-radius-sm, 8px);
	background: var(--apeiron-surface);
	color: var(--apeiron-text);
	font: inherit;
	font-family: var(--apeiron-font-family);
	font-size: var(--apeiron-font-size-small);
	font-weight: var(--apeiron-font-weight-title, 600);
	cursor: pointer;
	box-shadow: none;
	outline: none;
}

.apeiron-comment-dock .apeiron-kit-comment-inline-actions button[type="submit"] {
	border-color: var(--apeiron-primary);
	background: var(--apeiron-primary);
	color: #fff;
}

/* -------------------------------------------------------------------------
   19. Modals (reply / edit / delete) — appended inside the dock so
   {{WRAPPER}} scoping applies. Elevation shadow is structural for the
   floating dialog; configurable via the Style tab.
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-modal,
.apeiron-kit-comment-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 23, 42, 0.38);
	box-sizing: border-box;
}

.apeiron-comment-dock .apeiron-kit-comment-modal:not(.apeiron-kit-comment-delete-modal) {
	align-items: safe center;
	overflow-y: auto;
}

.apeiron-comment-dock .apeiron-kit-comment-modal:not(.apeiron-kit-comment-delete-modal)[data-popup-position="bottom"] {
	align-items: safe flex-end;
}

.apeiron-comment-dock .apeiron-kit-comment-dialog,
.apeiron-kit-comment-dialog {
	width: min(520px, 100%);
	max-height: var(--apeiron-modal-dialog-max-height, none);
	padding: 18px;
	border: 1px solid var(--apeiron-border);
	border-radius: 8px;
	background: var(--apeiron-surface);
	box-shadow: 0 18px 55px rgba(15, 23, 42, 0.18);
	box-sizing: border-box;
	display: grid;
	gap: 10px;
	font-family: var(--apeiron-font-family);
}

.apeiron-comment-dock .apeiron-kit-comment-modal[data-popup-scroll="dialog"] .apeiron-kit-comment-dialog {
	max-height: min(var(--apeiron-modal-dialog-max-height, 100%), 100%);
	overflow-y: auto;
}

.apeiron-comment-dock.has-modal-dialog-shadow-disabled .apeiron-kit-comment-dialog {
	box-shadow: none;
}

.apeiron-kit-comment-modal-title {
	margin: 0 0 2px;
	color: var(--apeiron-text);
	font-size: 15px;
	font-weight: var(--apeiron-font-weight-heading, 700);
	line-height: var(--apeiron-line-height-heading, 1.35);
}

.apeiron-kit-comment-modal-description {
	margin: 0;
	color: var(--apeiron-muted);
	font-size: var(--apeiron-font-size-small);
	line-height: 1.5;
}

.apeiron-comment-dock .apeiron-kit-comment-modal input,
.apeiron-comment-dock .apeiron-kit-comment-modal textarea {
	width: 100%;
	min-height: 44px;
	padding: 12px 14px;
	border: 1px solid var(--apeiron-border);
	border-radius: var(--apeiron-control-radius);
	background: var(--apeiron-surface);
	color: var(--apeiron-text);
	font: inherit;
	font-family: var(--apeiron-font-family);
	font-size: var(--apeiron-font-size-body);
	line-height: 1.5;
	resize: vertical;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	outline: none;
	box-sizing: border-box;
}

.apeiron-comment-dock .apeiron-kit-comment-modal input:focus,
.apeiron-comment-dock .apeiron-kit-comment-modal textarea:focus {
	border-color: var(--apeiron-border-focus);
}

.apeiron-kit-comment-modal textarea {
	min-height: 150px;
}

.apeiron-kit-comment-modal .apeiron-kit-sticker-field {
	margin-top: 2px;
}

.apeiron-kit-comment-modal .apeiron-kit-comment-inline-actions {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 10px;
	margin-top: 2px;
}

.apeiron-kit-comment-modal .apeiron-kit-comment-inline-actions button {
	flex: 1 1 0;
	min-height: 38px;
	padding: 9px 14px;
	border: 1px solid var(--apeiron-border);
	border-radius: var(--apeiron-radius-sm, 8px);
	background: var(--apeiron-surface);
	color: var(--apeiron-text);
	font: inherit;
	font-family: var(--apeiron-font-family);
	font-size: var(--apeiron-font-size-small);
	font-weight: var(--apeiron-font-weight-title, 600);
	cursor: pointer;
	box-shadow: none;
	outline: none;
}

.apeiron-kit-comment-modal .apeiron-kit-comment-inline-actions button[type="submit"] {
	flex: 2 1 0;
	border-color: var(--apeiron-primary);
	background: var(--apeiron-primary);
	color: #ffffff;
}

.apeiron-kit-comment-delete-modal .apeiron-kit-comment-inline-actions [data-delete-confirm] {
	flex: 2 1 0;
	border-color: var(--apeiron-danger);
	background: var(--apeiron-danger);
	color: #ffffff;
}

.apeiron-kit-comment-delete-modal {
	--apeiron-delete-modal-start: translateY(10px) scale(0.96);
	--apeiron-delete-modal-duration: 320ms;
	--apeiron-delete-modal-close-duration: 240ms;
	opacity: 0;
	transition: opacity var(--apeiron-delete-modal-duration) ease;
}

.apeiron-kit-comment-delete-modal .apeiron-kit-comment-delete-dialog {
	transform: var(--apeiron-delete-modal-start);
	transition: transform var(--apeiron-delete-modal-duration) cubic-bezier(0.2, 0.85, 0.2, 1), opacity var(--apeiron-delete-modal-duration) ease;
	opacity: 0;
}

.apeiron-kit-comment-delete-modal.is-open {
	opacity: 1;
}

.apeiron-kit-comment-delete-modal.is-open .apeiron-kit-comment-delete-dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.apeiron-kit-comment-delete-modal.is-closing {
	opacity: 0;
	transition-duration: var(--apeiron-delete-modal-close-duration);
}

.apeiron-kit-comment-delete-modal.is-closing .apeiron-kit-comment-delete-dialog {
	transform: var(--apeiron-delete-modal-start);
	opacity: 0;
	transition-duration: var(--apeiron-delete-modal-close-duration);
}

.apeiron-kit-comment-delete-modal .apeiron-kit-comment-inline-actions [data-delete-confirm]:disabled {
	opacity: 0.65;
	cursor: wait;
}

/* -------------------------------------------------------------------------
   20. Load more + pagination
   ------------------------------------------------------------------------- */
.apeiron-comment-dock .apeiron-kit-comment-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.apeiron-comment-dock .apeiron-kit-comment-load-more {
	background: var(--apeiron-surface);
	color: var(--apeiron-primary);
	border: 1px solid var(--apeiron-border);
	padding: 9px 18px;
	border-radius: var(--apeiron-control-radius);
	cursor: pointer;
	font-weight: var(--apeiron-font-weight-title, 600);
	font-size: var(--apeiron-font-size-small);
	font-family: var(--apeiron-font-family);
	transition: background-color var(--apeiron-transition), border-color var(--apeiron-transition), opacity var(--apeiron-transition);
}

.apeiron-comment-dock .apeiron-kit-comment-load-more:hover:not(:disabled) {
	background: var(--apeiron-primary-soft);
	border-color: var(--apeiron-border-strong);
}

.apeiron-comment-dock .apeiron-kit-comment-load-more:disabled {
	opacity: 0.6;
	cursor: progress;
}

.apeiron-comment-dock .apeiron-kit-comment-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-top: 1rem;
}

.apeiron-comment-dock .apeiron-kit-comment-pagination button {
	background: var(--apeiron-primary);
	color: #fff;
	border: none;
	padding: 8px 16px;
	border-radius: var(--apeiron-control-radius);
	cursor: pointer;
	font-weight: var(--apeiron-font-weight-title, 600);
	font-size: var(--apeiron-font-size-small);
	font-family: var(--apeiron-font-family);
	transition: opacity var(--apeiron-transition);
	box-shadow: none;
	outline: none;
}

.apeiron-comment-dock .apeiron-kit-comment-pagination button.is-loading::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: apeironCommentPaginationSpin 0.7s linear infinite;
}

@keyframes apeironCommentPaginationSpin {
	to {
		transform: rotate(360deg);
	}
}

.apeiron-comment-dock .apeiron-kit-comment-pagination button:hover:not(:disabled) {
	opacity: 0.85;
	box-shadow: none;
	transform: none;
}

.apeiron-comment-dock .apeiron-kit-comment-pagination button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	background: var(--apeiron-subtle);
	box-shadow: none;
}

.apeiron-comment-dock .apeiron-kit-comment-page-info {
	font-weight: var(--apeiron-font-weight-title, 600);
	color: var(--apeiron-muted);
	font-size: var(--apeiron-font-size-small);
}

.apeiron-comment-dock .apeiron-kit-comment-page-current {
	color: var(--apeiron-primary);
}

/* -------------------------------------------------------------------------
   21. Focus states use one border only, matching Signal Form.
   ------------------------------------------------------------------------- */
.apeiron-comment-dock.uses-default-submit-border .apeiron-kit-comment-form button[type="submit"]:focus,
.apeiron-comment-dock.uses-default-submit-border .apeiron-kit-comment-form button[type="submit"]:active,
.apeiron-comment-dock.uses-default-submit-border .apeiron-kit-comment-form button[type="submit"]:focus-visible,
.apeiron-comment-dock.uses-default-pagination-border .apeiron-kit-comment-pagination button:focus,
.apeiron-comment-dock.uses-default-pagination-border .apeiron-kit-comment-pagination button:active,
.apeiron-comment-dock.uses-default-pagination-border .apeiron-kit-comment-pagination button:focus-visible {
	border: 1px solid var(--apeiron-border-focus);
	outline: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.apeiron-comment-dock .apeiron-kit-sticker-trigger:focus-visible,
.apeiron-comment-dock .apeiron-kit-sticker-clear:focus,
.apeiron-comment-dock .apeiron-kit-sticker-clear:active,
.apeiron-comment-dock .apeiron-kit-sticker-clear:focus-visible,
.apeiron-comment-dock .apeiron-kit-sticker-tab:focus,
.apeiron-comment-dock .apeiron-kit-sticker-tab:active,
.apeiron-comment-dock .apeiron-kit-sticker-tab:focus-visible,
.apeiron-comment-dock .apeiron-kit-sticker-popover-close:focus,
.apeiron-comment-dock .apeiron-kit-sticker-popover-close:active,
.apeiron-comment-dock .apeiron-kit-sticker-popover-close:focus-visible,
.apeiron-comment-dock .apeiron-kit-sticker-option:focus,
.apeiron-comment-dock .apeiron-kit-sticker-option:active,
.apeiron-comment-dock .apeiron-kit-sticker-option:focus-visible,
.apeiron-comment-dock .apeiron-kit-comment-load-more:focus,
.apeiron-comment-dock .apeiron-kit-comment-load-more:active,
.apeiron-comment-dock .apeiron-kit-comment-load-more:focus-visible,
.apeiron-comment-dock .apeiron-kit-comment-inline-actions button:focus,
.apeiron-comment-dock .apeiron-kit-comment-inline-actions button:active,
.apeiron-comment-dock .apeiron-kit-comment-inline-actions button:focus-visible {
	border-color: var(--apeiron-border-focus);
	outline: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	.apeiron-comment-dock .apeiron-kit-sticker-trigger:active {
		border-color: var(--apeiron-border-focus);
		outline: none;
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
	}
}

.apeiron-comment-dock .apeiron-kit-comment-action:focus-visible {
	color: var(--apeiron-primary);
	outline: none;
	box-shadow: none;
}

.apeiron-comment-dock .apeiron-kit-comment-modal input:focus,
.apeiron-comment-dock .apeiron-kit-comment-modal textarea:focus,
.apeiron-comment-dock .apeiron-kit-comment-modal select:focus,
.apeiron-comment-dock .apeiron-kit-comment-modal input:active,
.apeiron-comment-dock .apeiron-kit-comment-modal textarea:active,
.apeiron-comment-dock .apeiron-kit-comment-modal select:active,
.apeiron-comment-dock .apeiron-kit-comment-modal input:focus-visible,
.apeiron-comment-dock .apeiron-kit-comment-modal textarea:focus-visible,
.apeiron-comment-dock .apeiron-kit-comment-modal select:focus-visible {
	border-color: var(--apeiron-border-focus);
	outline: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.apeiron-comment-dock *,
	.apeiron-comment-dock *::before,
	.apeiron-comment-dock *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
   22. Responsive
   ------------------------------------------------------------------------- */
/* Tablet keeps full reading size; only container density changes. */
@media (min-width: 769px) and (max-width: 1024px) {
	.apeiron-comment-dock {
		--apeiron-font-size-section: 18px;
		--apeiron-font-size-body: 14px;
		--apeiron-font-size-small: 14px;
		--apeiron-font-size-caption: 12px;
		--apeiron-font-size-label: 14px;
		padding: 22px;
	}
}

@media (max-width: 768px) {
	.apeiron-comment-dock {
		--apeiron-font-size-section: 17px;
		--apeiron-font-size-body: 14px;
		--apeiron-font-size-small: 14px;
		--apeiron-font-size-caption: 12px;
		--apeiron-font-size-label: 14px;
		--apeiron-font-size-pill: 11px;
		--apeiron-avatar-size: 36px;
		padding: 16px;
		border-radius: 8px;
	}

	.apeiron-comment-dock .apeiron-kit-comment-heading {
		font-size: var(--apeiron-font-size-section);
	}

	.apeiron-comment-dock .apeiron-kit-comment-form input,
	.apeiron-comment-dock .apeiron-kit-comment-form textarea,
	.apeiron-comment-dock .apeiron-kit-comment-form select {
		padding: 10px 12px;
		min-height: 42px;
		font-size: var(--apeiron-font-size-body);
	}

	.apeiron-comment-dock .apeiron-kit-comment-form button[type="submit"] {
		padding: 10px 16px;
		min-height: 42px;
		font-size: var(--apeiron-font-size-body);
		width: 100%;
	}

	.apeiron-comment-dock .apeiron-kit-comment-notice.is-toast {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
	}

	.apeiron-comment-dock .apeiron-kit-attendance-summary {
		padding: 8px 0;
	}

	.apeiron-comment-dock .apeiron-kit-attendance-summary-head {
		gap: 6px;
		margin-bottom: 10px;
	}

	.apeiron-comment-dock .apeiron-kit-attendance-summary-title {
		min-width: 0;
		padding: 3px 12px;
		font-size: var(--apeiron-font-size-caption);
	}

	.apeiron-comment-dock .apeiron-kit-attendance-summary-list {
		gap: 10px;
	}

	.apeiron-comment-dock .apeiron-kit-attendance-summary-count {
		font-size: 22px;
	}

	.apeiron-comment-dock .apeiron-kit-attendance-summary-label {
		font-size: var(--apeiron-font-size-caption);
	}

	.apeiron-comment-dock .apeiron-kit-sticker-trigger {
		height: 40px;
		min-height: 40px;
		padding: 9px 11px;
		font-size: var(--apeiron-font-size-body);
	}

	.apeiron-comment-dock .apeiron-kit-sticker-preview,
	.apeiron-comment-dock .apeiron-kit-sticker-clear {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
	}

	.apeiron-comment-dock .apeiron-kit-comment-wrapper {
		gap: 0.5rem;
	}

	.apeiron-comment-dock .apeiron-kit-comment-replies,
	.apeiron-comment-dock .apeiron-kit-comment-inline-form {
		margin-left: 6px;
		padding-left: 7px;
	}

	.apeiron-kit-comment-modal {
		align-items: center;
		padding: 12px;
	}

	.apeiron-kit-comment-dialog {
		width: 100%;
		padding: 14px;
	}

	.apeiron-comment-dock .apeiron-kit-comment-inline-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.apeiron-comment-dock .apeiron-kit-comment-inline-actions button {
		width: 100%;
	}

	.apeiron-comment-dock .apeiron-kit-comment-modal .apeiron-kit-comment-inline-actions {
		flex-direction: row;
	}

	.apeiron-comment-dock .apeiron-kit-comment-modal .apeiron-kit-comment-inline-actions button {
		width: auto;
	}

	.apeiron-comment-dock .apeiron-kit-sticker-popover {
		padding: 12px;
	}

	.apeiron-comment-dock .apeiron-kit-sticker-popover-panel {
		width: 100%;
		max-height: min(520px, 100%);
	}

	.apeiron-comment-dock .apeiron-kit-sticker-grid {
		grid-template-columns: repeat(auto-fill, minmax(var(--apeiron-sticker-grid-min), 1fr));
	}
}