/*
 * "Talk to us" floating panel (desktop, above ib-navigation's 991px
 * breakpoint) — chrome (fab, card, header) around the SAME screens the
 * phone page (/talk/, assets/chat-page.css) uses. Shared class names
 * (.ibpa-screen, .ibpa-home, .ibpa-door-row, .ibpa-chat, .ibpa-voice, …)
 * come from templates/widget/screen-*.php, included by both chromes —
 * talk-launch brief: "the SAME screens with the SAME behaviour, only
 * framed differently". Screens fade here (a floating card); the phone
 * page slides instead (assets/chat-page.css) — the only intentional
 * visual difference between the two.
 */
/* The vendored Vapi Web SDK (assets/vendor/vapi-web.umd.js) injects its own
 * floating call button — the panel has its own "Voice" row and its own
 * live-call controls, so that one never shows. See widget.js. */
/* The shop's own bar at the thumb (ib-navigation, phones and small tablets)
   sits fixed at the bottom edge, and this panel sat on top of it: the button
   covered the four tabs and the open panel hid them completely (Matteo,
   2026-09-21). `--ibnav-tabs-h` is what that bar publishes — its own height,
   0px on every screen where it is not drawn — so the two `bottom` values
   below are right everywhere without this file knowing anything about the
   other plugin's markup, and right too on a site where that plugin is absent
   (the var falls back to 0px).

   Since ib-navigation 0.22.11 that bar can also carry a fifth tab of its own,
   «Talk» (Widget\Panel::addThumbTab()) — at that point the floating button
   below is redundant on the same screens the bar is drawn on, and is hidden
   there; see the `max-width: 991px` rule at the end of this file. */
#vapi-support-btn{display:none!important}
.ibpa-panel,.ibpa-panel *,.ibpa-panel *::before,.ibpa-panel *::after{box-sizing:border-box}
.ibpa-panel{
	--ink:#1f1f1f;--ink-muted:#5c5c5c;--ink-faint:#8a8781;
	--surface:#fdfcfa;--surface-muted:#f4f2ee;--border:#d8d5cf;
	--green:hsl(121,30%,30%);--green-soft:hsl(121,30%,96%);--green-hover:hsl(121,30%,25%);
	--danger:#a4362d;--danger-soft:#fdf1f0;
	--shadow:0 18px 48px rgba(40,35,28,.22);
	font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
	position:fixed;right:24px;bottom:calc(24px + var(--ibnav-tabs-h, 0px) + env(safe-area-inset-bottom, 0px));z-index:99999;
}
.ibpa-panel-fab{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--green);color:#fff;font:600 15px/1 'IBM Plex Sans',sans-serif;padding:14px 20px 14px 16px;border-radius:999px;box-shadow:0 10px 28px rgba(40,35,28,.28);transition:background .15s ease,transform .15s ease}
.ibpa-panel-fab:hover{background:var(--green-hover);transform:translateY(-1px)}
.ibpa-panel-fab svg{width:20px;height:20px;flex:none}
.ibpa-panel-fab .ibpa-panel-dot{width:8px;height:8px;border-radius:50%;background:#7ed17e;box-shadow:0 0 0 3px rgba(126,209,126,.25)}

/* "desktop card 380px wide, max-height min(640px, 100vh - 120px), scroll
   inside the body only" (talk-launch brief). */
.ibpa-panel-box{display:none;width:380px;max-width:calc(100vw - 32px);max-height:min(640px, calc(100vh - 120px));background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;flex-direction:column}
.ibpa-panel.is-open .ibpa-panel-box{display:flex}
.ibpa-panel.is-open .ibpa-panel-fab{display:none}
.ibpa-panel-head{flex:none;display:flex;align-items:center;gap:12px;padding:16px 16px 14px;background:var(--green);color:#fff}
.ibpa-panel-head .ibpa-panel-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:none}
.ibpa-panel-head svg{width:20px;height:20px}
.ibpa-panel-title{font:600 15px/1.25 'IBM Plex Sans',sans-serif}
.ibpa-panel-sub{display:flex;align-items:center;gap:6px;font:400 12.5px/1.35 'IBM Plex Sans',sans-serif;opacity:.9;margin-top:2px}
.ibpa-panel-led{width:6px;height:6px;border-radius:50%;background:#7ed17e;flex:none}
.ibpa-panel-close{margin-left:auto;background:transparent;border:0;color:#fff;opacity:.85;cursor:pointer;font-size:20px;line-height:1;padding:4px 6px;border-radius:6px}
.ibpa-panel-close:hover{opacity:1;background:rgba(255,255,255,.12)}
.ibpa-panel-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column}

/* Screens: exactly one visible at a time (assets/widget.js's showScreen()),
   fading rather than sliding — the phone page slides instead
   (assets/chat-page.css's own `.ibpa-screen.is-on`). */
.ibpa-screen{display:none}
.ibpa-screen.is-on{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;animation:ibpa-screen-in .18s ease both}
@keyframes ibpa-screen-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ibpa-screen.is-on{animation:none}}

.ibpa-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ibpa-back{align-self:flex-start;background:transparent;border:0;color:var(--ink-muted);font:600 12.5px/1 'IBM Plex Sans',sans-serif;cursor:pointer;padding:0;margin-bottom:12px}
.ibpa-back:hover{color:var(--ink)}

/* ─── Screen 1: Home ─── */
.ibpa-home{gap:14px}
.ibpa-home-greeting{padding:2px 0 0}
.ibpa-home-greeting h3{margin:0 0 6px;font:600 17px/1.3 'IBM Plex Sans',sans-serif;color:var(--ink);letter-spacing:-.01em}
.ibpa-home-greeting p{margin:0;font:400 13.5px/1.5 'IBM Plex Sans',sans-serif;color:var(--ink-muted)}
.ibpa-continue-card{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;border:1px solid var(--border);border-left:3px solid var(--green);background:var(--green-soft);border-radius:12px;padding:11px 13px;cursor:pointer;font-family:inherit}
.ibpa-continue-label{font:600 12px/1.3 'IBM Plex Sans',sans-serif;color:var(--green)}
.ibpa-continue-preview{font:400 13px/1.4 'IBM Plex Sans',sans-serif;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibpa-door-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.ibpa-door-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--border);padding:12px 13px;min-height:56px;cursor:pointer;font-family:inherit;text-decoration:none;color:inherit;transition:background .15s ease}
.ibpa-door-row:last-child{border-bottom:0}
.ibpa-door-row:hover{background:var(--green-soft)}
.ibpa-door-ic{width:34px;height:34px;flex:none;border-radius:9px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}
.ibpa-door-ic svg{width:17px;height:17px}
.ibpa-door-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ibpa-door-text b{font:600 14px/1.2 'IBM Plex Sans',sans-serif;color:var(--ink)}
.ibpa-door-text span{font:400 12px/1.35 'IBM Plex Sans',sans-serif;color:var(--ink-muted)}
.ibpa-door-chevron{flex:none;color:var(--ink-faint)}
.ibpa-door-chevron svg{width:16px;height:16px}
.ibpa-home-footer{margin-top:-2px;padding-top:11px;border-top:1px solid var(--border);font:400 11.5px/1.5 'IBM Plex Sans',sans-serif;color:var(--ink-muted)}

/* ─── Screen 2: Chat ─── */
.ibpa-chat{position:relative;min-height:0}
.ibpa-chat-log{flex:1 1 auto;overflow-y:auto;max-height:280px;display:flex;flex-direction:column;gap:8px}
.ibpa-chat-intro{display:flex;flex-direction:column;gap:10px}
.ibpa-msg{max-width:86%;padding:10px 12px;border-radius:12px;font:400 13.5px/1.5 'IBM Plex Sans',sans-serif;word-break:break-word;white-space:pre-wrap}
.ibpa-msg-ag{background:var(--surface-muted);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start}
.ibpa-msg-cu{background:var(--green);color:#fff;margin-left:auto;border-bottom-right-radius:4px;align-self:flex-end}
.ibpa-msg a{color:inherit;text-decoration:underline}
.ibpa-msg-failed{align-self:flex-end;display:flex;align-items:center;gap:8px;font:400 11.5px/1.4 'IBM Plex Sans',sans-serif;color:var(--danger)}
.ibpa-msg-failed button{border:0;background:none;color:var(--danger);font:600 11.5px/1 'IBM Plex Sans',sans-serif;cursor:pointer;text-decoration:underline;padding:0}
.ibpa-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.ibpa-chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 12px;font:400 12px/1.3 'IBM Plex Sans',sans-serif;color:var(--green);cursor:pointer}
.ibpa-chip:hover{background:var(--green-soft)}
.ibpa-scroll-pill{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:1;display:flex;gap:6px;align-items:center;border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 12px;font:600 11.5px/1 'IBM Plex Sans',sans-serif;color:var(--green);box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer}
.ibpa-typing{display:flex;align-items:center;gap:8px;margin:8px 0 0;color:var(--ink-muted);font:400 12px/1.4 'IBM Plex Sans',sans-serif}
.ibpa-typing-dots{display:inline-flex;gap:4px}
.ibpa-typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:ibpa-blink 1.2s infinite}
.ibpa-typing-dots i:nth-child(2){animation-delay:.15s}
.ibpa-typing-dots i:nth-child(3){animation-delay:.3s}
.ibpa-typing-static{display:none;font-style:italic}
@keyframes ibpa-blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ibpa-typing-dots{display:none}.ibpa-typing-static{display:inline}}
.ibpa-signin-offer{display:block;margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-muted);font:600 12px/1.5 'IBM Plex Sans',sans-serif;color:var(--green);text-decoration:none}
.ibpa-composer{display:flex;gap:8px;margin-top:12px;align-items:flex-end}
.ibpa-composer-input{flex:1;resize:none;max-height:90px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:400 13.5px/1.4 'IBM Plex Sans',sans-serif;color:var(--ink);background:#fff}
.ibpa-composer-input::placeholder{color:#9a968e}
.ibpa-composer-input:disabled{opacity:.6}
.ibpa-composer-send{border:0;background:var(--green);color:#fff;border-radius:10px;width:38px;height:38px;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ibpa-composer-send:hover{background:var(--green-hover)}
.ibpa-composer-send:disabled{opacity:.6;cursor:default}
.ibpa-composer-send svg{width:17px;height:17px}

.ibpa-soon p{margin:0;font:400 13.5px/1.6 'IBM Plex Sans',sans-serif;color:var(--ink-muted)}

/* ─── Screen 3: Voice ─── */
.ibpa-voice{align-items:center;justify-content:flex-start;text-align:center}
.ibpa-voice-intro,.ibpa-voice-live,.ibpa-voice-denied{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;margin:auto}
.ibpa-voice-explainer{margin:0;font:400 13.5px/1.6 'IBM Plex Sans',sans-serif;color:var(--ink-muted)}
.ibpa-voice-start{border:0;background:var(--green);color:#fff;border-radius:999px;padding:13px 26px;font:600 14px/1 'IBM Plex Sans',sans-serif;cursor:pointer}
.ibpa-voice-start:hover{background:var(--green-hover)}
.ibpa-voice-orb{position:relative;width:84px;height:84px;border-radius:50%;background:var(--green-soft);display:flex;align-items:center;justify-content:center}
.ibpa-voice-orb span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);opacity:.5;animation:ibpa-orb-pulse 2.4s ease-out infinite}
.ibpa-voice-orb span:nth-child(2){animation-delay:.8s}
.ibpa-voice-orb span:nth-child(3){animation-delay:1.6s}
.ibpa-voice-orb.is-speaking span{animation-duration:1.1s}
@keyframes ibpa-orb-pulse{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.45);opacity:0}}
@media (prefers-reduced-motion:reduce){.ibpa-voice-orb span{animation:none;opacity:.35}}
.ibpa-voice-status{margin:0}
.ibpa-voice-status b{font:600 14px/1.3 'IBM Plex Sans',sans-serif;color:var(--ink);display:block}
.ibpa-voice-status span{font:400 12.5px/1.4 'IBM Plex Sans',sans-serif;color:var(--ink-muted)}
.ibpa-voice-timer{font:600 13px/1 'IBM Plex Sans',sans-serif;color:var(--green)}
.ibpa-voice-error{margin:0;font:400 12.5px/1.5 'IBM Plex Sans',sans-serif;color:var(--danger)}
.ibpa-voice-controls{display:flex;gap:16px}
.ibpa-voice-mute,.ibpa-voice-end{width:48px;height:48px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ibpa-voice-mute svg,.ibpa-voice-end svg{width:19px;height:19px}
.ibpa-voice-mute{background:var(--surface-muted);color:var(--ink)}
.ibpa-voice-mute[aria-pressed="true"]{background:var(--ink);color:#fff}
.ibpa-voice-end{background:var(--danger);color:#fff}
.ibpa-voice-end:hover{background:#8c2e26}
.ibpa-voice-denied p{margin:0;font:400 13.5px/1.6 'IBM Plex Sans',sans-serif;color:var(--ink-muted)}
.ibpa-voice-denied-home{border:0;background:var(--green);color:#fff;border-radius:999px;padding:11px 22px;font:600 13.5px/1 'IBM Plex Sans',sans-serif;cursor:pointer}
.ibpa-voice-denied-chat{border:0;background:none;color:var(--green);font:600 12.5px/1 'IBM Plex Sans',sans-serif;cursor:pointer;text-decoration:underline}

@media (max-width:560px){.ibpa-panel{right:12px;left:12px;bottom:calc(12px + var(--ibnav-tabs-h, 0px) + env(safe-area-inset-bottom, 0px))}.ibpa-panel-box{width:100%}.ibpa-panel-fab{width:100%;justify-content:center}}
/* Wherever ib-navigation draws its bar at the thumb (its own breakpoint — kept identical
   here on purpose, so the two never disagree), «Talk» is that bar's own fifth tab
   (Widget\Panel::addThumbTab(), ib-navigation 0.22.11+) and the floating button would be
   a second, redundant way to open the same panel sitting on top of it. Only the button is
   hidden: the panel itself keeps opening from the bottom, same as always. On a computer,
   above 991px, the floating button stays exactly as it is — that bar does not exist there.

   The `body:has(.ibnav-tabs)` guard is the whole safety of this rule: the bar is printed
   by two shortcodes in the Oxygen header template, so a page rendered without that header
   — a checkout template, a page of another plugin, or a site where ib-navigation is simply
   not installed — has no bar and therefore no «Talk» tab. Without the guard the floating
   button would be hidden there too and the panel would have NO way to open on a phone. */
@media (max-width:991px){body:has(.ibnav-tabs) .ibpa-panel-fab{display:none}}

/* The `hidden` attribute must beat every component's own display rule (flex rows, pills,
   the typing bubble): without this, UA-level [hidden] loses to .ibpa-* {display:flex}. */
.ibpa-panel [hidden]{display:none !important}

/* The typing indicator reads as the assistant's own next bubble, not as loose dots. */
.ibpa-typing{width:max-content;margin:0;padding:11px 14px;background:var(--surface-muted);border-radius:15px;border-bottom-left-radius:5px}
.ibpa-typing-dots i{width:7px;height:7px}
/* Voice explainer: one calm microphone mark above the sentence. */
.ibpa-voice-mic{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--green-soft);color:var(--green)}
.ibpa-voice-mic svg{width:30px;height:30px}
.ibpa-voice-explainer{text-align:center}