/* Vitale Assist – front-end widget. All colours come from CSS vars set inline from settings. */
.va-launcher,
.va-panel,
.vitale-assist-embed { box-sizing:border-box; font-family:var(--va-font, inherit); }
.va-launcher *,
.va-panel *,
.vitale-assist-embed * { box-sizing:border-box; }

/* Launcher button */
.va-launcher {
	position:fixed; z-index:99998;
	width:var(--va-launcher-size,58px); height:var(--va-launcher-size,58px);
	border:none; cursor:pointer; padding:0;
	background:var(--va-launcher,#1f6feb); color:#fff;
	border-radius:var(--va-launcher-radius,50%);
	box-shadow:0 6px 20px rgba(0,0,0,.25);
	display:flex; align-items:center; justify-content:center;
	transition:transform .18s ease, box-shadow .18s ease;
}
.va-launcher:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.3); }
.va-launcher:focus-visible { outline:3px solid var(--va-primary,#1f6feb); outline-offset:3px; }
.va-pos-bottom-right .va-launcher { right:22px; bottom:22px; }
.va-pos-bottom-left  .va-launcher { left:22px;  bottom:22px; }

/* Panel */
.va-panel {
	position:fixed; z-index:99999;
	width:380px; max-width:calc(100vw - 32px);
	height:560px; max-height:calc(100vh - 120px);
	background:var(--va-bg,#fff); color:var(--va-text,#1a1a1a);
	border-radius:var(--va-radius,14px);
	box-shadow:0 18px 50px rgba(0,0,0,.28);
	display:flex; flex-direction:column; overflow:hidden;
	opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
	transition:opacity .2s ease, transform .2s ease;
}
.va-panel.va-open { opacity:1; transform:none; pointer-events:auto; }
.va-pos-bottom-right .va-panel { right:22px; bottom:92px; }
.va-pos-bottom-left  .va-panel { left:22px;  bottom:92px; }

.va-header { background:var(--va-primary,#1f6feb); color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; }
.va-header-title { font-weight:600; font-size:var(--va-title-size,20px); }
.va-close { background:none; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; padding:4px; border-radius:6px; }
.va-close:focus-visible { outline:2px solid #fff; }
.va-header-actions { display:flex; align-items:center; gap:2px; }
.va-expand { background:none; border:none; color:#fff; cursor:pointer; padding:5px; border-radius:6px; display:inline-flex; opacity:.85; }
.va-expand:hover { opacity:1; }
.va-expand:focus-visible { outline:2px solid #fff; outline-offset:1px; }

.va-tabs { display:flex; border-bottom:1px solid rgba(0,0,0,.08); }
.va-tab { flex:1; background:none; border:none; padding:10px; cursor:pointer; font-size:13px; color:var(--va-text,#1a1a1a); opacity:.6; }
.va-tab.va-active { opacity:1; border-bottom:2px solid var(--va-primary,#1f6feb); font-weight:600; }

.va-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.va-msg { padding:10px 13px; border-radius:12px; max-width:88%; line-height:1.4; font-size:var(--va-msg-size,14px); white-space:pre-wrap; word-wrap:break-word; }
.va-msg.va-bot  { background:var(--va-ai-bubble,rgba(0,0,0,.05)); color:var(--va-ai-text,inherit); align-self:flex-start; }
.va-msg.va-user { background:var(--va-user-bubble,var(--va-primary,#1f6feb)); color:var(--va-user-text,#fff); align-self:flex-end; }
.va-msg.va-bot a { color:var(--va-primary,#1f6feb); text-decoration:underline; }
.va-msg.va-user a { color:var(--va-user-text,#fff); text-decoration:underline; }

/* AI reply with avatar */
.va-row { display:flex; align-items:flex-start; gap:8px; align-self:flex-start; max-width:88%; }
.va-row .va-msg.va-bot { max-width:100%; }
.va-avatar { width:30px; height:30px; border-radius:7px; object-fit:cover; flex:0 0 auto; margin-top:2px; }
.va-sources { font-size:12px; margin-top:8px; }
.va-sources strong { display:block; margin-bottom:3px; }
.va-sources a, .va-sources span { display:block; }
.va-sources a { color:var(--va-primary,#1f6feb); }
.va-typing { display:inline-flex; gap:4px; align-items:center; }
.va-typing span { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; animation:va-blink 1.2s infinite; }
.va-typing span:nth-child(2){ animation-delay:.2s; } .va-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes va-blink { 0%,60%,100%{opacity:.25;transform:translateY(0);} 30%{opacity:.9;transform:translateY(-2px);} }

.va-form { display:flex; gap:8px; padding:12px; border-top:1px solid rgba(0,0,0,.08); }
.va-input { flex:1; border:1px solid rgba(0,0,0,.18); border-radius:10px; padding:10px 12px; font-size:16px; font-family:inherit; color:var(--va-text,#1a1a1a); background:#fff; }
.va-input:focus { outline:2px solid var(--va-primary,#1f6feb); outline-offset:0; }
.va-send { border:none; background:var(--va-primary,#1f6feb); color:#fff; border-radius:10px; padding:0 14px; cursor:pointer; font-weight:600; font-size:15px; }
.va-send:disabled { opacity:.5; cursor:default; }

.va-footer-note { text-align:center; font-size:11px; color:rgba(0,0,0,.4); padding:0 0 8px; }

/* Starter question chips */
.va-starters { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.va-starter {
	background:transparent; border:1px solid var(--va-primary,#1f6feb); color:var(--va-primary,#1f6feb);
	border-radius:14px; padding:6px 11px; font-size:var(--va-msg-size,14px); line-height:1.3; cursor:pointer;
	font-family:inherit; text-align:left; transition:background .15s ease, color .15s ease;
}
.va-starter:hover { background:var(--va-primary,#1f6feb); color:#fff; }
.va-starter:focus-visible { outline:2px solid var(--va-primary,#1f6feb); outline-offset:2px; }

/* Greeting teaser bubble */
.va-teaser {
	position:fixed; z-index:99998; max-width:250px;
	background:var(--va-bg,#fff); color:var(--va-text,#1a1a1a);
	padding:11px 32px 11px 13px; border-radius:14px;
	box-shadow:0 8px 26px rgba(0,0,0,.2); font-size:15px; line-height:1.45;
	font-family:var(--va-font,inherit); cursor:pointer;
	animation:va-teaser-in .25s ease;
}
.va-pos-bottom-right .va-teaser { right:22px; bottom:94px; }
.va-pos-bottom-left  .va-teaser { left:22px;  bottom:94px; }
.va-teaser-close {
	position:absolute; top:5px; right:8px; background:none; border:none;
	font-size:16px; line-height:1; cursor:pointer; color:rgba(0,0,0,.4); padding:2px;
}
@keyframes va-teaser-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Attention pulse ring behind the launcher */
.va-launcher.va-pulse::after {
	content:''; position:absolute; inset:0; border-radius:inherit;
	background:var(--va-launcher,#1f6feb); z-index:-1;
	animation:va-pulse 1.9s ease-out infinite;
}
@keyframes va-pulse { 0% { opacity:.45; transform:scale(1); } 100% { opacity:0; transform:scale(1.7); } }

/* Inline embed variant */
.vitale-assist-embed { border:1px solid rgba(0,0,0,.12); border-radius:var(--va-radius,14px); overflow:hidden; display:flex; flex-direction:column; }
.vitale-assist-embed .va-header { }

@media (prefers-reduced-motion: reduce) {
	.va-panel, .va-launcher { transition:none; }
	.va-typing span { animation:none; }
	.va-launcher.va-pulse::after { animation:none; display:none; }
	.va-teaser { animation:none; }
}

/* ---- Full-page view ("Ask Dolia") ---- */
.va-fv {
	position:fixed; inset:0; z-index:100000; display:none;
	background:var(--va-bg,#fff); color:var(--va-text,#1a1a1a);
	font-family:var(--va-font,inherit);
}
.va-fv.va-open { display:block; }
.va-fv-close {
	position:absolute; top:16px; right:20px; z-index:2;
	background:none; border:none; font-size:30px; line-height:1;
	color:var(--va-text,#1a1a1a); opacity:.45; cursor:pointer;
}
.va-fv-close:hover { opacity:1; }
.va-fv-inner {
	max-width:760px; margin:0 auto; height:100%;
	display:flex; flex-direction:column; justify-content:center;
	gap:16px; padding:64px 20px 26px; box-sizing:border-box;
}
.va-fv-head { text-align:center; }
.va-fv-logo { max-height:46px; width:auto; margin:0 auto 14px; display:block; }
.va-fv-title { font-size:var(--va-fv-title-size,26px); font-weight:700; line-height:1.15; }
.va-fv-byline { font-size:13px; opacity:.55; margin-top:5px; }
.va-fv-messages { display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.va-fv-messages .va-msg { font-size:var(--va-msg-size,14px); max-width:80%; }
.va-fv-starters { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.va-fv-form { display:flex; gap:8px; width:100%; }
.va-fv-input {
	flex:1; border:1px solid rgba(0,0,0,.18); border-radius:14px;
	padding:15px 16px; font-size:16px; font-family:inherit;
	color:var(--va-text,#1a1a1a); background:#fff;
}
.va-fv-input:focus { outline:2px solid var(--va-primary,#1f6feb); }
.va-fv-send {
	border:none; background:var(--va-primary,#1f6feb); color:#fff;
	border-radius:14px; padding:0 24px; font-size:15px; font-weight:600; cursor:pointer;
}

/* Conversation state (after first message) */
.va-fv.va-fv-started .va-fv-inner { justify-content:flex-start; }
.va-fv.va-fv-started .va-fv-head { padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid rgba(0,0,0,.08); }
.va-fv.va-fv-started .va-fv-title { font-size:var(--va-fv-title-size,26px); }
.va-fv.va-fv-started .va-fv-logo { max-height:30px; margin-bottom:8px; }
.va-fv.va-fv-started .va-fv-byline { display:none; }
.va-fv.va-fv-started .va-fv-messages { flex:1 1 auto; padding:14px 0; }
.va-fv.va-fv-started .va-fv-starters { display:none; }

/* Shortcode trigger button */
.va-fv-trigger {
	display:inline-flex; align-items:center; gap:6px;
	background:var(--va-primary,#1f6feb); color:#fff; border:none;
	border-radius:var(--va-radius,14px); padding:11px 18px;
	font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
}

@media (max-width:600px) {
	.va-fv-inner { padding:56px 16px 20px; }
}

/* ---- Full-view layout refinements ---- */
.va-fv-inner { justify-content:center; padding:56px 20px; }
.va-fv.va-fv-started .va-fv-inner { justify-content:flex-start; padding-top:22px; }
.va-fv-brand { display:flex; align-items:center; justify-content:center; gap:12px; }
.va-fv-mark { color:var(--va-primary,#1f6feb); display:inline-flex; }
.va-fv-mark svg { width:30px; height:30px; display:block; }
.va-fv-foot { position:absolute; left:0; right:0; bottom:32px; text-align:center; }
.va-fv-foot .va-fv-logo { max-height:40px; width:auto; display:inline-block; margin:0; }
.va-fv.va-fv-started .va-fv-foot { display:none; }

/* Optically centre the mark against the large hero title */
.va-fv-brand { align-items:center; }
.va-fv-brand .va-fv-title { line-height:1; }
.va-fv:not(.va-fv-started) .va-fv-mark { position:relative; top:1px; }

/* Force 16px on inputs (beats theme styles) so iOS doesn't zoom on focus */
.va-input, .va-fv-input { font-size:16px !important; }

/* Larger, easier-to-tap close buttons */
.va-close { font-size:34px; line-height:1; padding:4px 8px; }
.va-fv-close { font-size:34px; padding:6px 10px; }
@media (max-width:600px) {
	.va-close { font-size:34px; padding:6px 10px; }
	.va-fv-close { font-size:42px; top:12px; right:12px; padding:6px 12px; }
}
