/* ==========================================================================
   Aventa assistant — avatar launcher, comic speech bubble, page tour, chat
   Uses the colour tokens defined in style.css (:root).
   ========================================================================== */

/* ---------- Launcher (her avatar, top of the floating stack) ---------- */
.av-launch{position:relative;width:66px;height:66px;align-self:flex-end;padding:0;border:0;border-radius:50%;background:var(--cream);cursor:pointer;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--orange),0 12px 26px rgba(36,28,24,.3);transition:transform .25s var(--ease-out)}
.av-launch:hover{transform:translateY(-2px) scale(1.04)}
.av-launch img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av-launch img.is-swap{animation:avPop .38s var(--ease-out)}
.av-launch .av-dot{position:absolute;right:2px;bottom:4px;width:13px;height:13px;border-radius:50%;background:#2FA866;box-shadow:0 0 0 2.5px #fff}
.av-launch:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.quick-contact .av-launch{width:66px;height:66px;background:var(--cream)}
.quick-contact{align-items:flex-end}
body.av-chat-open .quick-contact{opacity:0;pointer-events:none}
@keyframes avPop{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:none}}

/* ---------- Comic speech bubble ---------- */
.av-bubble{position:absolute;right:calc(100% + 18px);bottom:4px;width:max-content;max-width:min(284px,calc(100vw - 120px));background:#FFFDF9;color:var(--ink);border:2px solid var(--orange);border-radius:20px 20px 6px 20px;padding:12px 14px 12px;box-shadow:0 14px 34px rgba(36,28,24,.18);font-size:14px;line-height:1.5;text-align:left;transform-origin:100% 100%;opacity:0;transform:translateY(6px) scale(.92);transition:opacity .22s ease,transform .28s var(--ease-out);pointer-events:none;z-index:2}
.av-bubble.is-on{opacity:1;transform:none;pointer-events:auto}
.av-bubble[hidden]{display:none}
/* tail: two stacked triangles so it keeps the border */
.av-bubble::before,.av-bubble::after{content:"";position:absolute;bottom:14px;width:0;height:0;border-style:solid}
.av-bubble::before{right:-14px;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--orange)}
.av-bubble::after{right:-10px;bottom:16px;border-width:6px 0 6px 11px;border-color:transparent transparent transparent #FFFDF9}
.av-b-head{display:flex;align-items:center;gap:8px;margin-bottom:3px;padding-right:20px}
.av-b-name{font-family:var(--font-display);font-style:italic;font-size:14.5px;font-weight:500;color:var(--red)}
.av-b-prog{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--body)}
.av-b-x{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--body);cursor:pointer;display:grid;place-items:center}
.av-b-x:hover{background:var(--sand);color:var(--ink)}
.av-b-x svg{width:13px;height:13px}
.av-b-text{margin:0;color:var(--ink)}
.av-b-more{margin:6px 0 0;color:var(--body);font-size:13.5px}
.av-b-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.av-b-btns:empty{display:none}
.av-b-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.av-b-btn:hover{border-color:var(--red);color:var(--red)}
.av-b-btn.is-primary{background:var(--red);border-color:var(--red);color:#fff}
.av-b-btn.is-primary:hover{background:var(--red-dark);color:#fff}
.av-b-btn svg{width:14px;height:14px}
/* menu variant: stacked options */
.av-bubble.is-menu .av-b-btns{flex-direction:column;align-items:stretch}
.av-bubble.is-menu .av-b-btn{justify-content:flex-start;border-radius:12px;padding:9px 12px;font-size:13px}
.av-bubble.is-menu .av-b-btn small{display:block;font-weight:500;color:var(--body);font-size:11.5px}
.av-bubble.is-menu .av-b-btn.is-primary small{color:rgba(255,255,255,.85)}

/* tour controls */
.av-b-ctl{display:flex;align-items:center;gap:4px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.av-b-ctl[hidden]{display:none}
.av-b-ctl button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.av-b-ctl button:hover{background:var(--sand);color:var(--red)}
.av-b-ctl svg{width:15px;height:15px}
.av-b-ctl .av-more{width:auto;white-space:nowrap;border-radius:999px;padding:0 10px;font:inherit;font-size:12px;font-weight:700;color:var(--red)}
.av-b-ctl .av-more[hidden]{display:none}
.av-b-ctl .av-stop{margin-left:auto;width:auto;white-space:nowrap;border-radius:999px;padding:0 10px;font:inherit;font-size:12px;font-weight:700;color:var(--body)}
.av-pp .i-play{display:none}
.av-bubble.is-paused .av-pp .i-play{display:block}
.av-bubble.is-paused .av-pp .i-pause{display:none}
.av-b-bar{position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:transparent;overflow:hidden}
.av-b-bar i{display:block;height:100%;width:100%;background:var(--gradient);transform-origin:left;transform:scaleX(0)}
.av-b-bar i.is-run{animation:avBar var(--ms,6s) linear forwards}
.av-bubble.is-paused .av-b-bar i{animation-play-state:paused}
@keyframes avBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Page tour spotlight ---------- */
.av-dim{position:fixed;inset:0;z-index:44;background:rgba(36,28,24,.16);pointer-events:none;opacity:0;transition:opacity .35s ease}
.av-dim.is-on{opacity:1}
.av-spot{position:relative;z-index:45;box-shadow:inset 0 0 0 3px var(--orange),0 0 0 9999px rgba(0,0,0,0)!important;border-radius:4px;transition:box-shadow .3s ease}
.home-hero.av-spot{position:relative}
.sec.av-spot:not(.alt),.portfolio-main.av-spot,.nf.av-spot{background-color:var(--cream)}
body.av-touring .quick-contact{z-index:65}

/* ---------- Chat window ---------- */
.av-chat{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:70;width:min(370px,calc(100vw - 24px));height:min(580px,calc(100vh - 110px));height:min(580px,calc(100svh - 110px));display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(36,28,24,.28);overflow:hidden;opacity:0;transform:translateY(14px) scale(.98);transform-origin:100% 100%;transition:opacity .22s ease,transform .3s var(--ease-out)}
.av-chat.is-on{opacity:1;transform:none}
.av-chat[hidden]{display:none}
.av-chat-head{display:flex;align-items:center;gap:11px;padding:12px 12px 12px 14px;background:var(--espresso);color:var(--on-dark)}
.av-chat-av{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 2px var(--orange);overflow:hidden}
.av-chat-av img{width:100%;height:100%;object-fit:cover}
.av-chat-av img.is-swap{animation:avPop .38s var(--ease-out)}
.av-chat-id{flex:1;min-width:0}
.av-chat-id strong{display:block;font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.1;color:#fff}
.av-chat-id span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--on-dark-soft)}
.av-chat-id span::before{content:"";width:7px;height:7px;border-radius:50%;background:#2FA866}
.av-chat-head button{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}
.av-chat-head button:hover{background:rgba(255,255,255,.18)}
.av-chat-head svg{width:17px;height:17px}
.av-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.av-msg{display:flex;gap:8px;align-items:flex-end;max-width:92%;animation:fadeUp .35s var(--ease-out) both}
.av-msg-av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--line);overflow:hidden}
.av-msg-av img{width:100%;height:100%;object-fit:cover}
.av-msg-b{background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 5px;padding:9px 12px;font-size:14px;line-height:1.55;color:var(--ink)}
.av-msg-b p{margin:0}
.av-msg-b p + p,.av-msg-b p + ul,.av-msg-b ul + p{margin-top:6px}
.av-msg-b ul{padding-left:1.1em;list-style:disc}
.av-msg-b li{margin:2px 0}
.av-msg-b a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.av-msg-b strong{font-weight:700}
.av-msg.me{align-self:flex-end}
.av-msg.me .av-msg-b{background:var(--red);border-color:var(--red);color:#fff;border-radius:16px 16px 5px 16px}
.av-typing .av-msg-b{display:flex;gap:4px;padding:12px 14px}
.av-typing i{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:avDot 1s infinite ease-in-out}
.av-typing i:nth-child(2){animation-delay:.15s}.av-typing i:nth-child(3){animation-delay:.3s}
@keyframes avDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.av-qr{display:flex;flex-wrap:wrap;gap:6px;padding-left:38px}
.av-qr button{padding:7px 12px;border-radius:999px;border:1px solid var(--orange);background:#fff;color:var(--red);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.av-qr button:hover{background:var(--red);border-color:var(--red);color:#fff}
.av-cards{display:grid;gap:6px;padding-left:38px}
.av-card{display:flex;gap:10px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s ease}
.av-card:hover{border-color:var(--orange)}
.av-card img{width:64px;height:48px;border-radius:8px;object-fit:cover;background:var(--sand);flex:none}
.av-card strong{display:block;font-size:13.5px;line-height:1.25}
.av-card small{display:block;font-size:12px;color:var(--body)}
.av-lead{margin-left:38px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;gap:8px}
.av-lead p{margin:0;font-size:13px;font-weight:700;color:var(--ink)}
.av-lead input,.av-lead select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px;background:var(--cream);color:var(--ink)}
.av-lead input:focus,.av-lead select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(201,56,58,.14)}
.av-lead button{padding:11px 14px;border:0;border-radius:999px;background:var(--red);color:#fff;font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;cursor:pointer}
.av-lead button:hover{background:var(--red-dark)}
.av-lead .av-err{font-size:12.5px;font-weight:600;color:var(--red-dark);min-height:0}
.av-lead .av-err:empty{display:none}
.av-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#fff}
.av-input input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:14.5px;background:var(--cream);color:var(--ink)}
.av-input input:focus{outline:none;border-color:var(--red)}
.av-input button{flex:0 0 44px;height:44px;border:0;border-radius:50%;background:var(--gradient);color:#fff;cursor:pointer;display:grid;place-items:center}
.av-input svg{width:18px;height:18px}
.av-note{margin:0;padding:6px 14px 9px;background:#fff;font-size:11px;color:var(--body);text-align:center}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  .av-launch,.quick-contact .av-launch{width:58px;height:58px}
  .av-bubble{right:calc(100% + 14px);max-width:min(250px,calc(100vw - 100px));font-size:13.5px;padding:11px 12px}
  .av-chat{right:0;left:0;bottom:0;width:100%;height:min(86vh,640px);height:min(86svh,640px);border-radius:20px 20px 0 0;border-bottom:0}
  .av-input input{font-size:16px}
  .av-lead input,.av-lead select{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .av-bubble,.av-chat{transition:none}
  .av-launch img.is-swap,.av-chat-av img.is-swap,.av-msg{animation:none}
  .av-b-bar i.is-run{animation:none;transform:scaleX(1)}
}
@media print{.av-chat,.av-bubble,.av-dim{display:none!important}}
.av-bubble.is-menu .av-b-btn span{display:block;text-align:left;width:100%}

/* ---------- v4: roomier bubble, full-width primary action, talking + listening cues ---------- */
.av-bubble{max-width:min(340px,calc(100vw - 120px))}
.av-bubble:not(.is-menu) .av-b-btns{gap:8px}
.av-bubble:not(.is-menu) .av-b-btn.is-primary{flex:1 1 100%;justify-content:center;padding:10px 14px;font-size:13px}
.av-bubble:not(.is-menu) .av-b-btn:not(.is-primary){flex:1 1 auto;justify-content:center}
.av-b-btn{white-space:nowrap}
.av-b-text{cursor:default;min-height:1.5em}
.av-launch.is-talking{animation:avTalk 1s ease-in-out infinite}
@keyframes avTalk{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--orange),0 12px 26px rgba(36,28,24,.3)}50%{box-shadow:0 0 0 3px #fff,0 0 0 8px rgba(244,121,59,.55),0 12px 26px rgba(36,28,24,.3)}}
.av-chat-av img{transition:transform .35s var(--ease-out)}
.av-chat.is-listening .av-chat-av img{transform:scale(1.08) translateY(1px)}
.av-chat.is-listening .av-chat-id span{color:#fff}
@media (max-width:600px){.av-bubble{max-width:min(270px,calc(100vw - 96px))}}
@media (prefers-reduced-motion:reduce){.av-launch.is-talking{animation:none}.av-chat-av img{transition:none}}
.av-lead .av-legal{margin:0;font-size:11.5px;font-weight:500;color:var(--body);text-align:center}
.av-lead .av-legal a{color:var(--red);text-decoration:underline}
