/* =========================================================
   Verbosys AI — chat widget
   Uses the site's design tokens from styles.css (--orange, --amber, …)
   ========================================================= */

@property --vx-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.vx-root {
  --vx-bg: rgba(14, 14, 16, 0.86);
  --vx-bubble: #1C1C20;
  --vx-radius: 26px;
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  font-family: var(--font); color: var(--text);
}

/* ---------- Launcher ---------- */
.vx-launcher {
  display: flex; align-items: center; gap: 0; height: 64px; padding: 0; margin-left: auto;
  border: 0; border-radius: 999px; cursor: pointer; color: var(--text);
  background: rgba(20, 20, 22, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08), 0 10px 40px -10px rgba(255,106,31,.55);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, opacity .3s;
}
.vx-launcher:hover { transform: translateY(-2px); box-shadow: 0 22px 60px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,106,31,.35), 0 14px 50px -8px rgba(255,106,31,.7); }
.vx-launcher-label {
  max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 500; font-size: 15px;
  opacity: 0; transition: max-width .45s cubic-bezier(.2,.8,.2,1), opacity .3s, padding .45s;
}
.vx-root.is-hint .vx-launcher-label,
.vx-launcher:hover .vx-launcher-label,
.vx-launcher:focus-visible .vx-launcher-label { max-width: 220px; opacity: 1; padding: 0 22px 0 4px; }
.vx-root[data-open="true"] .vx-launcher { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ---------- The orb (brand "AI presence") ---------- */
.vx-orb {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
}
.vx-orb::before {                     /* rotating ring */
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: conic-gradient(from var(--vx-angle), #FFB547, #FF6A1F, #FF3D1F, #FFB547 70%, rgba(255,181,71,.2), #FFB547);
  animation: vx-spin 4s linear infinite;
  filter: blur(.3px);
}
.vx-orb::after {                      /* dark core */
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a2416 0%, #140c07 55%, #0a0a0b 100%);
  box-shadow: inset 0 0 12px rgba(255,106,31,.45);
}
.vx-orb-core {
  position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff4e0, #FFB547 45%, #FF6A1F 100%);
  box-shadow: 0 0 18px 4px rgba(255,140,50,.75);
  animation: vx-breathe 3.2s ease-in-out infinite;
}
.vx-orb.sm { width: 40px; height: 40px; }
.vx-orb.sm::before { inset: 3px; }
.vx-orb.sm::after { inset: 5px; }
.vx-orb.sm .vx-orb-core { width: 10px; height: 10px; box-shadow: 0 0 12px 3px rgba(255,140,50,.7); }
.vx-root.is-thinking .vx-orb::before { animation-duration: 1.1s; }
.vx-root.is-thinking .vx-orb-core { animation-duration: 1s; }
@keyframes vx-spin { to { --vx-angle: 360deg; } }
@keyframes vx-breathe { 50% { transform: scale(.78); opacity: .85; } }

/* ---------- Panel ---------- */
.vx-panel {
  position: absolute; right: 0; bottom: 0; width: 408px; height: min(680px, calc(100vh - 48px));
  display: flex; flex-direction: column; border-radius: var(--vx-radius);
  background: var(--vx-bg); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.95), 0 30px 80px -40px rgba(255,106,31,.45);
  transform-origin: 100% 100%; transform: translateY(16px) scale(.94); opacity: 0; visibility: hidden;
  pointer-events: none; /* a closed (fading) panel must never block the launcher underneath */
  transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .3s ease, visibility 0s linear .45s;
  overflow: hidden; overflow: clip; /* clip = decorations can never make the panel scroll sideways */
  isolation: isolate;
}
.vx-root[data-open="true"] .vx-panel { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; pointer-events: auto; }
.vx-panel::before {                   /* living gradient edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--vx-angle), rgba(255,181,71,.65), rgba(255,106,31,.1) 25%, rgba(255,255,255,.06) 50%, rgba(255,106,31,.5) 75%, rgba(255,181,71,.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: vx-spin 9s linear infinite;
}
.vx-panel::after {                    /* soft aurora inside */
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -160px; top: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,31,.22), transparent 65%); filter: blur(20px); pointer-events: none;
}

/* Header */
.vx-head { display: flex; align-items: center; gap: 12px; padding: 16px 14px 12px 18px; }
.vx-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.vx-title strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.vx-status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.vx-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(61,220,151,.15); }
.vx-icon-btn {
  width: 36px; height: 36px; border-radius: 12px; border: 0; background: transparent; color: var(--text-2);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s;
}
.vx-icon-btn:hover { background: rgba(255,255,255,.07); color: var(--text); }
.vx-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Tabs */
.vx-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 0 16px; padding: 4px;
  border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.vx-tab {
  position: relative; z-index: 1; border: 0; background: none; color: var(--text-2); cursor: pointer;
  font: 500 14px var(--font); padding: 9px 8px; border-radius: 10px; transition: color .25s;
}
.vx-tab[aria-selected="true"] { color: var(--text); }
.vx-tab-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px rgba(255,106,31,.35), 0 6px 20px -8px rgba(255,106,31,.5);
  transition: transform .4s cubic-bezier(.3,.9,.3,1);
}
.vx-root[data-tab="demo"] .vx-tab-pill { transform: translateX(100%); }
.vx-disclosure { text-align: center; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 0 2px; }

/* Views */
.vx-views { position: relative; flex: 1; min-height: 0; overflow: hidden; overflow: clip; }
.vx-view { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .3s; }
.vx-view.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vx-log {
  flex: 1; overflow-y: auto; padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; overscroll-behavior: contain;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 6px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 6px), transparent 100%);
}

/* Messages */
.vx-msg { max-width: 86%; font-size: 14.5px; line-height: 1.5; animation: vx-in .38s cubic-bezier(.2,.9,.3,1.15) both; overflow-wrap: anywhere; }
.vx-msg .vx-who { display: block; font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--amber); margin: 0 0 5px 2px; }
.vx-bubble { padding: 11px 15px; border-radius: 18px; }
.vx-msg.ai { align-self: flex-start; }
.vx-msg.ai .vx-bubble {
  background: linear-gradient(135deg, rgba(255,106,31,.14), rgba(255,181,71,.05) 60%, rgba(255,255,255,.02));
  border: 1px solid rgba(255,106,31,.26); border-top-left-radius: 6px;
}
.vx-msg.user { align-self: flex-end; }
.vx-msg.user .vx-bubble { background: var(--vx-bubble); border: 1px solid rgba(255,255,255,.08); border-top-right-radius: 6px; }
.vx-bubble strong { font-weight: 600; color: #fff; }
@keyframes vx-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Thinking */
.vx-typing .vx-bubble { display: flex; align-items: center; gap: 10px; }
.vx-dots { display: inline-flex; gap: 4px; }
.vx-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: vx-dot 1.1s infinite; }
.vx-dots i:nth-child(2) { animation-delay: .15s; } .vx-dots i:nth-child(3) { animation-delay: .3s; }
.vx-shimmer {
  font: 500 12px var(--mono); letter-spacing: .04em;
  background: linear-gradient(90deg, var(--text-3) 0%, #fff 50%, var(--text-3) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: vx-shine 1.6s linear infinite;
}
@keyframes vx-dot { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes vx-shine { to { background-position: -200% 0; } }

/* System pill (e.g. "sent to the team") */
.vx-pill { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 500 12px var(--mono); color: var(--green); background: rgba(61,220,151,.08); border: 1px solid rgba(61,220,151,.25); animation: vx-in .4s both; }

/* Cards (scripted messages, soft note) */
.vx-card {
  align-self: stretch; padding: 16px; border-radius: 18px; animation: vx-in .45s both;
  background: radial-gradient(260px circle at 0 0, rgba(255,106,31,.16), transparent 70%), rgba(255,255,255,.03);
  border: 1px solid rgba(255,106,31,.3);
}
.vx-card-text { font-size: 14px; line-height: 1.55; }
.vx-langs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.vx-lang { border: 1px solid rgba(255,255,255,.1); background: transparent; color: var(--text-3); font: 500 10.5px var(--mono); padding: 4px 7px; border-radius: 7px; cursor: pointer; transition: all .2s; }
.vx-lang:hover { color: var(--text); border-color: rgba(255,106,31,.4); }
.vx-lang[aria-pressed="true"] { color: var(--amber); border-color: rgba(255,106,31,.6); background: rgba(255,106,31,.1); }
.vx-inline-form { display: flex; gap: 6px; margin-top: 12px; }
.vx-inline-form input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35); color: var(--text); font: 400 14px var(--font);
}
.vx-inline-form input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,106,31,.15); }
.vx-inline-form input.invalid { border-color: var(--red); }
.vx-btn {
  border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; white-space: nowrap;
  font: 600 13.5px var(--font); color: #140800; background: var(--grad);
  box-shadow: 0 8px 22px -10px rgba(255,106,31,.8), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .2s, opacity .2s;
}
.vx-btn:hover { transform: translateY(-1px); }
.vx-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.vx-btn.ghost { background: rgba(255,255,255,.05); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.vx-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vx-card-done { margin-top: 12px; font-size: 13.5px; color: var(--green); }

.vx-soft { border-style: dashed; }
.vx-blur { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.vx-blur .lock { font-size: 14px; }
.vx-blur span:not(.lock) { height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,181,71,.55), rgba(255,106,31,.4)); filter: blur(3.5px); opacity: .8; }
.vx-soft .vx-card-text { font-size: 13px; color: var(--text-2); }

/* Quick chips */
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.vx-chips[hidden] { display: none; }
.vx-chip {
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--text); cursor: pointer;
  font: 500 13px var(--font); padding: 8px 12px; border-radius: 999px; transition: all .2s; animation: vx-in .4s both;
}
.vx-chip:hover { border-color: rgba(255,106,31,.55); background: rgba(255,106,31,.08); color: var(--amber); }

/* Bot-check slot: empty and invisible unless Cloudflare needs a click */
.vx-ts { display: flex; justify-content: center; padding: 0 12px; }
.vx-ts:empty { display: none; }
.vx-ts iframe { max-width: 100%; }

/* Composer */
.vx-composer {
  display: flex; align-items: flex-end; gap: 8px; margin: 4px 12px 8px; padding: 6px 6px 6px 14px;
  border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: border-color .2s, box-shadow .2s;
}
.vx-composer:focus-within { border-color: rgba(255,106,31,.55); box-shadow: 0 0 0 4px rgba(255,106,31,.1); }
.vx-composer[hidden] { display: none; }
.vx-input {
  flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--text);
  font: 400 15px/1.45 var(--font); padding: 8px 0; max-height: 120px;
}
.vx-input::placeholder { color: var(--text-3); }
.vx-root .vx-input:focus-visible { outline: none; } /* the composer itself shows focus */
.vx-send {
  flex: none; width: 40px; height: 40px; border-radius: 14px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--grad); color: #140800; box-shadow: 0 8px 20px -8px rgba(255,106,31,.8); transition: transform .2s, opacity .2s, filter .2s;
}
.vx-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vx-send:hover { transform: translateY(-1px) scale(1.04); }
.vx-send:disabled { opacity: .35; cursor: default; transform: none; filter: grayscale(.4); }
.vx-count { font: 500 11px var(--mono); color: var(--text-3); align-self: center; }
.vx-count.warn { color: var(--amber); }
.vx-foot { text-align: center; font-size: 11.5px; color: var(--text-3); padding: 0 0 12px; }
.vx-foot a { color: var(--text-2); }
.vx-foot a:hover { color: var(--amber); }

/* ---------- Demo picker ---------- */
.vx-pick { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.vx-pick-kicker { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin: 0 0 2px 2px; }
.vx-demo-card {
  position: relative; display: block; width: 100%; text-align: left; padding: 16px; border-radius: 20px; color: var(--text);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); cursor: pointer; font: inherit;
  transition: border-color .25s, background .25s, transform .25s; animation: vx-in .45s both;
}
.vx-demo-card:nth-child(3) { animation-delay: .06s; }
.vx-demo-card:hover { border-color: rgba(255,106,31,.45); background: rgba(255,106,31,.05); }
button.vx-demo-card:hover { transform: translateY(-2px); }
.vx-demo-top { display: flex; align-items: center; gap: 12px; }
.vx-demo-ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,106,31,.12); border: 1px solid rgba(255,106,31,.3); }
.vx-demo-ico svg { width: 21px; height: 21px; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vx-demo-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vx-demo-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.vx-demo-caption { font-size: 12.5px; color: var(--text-3); font-weight: 400; }
.vx-badge {
  font: 600 10px var(--mono); letter-spacing: .04em; padding: 2px 6px; border-radius: 6px;
  color: var(--amber); background: rgba(255,181,71,.1); border: 1px solid rgba(255,181,71,.35);
}
.vx-info-btn {
  flex: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font: italic 600 13px Georgia, 'Times New Roman', serif; color: var(--text-2);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); transition: all .2s;
}
.vx-info-btn:hover, .vx-info-btn[aria-expanded="true"] { color: var(--amber); border-color: rgba(255,106,31,.55); background: rgba(255,106,31,.1); }
.vx-info-panel {
  margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55; color: var(--text-2);
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); animation: vx-in .3s both;
}
.vx-info-panel strong { color: var(--text); font-weight: 500; }
.vx-info-foot { display: block; margin-top: 8px; font: 500 11px var(--mono); letter-spacing: .03em; color: var(--text-3); }
.vx-intro {
  align-self: stretch; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-2); animation: vx-in .4s both;
  background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.14);
}
.vx-intro strong { color: var(--text); font-weight: 500; }
.vx-intro-ico { font-size: 16px; line-height: 1.2; }
.vx-demo-arrow { color: var(--text-3); transition: transform .25s, color .25s; }
.vx-demo-card:hover .vx-demo-arrow { transform: translateX(3px); color: var(--amber); }
.vx-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.vx-seg button {
  border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25); color: var(--text-2); cursor: pointer;
  font: 500 13.5px var(--font); padding: 10px 8px; border-radius: 12px; transition: all .2s;
}
.vx-seg button:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.vx-seg button[aria-pressed="true"] { color: var(--text); border-color: rgba(255,106,31,.7); background: rgba(255,106,31,.12); box-shadow: 0 0 0 3px rgba(255,106,31,.08); }
.vx-start { width: 100%; margin-top: 12px; padding: 12px; }
.vx-pick-note { text-align: center; font: 500 11px var(--mono); color: var(--text-3); letter-spacing: .04em; margin-top: 2px; }

/* Demo bar */
.vx-demobar { display: flex; align-items: center; gap: 10px; padding: 10px 16px 6px; }
.vx-back { width: 32px; height: 32px; border-radius: 10px; }
.vx-demo-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.vx-avatar-mini {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; position: relative;
  font-weight: 600; font-size: 14px; color: #140800; background: var(--grad);
}
.vx-avatar-mini::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid #111; }
.vx-demo-label strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-demo-label small { display: block; font: 500 10.5px var(--mono); color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; }
.vx-ring { position: relative; width: 40px; height: 40px; flex: none; }
.vx-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.vx-ring circle { fill: none; stroke-width: 3; }
.vx-ring .bg { stroke: rgba(255,255,255,.08); }
.vx-ring .fg { stroke: url(#vxGrad); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.3,.8,.3,1); }
.vx-ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11px var(--mono); }

/* Toast */
.vx-toast {
  position: absolute; left: 50%; bottom: 86px; transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; background: #1f1f23; border: 1px solid rgba(255,255,255,.12);
  transition: opacity .25s, transform .25s; z-index: 4; white-space: nowrap;
}
.vx-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Scrollbars: thin and dark (browsers set to "always show scrollbars" otherwise draw a light default bar) */
.vx-log, .vx-pick { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.vx-log::-webkit-scrollbar, .vx-pick::-webkit-scrollbar { width: 8px; }
.vx-log::-webkit-scrollbar-track, .vx-pick::-webkit-scrollbar-track { background: transparent; }
.vx-log::-webkit-scrollbar-thumb, .vx-pick::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.vx-log::-webkit-scrollbar-thumb:hover, .vx-pick::-webkit-scrollbar-thumb:hover { background-color: rgba(255,106,31,.55); }
.vx-log:hover, .vx-pick:hover { scrollbar-color: rgba(255,106,31,.45) transparent; }

/* Focus */
.vx-root button:focus-visible, .vx-root input:focus-visible, .vx-root a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- Mobile: full-screen sheet ---------- */
@media (max-width: 560px) {
  .vx-root { right: 16px; bottom: 16px; }
  .vx-launcher { height: 58px; }
  .vx-orb { width: 58px; height: 58px; }
  .vx-root.is-hint .vx-launcher-label { max-width: 0; opacity: 0; padding: 0; }
  .vx-panel {
    position: fixed; inset: 0; width: 100%; height: 100dvh; border-radius: 0;
    transform: translateY(24px); transform-origin: 50% 100%;
  }
  .vx-panel::before { border-radius: 0; }
  .vx-head { padding-top: max(14px, env(safe-area-inset-top)); }
  .vx-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .vx-input { font-size: 16px; } /* prevents iOS zoom */
}

@media (prefers-reduced-motion: reduce) {
  .vx-orb::before, .vx-panel::before, .vx-orb-core, .vx-shimmer, .vx-dots i { animation: none !important; }
  .vx-msg, .vx-card, .vx-chip, .vx-demo-card, .vx-pill { animation: none !important; }
}