/**
 * [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. 820px (no 640px) para que coincida con el
   ancho de lectura que ya usa la propia conversación en pantalla completa
   (.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__body, más
   abajo) — así no se siente más angosto antes de escribir que después. */
.vargo-agent-chat {
	position: relative;
	width: 100%;
	max-width: 820px;
	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, #E2E8F0);
	border-radius: var(--vargo-agent-radius, 20px);
	box-shadow: var(--vargo-agent-shadow-lg, 0 20px 50px rgba(15,23,42,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;
	/* Safe clearance below whatever the card's last child ends up being (the
	   input form, or the disclaimer below it when one is configured) — set on
	   the card itself rather than on the form, so it always reserves space
	   right above the true bottom edge of the screen instead of only
	   separating the form from the next sibling. */
	padding-bottom: var(--vargo-agent-bottom-margin, 8vh);
}
@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, #0F766E), var(--vargo-agent-primary-dark, #115E59));
	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: 76%; height: 76%; object-fit: contain; }
.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: 34px; height: 34px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	/* Oscurece lo que tenga detrás en vez de aclararlo (rgba blanco) — así el
	   × se sigue viendo con buen contraste sin importar qué tan claro sea el
	   color de marca configurado (--vargo-agent-primary), que antes podía
	   dejar el botón casi invisible sobre un degradado pastel. */
	background: rgba(0, 0, 0, 0.18);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}
.vargo-agent-chat__close:hover { background: rgba(0, 0, 0, 0.3); }
.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;
}
/* The intro is now free-form HTML from a full text editor in the admin
   (headings, bold, alignment, color, links) — these are just sensible
   defaults for whatever tags the admin's content happens to use; any
   explicit formatting/color the admin picked in the editor (inline styles)
   naturally wins over these, since inline specificity is higher.
   color: inherit on the wrapper (not a fixed brand color) so text stays
   legible by default even before the admin picks anything — a fixed color
   reads fine on a white background but can disappear on a dark hero. */
.vargo-agent-chat__intro-content {
	color: inherit;
}
.vargo-agent-chat__intro-content h1,
.vargo-agent-chat__intro-content h2,
.vargo-agent-chat__intro-content h3,
.vargo-agent-chat__intro-content h4 {
	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__intro-content p {
	color: inherit;
	opacity: 0.75;
	font-size: 14.5px;
	max-width: 480px;
	margin: 0 auto 4px;
}
.vargo-agent-chat__intro-content a {
	color: var(--vargo-agent-primary, #0F766E);
}
.vargo-agent-chat__intro-content > *:last-child { margin-bottom: 0; }

.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;
}
/* Sesión bloqueada por interacciones: el paywall (planes + campos) puede ser
   más alto que la pantalla, así que se le da más aire al área con scroll. */
.vargo-agent-chat.is-locked:not(.is-fullscreen-active) .vargo-agent-chat__messages {
	max-height: 72vh;
}
.vargo-agent-chat.is-locked .vargo-agent-chat-sub-cta {
	overscroll-behavior: contain;
}
.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__messages {
	max-height: none;
	/* Overrides the 220px min-height inherited from .has-messages above (both
	   classes are present at once in fullscreen) — without this, on shorter
	   viewports (a phone with its address bar showing, ~600px tall) that
	   forced minimum pushes the form and disclaimer past the fixed-height
	   card's bottom edge, clipping them instead of just scrolling messages. */
	min-height: 0;
	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, #0F766E), var(--vargo-agent-secondary, #E8A598));
	display: flex; align-items: center; justify-content: center;
	font-size: 14px;
	overflow: hidden;
}
.vargo-agent-chat-avatar img { width: 76%; height: 76%; object-fit: contain; }
.vargo-agent-chat-msg--assistant .vargo-agent-chat-bubble {
	background: rgba(255,255,255,0.85);
	color: var(--vargo-agent-text, #0F172A);
	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, #0F766E);
	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); }

/* Acción card (form/training/url) — self-contained HTML the backend already builds. */
.vargo-agent-chat-card { margin-top: 10px; }
.vargo-agent-chat-card a { color: var(--vargo-agent-primary, #0F766E); }

/* Acción "training" — grid of ALL configured courses, not just the model's pick. */
.vargo-agent-chat-courses-wrap { margin-top: 10px; }
.vargo-agent-chat-courses-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--vargo-agent-text, #0F172A); }
/* 1 curso = ancho completo, 2 = mitad y mitad, 3+ = 3 por fila (clase por
   defecto); si hay más de 3 la fila siguiente vuelve a repartirse en 3. */
.vargo-agent-chat-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vargo-agent-chat-courses--1 { grid-template-columns: 1fr; }
.vargo-agent-chat-courses--2 { grid-template-columns: repeat(2, 1fr); }
.vargo-agent-chat-course-card {
	min-width: 0; display: flex; flex-direction: column; gap: 4px;
	padding: 10px 12px; border-radius: 12px; text-decoration: none;
	background: #fff; border: 1px solid rgba(0,0,0,0.08);
}
.vargo-agent-chat-course-card__title { font-size: 13px; font-weight: 600; color: var(--vargo-agent-text, #0F172A); }
.vargo-agent-chat-course-card__desc {
	font-size: 11.5px; color: var(--vargo-agent-text-muted, #475569);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vargo-agent-chat-course-card__price { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--vargo-agent-primary, #0F766E); }

/* Acción "record" form — collects fields the model didn't already have. */
.vargo-agent-chat-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.vargo-agent-chat-form__field { display: flex; flex-direction: column; gap: 3px; }
.vargo-agent-chat-form__label { font-size: 12px; font-weight: 600; color: var(--vargo-agent-text-muted, #475569); }
.vargo-agent-chat-form__input {
	font: inherit; font-size: 13.5px; padding: 8px 10px;
	border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
	background: #fff; color: var(--vargo-agent-text, #0F172A);
}
.vargo-agent-chat-form__input:focus { outline: none; border-color: var(--vargo-agent-primary, #0F766E); }
.vargo-agent-chat-form__submit {
	margin-top: 2px; align-self: flex-start;
	font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 16px;
	border: none; border-radius: 999px; cursor: pointer;
	background: var(--vargo-agent-primary, #0F766E); color: #fff;
}
.vargo-agent-chat-form__submit:disabled { opacity: 0.6; cursor: default; }

.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, #475569);
	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, #E2E8F0);
	color: var(--vargo-agent-text, #0F172A);
	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(15,23,42,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(15,23,42,0.12));
	border-color: var(--vargo-agent-primary, #0F766E);
	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.
   Column layout: text row on top, quick-access Acción icons embedded inside
   the SAME box below it (Claude-style), not as a separate row above. */
.vargo-agent-chat__form {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 10px 22px;
	background: var(--vargo-agent-surface, #FFFFFF);
	border: 1px solid var(--vargo-agent-border, #E2E8F0);
	border-radius: 28px;
	box-shadow: var(--vargo-agent-shadow-md, 0 12px 32px rgba(15,23,42,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, #0F766E);
	box-shadow: 0 0 0 4px rgba(0,0,0,0.05), var(--vargo-agent-shadow-md, 0 12px 32px rgba(15,23,42,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__row {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

/* Quick-access Acción chips (icon + name) — embedded inside the input box,
   below the text field, Claude "+"-style. The name is always visible, so no
   tooltip is needed. */
.vargo-agent-chat-actionsbar {
	display: flex; gap: 6px; margin-top: 6px; padding-right: 4px; flex-wrap: wrap;
	overflow-x: auto; flex-shrink: 0;
}
.vargo-agent-chat-action-chip {
	flex: 0 0 auto; height: 30px; padding: 0 12px;
	display: flex; align-items: center; gap: 6px;
	border-radius: 999px; border: 1px solid var(--vargo-agent-border, #E2E8F0);
	background: transparent; color: var(--vargo-agent-text-muted, #475569);
	font-size: 12px; font-weight: 500; white-space: nowrap;
	cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.vargo-agent-chat-action-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.vargo-agent-chat-action-chip:hover {
	color: var(--vargo-agent-primary, #0F766E);
	border-color: var(--vargo-agent-primary, #0F766E);
	background: rgba(46,100,89,0.06);
}
/* Botón "Planes" — de otro color a propósito (relleno, no outline neutro como
   el resto de Acciones) para que se lea como un CTA propio, no como una
   Acción configurada más. */
.vargo-agent-chat-action-chip--plans {
	color: #fff;
	background: var(--vargo-agent-primary, #0F766E);
	border-color: var(--vargo-agent-primary, #0F766E);
}
.vargo-agent-chat-action-chip--plans:hover {
	color: #fff;
	background: var(--vargo-agent-primary-dark, #115E59);
	border-color: var(--vargo-agent-primary-dark, #115E59);
}
.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, #0F172A);
}
.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, #0F766E); 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, #115E59); transform: scale(1.06); }
.vargo-agent-chat__send:disabled { opacity: 0.5; cursor: default; transform: none; }

.vargo-agent-chat-session-locked {
	margin-top: 8px; padding: 10px 14px;
	background: rgba(46,100,89,0.08); border: 1px solid rgba(46,100,89,0.25);
	border-radius: 12px; font-size: 13px; color: var(--vargo-agent-text-muted, #475569);
	text-align: center; line-height: 1.4;
}
.vargo-agent-chat-new-chat {
	display: inline; padding: 0; border: none; background: none;
	color: var(--vargo-agent-primary, #0F766E); font: inherit; font-weight: 600;
	text-decoration: underline; cursor: pointer;
}
.vargo-agent-chat-new-chat:disabled {
	color: var(--vargo-agent-text-muted, #475569); text-decoration: none;
	cursor: default; font-variant-numeric: tabular-nums;
}

/* ------------------------------ Footer disclaimer ----------------------- */
.vargo-agent-chat__disclaimer {
	margin: 10px 6px 0;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: inherit;
	opacity: 0.6;
}
.vargo-agent-chat.is-fullscreen-active .vargo-agent-chat__disclaimer {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px 16px;
}
.vargo-agent-chat__disclaimer a {
	color: var(--vargo-agent-primary, #0F766E);
	opacity: 1;
}

@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; }
}

/* CTA de suscripción del chat embebido — al bloquearse la sesión, si el agente cobra. */
.vargo-agent-chat-sub-cta {
	margin: 12px 0 6px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--vargo-agent-primary, #0F766E);
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(15,23,42,0.08);
}
.vargo-agent-chat-sub-hook {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--vargo-agent-text, #0F172A);
}
.vargo-agent-chat-sub-btn {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(135deg, var(--vargo-agent-primary, #0F766E), var(--vargo-agent-primary-dark, #115E59));
}
.vargo-agent-chat-sub-btn:hover { filter: brightness(1.04); }
.vargo-agent-chat-sub-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.vargo-agent-chat-sub-form { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.vargo-agent-chat-sub-form input, .vargo-agent-chat-sub-form select { padding: 10px 13px; border: 1px solid var(--vargo-agent-border, #CBD6DE); border-radius: 10px; font-size: 14px; background: #fff; }
.vargo-agent-chat-sub-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vargo-agent-text, #0F172A); }
.vargo-agent-chat-sub-check input { padding: 0; }
.vargo-agent-chat-sub-form button[type="submit"] {
	padding: 11px 18px; border: 0; border-radius: 999px; font-weight: 700; font-size: 14px; color: #fff; cursor: pointer;
	background: linear-gradient(135deg, var(--vargo-agent-primary, #0F766E), var(--vargo-agent-primary-dark, #115E59));
}
.vargo-agent-chat-sub-form button[type="submit"]:disabled { opacity: .6; cursor: default; }
.vargo-agent-chat-sub-msg { margin: 4px 0 0; font-size: 12.5px; color: var(--vargo-agent-text-muted, #5B6B78); min-height: 1em; }

/* Switch Mensual / Anual */
.vargo-agent-chat-sub-toggle {
	display: inline-flex; gap: 2px; margin: 2px 0 14px;
	padding: 3px; border-radius: 999px; background: var(--vargo-agent-bg-muted, #F1F4F6);
}
.vargo-agent-chat-sub-toggle button {
	border: 0; background: transparent; cursor: pointer;
	padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
	color: var(--vargo-agent-text-muted, #5B6B78);
}
.vargo-agent-chat-sub-toggle button.is-active {
	background: #fff; color: var(--vargo-agent-text, #0F172A);
	box-shadow: 0 1px 4px rgba(15,23,42,0.12);
}

/* Cards de planes */
.vargo-agent-chat-sub-plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.vargo-agent-chat-sub-plan {
	position: relative; display: flex; flex-direction: column; gap: 8px;
	padding: 16px 14px; border-radius: 14px;
	border: 1px solid var(--vargo-agent-border, #CBD6DE); background: #fff;
}
.vargo-agent-chat-sub-plan.is-highlighted { border-color: var(--vargo-agent-primary, #0F766E); box-shadow: 0 4px 16px rgba(46,100,89,0.14); }
.vargo-agent-chat-sub-plan.is-picked { outline: 2px solid var(--vargo-agent-primary, #0F766E); outline-offset: 1px; }
.vargo-agent-chat-sub-badge {
	position: absolute; top: -10px; left: 14px;
	background: var(--vargo-agent-primary, #0F766E); color: #fff;
	font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
	padding: 3px 9px; border-radius: 999px;
}
.vargo-agent-chat-sub-plan h5 { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; color: var(--vargo-agent-text, #0F172A); }
.vargo-agent-chat-sub-price { font-size: 22px; font-weight: 800; color: var(--vargo-agent-text, #0F172A); line-height: 1.1; }
.vargo-agent-chat-sub-price span { font-size: 12.5px; font-weight: 600; color: var(--vargo-agent-text-muted, #5B6B78); }
.vargo-agent-chat-sub-save { font-size: 11.5px; font-weight: 700; color: #1a7f4b; }
.vargo-agent-chat-sub-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--vargo-agent-text-muted, #5B6B78); }
.vargo-agent-chat-sub-feats { margin: 2px 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.vargo-agent-chat-sub-feats li { font-size: 12.5px; line-height: 1.45; color: var(--vargo-agent-text, #0F172A); padding-left: 18px; position: relative; }
.vargo-agent-chat-sub-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--vargo-agent-primary, #0F766E); font-weight: 800; }
.vargo-agent-chat-sub-plan .vargo-agent-chat-sub-btn { margin-top: auto; text-align: center; padding: 9px 14px; font-size: 13px; cursor: pointer; border: 0; }