/*
 * Defensive reset.
 *
 * Root cause of the original "icons are broken" report: WordPress
 * themes/page builders (this site's theme included) ship global `button {
 * padding: 15px 30px; font: ...; border-radius: ...; box-shadow: ...; }`
 * rules that target every <button> and <input> on the page. Any property
 * this stylesheet doesn't explicitly re-declare falls straight through to
 * that theme rule - which is exactly what was happening to the minimize
 * button, send button, restart link, and teaser-close button: they were
 * inheriting the theme's ~15px/30px button padding, ballooning to
 * 70x48px, squashing the header into ~200px and mangling the whole
 * layout (that's also what caused the "Online · office hours" text to
 * wrap and overlap).
 *
 * Fix: `all: unset` every button/input under our root first, so the
 * widget is fully isolated from host page/theme styles, then each rule
 * below re-declares exactly what it needs from scratch.
 *
 * IMPORTANT - specificity note (this bit a v1.0.2 release): the reset
 * below is scoped with `#ceca-chat-root`, an ID selector. A bare ID+tag
 * selector like `#ceca-chat-root button` has HIGHER specificity than a
 * plain class selector like `.ceca-bubble`, so without the :where()
 * wrapper the `all: unset` here would permanently beat every button's
 * own class rule below regardless of source order - shrinking every
 * button back to inline, content-sized, unstyled browser defaults. Wrapping
 * the ID in :where() zeroes its specificity contribution, so this reset
 * only carries plain-element specificity (lower than any class rule) and
 * the per-button classes below correctly win.
 */
:where(#ceca-chat-root),
:where(#ceca-chat-root) *,
:where(#ceca-chat-root) *::before,
:where(#ceca-chat-root) *::after {
	box-sizing: border-box;
}

:where(#ceca-chat-root) button,
:where(#ceca-chat-root) input {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}
:where(#ceca-chat-root) input { cursor: text; }

#ceca-chat-root { position: fixed; z-index: 999999; bottom: 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#ceca-chat-root.ceca-pos-right { right: 24px; }
#ceca-chat-root.ceca-pos-left  { left: 24px; }

.ceca-bubble {
	display: flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 50%;
	background: var(--ceca-primary, #17629b);
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	color: #fff; font-size: 26px; line-height: 1;
	transition: transform .15s ease;
}
.ceca-bubble:hover { transform: scale(1.06); }

.ceca-teaser {
	position: absolute; bottom: 72px; right: 0;
	background: #fff; color: #222; padding: 10px 14px;
	border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
	font-size: 14px; white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
#ceca-chat-root.ceca-pos-left .ceca-teaser { right: auto; left: 0; }
.ceca-teaser button#ceca-teaser-close {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; flex-shrink: 0;
	color: #999; font-size: 14px; line-height: 1; border-radius: 4px;
}
.ceca-teaser button#ceca-teaser-close:hover { background: #f0f0f0; }

.ceca-panel {
	position: absolute; bottom: 78px; right: 0;
	width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: 70vh;
	background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.28);
	display: flex; flex-direction: column; overflow: hidden;
}
#ceca-chat-root.ceca-pos-left .ceca-panel { right: auto; left: 0; }

.ceca-header {
	background: var(--ceca-primary, #17629b); color: #fff;
	padding: 14px 16px; display: flex; align-items: center; gap: 10px;
}
.ceca-header-avatar {
	width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
	background: rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:18px;
}
.ceca-header-info { flex: 1; min-width: 0; }
.ceca-header-title {
	font-weight: 600; font-size: 14px; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ceca-header-sub {
	font-size: 12px; line-height: 1.4; opacity: .85;
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 5px; margin-top: 2px;
}
.ceca-header-sub .dot { width:7px; height:7px; flex-shrink:0; border-radius:50%; background:#3ddc84; display:inline-block; }
.ceca-header-sub .ceca-office-hours { white-space: normal; }
.ceca-header-min {
	display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; flex-shrink: 0;
	color: #fff; font-size: 18px; line-height: 1; opacity:.9; border-radius: 4px;
}
.ceca-header-min:hover { background: rgba(255,255,255,.15); }

.ceca-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f5f7fa; }

.ceca-msg { max-width: 82%; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.ceca-msg-bot { align-self: flex-start; background: #fff; color: #222; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ceca-msg-user { align-self: flex-end; background: var(--ceca-primary, #17629b); color: #fff; border-bottom-right-radius: 4px; }
.ceca-msg-time { font-size: 10px; color: #99a1ab; margin-top: 2px; }

.ceca-typing { align-self: flex-start; background:#fff; border-radius:12px; padding:10px 14px; display:flex; gap:4px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ceca-typing span { width:6px; height:6px; border-radius:50%; background:#b8c0cc; display:inline-block; animation: ceca-blink 1.2s infinite; }
.ceca-typing span:nth-child(2){ animation-delay:.2s; }
.ceca-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes ceca-blink { 0%,80%,100%{opacity:.3} 40%{opacity:1} }

/*
 * #ceca-options-wrap (this class) now renders as the last child of
 * .ceca-messages instead of a separate fixed div below it - see the long
 * comment above clearOptions() in chat-widget.js for why (a long option
 * list, e.g. the 11-item trade picker, used to get clipped by the panel's
 * fixed height with no way to scroll to the Done button). Because it's
 * inside .ceca-messages now, that container's own 14px padding and 10px
 * flex gap already provide spacing, so no padding/margin is needed here.
 */
.ceca-options { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ceca-option-btn {
	display: block; width: 100%;
	text-align: left; background: #fff; border: 1px solid #d8dfe8; color: var(--ceca-primary, #17629b);
	padding: 9px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; cursor: pointer; transition: all .12s ease;
}
.ceca-option-btn:hover { background: #f0f5fa; }
.ceca-option-btn.selected { background: var(--ceca-primary, #17629b); color: #fff; border-color: var(--ceca-primary, #17629b); }
.ceca-option-btn.continue { background: var(--ceca-primary, #17629b); color: #fff; text-align:center; font-weight:600; }

.ceca-cta {
	display:flex; flex-direction:column; align-items:center; gap:2px;
	padding: 10px 14px; border-radius: 8px;
	color:#fff; font-weight:600; font-size:13.5px; line-height:1.3; cursor:pointer; text-decoration:none;
}
.ceca-cta-wa { background:#25D366; }
.ceca-cta-call { background: var(--ceca-primary, #17629b); }
.ceca-cta small { font-weight:400; opacity:.9; font-size: 11.5px; }

.ceca-input-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid #eceff3; }
.ceca-input-row input[type=text], .ceca-input-row input[type=email], .ceca-input-row input[type=tel] {
	display: block; width: 100%; flex: 1;
	border: 1px solid #d8dfe8; border-radius: 20px; padding: 9px 14px;
	font-size: 13.5px; line-height: 1.4; color: #222; background: #fff; outline: none;
}
.ceca-input-row input:focus { border-color: var(--ceca-primary, #17629b); }
.ceca-input-row input:disabled { background: #f3f5f7; color: #99a1ab; }
.ceca-send-btn {
	display:flex; align-items:center; justify-content:center;
	width: 36px; height: 36px; flex-shrink:0; border-radius: 50%;
	background: var(--ceca-primary, #17629b); color: #fff; font-size: 14px; line-height: 1;
}
.ceca-send-btn:disabled { opacity: .4; cursor: default; }

.ceca-footer { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 10px; }
.ceca-lang-toggle { display:flex; gap:4px; }
.ceca-lang-toggle button {
	display:inline-block;
	border: 1px solid #d8dfe8; background:#fff; border-radius: 6px;
	padding: 2px 8px; font-size: 11px; line-height: 1.6; color:#555;
}
.ceca-lang-toggle button.active { background: var(--ceca-primary, #17629b); color:#fff; border-color: var(--ceca-primary, #17629b); }
.ceca-restart { display:inline-block; color:#8a93a0; font-size:12px; line-height:1.4; }
.ceca-restart:hover { color: var(--ceca-primary, #17629b); }

/*
 * Mobile fix (v1.2.4) - two bugs reported on phones:
 *
 * 1. "Zoom" on typing: iOS Safari auto-zooms the whole page in the instant
 *    any input with font-size below 16px receives focus. The input above
 *    is 13.5px, so opening the keyboard on a phone zoomed the page in and
 *    threw the whole layout off - that's the "zoom" complaint.
 *
 * 2. Send button "hides": the panel used to be a small box pinned near the
 *    bottom of the *layout* viewport (bottom: 78px, height: 74vh). iOS
 *    Safari does NOT shrink the layout viewport when the keyboard opens -
 *    it only shrinks the *visual* viewport (the part actually visible
 *    above the keyboard) - so a box positioned/sized against the layout
 *    viewport can have its lower portion, including the input row and
 *    send button, sit underneath the keyboard: still "there" but not
 *    visible or tappable.
 *
 * Fix: below 600px width the panel becomes a fixed fullscreen sheet whose
 * height/position are driven by --ceca-vvh / --ceca-vv-offset - CSS
 * variables chat-widget.js keeps in sync with window.visualViewport (the
 * one API that *does* reflect the keyboard-shrunk visible area). That
 * guarantees the input row is always inside the visible region, never
 * behind the keyboard. Falls back to 100vh/0 on older browsers with no
 * visualViewport support.
 */
@media (max-width: 600px) {
	body.ceca-panel-open { overflow: hidden; }

	#ceca-chat-root .ceca-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: auto;
		width: 100%;
		max-width: 100%;
		border-radius: 0;
		padding-top: env(safe-area-inset-top);
		/*
		 * Three layers, weakest to strongest, each only used if the browser
		 * understands it - a browser that doesn't recognize a value ignores
		 * that whole declaration and keeps whatever came before it:
		 *
		 *  1. 100vh - works everywhere, but on mobile this includes space
		 *     the collapsible address bar can cover, and never shrinks for
		 *     an open keyboard, which is the root cause of the send button
		 *     hiding underneath it.
		 *  2. 100dvh - the "dynamic viewport height" unit, built into every
		 *     current mobile browser specifically to solve #1: it already
		 *     tracks the real visible area (address bar AND keyboard) with
		 *     zero JavaScript involved, so this alone fixes the hidden
		 *     send button even if chat-widget.js never runs or is slow to.
		 *  3. var(--ceca-vv-offset/--ceca-vvh, ...) - chat-widget.js mirrors
		 *     window.visualViewport onto these as a further enhancement
		 *     (mainly for iOS's visual-viewport *offset* when the page
		 *     itself has scrolled), falling back to plain 100dvh above if
		 *     the variable isn't set for any reason.
		 */
		top: 0;
		top: var(--ceca-vv-offset, 0px);
		height: 100vh;
		height: 100dvh;
		height: var(--ceca-vvh, 100dvh);
		max-height: 100vh;
		max-height: 100dvh;
		max-height: var(--ceca-vvh, 100dvh);
	}

	/* Header/input/footer must never be squeezed by the flex layout above -
	   only .ceca-messages (flex:1) should ever shrink or grow. */
	.ceca-header, .ceca-input-row, .ceca-footer { flex-shrink: 0; }

	.ceca-input-row {
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
	}

	/*
	 * 16px stops the iOS Safari auto-zoom-on-focus described above.
	 * !important so nothing the host theme/page-builder loads elsewhere
	 * on the page can quietly win the cascade and drop this back under
	 * 16px - chat-widget.js also locks the page's own zoom capability
	 * while the field is focused as a second, independent layer of
	 * protection (see the viewport-meta handling in chat-widget.js).
	 */
	.ceca-input-row input[type=text],
	.ceca-input-row input[type=email],
	.ceca-input-row input[type=tel] {
		font-size: 16px !important;
	}

	/* Slightly larger tap target for the send button on touch screens. */
	.ceca-send-btn { width: 44px; height: 44px; font-size: 16px; flex-shrink: 0; }
}