/* Every colour and font here is a custom property the plugin sets from the
   WordPress settings screen, so the clinic restyles the widget without touching
   this file. Only layout lives here. */
.dcw {
	--dcw-brand: #978c6f;
	--dcw-on-brand: #fff;
	--dcw-bg: #fff;
	--dcw-fg: #23282d;
	--dcw-muted: #6b7280;
	--dcw-line: #e6e4df;
	--dcw-bot-bg: #f4f2ed;
	--dcw-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--dcw-radius: 16px;
	font-family: var(--dcw-font);
}

/* The widget renders inside the clinic's own theme, not in an iframe, so every
   rule the theme writes for `button`, `input` or `textarea` lands on ours too.
   Our rules set font, colour and padding, so those were safe. What leaked was a
   property we never thought to declare: dental-aesthetics.gr ships
   `button { letter-spacing: 3px }`, which stretched «Κλείστε ραντεβού» wide
   enough to shove the action row past the panel edge and made the send button
   look twice its size. A bare `button` selector is weaker than `.dcw__action` —
   it won only because we were silent, which is the failure mode worth closing
   for good: it appears on the live site and never on the demo page, because the
   demo has no theme to leak.

   So reset the inherited typography once, here, rather than chasing a theme's
   habits control by control in CSS we do not own.

   This block must stay at the top of the file. `.dcw *` and `.dcw__ai` have the
   same specificity, so the AI badge keeps its own letter-spacing only because it
   is declared later; move the reset down and the badge loses its tracking. The
   language buttons are safe either way — `.dcw__langs button` outranks it. */
.dcw,
.dcw * {
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	font-style: normal;
	font-variant: normal;
	/* Every size below is written assuming padding sits inside the box. The
	   theme happens to set this globally today; the widget should not depend on
	   the next theme doing the same. */
	box-sizing: border-box;
}

/* These do not inherit, so they are reset on our controls rather than on every
   node — blanket-resetting box-shadow here would take the launcher's own with
   it. */
.dcw button,
.dcw input,
.dcw textarea {
	min-width: 0;
	max-width: none;
	background-image: none;
	text-decoration: none;
}

.dcw__launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	width: 60px;
	height: 60px;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--dcw-brand);
	color: var(--dcw-on-brand);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.dcw__launcher:hover { filter: brightness(1.06); }
.dcw__launcher svg { width: 26px; height: 26px; display: block; }
.dcw__launcher[hidden] { display: none; }

.dcw__panel {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	background: var(--dcw-bg);
	color: var(--dcw-fg);
	border-radius: var(--dcw-radius);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .26);
	overflow: hidden;
}
.dcw__panel[hidden] { display: none; }

/* Calendly's overlay ships z-index:9999, which is under the widget — the modal
   opened from inside the chat would render behind it. Its stylesheet loads
   after ours (on the first booking click), so !important is what wins. */
.calendly-overlay { z-index: 2147483001 !important; padding: 24px; }
/* And its popup is min-width:900px, which cancels that padding on any window
   narrower than ~950px by simply overflowing it. */
.calendly-overlay .calendly-popup { min-width: 0; }

.dcw__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 12px 12px 16px;
	background: var(--dcw-brand);
	color: var(--dcw-on-brand);
}
.dcw__title { font-size: 15px; font-weight: 600; margin: 0; flex: 1; line-height: 1.3; }

/* The AI badge is deliberately not decorative: it is the persistent, always
   visible signal that this is not a person (EU AI Act art. 50), which is why it
   sits in the header rather than only in the first message a patient scrolls past. */
.dcw__ai {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	border: 1px solid rgba(255, 255, 255, .45);
}

.dcw__langs { display: flex; gap: 2px; }
.dcw__langs button {
	border: 0;
	background: rgba(255, 255, 255, .16);
	color: inherit;
	font: 600 11px/1 var(--dcw-font);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 5px 7px;
	border-radius: 6px;
	cursor: pointer;
}
.dcw__langs button[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: var(--dcw-brand); }

/* Same weight as the close button beside it: ending the conversation is the
   patient's own housekeeping, not a warning. */
.dcw__del {
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	padding: 4px;
	border-radius: 6px;
	opacity: .75;
}
.dcw__del:hover, .dcw__del:focus-visible { opacity: 1; background: rgba(255, 255, 255, .18); }
.dcw__del[hidden] { display: none; }

.dcw__close {
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 6px;
}

.dcw__log {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--dcw-bg);
	/* Without this, flicking past the last message scrolls the clinic's page
	   behind the panel — on a phone the panel covers the screen, so the page
	   silently moves under a surface the patient thinks is the whole app. */
	overscroll-behavior: contain;
}

.dcw__msg {
	max-width: 84%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.dcw__msg--bot { align-self: flex-start; background: var(--dcw-bot-bg); border-bottom-left-radius: 4px; }
.dcw__msg--me { align-self: flex-end; background: var(--dcw-brand); color: var(--dcw-on-brand); border-bottom-right-radius: 4px; }
.dcw__msg--err { align-self: center; background: transparent; color: var(--dcw-muted); font-size: 13px; text-align: center; }
.dcw__msg a { color: inherit; text-decoration: underline; }

/* The clinic's own article on the subject, under the answer it belongs to —
   not in the action row, where it would outlive the answer and go stale. */
.dcw__chips { align-self: flex-start; display: flex; margin: -4px 0 0 2px; max-width: 84%; }
.dcw__chip {
	border: 1px solid var(--dcw-brand);
	border-radius: 999px;
	padding: 6px 12px;
	color: var(--dcw-brand);
	font: 600 12px/1.3 var(--dcw-font);
	text-decoration: none;
	/* Knowledge-base titles are written for the knowledge base, not for a pill:
	   one line, cut with an ellipsis, full text in the tooltip and aria-label. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dcw__chip:hover, .dcw__chip:focus-visible { background: var(--dcw-brand); color: var(--dcw-on-brand); }

/* Thumbs under an answer. Pulled up into the log's own 10px gap so the row
   belongs to the bubble above it rather than floating between two answers. */
.dcw__fb {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 2px;
	margin: -6px 0 0 2px;
	min-height: 22px;
	font-size: 12px;
	color: var(--dcw-muted);
}
.dcw__fbBtn {
	border: 0;
	background: transparent;
	color: var(--dcw-muted);
	cursor: pointer;
	display: inline-flex;
	padding: 3px 5px;
	border-radius: 6px;
	opacity: .65;
}
.dcw__fbBtn:hover, .dcw__fbBtn:focus-visible { opacity: 1; background: var(--dcw-bot-bg); }
/* A thumbs-down is a thumbs-up turned upside down, which is what the glyph is. */
.dcw__fbBtn--down svg { transform: rotate(180deg); }

.dcw__dots { align-self: flex-start; display: flex; gap: 4px; padding: 13px; background: var(--dcw-bot-bg); border-radius: 14px; border-bottom-left-radius: 4px; }
.dcw__dots[hidden] { display: none; }
.dcw__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--dcw-muted); animation: dcw-blink 1.3s infinite; }
.dcw__dots i:nth-child(2) { animation-delay: .18s; }
.dcw__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dcw-blink { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dcw__dots i { animation: none; opacity: .6; } }

/* Book / talk to a human / call / email. Scrolls sideways rather than wrapping
   into a second row, so the panel never changes height as the language changes. */
.dcw__actions {
	display: flex;
	gap: 8px;
	padding: 10px;
	background: var(--dcw-bg);
	overflow-x: auto;
	scrollbar-width: none;
}
.dcw__actions::-webkit-scrollbar { display: none; }
.dcw__actions[hidden] { display: none; }
.dcw__action {
	flex: 0 0 auto;
	border: 1px solid var(--dcw-brand);
	border-radius: 999px;
	padding: 7px 14px;
	background: transparent;
	color: var(--dcw-brand);
	font: 600 13px/1 var(--dcw-font);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.dcw__action:hover { background: var(--dcw-brand); color: var(--dcw-on-brand); }
.dcw__action--book { background: var(--dcw-brand); color: var(--dcw-on-brand); }
.dcw__action--book:hover { opacity: .9; }

.dcw__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--dcw-line); background: var(--dcw-bg); }
.dcw__input {
	flex: 1;
	resize: none;
	border: 1px solid var(--dcw-line);
	border-radius: 10px;
	padding: 10px 12px;
	font: 400 14px/1.4 var(--dcw-font);
	color: var(--dcw-fg);
	background: var(--dcw-bg);
	max-height: 96px;
}
.dcw__input:focus { outline: 2px solid var(--dcw-brand); outline-offset: -1px; }
.dcw__send {
	border: 0;
	border-radius: 10px;
	padding: 0 14px;
	background: var(--dcw-brand);
	color: var(--dcw-on-brand);
	font: 600 14px/1 var(--dcw-font);
	cursor: pointer;
}
.dcw__send:disabled { opacity: .5; cursor: default; }

.dcw :focus-visible { outline: 2px solid #1f93ff; outline-offset: 2px; }

/* Phones: the panel *is* the screen, anchored on all four sides.
   Anchoring instead of setting a height is the whole fix for "the input row is
   off the bottom and nothing scrolls": 100vh on mobile resolves against the
   *large* viewport — the height the page would have with the address bar
   hidden — so a panel sized `calc(100vh - 16px)` is ~80-95px taller than what
   the patient can actually see. The composer ends up under the browser chrome,
   and because the panel itself is `overflow: hidden` there is nothing to scroll
   to reach it. Four anchors need no viewport unit and cannot drift. */
@media (max-width: 480px) {
	.dcw__panel {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		max-height: none;
		border-radius: 0;
		/* Not `inset: 0`. iOS does not shrink the layout viewport when the
		   keyboard opens, so a panel anchored to the bottom keeps its full height,
		   the composer ends up behind the keyboard, and Safari scrolls the whole
		   page up to chase the caret — the patient watches the header slide off
		   the top. These two are written from window.visualViewport, the only
		   thing that knows the keyboard is there, so the panel simply becomes the
		   size of what is actually visible. The fallback is for the browsers
		   without that API, where the keyboard resizes the viewport anyway. */
		top: var(--dcw-vtop, 0px);
		bottom: auto;
		height: var(--dcw-vh, 100dvh);
	}

	/* Edge-to-edge means the notch and the home indicator are now ours. */
	.dcw__header { padding-top: calc(12px + env(safe-area-inset-top)); }
	.dcw__form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

}

.dcw__launcher {
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
}

/* A fingertip is not a cursor: 44px is Apple's floor, 48dp Material's. Scoped
   to coarse pointers so the desktop panel keeps its compact chrome. */
@media (pointer: coarse) {
	.dcw__langs button,
	.dcw__del,
	.dcw__close,
	.dcw__fbBtn {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.dcw__action,
	.dcw__send { min-height: 44px; }

	/* iOS zooms the whole page when a focused field is under 16px, leaving the
	   patient zoomed into half a panel mid-sentence with no way back. Keyed to
	   the pointer, not the width: a landscape phone and a tablet are both wider
	   than 480px and both still do it. */
	.dcw__input { font-size: 16px; }
	/* The thumbs row set its own height for the tight desktop rhythm. */
	.dcw__fb { min-height: 44px; }
}