/**
 * Communication - front-end form.
 * Inherits the active theme's fonts, colours and button styling
 * (GeneratePress: .comm-button picks up your Customizer button colours below).
 */

.comm-form-wrap {
	margin: 0 0 1.5em;
}

.comm-form__title {
	margin-top: 0;
}

.comm-field {
	display: block;
	margin: 0 0 1.2em;
}

/* Labels live inside the fields, so the visible label is the placeholder.
   The real <label> stays in the markup for screen readers and for the
   click-to-focus association. */
.comm-label-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.comm-field input[type="text"],
.comm-field input[type="email"],
.comm-field select,
.comm-field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 9px;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Browsers render <select> and its options in their own UI font. `font:
   inherit` sets family, size, weight and line-height in one go, and the
   !important beats theme and browser rules alike. */
.comm-form .comm-field select,
.comm-form-wrap .comm-field select,
.comm-field select {
	font: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	letter-spacing: inherit;
}

/* The open dropdown list itself: honoured on Windows and Linux. macOS draws
   this list with the system font and ignores CSS — that is the platform, not
   the plugin. Swap `inherit` for Verdana, Geneva, sans-serif below if you
   would rather pin the face outright. */
.comm-form .comm-field select option,
.comm-form .comm-field select optgroup,
.comm-field select option,
.comm-field select optgroup {
	font-family: inherit !important;
	font-size: inherit !important;
}

/* The placeholder clears the moment the field is clicked into. */
.comm-field input::placeholder,
.comm-field textarea::placeholder {
	opacity: 1;
	color: inherit;
	transition: color .12s ease, opacity .12s ease;
}

.comm-field input:focus::placeholder,
.comm-field textarea:focus::placeholder {
	color: transparent;
	opacity: 0;
}

/* The select's first option acts as its placeholder. */
.comm-field select.comm-select--empty {
	color: inherit;
	opacity: .72;
}

.comm-field select option {
	color: initial;
	opacity: 1;
}

.comm-field textarea {
	min-height: 160px;
	resize: vertical;
}

.comm-field__error[hidden] {
	display: none;
}

.comm-field__error {
	display: block;
	margin-top: .35em;
	color: #d63638;
	font-size: .875em;
}

.comm-field [aria-invalid="true"] {
	border-color: #d63638;
}

.comm-notice {
	margin: 0 0 1.5em;
	padding: .9em 1.1em;
	border-left: 4px solid;
	border-radius: 3px;
	font-size: .95em;
}

.comm-notice--success {
	border-color: #00a32a;
	background: #edfaef;
	color: #0a4b1a;
}

.comm-notice__text {
	display: block;
}

.comm-notice__ref {
	display: block;
	margin-top: .45em;
	font-family: Consolas, Monaco, monospace;
	font-size: .95em;
	font-weight: 700;
	letter-spacing: .4px;
}

.comm-notice--error {
	border-color: #d63638;
	background: #fcf0f1;
	color: #8a1f21;
}

.comm-button {
	cursor: pointer;
	padding: 12px 25px;
	margin-top: 10px;
}

.comm-button[disabled] {
	opacity: .6;
	cursor: progress;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.comm-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.comm-form * {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * Chat panel
 * ------------------------------------------------------------------ */

/* Hidden until the script reveals it: without JS the panel could never open. */
.comm-chat {
	--comm-chat-accent: #e0eaf300;
	--comm-chat-accent-ink: #4a7ab8;

	/* Bubbles and the send button need a solid colour of their own. */
	--comm-chat-bubble: #2271b1;
	--comm-chat-bubble-ink: #fff;
	--comm-chat-green: #6ba53a;
	--comm-chat-green-dark: #4e8a24;

	/* Slide-out dock dimensions (single source of truth). */
	--comm-chat-w: 360px;   /* Slide-out chat window width. */
	--comm-chat-h: 520px;   /* Slide-out chat window full height. */
	--comm-chat-hh: 170px;  /* Small visible collapsed tab height. */
	--comm-chat-hw: 40px;   /* Visible collapsed tab width. */

	/* A zero-size fixed anchor pinned to the right edge. The tab and the
	   slide-out panel are absolutely positioned against it, so the small
	   tab height stays independent of the full panel height.

	   Visible by default (no JS dependency): the collapsed panel is hidden
	   purely by its own transform below, so the tab shows as soon as this
	   stylesheet loads even if scripts are slow, cached, or blocked. */
	display: block;
	position: fixed;
	right: 0;
	left: auto;
	bottom: 90px;
	top: auto;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	z-index: 99990;
	font-family: inherit;
}

.comm-chat.is-ready {
	display: block;
}

/* The launcher is now the always-visible vertical tab pinned to the right
   edge — small fixed height, a "Chat" label stacked above the bubble icon. */
.comm-chat__launcher {
	position: absolute;
	right: 0;
	bottom: calc((var(--comm-chat-h) - var(--comm-chat-hh)) / 2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: var(--comm-chat-hw);
	height: var(--comm-chat-hh);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 12px 0 0 12px;
	background: transparent;
	color: var(--comm-chat-green);
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transition: opacity 1.2s ease, visibility 0s linear 0s, background-color .3s ease, color .3s ease;
}

.comm-chat__launcher:hover,
.comm-chat__launcher:focus-visible {
	background: transparent;
	color: var(--comm-chat-green-dark);
	outline: none;
}

/* On open, the tab dissolves away (opacity fade); it fades back in on close. */
.comm-chat.is-open .comm-chat__launcher {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}

/* Vertical "Chat" label above the icon — same orientation as the Side Ads
   "Featured Post" strip (vertical-rl + 180deg rotate, reads bottom-to-top). */
.comm-chat__label {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .6px;
	line-height: 1;
	color: inherit;
}

.comm-chat__icon--open {
	width: 24px;
	height: 24px;
	color: inherit;
}

/* The slide-out chat window: flush to the screen's right edge, sized to its
   content (all fields visible without scrolling), sliding in slowly (4.8s)
   like the Side Ads "Featured" tab. Stays open until closed with X or Escape. */
.comm-chat__panel {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(var(--comm-chat-w), calc(100vw - 24px));
	height: auto;
	max-height: calc(100vh - 130px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	color: #1d2327;
	border-radius: 14px 0 0 14px;
	box-shadow: 0 18px 48px rgba(28, 43, 54, .28);
	transform: translateX(calc(100% + 2px));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 4.8s cubic-bezier(.16, 1, .3, 1), opacity 1.2s ease, visibility 0s linear 4.8s;
	will-change: transform;
}

.comm-chat.is-open .comm-chat__panel {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform 4.8s cubic-bezier(.16, 1, .3, 1), opacity 1.2s ease, visibility 0s linear 0s;
}

.comm-chat__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	background: #285cadba;
	color: #cdd7e4;
	border-radius: 14px 0 0 0;
}

.comm-chat__title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
}

.comm-chat__close {
	display: flex;
	padding: 4px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: .85;
}

.comm-chat__close:hover { opacity: 1; background: rgba(255, 255, 255, .15); }

/* Top-right X: a second close control pinned to the panel corner. Carries
   .comm-chat__close too, so it runs the same open(false) as the bottom button. */
.comm-chat__x {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 33, 44, .06);
	color: #4a4f57;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.comm-chat__x:hover,
.comm-chat__x:focus-visible {
	background: rgba(20, 33, 44, .12);
	color: #1d2327;
	outline: none;
}

/* Headroom so the floating X clears the first field in the scrolling body. */
.comm-chat .comm-chat__body { padding-top: 46px; }

.comm-chat__body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 16px; }

.comm-chat__intro {
	margin: 0 0 12px;
	font-size: 14px;
	color: #50575e;
}

.comm-chat .comm-form-wrap { margin: 0; }
.comm-chat .comm-field { margin-bottom: .8em; }
.comm-chat .comm-field textarea { min-height: 110px; }
.comm-chat .comm-notice { margin-bottom: 0; }
/* Flex centres the button while leaving the explicit left/right margins of
   0 below intact — text-align would lose to a theme that blocks the button,
   and auto margins would lose to the !important. */
.comm-chat .comm-submit {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: -10px;
	margin-bottom: -10px;
}

.comm-chat .comm-button {
	width: 100px;
	margin: 15px 0 20px 0 !important;
	padding: 12px;
}

/* Close button: light-grey background, dark-grey text — sits to the right of
   Send; the pair is centred together (equal margin each side) by the flex row. */
.comm-chat .comm-button--close {
	background: #e2e5e9 !important;
	color: #4a4f57 !important;
	border: 0 !important;
	border-radius: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Locked (pre-filled, logged-in) field gets a little breathing room on top. */
.comm-chat .comm-field--locked {
	margin-top: 10px;
}

.comm-chat .comm-button--close:hover,
.comm-chat .comm-button--close:focus {
	background: #d4d8dd !important;
	color: #3a3f47 !important;
}

/* When Send is gated (fewer than 5 spaces typed) show a blocked cursor,
   not the busy/progress cursor used while a submission is in flight. */
.comm-chat .comm-button[type="submit"][disabled] {
	cursor: not-allowed;
}

@media screen and (max-width: 600px) {
	.comm-chat { bottom: 70px; }
	.comm-chat__panel { max-height: calc(100vh - 100px); }
}

/* Hide the whole dock on narrow screens (<=783px). */
@media screen and (max-width: 783px) {
	.comm-chat { display: none !important; }
}

/* Hide the tab as the page nears its foot (JS adds .is-near-bottom when the
   document bottom is within 400px of the viewport). Only the launcher fades;
   an open panel the visitor is using is left in place. */
.comm-chat.is-near-bottom .comm-chat__launcher {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility 0s linear .25s;
}

@media print {
	.comm-chat { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.comm-chat__panel { transition: opacity .2s ease, visibility 0s; }
	.comm-chat__launcher { transition: none; }
}

/* Locked name and email for signed-in visitors: known values, so they read as
   information rather than as inputs. */
.comm-field--locked input[readonly],
.comm-field input[readonly] {
	border: 0 !important;
	background: #f0f0f1;
	background-color: rgb(240, 240, 241);
	color: #646970;
	cursor: default;
	box-shadow: none;
	margin-top: -10px;
}

.comm-field--locked input[readonly]:focus,
.comm-field input[readonly]:focus {
	outline: none;
	box-shadow: none;
}

/* Live conversation */
.comm-thread {
	height: 300px;
	overflow-y: auto;
	padding: 4px 2px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
}

.comm-thread .comm-line {
	max-width: 82%;
	margin-bottom: 8px;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.45;
	word-wrap: break-word;
}

.comm-thread .comm-line--visitor {
	align-self: flex-end;
	background: var(--comm-chat-bubble, #2271b1);
	color: var(--comm-chat-bubble-ink, #fff);
	border-bottom-right-radius: 3px;
}

.comm-thread .comm-line--admin {
	align-self: flex-start;
	background: #f0f0f1;
	color: #1d2327;
	border-bottom-left-radius: 3px;
}

.comm-thread .comm-line--note {
	align-self: center;
	max-width: 100%;
	background: none;
	color: #646970;
	font-size: 12px;
	text-align: center;
}

.comm-thread .comm-line__meta {
	margin-top: 2px;
	font-size: 11px;
	opacity: .75;
}

.comm-composer {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

.comm-composer textarea {
	flex: 1 1 auto;
	min-height: 42px;
	max-height: 120px;
	padding: 10px;
	border: 1px solid #dcdcde;
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	resize: none;
}

.comm-composer__send {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--comm-chat-bubble, #2271b1);
	color: var(--comm-chat-bubble-ink, #fff);
	cursor: pointer;
}

.comm-composer__send:hover { opacity: .9; }

.comm-chat__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	background: #d63638;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}


/* The anti-spam question stays visible: it is the one label a visitor still
   needs after clicking into the field. */
.comm-field__question {
	display: block;
	margin-bottom: .35em;
	font-weight: 600;
}

/* Question and answer share one row: the label takes only the width of its
   text, the input stretches to the right edge. Wraps gracefully if a theme's
   font makes the line too long even for a phone. */
.comm-field--inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.comm-field--inline .comm-field__question {
	flex: 0 0 auto;
	margin-bottom: 0;
	white-space: nowrap;
}

.comm-field--inline input[type="text"] {
	flex: 1 1 120px;
	width: auto;
	min-width: 0;
}

.comm-field--inline .comm-field__error {
	flex: 1 0 100%;
}

.comm-required {
	color: #d63638;
}

/* Requested: tuck the locked field up against the one above it. */
div#comm-1-wrap.comm-form-wrap form.comm-form p.comm-field.comm-field--locked {
	margin-top: -10px;
}

.comm-chat__head { display: none; }