/*
 * "Talk to us" phone page (/talk/, Widget\ChatPage) — the full-page frame
 * around the SAME screens the desktop floating panel uses
 * (templates/widget/screen-*.php). Loaded directly with a <link> tag —
 * this page has no wp_head to enqueue into (Widget\ChatPage::maybeRender()
 * is a raw exit()-terminated document).
 *
 * Nothing here measures the viewport or locks the page (docs/DECISION-LOG.md,
 * 0.14.0, "A page, not an overlay"): one flex column, the phone free to do
 * with the keyboard what it does in any other page.
 */
:root{
	--ink:#1f1f1f; --ink-muted:#5c5c5c; --ink-faint:#8a8781;
	--surface:#ffffff; --surface-muted:#f1f0ec;
	--border:#d8d5cf;
	--green:hsl(121,30%,30%); --green-soft:hsl(121,30%,96%); --led:hsl(121,45%,42%);
	--danger:#c53a30; --danger-soft:#fdf1f0;
	--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
:root:not([data-theme="light"]){
	@media (prefers-color-scheme: dark){
		--ink:#f2efe9; --ink-muted:#b5b0a7; --ink-faint:#8a857c;
		--surface:#101010; --surface-muted:#1e1e1d; --border:#2e2d2b;
		--green:hsl(121,28%,58%); --green-soft:hsl(121,20%,18%);
	}
}
:root[data-theme="dark"]{
	--ink:#f2efe9; --ink-muted:#b5b0a7; --ink-faint:#8a857c;
	--surface:#101010; --surface-muted:#1e1e1d; --border:#2e2d2b;
	--green:hsl(121,28%,58%); --green-soft:hsl(121,20%,18%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
	margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);
	-webkit-font-smoothing:antialiased;
	min-height:100dvh;display:flex;flex-direction:column;
}

/* ─── Persistent header: exits the whole "Talk to us" experience,
       wherever it goes back to (the shop page, or the shop's home) —
       screen-level "Back" buttons (below) return to Home instead. ─── */
.top{
	position:sticky;top:0;z-index:2;flex:none;
	display:flex;align-items:center;gap:10px;
	padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px 8px;
	background:var(--surface);border-bottom:1px solid var(--border);
}
.back{
	width:40px;height:40px;flex:none;display:grid;place-items:center;
	border:0;background:none;color:var(--ink);cursor:pointer;border-radius:10px;
	-webkit-tap-highlight-color:transparent;text-decoration:none;
}
.back svg{width:22px;height:22px}
.top-avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}
.top-avatar svg{width:16px;height:16px}
.who{flex:1;min-width:0}
.who b{display:block;font:600 15.5px/1.2 var(--sans)}
.who span{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11.5px;color:var(--ink-faint)}
.who i{width:6px;height:6px;border-radius:50%;background:var(--led)}

/* ─── Screens: exactly one visible at a time, assets/widget.js's own
       showScreen() toggles `.is-on` on `[data-ibpa-screen]` — shared with
       the desktop panel (assets/widget.css defines the same class names,
       fading instead of sliding). ─── */
.ibpa-frame{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.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;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@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;display:flex;align-items:center;gap:4px;
	background:none;border:0;color:var(--ink-muted);font:600 13px/1 var(--sans);
	cursor:pointer;padding:12px 14px 6px;-webkit-tap-highlight-color:transparent;
}
.ibpa-back:active{color:var(--ink)}

/* ─── Screen 1: Home ─── */
.ibpa-home{padding:0 14px 14px;gap:16px;overflow-y:auto}
.ibpa-home-greeting{padding-top:18px}
.ibpa-home-greeting h3{margin:0 0 6px;font:600 20px/1.3 var(--sans);letter-spacing:-.01em}
.ibpa-home-greeting p{margin:0;font:400 14px/1.5 var(--sans);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:var(--sans);-webkit-tap-highlight-color:transparent;
}
.ibpa-continue-label{font:600 12px/1.3 var(--sans);color:var(--green)}
.ibpa-continue-preview{font:400 13px/1.4 var(--sans);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:14px;overflow:hidden;background:var(--surface)}
.ibpa-door-row{
	display:flex;align-items:center;gap:12px;width:100%;text-align:left;
	background:var(--surface);border:0;border-bottom:1px solid var(--border);
	padding:13px 14px;min-height:60px;cursor:pointer;font-family:var(--sans);
	text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;
}
.ibpa-door-row:last-child{border-bottom:0}
.ibpa-door-row:active{background:var(--surface-muted)}
.ibpa-door-ic{width:38px;height:38px;flex:none;border-radius:10px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}
.ibpa-door-ic svg{width:19px;height:19px}
.ibpa-door-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ibpa-door-text b{font:600 14.5px/1.2 var(--sans);color:var(--ink)}
.ibpa-door-text span{font:400 12.5px/1.4 var(--sans);color:var(--ink-muted)}
.ibpa-door-chevron{flex:none;color:var(--ink-faint)}
.ibpa-door-chevron svg{width:18px;height:18px}
.ibpa-home-footer{margin-top:-4px;padding-top:11px;font:400 11.5px/1.5 var(--sans);color:var(--ink-faint)}

/* ─── Screen 2: Chat ─── */
.ibpa-chat{position:relative;min-height:0}
.ibpa-chat-log{flex:1 1 auto;overflow-y:auto;padding:6px 14px 10px;display:flex;flex-direction:column;gap:9px}
.ibpa-chat-intro{display:flex;flex-direction:column;gap:10px}
.ibpa-msg{max-width:84%;padding:10px 13px;border-radius:15px;font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ibpa-msg-ag{background:var(--surface-muted);border-bottom-left-radius:5px;align-self:flex-start}
.ibpa-msg-cu{background:var(--green);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.ibpa-msg a{color:inherit;text-decoration:underline}
:root[data-theme="dark"] .ibpa-msg-cu{color:#11210f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ibpa-msg-cu{color:#11210f}}
.ibpa-msg-failed{align-self:flex-end;display:flex;align-items:center;gap:8px;font:400 12px/1.4 var(--sans);color:var(--danger)}
.ibpa-msg-failed button{border:0;background:none;color:var(--danger);font:600 12px/1 var(--sans);cursor:pointer;text-decoration:underline;padding:0}
.ibpa-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ibpa-chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:8px 13px;font:400 12.5px/1.3 var(--sans);color:var(--green);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ibpa-chip:active{background:var(--green-soft)}
.ibpa-scroll-pill{
	position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:1;
	display:flex;gap:6px;align-items:center;border:1px solid var(--border);
	background:var(--surface);border-radius:999px;padding:7px 13px;
	font:600 12px/1 var(--sans);color:var(--green);
	box-shadow:0 4px 14px rgba(0,0,0,.14);cursor:pointer;
}
.ibpa-typing{display:flex;align-items:center;gap:8px;padding:0 14px 8px;color:var(--ink-muted);font:400 12px/1.4 var(--sans)}
.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}
@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:0 14px 8px;padding:10px 13px;border:1px solid var(--border);
	border-left:3px solid var(--green);border-radius:11px;background:var(--green-soft);
	font:600 12px/1.5 var(--sans);color:var(--green);text-decoration:none;
}

.ibpa-composer{
	flex:none;display:flex;gap:8px;align-items:flex-end;
	padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
	background:var(--surface);border-top:1px solid var(--border);
	position:sticky;bottom:0;
}
.ibpa-composer-input{
	flex:1;resize:none;border:1px solid var(--border);border-radius:19px;
	padding:10px 14px;font:400 16px/1.4 var(--sans);   /* 16px or iOS zooms the page in */
	background:var(--surface-muted);color:var(--ink);max-height:120px;min-height:42px;
}
.ibpa-composer-input:focus{outline:2px solid var(--green);outline-offset:1px}
.ibpa-composer-input:disabled{opacity:.6}
.ibpa-composer-send{
	width:42px;height:42px;flex:none;border:0;border-radius:50%;background:var(--green);color:#fff;
	display:grid;place-items:center;cursor:pointer;
}
.ibpa-composer-send:disabled{opacity:.6;cursor:default}
:root[data-theme="dark"] .ibpa-composer-send{color:#11210f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ibpa-composer-send{color:#11210f}}
.ibpa-composer-send svg{width:19px;height:19px}

/* ─── Fallback: a door is on but not provisioned yet ─── */
.ibpa-soon{padding:0 14px}
.ibpa-soon p{font:400 14px/1.6 var(--sans);color:var(--ink-muted)}

/* ─── Screen 3: Voice ─── */
.ibpa-voice{align-items:center;justify-content:flex-start;text-align:center;padding:0 14px 14px;gap:0}
.ibpa-voice-intro,.ibpa-voice-live,.ibpa-voice-denied{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:320px;margin:auto}
.ibpa-voice-explainer{margin:0;font:400 14.5px/1.6 var(--sans);color:var(--ink-muted)}
.ibpa-voice-start{border:0;background:var(--green);color:#fff;border-radius:999px;padding:14px 30px;font:600 15px/1 var(--sans);cursor:pointer;box-shadow:0 8px 22px rgba(53,96,58,.28)}
:root[data-theme="dark"] .ibpa-voice-start{color:#11210f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ibpa-voice-start{color:#11210f}}

.ibpa-voice-orb{position:relative;width:96px;height:96px;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{display:block;font:600 15px/1.3 var(--sans);color:var(--ink)}
.ibpa-voice-status span{font:400 12.5px/1.4 var(--sans);color:var(--ink-muted)}
.ibpa-voice-timer{font:600 13px/1 var(--sans);color:var(--green)}
.ibpa-voice-error{margin:0;color:var(--danger);font:400 12.5px/1.5 var(--sans)}
.ibpa-voice-controls{display:flex;gap:18px}
.ibpa-voice-mute,.ibpa-voice-end{width:56px;height:56px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ibpa-voice-mute svg,.ibpa-voice-end svg{width:22px;height:22px}
.ibpa-voice-mute{background:var(--surface-muted);color:var(--ink)}
.ibpa-voice-mute[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.ibpa-voice-end{background:var(--danger);color:#fff}

.ibpa-voice-denied p{margin:0;font:400 14px/1.6 var(--sans);color:var(--ink-muted)}
.ibpa-voice-denied-home{border:0;background:var(--green);color:#fff;border-radius:999px;padding:12px 26px;font:600 14px/1 var(--sans);cursor:pointer}
.ibpa-voice-denied-chat{border:0;background:none;color:var(--green);font:600 13px/1 var(--sans);cursor:pointer;text-decoration:underline}

/* 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-chat-page [hidden]{display:none !important}

/* On the phone page the header's own arrow already walks back (sub-screen → home → shop);
   a second «← Back» under it only doubles the same gesture. */
#ibpa-chat-page .ibpa-back{display:none}

/* 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}