/**
 * Gaivota Interieur-Concierge widget.
 * Right-side drawer in a restrained luxury palette.
 * Bump GVT_VERSION on any change (cache-bust #37).
 *
 * v0.9.0: every value below is a DEFAULT ONLY. GVT_Widget_Theme emits an inline
 * override block on this stylesheet's handle, so a themed site paints correctly
 * on the first frame. Do not hardcode a themable colour anywhere below — add it
 * to GVT_Widget_Theme::FIELDS and reference the custom property instead.
 */
#gvt-chat, .gvt-chat-triggers {
	--gvt-brand: #2a2723;                  /* warm charcoal */
	--gvt-accent: #7c8a6e;                 /* muted olive */
	--gvt-grad-a: #3a352f;
	--gvt-grad-b: #1e1b18;
	--gvt-gradient: linear-gradient(135deg, var(--gvt-grad-a) 0%, var(--gvt-grad-b) 100%);
	--gvt-bg: #ffffff;
	--gvt-canvas: #f7f4ef;                 /* message-list background */
	--gvt-user-bubble: #efeae1;
	--gvt-text: #2a2723;
	--gvt-text-light: #6f675e;
	--gvt-border: #e5ded2;
	--gvt-radius: 12px;
	--gvt-panel-width: 420px;
	--gvt-font-size: 15px;
	--gvt-shadow: 0 6px 26px rgba(0, 0, 0, 0.14);
	/* Not themable, deliberately: inline_css() only emits properties named in
	   GVT_Widget_Theme::FIELDS, so these two can never be overridden and never
	   drift. An error must still read as an error, so they keep a warm-brick
	   hue — desaturated, and never used as a button fill. */
	--gvt-error: #7d4f45;                  /* 6.2:1 on canvas */
	--gvt-error-border: #b79b8a;
	position: fixed;
	z-index: 999999;
	pointer-events: none;                  /* only interactive children re-enable */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--gvt-font-size);
	color: var(--gvt-text);
	line-height: 1.5;
}
#gvt-chat.gvt-chat-bottom-right { right: 20px; bottom: 20px; left: auto; top: auto; }
#gvt-chat.gvt-chat-bottom-left { left: 20px; bottom: 20px; right: auto; top: auto; }
#gvt-chat * { box-sizing: border-box; }

/* ---- Toggle ---- */
.gvt-chat-toggle {
	pointer-events: auto;
	position: relative;
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 999px;
	background: var(--gvt-gradient);
	color: var(--gvt-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--gvt-shadow);
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.gvt-chat-toggle:hover { transform: scale(1.05); opacity: 0.96; }
.gvt-chat-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--gvt-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---- Overlay (mobile) ---- */
.gvt-chat-overlay {
	pointer-events: auto;
	position: fixed;
	inset: 0;
	background: rgba(28, 28, 28, 0.35);
	z-index: 999998;
	display: none;
}

/* ---- Window (right-side drawer) ---- */
.gvt-chat-window {
	pointer-events: auto;
	position: fixed;
	/* Must sit ABOVE .gvt-chat-overlay (999998). Both are children of #gvt-chat,
	   so they share one stacking context; without this the window computes to
	   z-index:auto and the overlay — revealed at <=1024px — paints over the whole
	   panel. Every click inside the chat then hit the overlay, which closes it,
	   making the widget unusable on tablets and narrow desktop windows. */
	z-index: 999999;
	top: 0;
	right: 0;
	width: var(--gvt-panel-width);
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: var(--gvt-bg);
	box-shadow: -6px 0 30px rgba(0, 0, 0, 0.16);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.gvt-chat-window.gvt-open { transform: translateX(0); }

/* Desktop: inset rounded floating panel */
@media (min-width: 768px) {
	.gvt-chat-window {
		top: 1rem;
		right: 1rem;
		height: calc(100dvh - 2rem);
		border-radius: 16px;
	}
}
/* Mobile: full screen + show overlay + lock scroll */
@media (max-width: 767px) {
	.gvt-chat-window { width: 100%; max-width: 100%; }
}
@media (max-width: 1024px) {
	html.gvt-chat-open, body.gvt-chat-open { overflow: hidden; }
	body.gvt-chat-open #gvt-chat-overlay { display: block; }
}

/* ---- Header ---- */
/* v0.12.3 — the brand is a centred COLUMN: logo on its own row, "AI Assistent"
   underneath it. The close button leaves the flow (position:absolute) because a
   flex sibling would pull the logo off centre by exactly half its width. */
.gvt-chat-header {
	position: relative;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 14px 52px;
	background: #021B5D;
	color: #fff;
	text-align: center;
}
.gvt-chat-header-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 0;
	max-width: 100%;
}
.gvt-chat-brandmark-logo {
	display: block;
	width: auto;
	height: 34px;
	max-width: 170px;
	object-fit: contain;
}
/* Fallback row when no logo is uploaded: diamond + agency name stay inline. */
.gvt-chat-brandmark-fallback { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gvt-chat-brandmark { color: var(--gvt-accent); font-size: 14px; }
.gvt-chat-brandname {
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gvt-chat-subtitle {
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.78);
}
.gvt-chat-header-actions {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	gap: 8px;
}
.gvt-chat-minimize {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
}
.gvt-chat-minimize:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Messages ---- */
.gvt-chat-messages-wrap { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.gvt-chat-messages {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--gvt-canvas);
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
}
.gvt-chat-messages::-webkit-scrollbar { width: 6px; }
.gvt-chat-messages::-webkit-scrollbar-thumb { background: var(--gvt-border); border-radius: 3px; }

.gvt-chat-empty-state { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
.gvt-chat-empty-title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	color: var(--gvt-text);
}

/* Bubbles */
.gvt-message { max-width: 90%; animation: gvtFadeIn 0.28s ease; }
@keyframes gvtFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.gvt-message--user { align-self: flex-end; }
.gvt-message--user .gvt-message-content {
	padding: 11px 15px;
	border-radius: 16px 16px 6px 16px;
	background: var(--gvt-brand);
	color: #fff;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.gvt-message--assistant { align-self: flex-start; max-width: 96%; }
.gvt-message--assistant .gvt-message-inner { display: flex; gap: 10px; align-items: flex-start; }
.gvt-message-avatar {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--gvt-brand);
	color: var(--gvt-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	overflow: hidden;
}
/* Inset inside the 28px disc so a square mark is not clipped by the radius. */
.gvt-avatar-logo {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}
.gvt-message--assistant .gvt-message-content {
	flex: 1;
	min-width: 0;
	padding: 2px 0;
	background: transparent;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.gvt-message--error .gvt-message-content { color: var(--gvt-error); }
.gvt-message--streaming .gvt-message-content::after {
	content: "\258D";                       /* ▍ blinking cursor while streaming */
	margin-left: 1px;
	color: var(--gvt-accent);
	animation: gvtCursor 1s steps(1) infinite;
}
@keyframes gvtCursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---- Typing ---- */
.gvt-chat-typing { flex-shrink: 0; padding: 0 16px 10px; }
/* The 54px left padding here used to STAND IN for the avatar (16 + 28 + 10).
   There is a real avatar in the row now, so the padding has to go or the dots
   sit one avatar-width too far right. */
.gvt-typing-row { display: flex; align-items: center; gap: 10px; padding-top: 12px; }
.gvt-typing-dots { display: inline-flex; gap: 4px; padding: 0; }
.gvt-typing-text { font-size: 13px; color: var(--gvt-text-light); font-style: italic; }
.gvt-typing-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gvt-accent);
	animation: gvtTyping 1.4s infinite both;
}
.gvt-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.gvt-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes gvtTyping { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* ---- Input ---- */
.gvt-chat-input-area {
	flex-shrink: 0;
	padding: 12px 15px;
	padding-bottom: max(12px, env(safe-area-inset-bottom));
	background: var(--gvt-bg);
	border-top: 1px solid var(--gvt-border);
}
.gvt-chat-form { display: flex; gap: 10px; align-items: flex-end; }
.gvt-chat-input {
	flex: 1;
	border: 1px solid var(--gvt-border);
	border-radius: 22px;
	background: var(--gvt-bg);
	color: var(--gvt-text);
	padding: 11px 16px;
	font-family: inherit;
	font-size: 16px;              /* avoids iOS zoom */
	line-height: 1.4;
	resize: none;
	min-height: 44px;
	max-height: 110px;
	outline: none;
}
.gvt-chat-input:focus { border-color: var(--gvt-accent); }
.gvt-chat-send {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 999px;
	background: var(--gvt-accent);
	/* The one place the accent still fills a control. Themable ink rather
	   than a hardcoded near-black, which ignored the theme entirely. */
	color: var(--gvt-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.gvt-chat-send:hover { transform: scale(1.04); }
.gvt-chat-send:disabled { opacity: 0.5; cursor: default; }

/* Image attach button + uploaded image bubble */
.gvt-chat-attach {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--gvt-text-light);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.gvt-chat-attach:hover { color: var(--gvt-text); }

/* The file input is hidden but must stay programmatically clickable. A
   display:none input is the fragile variant of that pattern on mobile
   WebKit, so it is taken out of flow instead of out of the box tree. */
.gvt-chat-file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.gvt-message-content--image { padding: 4px; }
.gvt-message-image { display: block; max-width: 200px; max-height: 200px; border-radius: 10px; }

.gvt-chat-credit { padding: 0 12px 10px; font-size: 11px; color: #999; text-align: center; }
.gvt-chat-credit-link { color: #999; }

/* ---- Greeting bubble ---- */
.gvt-chat-greeting {
	pointer-events: auto;
	position: absolute;
	bottom: 75px;
	width: 280px;
	max-width: 280px;
	background: var(--gvt-bg);
	padding: 12px 34px 12px 15px;
	border-radius: var(--gvt-radius);
	box-shadow: var(--gvt-shadow);
	animation: gvtSlideUp 0.3s ease;
}
#gvt-chat.gvt-chat-bottom-right .gvt-chat-greeting { right: 0; }
#gvt-chat.gvt-chat-bottom-left .gvt-chat-greeting { left: 0; }
.gvt-chat-greeting p { margin: 0; font-size: 14px; color: var(--gvt-text); }
.gvt-greeting-close {
	position: absolute;
	top: 8px;
	right: 10px;
	border: none;
	background: none;
	color: var(--gvt-text-light);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
@keyframes gvtSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Scroll-to-bottom ---- */
.gvt-chat-scroll-to-bottom {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 999px;
	background: var(--gvt-brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
	z-index: 5;
}

/* ---- Trigger pills ---- */
.gvt-chat-triggers {
	pointer-events: none;
	position: fixed;
	z-index: 999999;
	bottom: 92px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.gvt-chat-triggers.gvt-chat-bottom-right { right: 20px; align-items: flex-end; }
.gvt-chat-triggers.gvt-chat-bottom-left { left: 20px; align-items: flex-start; }
body.gvt-chat-open .gvt-chat-triggers { display: none; }
.gvt-chat-trigger {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	margin: 6px 0;
	background: var(--gvt-bg);
	color: var(--gvt-text);
	border: 1px solid var(--gvt-border);
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gvt-chat-trigger:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); }
.gvt-chat-trigger-arrow { color: var(--gvt-accent); }

@media (max-width: 480px) {
	#gvt-chat.gvt-chat-bottom-right, #gvt-chat.gvt-chat-bottom-left { right: 16px; left: auto; bottom: 16px; }
	.gvt-chat-triggers { right: 16px; left: auto; }
	.gvt-chat-greeting { right: 0; left: auto; }
}

/* ---------------------------------------------------------------------------
   Guided button flows (v0.10.0).

   Every colour here is an existing theme custom property, so a client palette
   applies to the buttons for free — no new knobs, nothing to keep in sync.
   --------------------------------------------------------------------------- */
.gvt-actions,
.gvt-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 4px 38px;
}
/* Matches the panel's own 767px full-bleed breakpoint, not 480px — see the
   mobile image block further down for why the two must agree. */
@media (max-width: 767px) {
	.gvt-actions, .gvt-choices { margin-left: 0; }
}

.gvt-action,
.gvt-choice {
	flex: 0 1 auto;
	max-width: 100%;
	padding: 10px 16px;
	border: 1px solid var(--gvt-accent);
	border-radius: 999px;
	background: var(--gvt-bg);
	color: var(--gvt-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
/* Hover fills with the BRAND, not the accent.
   An accent light enough to sit on the dark brand (send button, toggle icon)
   can never also be dark enough to carry white text: filling with the accent
   gave white-on-accent 2.5:1 with the old brass, well under the 4.5:1 body
   text needs. Filling with the brand is 14.9:1 and has the nicer side effect
   of previewing the picked state — .gvt-choice.is-picked below is identical. */
.gvt-action:hover,
.gvt-choice:hover {
	background: var(--gvt-brand);
	color: #fff;
	border-color: var(--gvt-brand);
	transform: translateY(-1px);
}
.gvt-action:focus-visible,
.gvt-choice:focus-visible { outline: 2px solid var(--gvt-brand); outline-offset: 2px; }

/* The opening pair carries more weight than an in-flow answer. */
.gvt-action { font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }

/* Answered: the row collapses to the chosen chip and moves to the visitor's
   side, so it reads as their reply. Keeping the unpicked options would double
   the scrolling on a phone for no information gain. */
.gvt-choice:disabled { cursor: default; transform: none; }
.gvt-choice.is-picked { background: var(--gvt-brand); color: #fff; border-color: var(--gvt-brand); }
.gvt-choices--answered { justify-content: flex-end; margin-left: 0; margin-right: 0; }
.gvt-choice--ghost { border-color: var(--gvt-border); color: var(--gvt-text-light); }
.gvt-choice--ghost:hover { background: var(--gvt-border); color: var(--gvt-text); }

.gvt-freetext {
	flex: 1 1 180px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--gvt-border);
	border-radius: 999px;
	background: var(--gvt-bg);
	color: var(--gvt-text);
	font-family: inherit;
	font-size: 16px;              /* avoids iOS zoom */
	outline: none;
}
.gvt-freetext:focus { border-color: var(--gvt-accent); }

@media (prefers-reduced-motion: reduce) {
	.gvt-action, .gvt-choice { transition: none; }
	.gvt-action:hover, .gvt-choice:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Tool job panel (v0.7.0) — staged progress while an impression is generated,
   then the result. Steps are driven by real server status, never a fake timer.
   --------------------------------------------------------------------------- */
.gvt-job {
	margin: 10px 0 10px 44px;
	padding: 14px 16px;
	background: var(--gvt-user-bubble);
	border: 1px solid var(--gvt-border);
	border-radius: 4px;
}
.gvt-job-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: gvt-step;
}
.gvt-job-steps li {
	position: relative;
	padding: 4px 0 4px 24px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gvt-text-light);
	opacity: 0.55;
}
.gvt-job-steps li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gvt-border);
}
.gvt-job-steps li.is-done { opacity: 0.75; }
.gvt-job-steps li.is-done::before { background: var(--gvt-accent); }
.gvt-job-steps li.is-active {
	opacity: 1;
	color: var(--gvt-text);
}
.gvt-job-steps li.is-active::before {
	background: var(--gvt-accent);
	animation: gvt-job-pulse 1.4s ease-in-out infinite;
}
@keyframes gvt-job-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.6); opacity: 0.45; }
}
.gvt-job-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}
.gvt-job-note {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--gvt-text-light);
	font-style: italic;
}
.gvt-job--error { border-color: var(--gvt-error-border); }

/* v0.15.0 — marks the messages restored from an earlier page. */
.gvt-history-note {
	margin: 4px 0 12px;
	font-size: 12px;
	text-align: center;
	color: var(--gvt-text-light);
	letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
	.gvt-job-steps li.is-active::before { animation: none; }
}

/* Tool 2 — mood grid (2x2). */
.gvt-moods {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 10px 0 10px 44px;
}
.gvt-mood {
	position: relative;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	transition: border-color 0.15s ease;
}
.gvt-mood img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.gvt-mood:hover { border-color: var(--gvt-border); }
.gvt-mood.is-picked { border-color: var(--gvt-accent); }
.gvt-mood.is-picked::after {
	content: "\2713";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 12px;
	color: #fff;
	background: var(--gvt-brand);          /* white needs the brand, not the accent */
	border-radius: 50%;
}

/* Tool 3 — reference project cards. */
.gvt-projects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 10px 0 10px 44px;
}
.gvt-project {
	display: block;
	border: 1px solid var(--gvt-border);
	border-radius: 3px;
	overflow: hidden;
	text-decoration: none;
	background: var(--gvt-bg);
	transition: border-color 0.15s ease;
}
.gvt-project:hover { border-color: var(--gvt-accent); }
.gvt-project img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gvt-project-title {
	display: block;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--gvt-text);
}

/* ---------------------------------------------------------------------------
   Mobile image presentation (v0.12.2).

   The panel goes full-bleed at 767px (see the .gvt-chat-window block), but the
   grids and indents used to reset only at 480px. That mismatch left every
   phone in landscape and every small tablet with a 44px right-shift and no
   compensating right margin, and it kept the cards two-up at widths where a
   card is ~167px — too small to see what the image actually shows.

   So: one column below 768px, and the indent reset moved to the SAME
   breakpoint as the panel. .gvt-job is included here because it was in
   neither of the old reset blocks — the generated impression, the hero
   deliverable of the whole flow, was rendering at ~265px inside a 375px panel.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.gvt-moods, .gvt-projects, .gvt-job { margin-left: 0; margin-right: 0; }
	.gvt-moods, .gvt-projects { grid-template-columns: 1fr; }
}

/* ===========================================================================
   HOST-THEME ARMOUR (v0.11.0)
   ---------------------------------------------------------------------------
   Everything above is written as if this stylesheet were the only one on the
   page. On sam.gaivota.nl it is not: the Elementor kit emits global rules like
   `.elementor-kit-NNN button { ... }` in the site's own magenta. That is
   specificity 0,2,0 against our 0,1,0, so it won every control in the widget —
   the send button rendered as an outlined square instead of a filled circle,
   the close X grew a border it was never given, and the round toggle went
   square. The visitor saw a pink widget on a studio site that had just been
   repainted olive.

   Raising specificity alone is not enough when the host uses !important, so
   this block does both: an id-scoped selector (1,1,0) AND !important on the
   handful of properties a page builder actually hijacks. Scoped to our two
   roots, so nothing here can leak back out onto the site.

   Keep this block LAST — source order is the final tie-breaker.
   =========================================================================== */

/* Tier 1 — neutralise inherited chrome on every control we own. */
#gvt-chat button,
#gvt-chat input,
#gvt-chat textarea,
#gvt-chat a,
#gvt-chat-triggers button,
.gvt-chat-triggers button {
	font-family: inherit !important;
	font-weight: inherit;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	margin: 0;
	min-height: 0 !important;
	min-width: 0 !important;
	max-width: none !important;
	outline-offset: 2px;
	-webkit-appearance: none;
	appearance: none;
	filter: none !important;
}
#gvt-chat button:hover,
#gvt-chat-triggers button:hover,
.gvt-chat-triggers button:hover {
	filter: none !important;
}

/* Images too. A page builder that frames every <img> on the site frames the
   ones inside the widget: the project cards came back with a magenta border in
   exactly the way the buttons did. Radius is reset here and re-asserted below
   where a rule actually wants one. */
#gvt-chat img,
#gvt-chat-triggers img,
.gvt-chat-triggers img {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: none !important;
	max-width: 100% !important;
}

/* Tier 2 — re-assert the shape and colour of each control. */

/* Round toggle with the accent glyph on the gradient. */
#gvt-chat .gvt-chat-toggle {
	width: 60px !important;
	height: 60px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--gvt-gradient) !important;
	color: var(--gvt-accent) !important;
	box-shadow: var(--gvt-shadow) !important;
}

/* v0.12.3 — CENTRING is a hijackable property too. Every icon control here is
   centred by `display:flex` in the base rules, and NONE of the tier-2 blocks
   re-asserted it: a host `button { display:inline-block }` (plus whatever
   line-height / text-align / vertical-align the theme sets) drops the glyph
   out of the middle of the circle. Reported on the live site as an uploaded
   logo sitting low and right inside the toggle; reproduced locally under a
   hostile stylesheet, which parked it top-left instead — the direction depends
   on the host theme, the cause does not.

   Same lesson as the img armour, one level further: enumerate the PROPERTIES a
   page builder hijacks. Size, colour and shape were armoured; LAYOUT was not. */
#gvt-chat .gvt-chat-toggle,
#gvt-chat .gvt-chat-minimize,
#gvt-chat .gvt-chat-scroll-to-bottom,
#gvt-chat .gvt-chat-attach,
#gvt-chat .gvt-chat-send,
#gvt-chat .gvt-greeting-close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	text-align: center !important;
	vertical-align: middle !important;
}
/* ...but forcing `display` on a control whose VISIBILITY is toggled at runtime
   pins it on screen: a stylesheet !important beats an inline style, so the
   scroll-to-bottom chevron floated over the transcript permanently. It is
   toggled by this class now (chat-widget.js onScroll), and the hidden state
   has to sit after -- and outrank -- the armour above.
   Rule: never armour `display` on something JS shows and hides, unless the
   hidden state is armoured too. */
#gvt-chat .gvt-chat-scroll-to-bottom.gvt-is-hidden {
	display: none !important;
}
#gvt-chat .gvt-chat-badge {
	border: none !important;
	border-radius: 999px !important;
	background: var(--gvt-brand) !important;
	color: #fff !important;
}

/* Header close: no border, no fill — it sits on the brand bar. */
#gvt-chat .gvt-chat-minimize {
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
}
#gvt-chat .gvt-chat-minimize:hover {
	background: rgba(255, 255, 255, 0.12) !important;
}

#gvt-chat .gvt-chat-scroll-to-bottom {
	border: none !important;
	border-radius: 999px !important;
	background: var(--gvt-brand) !important;
	color: #fff !important;
}

/* Attach is a quiet icon button, not a call to action. */
#gvt-chat .gvt-chat-attach {
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--gvt-text-light) !important;
	box-shadow: none !important;
}
#gvt-chat .gvt-chat-attach:hover { color: var(--gvt-text) !important; }

/* Send is the one filled circle in the widget. */
#gvt-chat .gvt-chat-send {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--gvt-accent) !important;
	color: var(--gvt-text) !important;
	box-shadow: none !important;
}

/* The flow buttons: outlined pills that fill with the brand on hover. */
#gvt-chat .gvt-action,
#gvt-chat .gvt-choice {
	border: 1px solid var(--gvt-accent) !important;
	border-radius: 999px !important;
	background: var(--gvt-bg) !important;
	color: var(--gvt-text) !important;
}
#gvt-chat .gvt-action { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; }
#gvt-chat .gvt-choice { box-shadow: none !important; }
#gvt-chat .gvt-action:hover,
#gvt-chat .gvt-choice:hover,
#gvt-chat .gvt-choice.is-picked {
	background: var(--gvt-brand) !important;
	border-color: var(--gvt-brand) !important;
	color: #fff !important;
}
#gvt-chat .gvt-choice--ghost {
	border-color: var(--gvt-border) !important;
	background: var(--gvt-bg) !important;
	color: var(--gvt-text-light) !important;
}
#gvt-chat .gvt-choice--ghost:hover {
	background: var(--gvt-border) !important;
	border-color: var(--gvt-border) !important;
	color: var(--gvt-text) !important;
}

/* Free-text step and the message box. */
#gvt-chat .gvt-freetext,
#gvt-chat .gvt-chat-input {
	border: 1px solid var(--gvt-border) !important;
	background: var(--gvt-bg) !important;
	color: var(--gvt-text) !important;
	box-shadow: none !important;
}
#gvt-chat .gvt-freetext { border-radius: 999px !important; }
#gvt-chat .gvt-freetext:focus,
#gvt-chat .gvt-chat-input:focus {
	border-color: var(--gvt-accent) !important;
	outline: none !important;
}

/* Mood tiles and project cards are picture-first; no button chrome. */
#gvt-chat .gvt-mood {
	padding: 0 !important;
	border: 2px solid transparent !important;
	background: none !important;
	box-shadow: none !important;
}
#gvt-chat .gvt-mood.is-picked { border-color: var(--gvt-accent) !important; }
#gvt-chat .gvt-project {
	border: 1px solid var(--gvt-border) !important;
	border-radius: 3px !important;
	background: var(--gvt-bg) !important;
	color: var(--gvt-text) !important;
	box-shadow: none !important;
}
#gvt-chat .gvt-project:hover { border-color: var(--gvt-accent) !important; }

#gvt-chat .gvt-greeting-close {
	border: none !important;
	background: transparent !important;
	color: var(--gvt-text-light) !important;
	box-shadow: none !important;
}

/* The images that do want a corner back. */
#gvt-chat .gvt-job-image { border-radius: 3px !important; }
#gvt-chat .gvt-project img { border-radius: 0 !important; }

/* The visitor's own uploaded photo. Tier 1 above sets border-radius: 0 and
   max-width: 100% with !important, which beat the plain .gvt-message-image
   rule on specificity-vs-importance — so the one surface the visitor
   contributed was the only square-cornered thing in a rounded widget. On a
   full-bleed mobile panel the 200px cap also made their photo a stamp. */
#gvt-chat .gvt-message-image {
	border-radius: 10px !important;
	max-width: 200px !important;
	max-height: 200px !important;
}
@media (max-width: 767px) {
	#gvt-chat .gvt-message-image {
		max-width: 70% !important;
		max-height: none !important;
		height: auto !important;
	}
}

/* THIRD time this class of bug has landed: v0.11.0 armoured buttons, v0.12.0
   armoured <img> chrome, and the hostile-theme render still broke the card
   grids because the crop properties were never covered. A host rule like
   `.elementor-kit-N img { height: auto !important }` beats our 0,1,1
   selectors and lets the native aspect ratio through, wrecking the grid.
   The lesson from the vault, applied properly this time: enumerate the
   PROPERTIES a page builder hijacks, not just the ones misbehaving today. */
#gvt-chat .gvt-project img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
}
#gvt-chat .gvt-mood img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
}
/* Never force a ratio on the generated impression: its dimensions come from
   the gvt_image_size setting (1024x1024 by default, but the client may set a
   portrait or landscape size), so a hardcoded ratio would distort it. */
#gvt-chat .gvt-job-image {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
}

/* Trigger pills live outside #gvt-chat, so they get their own id scope. */
#gvt-chat-triggers .gvt-chat-trigger,
.gvt-chat-triggers .gvt-chat-trigger {
	border: 1px solid var(--gvt-border) !important;
	border-radius: 999px !important;
	background: var(--gvt-bg) !important;
	color: var(--gvt-text) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10) !important;
}
#gvt-chat-triggers .gvt-chat-trigger-arrow,
.gvt-chat-triggers .gvt-chat-trigger-arrow {
	color: var(--gvt-accent) !important;
}

/* An uploaded logo on the toggle (v0.11.0). Contained rather than cropped, and
   inset so a square mark still reads inside the circle. */
#gvt-chat .gvt-chat-toggle__logo {
	width: 34px !important;
	height: 34px !important;
	max-width: 34px !important;
	object-fit: contain !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	display: block !important;
}

/* The header brandmark and the avatar marks (v0.12.3). Same trap as the toggle
   logo: tier 1 above sets `max-width:100% !important` and `border-radius:0`
   on every #gvt-chat img, and a page builder's `img { height:auto !important }`
   beats any non-important rule of ours regardless of specificity. Both would
   collapse these to their intrinsic size. Enumerate the PROPERTIES a builder
   hijacks -- width, height, object-fit -- not just the element type. */
#gvt-chat .gvt-chat-brandmark-logo {
	width: auto !important;
	height: 34px !important;
	max-width: 170px !important;
	object-fit: contain !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	display: block !important;
}
#gvt-chat .gvt-avatar-logo {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	object-fit: contain !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	display: block !important;
}
/* The disc itself: a host `span { display:inline }` would drop the centring. */
#gvt-chat .gvt-message-avatar {
	width: 28px !important;
	height: 28px !important;
	flex: 0 0 auto !important;
	border-radius: 999px !important;
	background: var(--gvt-brand) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}