/* Black-background browser output for a compatible exhibition display.
   This is not a device-specific 4-view/fan export or a 3D mesh renderer. */
.projection-open { position:absolute; bottom:94px; inset-inline-end:18px; z-index:6; min-height:40px; padding:8px 13px; border:1px solid #69c9ff45; border-radius:999px; background:#081727e8; color:#d7edff; font:inherit; font-size:12px; cursor:pointer; }
.projection-open:focus-visible, .projection-toolbar button:focus-visible { outline:2px solid #ffb13b; outline-offset:3px; }
.projection-toolbar[hidden] { display:none; }
body.projection-mode { background:#000; overflow:hidden; --projection-dock-height:0px; --projection-stack-height:0px; --projection-side-width:0px; --projection-edge:max(12px,env(safe-area-inset-bottom,0px)); }
body.projection-mode[data-projection-clean=false] { --projection-dock-height:calc(var(--projection-controls-height,150px) + var(--projection-edge) + 12px); }
body.projection-mode::before, body.projection-mode::after { display:none; }
body.projection-mode > .skip, body.projection-mode > header, body.projection-mode > footer,
body.projection-mode main > :not(.sales-hero):not(.sales-console):not(dialog),
body.projection-mode .sales-hero > :not(.sales-avatar) { display:none; }
body.projection-mode .sales-hero { position:static; display:block; min-height:0; margin:0; padding:0; border:0; background:none; }
body.projection-mode > .sales-avatar { position:fixed; inset:auto; top:var(--projection-viewport-top,0px); inset-inline-start:0; width:calc(100% - var(--projection-side-width)); max-width:none; height:calc(var(--projection-viewport-height,100dvh) - var(--projection-dock-height) - var(--projection-stack-height)); min-height:0; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#000; box-shadow:none; z-index:90; cursor:pointer; overflow:hidden; }
body.projection-mode .sales-avatar::before, body.projection-mode .sales-avatar::after,
body.projection-mode .sales-avatar > :not(img):not(canvas[data-avatar-character]) { display:none; }
/* The programmatic focus target is not projector content. Keep visible focus
   rings on the operator buttons, never around the clean black output. */
body.projection-mode > .sales-avatar:focus { outline:none; }
body.projection-mode .sales-avatar > img { position:absolute; top:20px; left:2.5%; width:95%; height:max(1px,calc(100% - 90px)); max-width:none; max-height:none; margin:0; object-fit:contain; filter:none; }
body.projection-mode[data-projection-mirror=true] .sales-avatar > img,
body.projection-mode[data-projection-mirror=true] canvas[data-avatar-character] { transform:scaleX(-1); }
.projection-toolbar { position:fixed; z-index:110; inset-inline:12px; bottom:calc(var(--projection-viewport-bottom,0px) + var(--projection-edge,12px)); width:fit-content; max-width:calc(100vw - 24px); max-height:calc(var(--projection-viewport-height,100dvh) * .42); overflow:auto; margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; padding:10px; border:1px solid #30475e; border-radius:14px; background:#08121e; color:#d7edff; font-size:12px; }
.projection-toolbar button { font:inherit; font-size:12px; cursor:pointer; padding:9px 12px; min-height:42px; border:1px solid #526678; border-radius:8px; background:#12243a; color:#fff; }
.projection-toolbar button[aria-pressed=true], .projection-toolbar button[aria-expanded=true] { border-color:#ffb13b; color:#ffc771; }
.projection-hint, .projection-status { flex:1 0 100%; margin:0; text-align:center; font-size:12px; }
.projection-status:empty { display:none; }
body.projection-mode[data-projection-clean=true] .projection-toolbar { visibility:hidden; pointer-events:none; }
body.projection-mode .sales-console { display:none; }
body.projection-mode[data-projection-panel=true][data-projection-clean=false] { --projection-stack-height:calc((var(--projection-viewport-height,100dvh) - var(--projection-dock-height)) * .44); }
body.projection-mode[data-projection-panel=true] .sales-console { display:block; position:fixed; z-index:100; top:auto; inset-inline:12px; bottom:calc(var(--projection-viewport-bottom,0px) + var(--projection-dock-height)); height:calc(var(--projection-stack-height) - 12px); width:auto; min-height:0; margin:0; padding:0; overflow:auto; border:1px solid #30475e; border-radius:18px; background:#09111d; }
body.projection-mode .sales-console .sales-trust { display:none; }
body.projection-mode .sales-messages { height:26vh; min-height:130px; }
@media(max-width:480px) { .projection-toolbar { gap:6px; padding:8px; } .projection-toolbar button { padding:8px; } }
@media(min-width:760px) {
  body.projection-mode[data-projection-panel=true][data-projection-clean=false] { --projection-side-width:calc(min(440px,38vw) + 24px); --projection-stack-height:0px; }
  body.projection-mode[data-projection-panel=true] .sales-console { top:calc(var(--projection-viewport-top,0px) + 12px); inset-inline-start:auto; inset-inline-end:12px; height:auto; width:calc(var(--projection-side-width) - 24px); }
}
@media(max-height:500px) and (min-width:600px) {
  .projection-toolbar { flex-wrap:nowrap; justify-content:flex-start; }
  .projection-toolbar button { flex:none; }
  .projection-hint { display:none; }
  .projection-status { min-width:200px; }
}