/* Reception: separate conversation, composer and portrait stage; no expensive backdrop filters. */
:root { --gold:#d9bc78; --gold-gradient:linear-gradient(120deg,#e7ce94,#c7a55b); --glass-border:#34322b; }
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) 192px; grid-template-areas:"header header" "chat avatar" "composer avatar"; }
#reception-avatar { grid-area:avatar; position:relative; inset:auto; top:auto; width:160px; height:240px; 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) 192px; }
 #reception-avatar { width:160px; height:240px; 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) 120px; 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:104px; height:156px; margin:8px; align-self:start; border-radius:12px; }
 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 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; }
.avatar-size-toggle { position:absolute; inset-inline-end:6px; bottom:6px; z-index:3; min-width:44px; height:44px; padding:0; border:1px solid #d4c6a0; color:#fff6dd; background:#24271ff2; font-size:26px; 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; }
}
/* 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; }
/* Persona controls sit below the portrait rather than over the face or watermark. */
#reception-avatar { contain:layout style; overflow:visible; margin-bottom:88px; }
#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);inset-inline:0;display:flex;gap:4px;justify-content:center;flex-wrap:wrap; }
.avatar-persona-controls button { min-width:44px;height:44px;padding:0;font-size:22px;line-height:1;background:#252c20;color:#d2d5c9;border:1px solid #626951; }
.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 { flex-basis:100%;font-size:10px;text-align:center;color:#b3b9aa; }
#reception-avatar[data-size="expanded"] { margin-bottom:88px; }
.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; }

/* Live duty-manager call: the administrator's video replaces the avatar (live-reception.mjs). */
#reception-avatar[data-live] > :not(.live-layer) { visibility:hidden; }
.live-layer { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; padding:10px; border-radius:inherit; overflow:hidden; background:#15180f; }
.live-layer video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.live-layer video[hidden] { display:none; }
.live-status { position:relative; margin:auto 0; padding:0 6px; color:#f3ecd2; font-size:14px; line-height:1.35; text-align:center; animation:live-pulse 1.6s ease-in-out infinite; }
.live-end,.live-sound { position:relative; padding:8px 18px; border:none; border-radius:18px; font-weight:700; cursor:pointer; }
.live-end { background:#d9463b; color:#fff; }
.live-sound { background:#f3ecd2; color:#111; }
.live-layer.live-floating { position:fixed; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:min(320px,86vw); aspect-ratio:2/3; border:1px solid #4e5145; border-radius:16px; box-shadow:0 10px 40px #000a; }
.live-indicator { position:fixed; top:10px; right:12px; z-index:50; padding:4px 10px; border-radius:12px; background:#000a; color:#ff5b4f; font:600 12px/1.4 system-ui,sans-serif; pointer-events:none; }
.live-indicator[hidden],.live-layer[hidden] { display:none; }
@keyframes live-pulse { 50% { opacity:.55; } }
@media (max-width:650px) { #reception-avatar[data-live] { width:208px; height:312px; } .live-status { font-size:12px; } .live-end { padding:6px 12px; } }

/* The microphone turns green while recording (the auto-greeting tells guests to wait for green). */
.voice-btn.recording { background:#2fa84f !important; border-color:#2fa84f !important; color:#fff !important; }
/* Auto-greeting: stand switch + glowing "tap me" prompt when Chrome still blocks sound. */
.greeting-control[hidden] { display:none; }
.greeting-tap { position:absolute; left:50%; bottom:calc(100% + 10px); z-index:30; transform:translateX(-50%); white-space:nowrap; padding:10px 18px; border-radius:24px; border:2px solid #f0d99e; background:linear-gradient(180deg,#f3dc9c,#d9b25c); color:#16120a; font:700 16px/1.2 Arial,Helvetica,sans-serif; text-transform:none; letter-spacing:0; cursor:pointer; box-shadow:0 0 0 0 rgba(240,217,158,.7),0 6px 20px rgba(0,0,0,.45); animation:greeting-glow 1.4s ease-out infinite, greeting-wiggle 1.6s ease-in-out infinite; }
.greeting-tap-floating { position:fixed; left:50%; top:22%; bottom:auto; }
.greeting-tap[hidden] { display:none; }
@keyframes greeting-glow { 0% { box-shadow:0 0 0 0 rgba(240,217,158,.75),0 6px 20px rgba(0,0,0,.45); } 70% { box-shadow:0 0 0 18px rgba(240,217,158,0),0 6px 20px rgba(0,0,0,.45); } 100% { box-shadow:0 0 0 0 rgba(240,217,158,0),0 6px 20px rgba(0,0,0,.45); } }
@keyframes greeting-wiggle { 0%,55%,100% { transform:translateX(-50%) rotate(0); } 60% { transform:translateX(-50%) rotate(-6deg) scale(1.05); } 66% { transform:translateX(-50%) rotate(6deg) scale(1.05); } 72% { transform:translateX(-50%) rotate(-4deg); } 78% { transform:translateX(-50%) rotate(3deg); } 84% { transform:translateX(-50%) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .greeting-tap { animation:none; } }

/* Installed app: close button + confirmation (app-close.mjs) */
.app-close { position:fixed; top:max(3px, env(safe-area-inset-top)); inset-inline-end:3px; z-index:70; width:28px; height:28px; min-height:0; padding:0; border-radius:50%; border:1px solid #555f46; background:rgba(21,24,15,.75); color:#d2d5c9; font-size:14px; line-height:1; cursor:pointer; }
.app-close-panel { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:80; width:min(340px, calc(100vw - 32px)); padding:18px; border-radius:16px; border:1px solid #626951; background:#1d211a; color:#f3ecd2; box-shadow:0 12px 40px #000c; text-align:center; }
.app-close-panel[hidden], .app-close-panel [hidden] { display:none; }
.app-close-panel p { margin:0 0 14px; font-size:16px; line-height:1.4; }
.app-close-panel .app-close-hint { color:#d9bc78; font-size:14px; }
.app-close-panel div { display:flex; gap:10px; justify-content:center; }
.app-close-panel button { flex:1; min-height:44px; border-radius:12px; padding:8px 12px; }
.app-close-yes { background:#d9463b !important; border-color:#d9463b !important; color:#fff !important; }
.greeting-stats { position:fixed; left:6px; bottom:6px; z-index:90; white-space:pre; font:bold 10px/1.35 monospace; color:#fff; background:rgba(0,0,0,.8); padding:3px 6px; border-radius:4px; pointer-events:none; direction:ltr; }

/* Call translation on the stand: badge + subtitles of the administrator's translated speech */
.live-translate { position:absolute; top:8px; inset-inline-start:8px; z-index:2; padding:3px 9px; border-radius:10px; background:#000a; color:#f3ecd2; font:600 11px/1.4 Arial,Helvetica,sans-serif; }
.live-translate[data-state="connecting"], .live-translate[data-state="error"] { color:#d9bc78; animation:live-pulse 1.6s ease-in-out infinite; }
.live-translate[data-state="speaking"] { color:#7ee08f; }
.live-translate[hidden] { display:none; }
.live-caption { position:relative; z-index:2; align-self:stretch; margin:0; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,.65); color:#fff; font-size:14px; line-height:1.35; text-align:center; max-height:40%; overflow:hidden; }
.live-caption[hidden] { display:none; }

/* Administrator signed in on a browser that is not the stand: explanation + one-tap registration */
.stand-offer { position:fixed; left:50%; bottom:10px; transform:translateX(-50%); z-index:65; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; width:min(720px, calc(100vw - 20px)); padding:10px 12px; border-radius:14px; border:1px solid #626951; background:#1d211a; color:#f3ecd2; font-size:13px; box-shadow:0 8px 30px #000a; }
.stand-offer span { flex:1 1 260px; }
.stand-offer button { min-height:36px; padding:6px 14px; border-radius:12px; }
.stand-offer .stand-offer-close { min-width:36px; padding:0; background:transparent; color:#d2d5c9; border:1px solid #555f46; }