/* Talk to AI Sales (inc/ai-sales.php, template-parts/ai-sales.php, assets/js/ai-sales.js): the window that asks a name
   and a work email before the ElevenLabs widget mounts, the round button with Peter's photo that appears by itself, and
   the hint that points at the widget's Start a call. Loaded on every page after app.min.css, whose tokens it uses, so
   both themes follow. Static (BRANDBOOK 17): nothing moves, only a colour changes on hover. */

/* the window: centred over a dimmed page, scrolling inside itself when taller than the screen */
.gs-ais{width:min(440px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;
  background:transparent;color:var(--ink);font-family:var(--sans);overflow:auto;overscroll-behavior:contain}
.gs-ais::backdrop{background:rgba(15,11,36,.5)}
.gs-ais .gs-ais-box{position:relative;display:grid;gap:14px;padding:26px 24px 20px;border-radius:22px;background:var(--panel);
  box-shadow:0 0 0 1px var(--line),0 40px 90px -30px rgba(15,11,36,.5)}
.gs-ais .gs-ais-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;padding:0;
  border:0;border-radius:10px;background:transparent;color:var(--mute);cursor:pointer}
.gs-ais .gs-ais-x:hover{background:var(--sunk);color:var(--ink)}

.gs-ais .gs-ais-head{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;margin:0 40px 4px 0}
.gs-ais .gs-ais-face{display:block;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.gs-ais .gs-ais-h{margin:2px 0 0;font:600 22px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink2)}
.gs-ais .gs-ais-sub{margin:6px 0 0;font:400 14px/1.5 var(--sans);color:var(--mute)}

.gs-ais .gs-ais-field{display:grid;gap:6px;font:500 13px/1.3 var(--sans);color:var(--mute)}
.gs-ais .gs-ais-field input{width:100%;box-sizing:border-box;height:46px;padding:0 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);color:var(--ink);font:400 16px/1 var(--sans)}
.gs-ais .gs-ais-field input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}
.gs-ais .gs-ais-field input[aria-invalid="true"]{border-color:var(--brand-red)}
.gs-ais .gs-ais-err{margin:-4px 0 0;font:500 13px/1.4 var(--sans);color:var(--brand-red)}

.gs-ais .gs-ais-go{height:48px;margin-top:4px;border:0;border-radius:12px;background:var(--ink2);color:var(--panel);
  font:600 15px/1 var(--sans);cursor:pointer}
.gs-ais .gs-ais-go:hover{background:var(--ink)}
.gs-ais .gs-ais-skip{justify-self:center;padding:6px 10px;border:0;background:transparent;color:var(--mute);
  font:500 13px/1.3 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gs-ais .gs-ais-skip:hover{color:var(--ink)}

/* the round button: Peter's photo, its words beside it from 560 px (a screen reader reads them on a phone too) */
.gs-ais-bubble{position:fixed;right:20px;bottom:calc(20px + var(--gs-ais-lift,0px));z-index:2147483000;display:flex;
  align-items:center;gap:10px;padding:0;border:0;background:transparent;cursor:pointer;font-family:var(--sans)}
.gs-ais-bubble[hidden]{display:none}
.gs-ais-bubble img{display:block;width:60px;height:60px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--panel),0 0 0 4px var(--line),0 14px 30px -12px rgba(15,11,36,.45)}
.gs-ais-bubble .gs-ais-bubble-l{padding:10px 14px;border-radius:999px;background:var(--ink2);color:var(--panel);
  font:600 14px/1 var(--sans);white-space:nowrap;box-shadow:0 10px 24px -12px rgba(15,11,36,.5)}
.gs-ais-bubble:hover .gs-ais-bubble-l{background:var(--ink)}
@media (max-width:559px){
  .gs-ais-bubble{right:16px;bottom:calc(16px + var(--gs-ais-lift,0px))}
  .gs-ais-bubble .gs-ais-bubble-l{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* the hint over the widget's corner, for six seconds after it mounts or a Talk to AI Sales is pressed again */
.gs-ais-hint{position:fixed;right:20px;bottom:128px;z-index:2147483000;max-width:calc(100vw - 40px);margin:0;padding:10px 14px;
  border-radius:12px;background:var(--ink2);color:var(--panel);font:500 13px/1.35 var(--sans);
  box-shadow:0 10px 24px -12px rgba(15,11,36,.5)}
.gs-ais-hint[hidden]{display:none}

/* once the widget is on, the homepage's phone bar leaves the corner to it */
html.gs-ais-on #rw-cta{display:none!important}