/* VierBot interactive bot showcase v1.0.0. Every rule scoped to the component. */
.vier-chat-showcase, .vier-chat-showcase * { box-sizing: border-box; }
.vier-chat-showcase {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  align-items: center; gap: clamp(28px,5vw,72px);
  min-height: 640px; margin: 0 0 30px; padding: clamp(28px,5vw,65px);
  border: 1px solid rgba(90,142,130,.23); border-radius: 32px;
  background: radial-gradient(ellipse at 78% 30%, rgba(20,110,88,.36), transparent 50%),
              radial-gradient(ellipse at 10% 85%, rgba(62,69,173,.22), transparent 57%),
              #091719;
  box-shadow: 0 30px 70px rgba(2,18,23,.16);
  color: #f4faf8;
  scroll-margin-top: 92px;
}
.vier-chat-showcase::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.3;
  background-image:radial-gradient(circle,rgba(100,235,186,.35) 1px,transparent 1.5px); background-size:32px 32px; mask-image:linear-gradient(90deg,transparent 30%,#000 100%);
}
.vier-chat-showcase__intro { position: relative; z-index:1; max-width:510px; }
.vier-chat-showcase__eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.18em; font-weight:800; color:#7fe0c0; }
.vier-chat-showcase__pulse { display:block; width:8px; height:8px; border-radius:50%; background:#2de29c; box-shadow:0 0 0 6px rgba(45,226,156,.10); animation:vier-demo-pulse 2s ease-in-out infinite; }
.vier-chat-showcase__intro h3 { margin:20px 0 17px; color:#f7fbff; font-family:Manrope,Inter,sans-serif; font-size:clamp(31px,3.2vw,47px); letter-spacing:-.045em; line-height:1.13; font-weight:800; }
.vier-chat-showcase__intro h3 span { color:#69e2bd; }
.vier-chat-showcase__intro > p { font-size:15px; color:#afc6c4; line-height:1.8; margin:0; }
.vier-chat-showcase__intro > p strong { color:#e8fcf5; font-weight:750; }
.vier-chat-showcase__commands { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 21px; }
.vier-chat-showcase__commands span { background:rgba(205,255,233,.075); border:1px solid rgba(165,255,229,.18); padding:9px 12px; border-radius:12px; color:#b8f7dc; font-size:12px; font-family:ui-monospace,Consolas,monospace; font-weight:700; }
.vier-chat-showcase__intro p.vier-chat-showcase__disclaimer { display:flex; align-items:flex-start; gap:9px; max-width:450px; font-size:12px; line-height:1.6; color:#819f9f; }
.vier-chat-showcase__disclaimer svg { flex:0 0 16px; width:16px; height:16px; margin-top:2px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; }
.vier-chat-showcase__stage { display:flex; flex-direction:column; align-items:center; min-width:0; }
.vier-demo-phone { width:min(100%,407px); max-width:407px; padding:9px; border-radius:48px; border:2px solid rgba(159,194,195,.21); background:linear-gradient(145deg,#213033,#071113 57%,#131c20); box-shadow:0 30px 64px rgba(0,0,0,.42), inset 0 0 0 2px rgba(255,255,255,.07), 0 0 0 8px rgba(5,12,14,.27); transform:translateY(0); animation:vier-demo-float 7s ease-in-out infinite; }
.vier-demo-phone__bezel { position:relative; border:1px solid #263d41; background:#101f24; border-radius:40px; padding:13px 0 0; overflow:hidden; }
.vier-demo-phone__camera { position:absolute; z-index:4; top:0; left:50%; transform:translateX(-50%); background:#071115; border-radius:0 0 16px 16px; width:31%; height:18px; }
.vier-demo-chat { display:flex; flex-direction:column; height:580px; max-height:75vh; min-height:460px; background:#0a171a; }
.vier-demo-chat__header { position:relative; flex:0 0 auto; min-height:69px; padding:12px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(162,210,203,.12); background:#1d2e33; }
.vier-demo-chat__avatar { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#5bdcaf,#208fbc); box-shadow:0 0 0 2px rgba(86,225,183,.19); font-family:Manrope,Arial,sans-serif; font-size:20px; font-weight:900; color:#0a171a; }
.vier-demo-chat__avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.vier-demo-chat__avatar img:not([src]) { display:none; }
.vier-demo-chat__avatar span { display:none; }
.vier-demo-chat__identity { display:flex; flex-direction:column; gap:3px; min-width:0; }
.vier-demo-chat__identity strong { font-size:16px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.vier-demo-chat__identity small { display:flex; align-items:center; gap:6px; font-size:11px; color:#bed1d2; }
.vier-demo-chat__identity small i { display:inline-block; width:7px; height:7px; background:#29cb83; border-radius:50%; }
.vier-demo-chat__reset { margin-left:auto; flex:0 0 33px; width:33px; height:33px; padding:7px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:11px; color:#dcebea; cursor:pointer; transition:background .2s,border-color .2s; }
.vier-demo-chat__reset:hover { background:rgba(255,255,255,.14); border-color:#59e6bb; }
.vier-demo-chat__reset svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vier-demo-chat__messages { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 15px 19px; scrollbar-width:thin; scrollbar-color:#315154 transparent;
  display:flex; flex-direction:column; gap:13px; background-color:#0b181b; background-image:radial-gradient(circle at center,rgba(89,156,149,.14) 1px,transparent 1.5px); background-size:27px 27px;
}
.vier-demo-chat__bubble { max-width:86%; min-width:44px; position:relative; border-radius:14px; padding:10px 12px 8px; font-size:13px; line-height:1.58; overflow-wrap:anywhere; white-space:pre-wrap; box-shadow:0 3px 12px rgba(0,0,0,.08); animation:vier-demo-message .3s ease both; }
.vier-demo-chat__bubble--bot { align-self:flex-start; border-top-left-radius:3px; background:#23353c; color:#f0f8f8; }
.vier-demo-chat__bubble--me { align-self:flex-end; border-top-right-radius:3px; background:#075c4b; color:#f6fffb; }
.vier-demo-chat__bubble--bot .vier-demo-chat__bubble-body strong { color:#79ecc3; font-size:13px; }
.vier-demo-chat__bubble-body { white-space:pre-wrap; }
.vier-demo-chat__bubble-time { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:4px; font-size:9px; color:rgba(243,254,254,.52); line-height:1; }
.vier-demo-chat__ticks { color:#84d7eb; font-size:13px; line-height:9px; letter-spacing:-4px; padding-right:4px; }
.vier-demo-chat__typing { width:58px; height:34px; background:#23353c; align-self:flex-start; border-radius:14px 14px 14px 3px; display:flex; align-items:center; justify-content:center; gap:5px; }
.vier-demo-chat__typing i { width:6px; height:6px; border-radius:50%; background:#a8c4bf; animation:vier-demo-dot 1s infinite ease-in-out; }
.vier-demo-chat__typing i:nth-child(2) { animation-delay:.14s; }
.vier-demo-chat__typing i:nth-child(3) { animation-delay:.28s; }
.vier-demo-chat__menu { display:grid; grid-template-columns:1fr auto; gap:5px 16px; margin-top:9px; padding:10px 0 0; border-top:1px solid rgba(180,222,213,.15); }
.vier-demo-chat__menu span { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#e0f4ef; }
.vier-demo-chat__menu small { font-size:10px; color:#a9c2bd; text-align:right; }
.vier-demo-chat__sticker { width:142px; height:128px; margin:7px 0 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 32% 28%,#c7fff1,#7ed8f3 55%,#7aa1f2); border:5px solid #fff; border-radius:22px; box-shadow:0 8px 20px rgba(0,0,0,.17); transform:rotate(-4deg); color:#15434b; }
.vier-demo-chat__sticker-symbol { font-family:Manrope,Arial,sans-serif; font-size:41px; font-weight:900; letter-spacing:-.09em; line-height:1; }
.vier-demo-chat__sticker-caption { font-size:10px; font-weight:800; letter-spacing:.22em; }
.vier-demo-chat__brat { display:grid; place-items:center; width:156px; height:156px; margin:8px 0 4px; padding:14px; background:#c6fc69; color:#111; text-align:center; font-family:Arial,Helvetica,sans-serif; font-size:26px; font-weight:900; line-height:1; letter-spacing:-.06em; filter:blur(.25px); box-shadow:inset 0 0 22px rgba(38,52,0,.06); word-break:break-word; overflow:hidden; }
.vier-demo-chat__controls { flex:0 0 auto; background:#1e3036; border-top:1px solid rgba(255,255,255,.08); padding:11px 12px 14px; }
.vier-demo-chat__quick { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:7px; padding:0 0 11px; scrollbar-width:none; }
.vier-demo-chat__quick::-webkit-scrollbar { display:none; }
.vier-demo-chat__quick button { flex:0 0 auto; padding:8px 12px; border:1px solid rgba(167,201,205,.26); border-radius:99px; background:#293e45; color:#e0eeee; font-size:12px; font-family:ui-monospace,Consolas,monospace; font-weight:700; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.vier-demo-chat__quick button:hover, .vier-demo-chat__quick button:focus-visible { border-color:#48d9a2; background:#325451; }
.vier-demo-chat__quick button:active { transform:scale(.96); }
.vier-demo-chat__form { display:flex; align-items:center; gap:8px; margin:0; }
.vier-demo-chat__input-wrap { flex:1; min-width:0; height:43px; border:1px solid transparent; border-radius:40px; background:#31464e; display:flex; align-items:center; gap:9px; padding:0 12px; }
.vier-demo-chat__input-wrap:focus-within { border-color:#3bd4a2; }
.vier-demo-chat__input-icon { color:#9ab8b8; font-family:monospace; font-size:12px; }
.vier-demo-chat__input-wrap input { outline:none!important; appearance:none!important; background:transparent!important; border:0!important; box-shadow:none!important; flex:1; width:100%; min-width:0; height:100%; padding:0!important; margin:0!important; color:#fff!important; font-family:Inter,Arial,sans-serif; font-size:16px!important; line-height:1.4; }
.vier-demo-chat__input-wrap input::placeholder { color:#b6c6c9; opacity:.84; font-size:12px; }
.vier-demo-chat__send { flex:0 0 43px; display:grid; place-items:center; width:43px; height:43px; padding:0; border:none; border-radius:50%; color:#063124; background:linear-gradient(145deg,#48f4a8,#1bc785); box-shadow:0 5px 15px rgba(29,194,124,.26); cursor:pointer; transition:transform .2s,filter .2s; }
.vier-demo-chat__send svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.vier-demo-chat__send:hover { filter:brightness(1.1); }
.vier-demo-chat__send:active { transform:scale(.94); }
.vier-demo-chat__send:disabled, .vier-demo-chat__quick button:disabled { opacity:.55; cursor:wait; }
.vier-chat-showcase__caption { max-width:400px; margin:18px 0 0; font-size:11px; line-height:1.6; text-align:center; color:#98b9b3; }
.vier-chat-demo-link { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:15px; margin-top:22px; background:var(--primary-soft); border:1px solid var(--border); border-radius:15px; }
.vier-chat-demo-link p { margin:0!important; font-size:12px!important; }
.vier-chat-demo-link a { flex:0 0 auto; color:var(--primary); font-size:12px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
@keyframes vier-demo-message { from {opacity:0;transform:translateY(10px) scale(.98);} to {opacity:1;transform:translateY(0) scale(1);} }
@keyframes vier-demo-dot { 0%,60%,100%{opacity:.38;transform:translateY(0);} 30%{opacity:1;transform:translateY(-4px);} }
@keyframes vier-demo-pulse { 50%{box-shadow:0 0 0 10px rgba(45,226,156,0);} }
@keyframes vier-demo-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
@media (max-width: 920px) {
  .vier-chat-showcase { grid-template-columns:1fr; gap:30px; padding:36px 24px; min-height:0; }
  .vier-chat-showcase__intro { max-width:660px; margin:0 auto; text-align:center; }
  .vier-chat-showcase__commands { justify-content:center; }
  .vier-chat-showcase__intro p.vier-chat-showcase__disclaimer { margin-left:auto; margin-right:auto; text-align:left; }
}
@media (max-width: 480px) {
  .vier-chat-showcase { margin-left:-2px; margin-right:-2px; padding:25px 12px; gap:23px; border-radius:23px; }
  .vier-chat-showcase__intro h3 { font-size:clamp(28px,8.5vw,37px); margin:14px 0; }
  .vier-chat-showcase__intro > p { font-size:13px; line-height:1.6; }
  .vier-chat-showcase__commands { margin:17px 0; gap:6px; }
  .vier-chat-showcase__commands span { padding:7px 9px; font-size:10px; }
  .vier-demo-phone { width:min(100%,375px); padding:6px; border-radius:37px; }
  .vier-demo-phone__bezel { border-radius:30px; padding-top:11px; }
  .vier-demo-chat { height:540px; max-height:70vh; min-height:400px; }
  .vier-demo-chat__header { min-height:62px; padding:10px 12px; }
  .vier-demo-chat__messages { padding:12px 10px; gap:11px; }
  .vier-demo-chat__bubble { font-size:12.5px; }
  .vier-demo-chat__controls { padding:10px 8px 11px; }
  .vier-demo-chat__quick button { padding:7px 10px; font-size:11px; }
  .vier-chat-demo-link { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  .vier-chat-showcase__pulse, .vier-demo-phone, .vier-demo-chat__bubble, .vier-demo-chat__typing i { animation:none!important; }
}

/* ============================================================
   VierBot dynamic theme v2
   Source of truth: /assets/css/styles.css (site-wide variables)
   The existing #themeToggle updates <html data-theme="light|dark">.
   No script, timers or remounting of the demo are necessary.
   ============================================================ */
.vier-chat-showcase {
  --vc-accent: var(--primary, #5b5cf6);
  --vc-accent-2: var(--primary-2, #7c3aed);
  --vc-text: var(--text, #101426);
  --vc-muted: var(--muted, #667085);
  --vc-outline: var(--border, rgba(20, 27, 48, .1));
  --vc-card: var(--surface-solid, #fff);
  --vc-soft: var(--surface-2, #f1f3f9);
  --vc-phone-rim: #e1e4f4;
  --vc-phone-bezel: #e9ebfa;
  --vc-phone-screen: #ffffff;
  --vc-head: #ffffff;
  --vc-chat-bg: #f7f8fc;
  --vc-bot-bg: #ffffff;
  --vc-bot-text: #101426;
  --vc-me-bg: #5b5cf6;
  --vc-me-text: #ffffff;
  --vc-timestamp: #647087;
  --vc-me-timestamp: rgba(255, 255, 255, .79);
  --vc-controls: #ffffff;
  --vc-field: #f1f3f9;
  --vc-field-text: #101426;
  --vc-placeholder: #667085;
  --vc-quick: #eef0ff;
  --vc-quick-text: #5354d6;
  --vc-dot: rgba(91, 92, 246, .13);
  border-color: var(--vc-outline);
  background:
    radial-gradient(ellipse at 78% 30%, color-mix(in srgb, var(--vc-accent) 8%, transparent), transparent 54%),
    radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--vc-accent-2) 6%, transparent), transparent 58%),
    var(--vc-card);
  box-shadow: var(--shadow, 0 24px 80px rgba(37, 43, 82, .12));
  color: var(--vc-text);
}
html[data-theme="dark"] .vier-chat-showcase {
  --vc-phone-rim: #31384e;
  --vc-phone-bezel: #20273a;
  --vc-phone-screen: #131827;
  --vc-head: #1b2131;
  --vc-chat-bg: #0f1421;
  --vc-bot-bg: #252b40;
  --vc-bot-text: #f4f6fb;
  --vc-me-bg: #4e50c5;
  --vc-me-text: #ffffff;
  --vc-timestamp: #abb4c9;
  --vc-me-timestamp: rgba(255, 255, 255, .76);
  --vc-controls: #1b2131;
  --vc-field: #30374c;
  --vc-field-text: #f4f6fb;
  --vc-placeholder: #bbc2d2;
  --vc-quick: #303752;
  --vc-quick-text: #c9c9ff;
  --vc-dot: rgba(137, 131, 255, .12);
}
.vier-chat-showcase::before {
  background-image: radial-gradient(circle, var(--vc-dot) 1px, transparent 1.5px);
  opacity: .75;
}
.vier-chat-showcase__eyebrow,
.vier-chat-showcase__intro h3 span { color: var(--vc-accent); }
.vier-chat-showcase__pulse {
  background: var(--vc-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--vc-accent) 12%, transparent);
}
.vier-chat-showcase__intro h3,
.vier-chat-showcase__intro > p strong { color: var(--vc-text); }
.vier-chat-showcase__intro > p,
.vier-chat-showcase__intro p.vier-chat-showcase__disclaimer,
.vier-chat-showcase__caption { color: var(--vc-muted); }
.vier-chat-showcase__commands span {
  background: var(--primary-soft, #eef0ff);
  border-color: color-mix(in srgb, var(--vc-accent) 22%, transparent);
  color: var(--vc-accent);
}
.vier-demo-phone {
  background: linear-gradient(140deg, var(--vc-phone-rim), var(--vc-phone-screen) 55%, var(--vc-phone-rim));
  border-color: var(--vc-phone-rim);
  box-shadow: 0 25px 55px rgba(20, 28, 75, .18),
              inset 0 0 0 2px color-mix(in srgb, var(--vc-card) 32%, transparent),
              0 0 0 7px color-mix(in srgb, var(--vc-accent) 6%, transparent);
}
html[data-theme="dark"] .vier-demo-phone {
  box-shadow: 0 27px 60px rgba(0, 0, 0, .38),
              inset 0 0 0 2px rgba(255, 255, 255, .04),
              0 0 0 7px rgba(80, 80, 170, .12);
}
.vier-demo-phone__bezel { border-color: var(--vc-phone-rim); background: var(--vc-phone-bezel); }
.vier-demo-phone__camera { background: var(--vc-phone-bezel); }
.vier-demo-chat { background: var(--vc-phone-screen); }
.vier-demo-chat__header {
  background: var(--vc-head);
  border-bottom-color: var(--vc-outline);
}
.vier-demo-chat__avatar {
  background: linear-gradient(135deg, var(--vc-accent), var(--vc-accent-2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vc-accent) 22%, transparent);
  color: #ffffff;
}
.vier-demo-chat__identity strong { color: var(--vc-text); }
.vier-demo-chat__identity small { color: var(--vc-muted); }
.vier-demo-chat__identity small i { background: var(--vc-accent); }
.vier-demo-chat__reset {
  color: var(--vc-text); background: var(--vc-soft);
  border-color: var(--vc-outline);
}
.vier-demo-chat__reset:hover {
  background: var(--primary-soft, #eef0ff);
  border-color: var(--vc-accent);
}
.vier-demo-chat__messages {
  background-color: var(--vc-chat-bg);
  background-image: radial-gradient(circle at center, var(--vc-dot) 1px, transparent 1.5px);
  scrollbar-color: var(--vc-phone-rim) transparent;
}
.vier-demo-chat__bubble--bot,
.vier-demo-chat__typing { background: var(--vc-bot-bg); color: var(--vc-bot-text); }
.vier-demo-chat__bubble--me { background: var(--vc-me-bg); color: var(--vc-me-text); }
.vier-demo-chat__bubble--bot .vier-demo-chat__bubble-body strong { color: var(--vc-accent); }
.vier-demo-chat__bubble--bot .vier-demo-chat__bubble-time { color: var(--vc-timestamp); }
.vier-demo-chat__bubble--me .vier-demo-chat__bubble-time { color: var(--vc-me-timestamp); }
.vier-demo-chat__ticks { color: #a9dcff; }
.vier-demo-chat__typing i { background: var(--vc-accent); }
.vier-demo-chat__menu { border-top-color: var(--vc-outline); }
.vier-demo-chat__menu span { color: var(--vc-bot-text); }
.vier-demo-chat__menu small { color: var(--vc-muted); }
.vier-demo-chat__controls { background: var(--vc-controls); border-top-color: var(--vc-outline); }
.vier-demo-chat__quick button {
  border-color: color-mix(in srgb, var(--vc-accent) 18%, transparent);
  background: var(--vc-quick); color: var(--vc-quick-text);
}
.vier-demo-chat__quick button:hover,
.vier-demo-chat__quick button:focus-visible {
  border-color: var(--vc-accent);
  background: var(--primary-soft, #eef0ff);
}
.vier-demo-chat__input-wrap { background: var(--vc-field); }
.vier-demo-chat__input-wrap:focus-within { border-color: var(--vc-accent); }
.vier-demo-chat__input-icon { color: var(--vc-muted); }
.vier-demo-chat__input-wrap input { color: var(--vc-field-text)!important; }
.vier-demo-chat__input-wrap input::placeholder { color: var(--vc-placeholder); }
.vier-demo-chat__send {
  background: linear-gradient(135deg, var(--vc-accent), var(--vc-accent-2));
  box-shadow: 0 5px 15px color-mix(in srgb, var(--vc-accent) 28%, transparent);
  color: #ffffff;
}
/* Preserve the green Brat sticker sample: its color is part of that command's output,
   not the VierBot site theme. */
@media (prefers-reduced-motion: reduce) {
  .vier-chat-showcase *, .vier-chat-showcase *::before, .vier-chat-showcase *::after {
    transition-duration: 0.01ms!important;
  }
}