/**
 * [vargo_agent_chat] shortcode — a single, self-contained chat panel
 * (header + conversation + input bar), the same shape as a typical AI chat
 * app. Self-contained styling (CSS variables with fallback values, same
 * --vargo-agent-* convention as widget.css) so it looks right and reads as
 * "a chat" on ANY site, regardless of the host page's own background/theme.
 */
/* Defensive reset: host themes/page builders often ship global rules for
   bare `button`/`textarea`/`*` (content-box sizing, inflated line-height,
   min-height on buttons, sometimes with !important) that otherwise bleed
   into this widget and distort it — a giant textarea, an oval "circular"
   send button, etc. Everything below is scoped to this widget only. */
.vargo-agent-chat,
.vargo-agent-chat * { box-sizing: border-box !important; }

/* Idle state keeps a comfortable reading width, centered wherever it's
   placed — a full-bleed chat sitting edge-to-edge in a wide section reads
   as a design mistake, not intentional. Fullscreen (below) overrides this
   to go edge-to-edge on purpose. */
.vargo-agent-chat {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	font-family: var(--vargo-agent-font-body, 'Inter', -apple-system, sans-serif);
}

/* Idle state: a transparent "cover" presentation (title + subtitle + chips +
   input), not a boxed widget — it should read as part of the page's own
   hero/section, whatever that background is, not as a floating window. The
   boxed "chat app" look (background/border/shadow + header bar) only shows
   up once a conversation is actually happening, in fullscreen (below). */
.vargo-agent-chat__card {
	display: flex;
	flex-direction: column;
}
.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__card {
	/* Frosted-glass surface: translucent + blurred, so the page behind softly
	   shows through — an elegant, modern "material" look instead of a flat
	   opaque panel. */
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(28px) saturate(180%);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	border: 1px solid var(--vargo-agent-border, #F3E8E4);
	border-radius: var(--vargo-agent-radius, 20px);
	box-shadow: var(--vargo-agent-shadow-lg, 0 20px 50px rgba(26,26,26,0.12));
	overflow: hidden;
}

/* Once the visitor sends a first message, the chat takes over the viewport —
   breaks free of the theme's container/grid entirely — so the conversation
   predominates. Plain edge-to-edge fullscreen (no dimmed backdrop, no blur,
   no floating "modal" card) — the same shape as Claude/ChatGPT's own
   fullscreen chat: full-bleed app chrome, with the actual conversation kept
   at a comfortable reading width, centered (see body/messages/form below).
   The close button (top-right of the header) returns to the embedded view. */
.vargo-agent-chat.is-fullscreen-active {
	position: fixed;
	inset: 0;
	z-index: 999999;
	max-width: none;
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
}
.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__card {
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	border: none;
	box-shadow: none;
	animation: vargo-agent-chat-fullscreen-in 0.2s ease;
}
@keyframes vargo-agent-chat-fullscreen-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
html.vargo-agent-chat-open,
html.vargo-agent-chat-open body { overflow: hidden !important; height: 100%; }

/* ------------------------------ Header (fullscreen only) --------------- */
/* Hidden in the idle "cover" presentation — the avatar/name/status bar is
   chat-app chrome that only makes sense once you're actually in a
   conversation (fullscreen). */
.vargo-agent-chat__header {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: linear-gradient(135deg, var(--vargo-agent-primary, #D4614A), var(--vargo-agent-primary-dark, #B8452F));
	color: #fff;
	flex-shrink: 0;
}
.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__header { display: flex; }
.vargo-agent-chat__header-avatar {
	width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
	background: rgba(255,255,255,0.2);
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	overflow: hidden;
}
.vargo-agent-chat__header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vargo-agent-chat__header-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vargo-agent-chat__header-title {
	font-family: var(--vargo-agent-font-heading, 'Poppins', sans-serif);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vargo-agent-chat__header-status { font-size: 12px; opacity: 0.85; }
.vargo-agent-chat__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}
.vargo-agent-chat__close:hover { background: rgba(255,255,255,0.28); }
.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__close { display: flex; }

/* ------------------------------ Body (intro + messages + chips) -------- */
.vargo-agent-chat__body {
	display: flex;
	flex-direction: column;
	padding: 24px 22px 0;
}
.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__body {
	flex: 1;
	overflow-y: auto;
	padding: 28px 24px 0;
	max-width: 820px;
	width: 100%;
	margin: 0 auto;
}

.vargo-agent-chat__intro {
	text-align: center;
	max-height: 220px;
	opacity: 1;
	transition: max-height 0.5s ease, opacity 0.35s ease, margin 0.5s ease;
	overflow: hidden;
	margin-bottom: 18px;
}
.vargo-agent-chat__intro.is-collapsed {
	max-height: 0;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}
/* color: inherit on purpose — a fixed brand color reads fine on a white
   background but disappears on a dark hero (the exact bug reported: a
   desaturated tone at 72% opacity against a dark navy page). Inheriting the
   host page's own text color means it's always legible, since the page
   author already made ITS heading readable against ITS background; the
   brand color still shows clearly in the chips, send button and the
   fullscreen header. */
.vargo-agent-chat__title {
	font-family: var(--vargo-agent-font-heading, 'Poppins', sans-serif);
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	font-weight: 700;
	color: inherit;
	margin: 0 0 8px;
}
.vargo-agent-chat__subtitle {
	color: inherit;
	opacity: 0.75;
	font-size: 14.5px;
	max-width: 480px;
	margin: 0 auto;
}

.vargo-agent-chat__messages {
	max-height: 0;
	overflow-y: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: max-height 0.4s ease, padding 0.4s ease;
	scroll-behavior: smooth;
}
.has-messages .vargo-agent-chat__messages {
	max-height: 46vh;
	min-height: 220px;
	overflow-y: auto;
	padding-bottom: 18px;
}
.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__messages {
	max-height: none;
	flex: 1;
}

.vargo-agent-chat-msg { display: flex; align-items: flex-start; gap: 12px; }
.vargo-agent-chat-msg--user { justify-content: flex-end; }
.vargo-agent-chat-avatar {
	width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
	background: linear-gradient(135deg, var(--vargo-agent-primary, #D4614A), var(--vargo-agent-secondary, #E8A598));
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	overflow: hidden;
}
.vargo-agent-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vargo-agent-chat-msg--assistant .vargo-agent-chat-bubble {
	background: rgba(255,255,255,0.85);
	color: var(--vargo-agent-text, #1A1A1A);
	padding: 11px 15px;
	border-radius: 16px;
	border-bottom-left-radius: 4px;
	font-size: 14.5px;
	line-height: 1.55;
	max-width: 82%;
}
.vargo-agent-chat-msg--user .vargo-agent-chat-bubble {
	background: var(--vargo-agent-primary, #D4614A);
	color: #fff;
	padding: 11px 16px;
	border-radius: 16px;
	border-bottom-right-radius: 4px;
	font-size: 14.5px;
	line-height: 1.5;
	max-width: 78%;
}
.vargo-agent-chat-msg--error .vargo-agent-chat-bubble {
	background: #FFF1F2; color: #9F1239; font-size: 13px; text-align: center; margin: 0 auto;
	padding: 10px 16px; border-radius: 12px;
}

.vargo-agent-chat-bubble p { margin: 0 0 10px; }
.vargo-agent-chat-bubble p:last-child { margin-bottom: 0; }
.vargo-agent-chat-bubble ul, .vargo-agent-chat-bubble ol { margin: 0 0 10px; padding-left: 20px; }
.vargo-agent-chat-bubble li { margin-bottom: 4px; }
.vargo-agent-chat-bubble li:last-child { margin-bottom: 0; }
.vargo-agent-chat-bubble code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }
.vargo-agent-chat-msg--user .vargo-agent-chat-bubble code { background: rgba(255,255,255,0.2); }

.vargo-agent-chat-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.vargo-agent-chat-typing span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--vargo-agent-text-muted, #6B7280);
	animation: vargo-agent-chat-typing 1s infinite ease-in-out;
}
.vargo-agent-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.vargo-agent-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes vargo-agent-chat-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.vargo-agent-chat__chips {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
	transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease;
	/* Generous cap, not a tight fit: with a fixed max-height and no overflow
	   clipping, chips wrapping into more rows than the cap allows would
	   overflow into the next element (the input form) below, crushing them
	   together — this needs to comfortably fit several wrapped rows. */
	max-height: 400px; opacity: 1;
	padding-bottom: 18px;
}
.vargo-agent-chat__chips.is-hidden { max-height: 0; opacity: 0; margin: 0; padding: 0; overflow: hidden; pointer-events: none; }
.vargo-agent-chat-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--vargo-agent-surface, #FFFFFF);
	border: 1px solid var(--vargo-agent-border, #F3E8E4);
	color: var(--vargo-agent-text, #1A1A1A);
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.3 !important;
	padding: 8px 16px !important;
	margin: 0;
	border-radius: 100px;
	cursor: pointer;
	box-shadow: var(--vargo-agent-shadow-sm, 0 2px 10px rgba(26,26,26,0.08));
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.vargo-agent-chat-chip:hover {
	transform: translateY(-2px);
	box-shadow: var(--vargo-agent-shadow-md, 0 8px 20px rgba(26,26,26,0.12));
	border-color: var(--vargo-agent-primary, #D4614A);
	background: var(--vargo-agent-background, #F7F7F8);
}

/* ------------------------------ Input bar ("the chat box") ------------- */
/* A standalone floating pill — its own background/border/shadow — since in
   the idle "cover" state there's no card behind it to give it contrast. */
.vargo-agent-chat__form {
	display: flex;
	align-items: flex-end !important;
	gap: 10px;
	padding: 10px 10px 10px 22px;
	background: var(--vargo-agent-surface, #FFFFFF);
	border: 1px solid var(--vargo-agent-border, #F3E8E4);
	border-radius: 28px;
	box-shadow: var(--vargo-agent-shadow-md, 0 12px 32px rgba(26,26,26,0.12));
	flex-shrink: 0;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.vargo-agent-chat__form:focus-within {
	border-color: var(--vargo-agent-primary, #D4614A);
	box-shadow: 0 0 0 4px rgba(0,0,0,0.05), var(--vargo-agent-shadow-md, 0 12px 32px rgba(26,26,26,0.12));
}
.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__form {
	max-width: 820px;
	width: calc(100% - 48px);
	margin: 0 auto 24px;
}
.vargo-agent-chat__form textarea {
	flex: 1;
	resize: none;
	min-height: 0 !important;
	height: 22px !important;
	max-height: 140px !important;
	margin: 0 !important;
	border: none;
	font-family: var(--vargo-agent-font-body, 'Inter', -apple-system, sans-serif);
	font-size: 14.5px !important;
	line-height: 1.4 !important;
	background: transparent;
	padding: 10px 0 !important;
	color: var(--vargo-agent-text, #1A1A1A);
}
.vargo-agent-chat__form textarea:focus { outline: none; }
.vargo-agent-chat__send {
	width: 42px !important; height: 42px !important;
	min-width: 42px; min-height: 42px; max-width: 42px; max-height: 42px;
	border-radius: 50%; flex-shrink: 0; flex-grow: 0;
	border: none; margin: 0; padding: 0; background: var(--vargo-agent-primary, #D4614A); color: #fff;
	font-size: 16px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s ease, transform 0.15s ease;
}
.vargo-agent-chat__send:hover { background: var(--vargo-agent-primary-dark, #B8452F); transform: scale(1.06); }
.vargo-agent-chat__send:disabled { opacity: 0.5; cursor: default; transform: none; }

@media (max-width: 600px) {
	.vargo-agent-chat__body { padding: 20px 16px 0; }
	.has-messages .vargo-agent-chat__messages { max-height: 50vh; }
	.vargo-agent-chat__form { padding: 8px 8px 8px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.vargo-agent-chat-typing span { animation: none; }
}