/* Ola's interactive hero preview. No call or microphone is started by this interface. */
.hx-ola-art{display:block;width:100%;height:auto;overflow:visible;pointer-events:none}
.hx-ola-art .hx-glass-pane,.hx-ola-art .hx-assembly-shadow{animation:none !important}
.hx-ola-art .hx-pane-top{transform-origin:0 0}
.hx-ola-art .hx-glass-pane:not(.hx-pane-front),.hx-ola-art .hx-ola-pane-surface{transition:opacity .65s ease}
.hx-ola-active .hx-ola-art .hx-glass-pane:not(.hx-pane-front),.hx-ola-active .hx-ola-pane-surface{opacity:1}
.hx-ola-orb-rim{filter:drop-shadow(0 5px 8px #28b8c32b)}
.hx-ola-controls{
  position:absolute;z-index:5;left:var(--hx-ola-controls-left,38.4%);top:var(--hx-ola-controls-top,76%);
  width:340px;padding-top:28px;transform:translateX(-50%);text-align:center;pointer-events:auto;font-family:"HH Inter",Inter,Arial,sans-serif;
}
.hx-ola-controls[hidden]{display:none !important}
.hx-ola-control-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.hx-ola-control{
  display:flex;flex-direction:column;align-items:center;gap:9px;width:76px;padding:0;border:0;background:transparent;
  color:#183d59;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.hx-ola-control-icon{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#fff,#f4fafff2);
  border:1px solid #e7f4ffdd;box-shadow:0 9px 24px #4d86ce20,inset 0 2px 0 #fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .2s,box-shadow .2s,transform .2s;
}
.hx-ola-control-icon svg{display:block;width:27px;height:27px}
.hx-ola-control:hover .hx-ola-control-icon{transform:translateY(-2px);box-shadow:0 7px 18px #27719a29}
.hx-ola-control:focus-visible{outline:3px solid #358bf0;outline-offset:5px;border-radius:16px}
.hx-ola-control:disabled{cursor:default}
.hx-ola-control:disabled .hx-ola-control-icon{opacity:.6}
.hx-ola-control:disabled:hover .hx-ola-control-icon{transform:none}
.hx-ola-control[aria-pressed="true"] .hx-ola-control-icon{color:#fff;background:#2261ba;border-color:#387bcb;box-shadow:0 4px 16px #2165c12b}
/* End Call: a wide red pill with the icon and label inside (the others stay round icons with a caption underneath). */
.hx-ola-end{
  flex-direction:row;justify-content:center;gap:10px;width:auto;min-width:148px;height:58px;padding:0 24px;
  border:1px solid #ff8a91ad;border-radius:999px;color:#fff;background:linear-gradient(140deg,#ff6a72,#ef4056);
  box-shadow:0 9px 24px #e6464c3d,inset 0 2px 0 #ffaaaa80;transition:transform .2s,box-shadow .2s,filter .2s;
}
.hx-ola-end .hx-ola-control-icon{width:auto;height:auto;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff}
.hx-ola-end .hx-ola-control-icon svg{width:24px;height:24px}
.hx-ola-end .hx-ola-control-label{color:#fff;font-size:16px;font-weight:650}
.hx-ola-end:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 12px 28px #e6464c52,inset 0 2px 0 #ffaaaa80}
.hx-ola-end:hover .hx-ola-control-icon{transform:none;box-shadow:none}
.hx-ola-end:focus-visible{border-radius:999px}
.hx-ola-control-label{font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;letter-spacing:-.025em}
/* Status line ("Preview paused", ...): not shown, but kept in the page for screen readers (it is a live region the script updates). */
.hx-ola-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hx-visual[data-ola-muted="true"] .hx-ola-wave rect,
.hx-visual[data-ola-paused="true"] .hx-ola-wave rect{animation-play-state:paused !important}
.hx-visual[data-ola-muted="true"] .hx-ola-wave{opacity:.5}
.hx-visual[data-ola-paused="true"] .hx-h-flow,
.hx-visual[data-ola-paused="true"] .hx-h-color{animation-play-state:paused !important}
.hx-visual[data-ola-muted="true"] .hx-ola-side-waves{opacity:.4}
.hx-visual[data-ola-muted="true"] .hx-ola-side-waves rect,
.hx-visual[data-ola-paused="true"] .hx-ola-side-waves rect,
.hx-visual[data-ola-paused="true"] .hx-ola-ripples circle{animation-play-state:paused !important}
.hx-ola-side-waves rect,.hx-ola-ripples circle{transform-box:fill-box;transform-origin:center}
.hx-ola-ripples circle{transform-origin:0 0;transform-box:view-box}
@keyframes hxOlaSideWave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes hxOlaRipple{from{transform:scale(.98);opacity:.15}to{transform:scale(1.025);opacity:.55}}
@media (prefers-reduced-motion:no-preference){
  .hx-ola-active .hx-ola-side-waves rect{animation:hxOlaSideWave 1.8s ease-in-out var(--wave-delay) infinite}
  .hx-ola-active .hx-ola-ripples circle{animation:hxOlaRipple 5.5s ease-in-out var(--ripple-delay) infinite alternate}
}
.hx-ola-error{max-width:480px;margin:14px 0 0;font-size:14px;line-height:1.45;color:#546b83}
@media (max-width:900px){
  .hx-visual.hx-ola-active{min-height:var(--hx-ola-active-height,0px);margin-bottom:12px}
  .hx-ola-controls{width:288px;padding-top:16px}
  .hx-ola-control-row{gap:12px}
  .hx-ola-control{width:64px;gap:7px}
  .hx-ola-control-icon{width:48px;height:48px}
  .hx-ola-control-icon svg{width:24px;height:24px}
  .hx-ola-control-label{font-size:12.5px}
  .hx-ola-end{width:auto;min-width:124px;height:48px;padding:0 18px;gap:8px}
  .hx-ola-end .hx-ola-control-icon svg{width:21px;height:21px}
  .hx-ola-end .hx-ola-control-label{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .hx-ola-art .hx-glass-pane:not(.hx-pane-front),.hx-ola-art .hx-ola-pane-surface,.hx-ola-control-icon{transition:none}
}

/* ---------- docked call bar: the agent follows the visitor to the bottom-right corner once the hero controls scroll away ---------- */
.hx-ola-dock{
  position:fixed;z-index:70;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;height:68px;padding:8px 12px 8px 8px;
  border:1px solid #ffffffe0;border-radius:999px;background:linear-gradient(135deg,#ffffffee,#f1f8ffe6);
  box-shadow:0 0 0 1px #cfeee0,0 22px 46px -14px #1d5f8c59,0 4px 14px #1d5f8c24;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  font-family:"HH Inter",Inter,Arial,sans-serif;color:#0b1233;
  opacity:0;visibility:hidden;transform:translateY(28px) scale(.9);transform-origin:100% 100%;pointer-events:none;
  transition:opacity .25s ease,transform .45s cubic-bezier(.2,.9,.3,1.15),visibility 0s linear .45s;
}
.hx-ola-dock.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.hx-ola-dock-avatar{
  flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 30% 24%,#35e4ff 0,#35e4ff00 46%),linear-gradient(135deg,#0074fb 0%,#00a3b2 42%,#00c04c 68%,#e6ed00 100%);
  box-shadow:inset 0 0 0 2px #ffffffd9,0 8px 16px -8px #0aa6c07a;
}
.hx-ola-dock-avatar svg{width:26px;height:22px;display:block}
.hx-ola-dock-avatar rect{transform-box:fill-box;transform-origin:center;animation:hxDockWave 1.1s ease-in-out infinite}
.hx-ola-dock[data-ola-paused="true"] .hx-ola-dock-avatar rect,.hx-ola-dock[data-ola-muted="true"] .hx-ola-dock-avatar rect{animation-play-state:paused}
@keyframes hxDockWave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.42)}}
.hx-ola-dock-text{display:flex;flex-direction:column;gap:2px;min-width:102px;padding-right:2px;line-height:1.15;white-space:nowrap} /* fits "AI Voice Agent", so "Muted" / "Paused" don't make the bar jump */
.hx-ola-dock-text strong{font-size:20px;font-weight:700;letter-spacing:-.03em}
.hx-ola-dock-sub{font-size:14px;font-weight:500;letter-spacing:-.02em;color:#5a6b84}
.hx-ola-dock-sep{flex:none;width:1px;height:38px;background:#d5dde8}
.hx-ola-dock-btn{
  flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#fff,#f4faff);color:#183d59;box-shadow:0 6px 16px #4d86ce29,inset 0 0 0 1px #e1edf9;
  -webkit-tap-highlight-color:transparent;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.hx-ola-dock-btn svg{display:block;width:22px;height:22px}
.hx-ola-dock-btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px #4d86ce3d,inset 0 0 0 1px #d3e6f7}
.hx-ola-dock-btn:focus-visible{outline:3px solid #358bf0;outline-offset:2px}
.hx-ola-dock-btn[aria-pressed="true"]{background:#2261ba;color:#fff;box-shadow:0 6px 16px #2165c12e}
.hx-ola-dock-btn:disabled{cursor:default;opacity:.6}
.hx-ola-dock-btn:disabled:hover{transform:none}
.hx-ola-dock-end{color:#fff;background:linear-gradient(140deg,#ff6a72,#ef4056);box-shadow:0 8px 18px #e6464c47,inset 0 2px 0 #ffaaaa80}
.hx-ola-dock-end:hover{box-shadow:0 11px 22px #e6464c5c,inset 0 2px 0 #ffaaaa80}
@media (max-width:520px){
  .hx-ola-dock{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));gap:10px;height:62px;padding:7px 10px 7px 7px}
  .hx-ola-dock-avatar{width:46px;height:46px}
  .hx-ola-dock-avatar svg{width:23px;height:20px}
  .hx-ola-dock-sub{display:none}
  .hx-ola-dock-text{min-width:0}
  .hx-ola-dock-text strong{font-size:18px}
  .hx-ola-dock-sep{height:32px}
  .hx-ola-dock-btn{width:42px;height:42px}
  .hx-ola-dock-btn svg{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .hx-ola-dock{transition:opacity .2s ease,visibility 0s linear .2s;transform:none}
  .hx-ola-dock.is-on{transition-delay:0s}
  .hx-ola-dock-avatar rect{animation:none}
}