/* Reception: separate conversation, composer and portrait stage; no expensive backdrop filters. */
:root { --gold:#d9bc78; --gold-gradient:linear-gradient(120deg,#e7ce94,#c7a55b); --glass-border:#34322b; --avatar-btn:44px; }
body { background:#111310; }
.neural-background { background:radial-gradient(ellipse at top,#292a21 0,#111310 65%); }
.glass-container { max-width:1240px; width:94%; height:94vh; border-radius:24px; background:#191b18; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:"header" "chat" "composer"; }
header { grid-area:header; padding:22px 30px; background:#191b18; border-bottom:1px solid #34362f; }
.logo { color:#e7ce94; background:none; -webkit-text-fill-color:initial; animation:none; font-size:32px; letter-spacing:7px; }
.brand-badge { color:#aeb2a6; border:0; font-size:9px; letter-spacing:2px; }
.status { color:#aeb2a6; font-size:12px; }
.pulse { animation:none; background:#9bac89; box-shadow:none; }
.lang-switcher select,#mode-selector { color:#e7dfcc; border:1px solid #494b40; background:#24271f; border-radius:10px; box-shadow:none; }
#chat-window { grid-area:chat; padding:28px; overflow-y:auto; min-height:0; min-width:0; }
.glass-container:has(#reception-avatar:not([hidden])) #chat-window { padding:28px; }
.welcome-message { margin:30px 0; text-align:start; }
.welcome-message h1 { color:#eee8db; font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(28px,3.8vw,46px); letter-spacing:-1px; background:none; -webkit-text-fill-color:initial; }
.welcome-message p { color:#aeb2a6; letter-spacing:0; line-height:1.6; margin-top:12px; font-size:15px; }
#messages { gap:14px; }
.message { font-weight:400; line-height:1.65; max-width:92%; border-radius:16px; padding:14px 18px; animation:none; box-shadow:none; overflow-wrap:anywhere; }
.ai-message { color:#eee8db; background:#242821; border:1px solid #3b4033; border-start-start-radius:4px; }
.user-message { color:#f2e4c2; background:#383325; border:1px solid #544b35; border-start-end-radius:4px; }
footer { grid-area:composer; min-width:0; padding:18px 28px 22px; background:#1d201a; border-top:1px solid #34392c; }
.input-area { gap:10px; }
#user-input { background:#11150f; color:#f6f2e9; border:1px solid #4f5545; border-radius:12px; padding:14px 16px; font-size:16px; box-shadow:none; }
#user-input:focus { outline:2px solid #cfb77d; outline-offset:2px; }
button { border-radius:12px; box-shadow:none; transform:none; }
button:hover { transform:none; }
#send-btn { background:#d9bd7d; color:#171a14; font-size:13px; min-height:48px; padding-inline:20px; }
.voice-btn { background:#272d21; border-color:#555f46; width:48px; height:48px; }
.controls { margin-top:12px; gap:12px; color:#adb5a2; }
#speech-mode-hint { color:#a7afa0; font-size:12px; line-height:1.45; }
.speech-mode { color:#d8ddce; font-size:12px; }
button:focus-visible,select:focus-visible { outline:2px solid #e7ce94; outline-offset:3px; }
.glass-container:has(#reception-avatar:not([hidden])) { grid-template-columns:minmax(0,1fr) 230px; grid-template-areas:"header header" "chat avatar" "composer avatar"; }
#reception-avatar { grid-area:avatar; position:relative; inset:auto; top:auto; width:198px; height:297px; margin:16px; justify-self:center; align-self:center; border:1px solid #4e5145; border-radius:20px; background:#272b22; }
body[data-local-demo] .glass-container { grid-template-rows:auto auto minmax(0,1fr) auto; grid-template-areas:"demo" "header" "chat" "composer"; }
body[data-local-demo] .glass-container:has(#reception-avatar:not([hidden])) { grid-template-areas:"demo demo" "header header" "chat avatar" "composer avatar"; }
.demo-toolbar { grid-area:demo; }
@media (max-width:1050px),(max-height:780px) {
 .glass-container:has(#reception-avatar:not([hidden])) { grid-template-columns:minmax(0,1fr) 230px; }
 #reception-avatar { width:198px; height:297px; margin:16px; }
 header { padding:16px 22px; }
}
@media (pointer:coarse),(max-width:768px) {
 body { height:var(--visible-height,100dvh); padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
 .glass-container { width:100%; height:100%; border-radius:18px; }
 #lang-select,#mode-selector { min-height:44px; font-size:16px; }
 .realtime-control,.controls { min-height:44px; }
}
@media (max-width:650px) {
 .glass-container:has(#reception-avatar:not([hidden])) { grid-template-columns:minmax(0,1fr) 158px; grid-template-areas:"header header" "chat avatar" "composer composer"; }
 body[data-local-demo] .glass-container:has(#reception-avatar:not([hidden])) { grid-template-areas:"demo demo" "header header" "chat avatar" "composer composer"; }
 #reception-avatar { width:142px; height:213px; margin:8px; align-self:start; border-radius:12px; --avatar-btn:22px; }
 header { padding:12px; }.header-right .status { display:none; }
 .logo { font-size:24px; }.brand-badge { font-size:8px; letter-spacing:1px; }
 #chat-window,.glass-container:has(#reception-avatar:not([hidden])) #chat-window { padding:12px; }
 .welcome-message { margin:10px 0; }.welcome-message h1 { font-size:25px; letter-spacing:-.5px; }.welcome-message p{font-size:13px;}
 .message{padding:10px 12px;font-size:14px;max-width:100%;}
 footer { padding:12px; }.input-area{gap:6px;}#user-input{padding:12px 10px;}
 #send-btn{padding-inline:12px;}.voice-btn{width:44px;min-width:44px;height:48px;}
}
@media (pointer:coarse),(max-width:768px) {
 .compact-viewport #reception-avatar { display:none; }
 .compact-viewport .glass-container:has(#reception-avatar:not([hidden])) { grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "chat" "composer"; }
 .compact-viewport body[data-local-demo] .glass-container:has(#reception-avatar:not([hidden])) { grid-template-areas:"demo" "header" "chat" "composer"; }
 .compact-viewport header{padding:4px 12px;}.compact-viewport footer{padding:6px 12px;}
 .compact-viewport .speech-mode{margin:0;}.compact-viewport .controls{margin-top:4px;}
 .compact-viewport #chat-window{padding:6px 12px;}.compact-viewport .welcome-message{margin:0;}
 .compact-viewport #speech-mode-hint,.compact-viewport .brand-badge,.compact-viewport .status{display:none;}
 /* The AI Concierge title is ONE unbreakable line on mobile (owner request 2026-10-31). */
 .compact-viewport #welcome-title{ white-space:nowrap; font-size:clamp(16px,5.2vw,30px); letter-spacing:.02em; }
}
/* The portrait control stays usable without intercepting the read-only iframe. */
#reception-avatar { pointer-events:auto; }
#reception-avatar iframe,#reception-avatar canvas { pointer-events:none; image-rendering:auto; }
/* Premium Tavus conversation: the landscape 16:9 stream is cropped into the portrait
   slot - full height, horizontally centered, the sides clipped by the wrapper (the
   slot itself keeps overflow:visible for the persona controls under it). Every slot
   size keeps the same 2:3 aspect, so one percentage covers base, expanded and compact. */
#reception-avatar .avatar-tavus { position:absolute; inset:0; border-radius:inherit; overflow:hidden;
    pointer-events:auto; background:#000; z-index:2; }
#reception-avatar .avatar-tavus iframe { position:absolute; top:0; left:50%; height:100%; width:266.6667%;
    transform:translateX(-50%); border:0; pointer-events:auto; }
.avatar-size-toggle { position:absolute; top:calc(100% + 8px); bottom:auto; inset-inline-end:0; z-index:6; width:var(--avatar-btn); min-width:var(--avatar-btn); min-height:0; height:var(--avatar-btn); padding:0; border:1px solid #626951; border-radius:12px; color:#d2d5c9; background:#252c20; font-size:calc(var(--avatar-btn) * .42); line-height:1; cursor:pointer; }
#reception-avatar[data-size="expanded"] { width:320px; height:480px; margin:16px; border-radius:16px; }
.glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])) { grid-template-columns:minmax(0,1fr) 352px; }
@media (min-width:651px) and (max-height:700px) {
 .glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])) { overflow:auto; grid-template-rows:auto minmax(200px,1fr) auto; }
 body[data-local-demo] .glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])) { grid-template-rows:auto auto minmax(200px,1fr) auto; }
}
@media (max-width:650px) {
 .glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])) { overflow:auto; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(160px,1fr) auto; grid-template-areas:"header" "avatar" "chat" "composer"; }
 body[data-local-demo] .glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])) { grid-template-rows:auto auto auto minmax(160px,1fr) auto; grid-template-areas:"demo" "header" "avatar" "chat" "composer"; }
 #reception-avatar[data-size="expanded"] { display:block; margin:12px auto; }
 .glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])) footer { position:sticky; bottom:0; z-index:4; }
 /* Expanded avatar on mobile: the sticky composer overlapped the window's bottom and
    hid the size toggle and the pill (the host's contain:layout stacks the whole window
    below the footer, inner z-indexes cannot help). In the expanded state the composer
    returns to the normal flow below the window - no overlay, the controls stay put. */
 .glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])) footer { position:static; }
 /* Expanded window on a phone: the welcome heading yields its space, and the window itself
    caps to the viewport (2:3 kept) so the footer and every control fit without scrolling. */
 .glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])) #welcome-msg { display:none; }
 #reception-avatar[data-size="expanded"] { height:min(480px, calc(100dvh - 330px)); width:auto; aspect-ratio:2/3; margin:8px auto 10px; }
 .glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])) { grid-template-rows:auto auto minmax(0,1fr) auto; }
 /* Expanded + a conversation started: the dialog becomes a visible strip right above the
    composer - scrollable (its own scrollbar), auto-scrolled to the newest message by the
    page's existing append logic. With no messages yet the layout stays as it was. */
 .glass-container:has(#reception-avatar[data-size="expanded"]:not([hidden])):has(#messages .message) { grid-template-rows:auto auto minmax(140px, 34vh) auto; }
}
/* A thin edge separates the portrait; costly live blur would also soften the mouth. */
#reception-avatar { box-shadow:0 2px 12px #0003; }
.avatar-size-toggle:hover,.avatar-size-toggle:active { background:#343a2a; color:#fff6dd; }
/* The footer switches in ONE row: every control is a column with its label ABOVE the
/* Installable app offer: a slim dismissible bar. */
#pwa-bar { position:fixed; left:50%; transform:translateX(-50%); bottom:10px; z-index:60; display:flex; align-items:center; gap:10px; max-width:min(560px, calc(100vw - 20px)); padding:8px 12px; border-radius:14px; border:1px solid #626951; background:#1d211a; color:#f3ecd2; font-size:13px; box-shadow:0 8px 30px #000a; }
#pwa-bar .pwa-bar-install { min-height:36px; padding:6px 14px; border-radius:12px; background:#d9bd7d; color:#171a14; font-weight:700; }
#pwa-bar .pwa-bar-close { min-width:36px; padding:0; background:transparent; color:#d2d5c9; border:1px solid #555f46; border-radius:12px; }
   switch (column-reverse - the text span follows the switch in the DOM), so all three
   (voice, mode, greeting) fit a single line on any width. */
.controls { flex-wrap:nowrap; justify-content:space-evenly; gap:4px; }
/* The switches stay in ONE row on any language; each label wraps WORD-BY-WORD to a second
line instead of pushing a switch out of the row (owner request 2026-10-31). */
.controls .answer-mode-control { flex:1 1 0; min-width:0; max-width:none; flex-direction:column-reverse; align-items:center; gap:4px; min-height:0; }
.controls .answer-mode-control > span:last-child { font-size:11px; line-height:1.25; text-align:center; max-width:none; min-width:0; white-space:normal; overflow-wrap:normal; word-break:normal; hyphens:none; }
#answer-mode-label { min-width:0; }
/* Persona controls sit below the portrait rather than over the face or watermark. */
#reception-avatar { contain:layout style; overflow:visible; margin-bottom:56px; }
#reception-avatar iframe,#reception-avatar > canvas,.avatar-portrait { border-radius:inherit; }
.avatar-portrait { width:100%;height:100%;object-fit:cover;position:absolute;inset:0; }
#reception-avatar[data-renderer="dh"] .avatar-portrait { display:none; }
#reception-avatar[data-renderer="portrait"] iframe,#reception-avatar[data-renderer="portrait"] > canvas { display:none; }
.avatar-persona-controls { position:absolute;top:calc(100% + 8px);left:0;right:0;bottom:auto;display:flex;gap:4px;justify-content:center;align-items:center;flex-wrap:nowrap;z-index:25;pointer-events:none; }   /* above the greeting freeze (3) and the live layer (20), below the pause gate (40); clicks pass through the empty corners to the pill and the size toggle */
.avatar-persona-controls button { pointer-events:auto; }
/* Compact Tap-to-speak: the same Send-gold strip as in the expanded window - a small
   two-line label on the left, a reserved countdown-digit slot on the right - running
   along the bottom inside the window. */
#reception-avatar .premium-tap { left:4px; right:4px; bottom:4px; width:auto; height:auto; min-height:36px; background:#d9bd7d; border-color:#c7a55b; color:#171a14; display:flex; align-items:center; gap:6px; padding-inline:8px; }
#reception-avatar .premium-tap .premium-tap-glyph { display:none; }
#reception-avatar .premium-tap .premium-tap-label { display:block; flex:1 1 auto; font:600 10px/1.2 Arial,Helvetica,sans-serif; text-align:start; overflow:hidden; }
#reception-avatar .premium-tap .premium-tap-count { flex:0 0 1.1em; font:700 15px/1 Arial,Helvetica,sans-serif; text-align:center; }
/* One button row INSIDE the window: gender buttons centered, the pill at the start,
   the size toggle at the end - all sized with --avatar-btn (44px, 22px on compact slots). */
.avatar-persona-controls button { min-width:var(--avatar-btn);min-height:0;height:var(--avatar-btn);padding:0;font-size:calc(var(--avatar-btn) * .5);line-height:1;background:#252c20;color:#d2d5c9;border:1px solid #626951;border-radius:12px; }
.avatar-persona-controls button[aria-pressed="true"] { background:#d9bc78;color:#151a10;border-color:#f0d99e; }
.avatar-persona-controls button:focus-visible { outline-offset:0; }
.avatar-kind { position:absolute;top:4px;inset-inline:0;font-size:9px;line-height:1.2;text-align:center;color:#b3b9aac9;z-index:1;pointer-events:none; }
#reception-avatar[data-size="expanded"] { margin-bottom:10px; --avatar-btn:40px; }
/* Expanded: the gender buttons sit flush against the size toggle (one tight right group),
   and the Tap-to-speak pill stretches over all the remaining space from the left edge,
   keeping its height. */
#reception-avatar[data-size="expanded"] .avatar-persona-controls { top:auto; bottom:4px; left:4px; inset-inline-end:calc(4px + var(--avatar-btn)); justify-content:flex-end; }
#reception-avatar[data-size="expanded"] .avatar-size-toggle { top:auto; bottom:4px; inset-inline-end:4px; }
#reception-avatar[data-size="expanded"] .premium-tap { right:calc(4px + var(--avatar-btn) * 3 + 8px); left:4px; }
   /* Send-button look: the small two-line label on the left, a reserved slot on the
      right for a countdown digit (it stays empty until a digit arrives). */

.answer-mode-control { display:flex;align-items:center;gap:8px;cursor:pointer;min-height:44px; }
.controls { flex-wrap:wrap; }.answer-mode-control .switch{flex-shrink:0;}
#answer-mode-label { min-width:95px;font-size:12px; }
/* Native switch input keeps its original zero-size visually hidden styling. */
#mode-selector { min-height:0;border:0;padding:0;width:0;height:0; }
body,input,button,select { font-family:Arial,Helvetica,sans-serif; }
.switch:has(input:focus-visible) .slider { outline:2px solid #e7ce94;outline-offset:3px; }
:root { color-scheme:dark; }
#chat-window { scrollbar-color:#626b56 #252b20; scrollbar-width:thin; }
button:hover { background:#e6cc94; }

/* Each own portrait covers its frame during initial load; old identities never cover a new one. */
#reception-avatar[data-renderer="dh"][data-identity] .avatar-portrait { display:block; z-index:0; }
#reception-avatar[data-identity] > canvas { z-index:1; }
#reception-avatar[data-identity] iframe { z-index:2; }
/* MVP default DH_live character: never show one of our portraits under a different face. */
#reception-avatar[data-renderer="dh"][data-identity][data-avatar-kind="default"] .avatar-portrait { display:none; }
/* One shared background video for green-screen characters; it stays while the renderer reloads. */
#reception-avatar .avatar-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; border-radius:inherit; pointer-events:none; }
#reception-avatar[data-renderer="portrait"] .avatar-background { display:none; }
#reception-avatar > canvas[hidden] { display:none; }
#reception-avatar .avatar-stats { position:absolute; right:0; bottom:calc(100% + 3px); top:auto; left:auto; z-index:20; display:block; white-space:pre; font:bold 9px/1.3 monospace; color:#fff; background:rgba(0,0,0,.8); padding:2px 5px; border-radius:4px; pointer-events:none; text-align:left; direction:ltr; }