/*
 * THE GREETER'S LOOK (public/visitor-voice/greeter.js is how it behaves,
 * components/landing/GreeterMarkup.tsx is what it is made of). Linked by the
 * page itself, so the bar is drawn with the first paint and never waits for a
 * script. finmanagerai.com keeps an identical copy of all three files; change
 * one, copy it to the other (the website's tests/visitor-greeter.test.js
 * compares them byte for byte).
 *
 * Where it sits (data-place):
 *   top    on a phone, inside the landing page's own top bar: the sentence and
 *          the microphone, with the page's own start button under them
 *   float  on a computer, a pill at the bottom right of a landing page, the
 *          floating top bar's own glass, the sentence on one line
 *   panel  on a setup guide page: across the bottom of a phone, the pill on a
 *          computer, with the start button under the sentence
 * The pages' own tokens: one teal (#00B4D8), its darker ink for small words,
 * the ink, Inter. On a guide page it takes the guide's own colours, so it
 * follows the guide's light and dark.
 */
.vg,.vg-ring{--vg-teal:#00B4D8;--vg-teal-ink:#007f99;--vg-ink:#0f172a;--vg-muted:#475569;--vg-glass:rgba(255,255,255,.72);--vg-edge:rgba(15,23,42,.06)}
.doc-shell .vg{--vg-teal:var(--doc-accent);--vg-ink:var(--doc-ink);--vg-muted:var(--doc-muted)}
.doc-shell.dark .vg{--vg-teal-ink:var(--doc-accent-dark);--vg-glass:rgba(16,16,16,.78);--vg-edge:rgba(255,255,255,.08)}
.vg{box-sizing:border-box;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--vg-ink)}
.vg *{box-sizing:border-box}
.vg-row{display:flex;align-items:center;gap:12px;min-width:0}
.vg-say,.vg-links{flex:1;min-width:0;margin:0;font-size:15px;line-height:1.45;font-weight:500;color:inherit}
.vg-say svg{display:inline-block;vertical-align:-.16em;margin:0 .1em;color:var(--vg-teal);width:1.12em;height:1.12em}
.vg-links a,.vg-links button{font:inherit;font-weight:700;color:var(--vg-teal-ink);background:none;border:0;padding:0;margin:0;text-decoration:none;cursor:pointer}
.vg-links a:hover,.vg-links button:hover{text-decoration:underline}
.vg-mic,.vg-stop{flex:none;width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;background:var(--vg-teal);color:#fff;box-shadow:0 6px 16px rgba(0,180,216,.24);transition:transform .15s ease,filter .15s ease}
.vg-mic:hover,.vg-stop:hover{transform:translateY(-2px);filter:brightness(1.07)}
.vg-mic svg{width:20px;height:20px}
.vg-wave{flex:1;min-width:120px;height:28px;display:flex;align-items:center;justify-content:space-between;gap:2px;color:inherit}
.vg-wave i{flex:1;max-width:3px;height:100%;border-radius:2px;background:currentColor;transform:scaleY(.14);will-change:transform}
.vg[data-phase="starting"] .vg-wave,.vg[data-phase="speaking"] .vg-wave,.vg[data-phase="working"] .vg-wave{color:var(--vg-teal)}
.vg-under{display:flex;margin-top:10px}
.vg-start{display:inline-flex;align-items:center;background:var(--vg-teal);color:#fff !important;font-family:inherit;font-weight:800;font-size:14px;line-height:1.2;padding:10px 22px;border-radius:999px;border:0;text-decoration:none;cursor:pointer;box-shadow:0 6px 16px rgba(0,180,216,.24);transition:transform .15s ease,filter .15s ease}
.vg-start:hover{transform:translateY(-2px);filter:brightness(1.07)}

/* One control at a time: at rest the sentence and the microphone; talking,
   only the wave and Stop; with no voice, the page's own links. */
.vg-links,.vg-wave,.vg-stop{display:none}
.vg[data-state="live"] .vg-say,.vg[data-state="live"] .vg-mic,.vg[data-state="live"] .vg-under{display:none}
.vg[data-state="live"] .vg-wave{display:flex}
.vg[data-state="live"] .vg-stop{display:grid}
.vg[data-state="links"] .vg-say,.vg[data-state="links"] .vg-mic{display:none}
.vg[data-state="links"] .vg-links{display:block}
.vg[data-state="links"] .vg-row:has(> .vg-links:empty){display:none}
.vg[data-state="links"] .vg-under{margin-top:0}

/* THE PILL on a computer: bottom right, the floating top bar's own glass, the
   sentence on one line (owner, 2026-10-14: "that text should be one line as
   there is space"). */
.vg[data-place="float"],.vg[data-place="panel"]{position:fixed;z-index:40;right:20px;bottom:20px;max-width:calc(100vw - 40px);padding:8px 8px 8px 22px;border-radius:999px;background:var(--vg-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--vg-edge);box-shadow:0 12px 36px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.06);transition:opacity .3s ease,transform .3s ease}
.vg[data-place="float"] .vg-say,.vg[data-place="panel"] .vg-say{white-space:nowrap}
.vg[data-place="panel"]{border-radius:24px;padding:12px 12px 14px 22px}
.vg[data-place="panel"][data-state="live"]{border-radius:999px;padding:8px 8px 8px 22px}
.vg[data-state="live"] .vg-row{gap:16px}
.vg[data-state="links"][data-place="float"]{padding-top:12px;padding-bottom:12px}
.vg[data-away="true"]{opacity:0;transform:translateY(10px);pointer-events:none}
.vg[data-place="top"]{display:none}
/* A narrow computer window: the sentence may wrap rather than run off. */
@media (max-width:760px){
  .vg[data-place="float"] .vg-say,.vg[data-place="panel"] .vg-say{white-space:normal}
}

/* A PHONE: the landing pages carry it in their own top bar, so the pill goes;
   a guide page has it across the bottom edge with the app's bottom bar frost
   and no box. */
@media (max-width:640px){
  .vg[data-place="float"]{display:none}
  /* What the bar takes the place of in the top bar (the page's name, its
     links): marked data-greeter-yields, so it is never painted first. */
  html:not(.vg-off) [data-greeter-yields]{display:none}
  .vg[data-place="top"]{display:block;flex:1 1 100%;min-width:0;color:inherit}
  .vg[data-place="top"] .vg-say,.vg[data-place="top"] .vg-links{font-size:15px}
  .vg[data-place="top"] .vg-links a,.vg[data-place="top"] .vg-links button{color:inherit;text-decoration:underline}
  .vg[data-place="panel"]{left:0;right:0;bottom:0;max-width:none;border-radius:0 !important;border:0;box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:14px calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px)) !important;text-shadow:0 1px 3px var(--vg-glass)}
  .vg[data-place="panel"]::before,.vg[data-place="panel"]::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;pointer-events:none}
  .vg[data-place="panel"]::before{height:calc(100% + 40px);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60%);mask-image:linear-gradient(to bottom,transparent 0,#000 60%)}
  .vg[data-place="panel"]::after{height:calc(100% + 22px);background:var(--vg-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}
  .vg[data-place="panel"] .vg-say{white-space:normal}
  .vg[data-place="panel"]{--vg-glass:rgba(255,255,255,.78)}
  .doc-shell.dark .vg[data-place="panel"]{--vg-glass:rgba(0,0,0,.78)}
}

/* Not in the phone apps, not in Atlas Studio, not in the guide shown inside
   the dashboard (a script before the bar marks the page). */
.vg-off .vg{display:none !important}

/* THE RING, as Atlas Studio draws it round what its voice points at
   (atlas-studio src/renderer/styles.css, ".voice-ring"): a teal edge that
   pulses outward and carries no words. Fixed over the page and moved by
   script, so nothing on the page shifts and a press goes through to what is
   under it. It fades as it goes. */
.vg-ring{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;box-sizing:border-box;border:2px solid var(--vg-teal);border-radius:12px;animation:vg-ring-beam 1.4s ease-out infinite;opacity:1;transition:opacity .3s ease}
.vg-ring[data-going="true"]{opacity:0}
@keyframes vg-ring-beam{from{box-shadow:0 0 0 0 var(--vg-teal)}to{box-shadow:0 0 0 12px transparent}}
@media (prefers-reduced-motion:reduce){.vg-ring{animation:none}.vg-mic,.vg-stop,.vg-start,.vg[data-place]{transition:none}}