/* FLUXO café interface, v26 (loaded after every other café stylesheet; replaces spatial-glass.css).
   One system for the whole interior: solid paper surfaces with a hairline (no glass, no blur, no glow), Archivo only,
   sentence-case labels (no tiny letter-spaced capitals), three control heights (36 / 44 / 52), one radius family.
   Desktop: panels open as one docked sheet on the right, the chat lives bottom-left, the dock bottom-centre.
   Phones keep their bottom sheets. FLUXO mode (the store's dark switch, same device) carries into the café. */
:root{
  --c-paper:#f6f6f3;--c-paper2:#ebebe7;--c-paper3:#e1e1dc;--c-ink:#141518;--c-ink2:#4d5057;--c-ink3:#868991;
  --c-hair:rgba(20,21,24,.1);--c-hair2:rgba(20,21,24,.18);--c-live:#2f45a8;--c-lime:#c8f53a;
  --c-shadow:0 1px 2px rgba(15,16,19,.08),0 12px 32px -16px rgba(15,16,19,.42);
  --c-font:'Archivo',system-ui,sans-serif;--c-r:20px;
  --u-paper:var(--c-paper);--u-paper2:var(--c-paper2);--u-ink:var(--c-ink);--u-ink2:var(--c-ink2);--u-ink3:var(--c-ink3);--u-hair:var(--c-hair);
  --fx-ink:var(--c-ink);--fx-paper:var(--c-paper);--fx-hair:var(--c-hair)}
html.flow{--c-paper:#141418;--c-paper2:#1f1f25;--c-paper3:#2a2a31;--c-ink:#f3f3f1;--c-ink2:#c3c5cc;--c-ink3:#8c8f99;
  --c-hair:rgba(255,255,255,.1);--c-hair2:rgba(255,255,255,.2);--c-live:#c8f53a;--c-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -14px rgba(0,0,0,.7)}

/* ── every floating surface: solid, hairline, no blur ── */
.identity,.header-actions,.scene-controls>summary,.scene-controls-body,.tour-dock,#spatial .glass,#spatial .tag .cap,.fluxo-local-weather,.fx-seat-status,#worldToast{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--c-paper)!important;color:var(--c-ink)!important;
  border:0!important;box-shadow:inset 0 0 0 1px var(--c-hair),var(--c-shadow)!important}
#experience,#spatial,#spatial *,.fx-talk,.fx-talk *,.tour-dock *,header *,dialog,dialog *{font-family:var(--c-font)}
#spatial *,.tour-dock *,header *{letter-spacing:normal}

/* ── top left: identity, and the weather only when there is a reading ── */
header .identity.fluxo-identity{border-radius:999px!important;min-height:52px;padding:0 20px 0 18px!important;gap:14px}
.fluxo-identity .fx-mark{height:13px!important}
.fluxo-identity .property-heading{padding-left:14px!important;border-left:1px solid var(--c-hair2)!important}
.fluxo-identity h1{font:600 17px/1 var(--c-font)!important;font-stretch:115%!important;color:var(--c-ink)!important;letter-spacing:-.01em!important}
.fluxo-identity .property-location{font:500 12px/1 var(--c-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--c-ink3)!important;margin-top:4px!important}
html.flow .fluxo-identity .fx-mark{filter:invert(1)}
.fluxo-local-weather{left:24px!important;top:88px!important;border-radius:999px!important;padding:9px 16px!important;display:flex!important;align-items:baseline;gap:10px;pointer-events:none}
.fluxo-local-weather strong{font:600 13px/1 var(--c-font)!important}
.fluxo-local-weather time{font:500 12px/1 var(--c-font)!important;opacity:1!important;color:var(--c-ink3);margin:0!important}
.fluxo-local-weather[data-state=off],.fluxo-local-weather[data-state=loading]{display:none!important}

/* ── top right: actions + light & atmosphere ── */
header .header-actions{border-radius:999px!important;padding:4px!important;gap:2px!important;min-height:52px;align-items:center}
header .header-actions button,header .header-actions #peopleButton{min-width:44px!important;min-height:44px!important;border-radius:999px!important;color:var(--c-ink)!important;background:transparent!important;border:0!important}
header .header-actions button:hover{background:var(--c-paper2)!important}
header .header-actions svg{stroke:currentColor!important}
#peopleButton{padding:0 14px 0 12px!important;gap:8px!important;font:500 13px/1 var(--c-font)!important}
#peopleButton>i{background:var(--c-live)!important}
#sceneControls{top:84px!important}
#sceneControls>summary{border-radius:999px!important;min-height:44px!important;padding:0 16px!important;font:500 13px/1 var(--c-font)!important}
html body #sceneControls .scene-controls-body{border-radius:var(--c-r)!important;margin-top:8px}
.scene-controls .lighting>span{font:500 12px/1 var(--c-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--c-ink3)!important}
.scene-controls button{font:500 13px/1 var(--c-font)!important;letter-spacing:0!important;text-transform:none!important}
.scene-controls .lighting button.selected,.scene-controls .walk-actions button[aria-pressed=true]{background:var(--c-ink)!important;color:var(--c-paper)!important}
.scene-controls kbd,#walkHint kbd{font:600 11px/1 var(--c-font)!important;border:0!important;border-radius:6px!important;background:var(--c-paper2)!important;color:var(--c-ink)!important;padding:4px 6px!important;box-shadow:inset 0 -1px 0 var(--c-hair2)!important}

/* ── bottom dock ── */
html body .tour-dock{border-radius:999px!important;padding:5px!important;gap:2px!important;bottom:22px!important;min-height:52px;align-items:center}
.tour-dock button,.tour-dock .orn.in-dock button,.tour-dock #walkButton,.views button{font:500 13px/1 var(--c-font)!important;letter-spacing:0!important;text-transform:none!important;
  min-height:42px!important;padding:0 14px!important;border-radius:999px!important;color:var(--c-ink)!important;background:transparent!important;transform:none!important;gap:8px}
.tour-dock button:hover,.tour-dock .orn.in-dock button:hover{background:var(--c-paper2)!important}
.tour-dock svg{stroke:currentColor!important}
.tour-dock .book-btn.fx-shop{background:var(--c-ink)!important;color:var(--c-paper)!important;box-shadow:none!important;padding:0 16px!important}
.tour-dock .book-btn.fx-shop svg{stroke:currentColor!important}
.tour-dock .book-btn.fx-shop:hover{background:var(--c-live)!important;color:#fff!important}
html.flow .tour-dock .book-btn.fx-shop{background:var(--c-lime)!important;color:#000!important}
.tour-dock .fx-count:not([hidden]){background:var(--c-lime)!important;color:#000!important}
.tour-dock .dock-sep{background:var(--c-hair2)!important;height:22px!important;width:1px!important;margin:0 4px!important}

/* walk hint: once, above the dock, then out of the way */
#walkHint{bottom:92px!important;top:auto!important;background:var(--c-ink)!important;color:var(--c-paper)!important;border-radius:999px!important;font:500 12.5px/1 var(--c-font)!important;padding:8px 12px!important;box-shadow:var(--c-shadow)!important}
#walkHint:not([hidden]){animation:c-hint 8s ease forwards}
@keyframes c-hint{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}
#walkHint kbd{background:rgba(255,255,255,.14)!important;color:inherit!important;box-shadow:none!important}

/* ── anchored tags in the scene ── */
#spatial .tag .cap{border-radius:999px!important;padding:5px 14px 5px 5px!important;gap:10px}
#spatial .tag .ic{width:34px;height:34px;border-radius:50%!important;background:var(--c-paper2)!important}
#spatial .tag .ic svg{stroke:var(--c-ink)!important}
#spatial .tag small{font:500 11.5px/1.1 var(--c-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--c-ink3)!important}
#spatial .tag b{font:600 14px/1.15 var(--c-font)!important;color:var(--c-ink)!important}
#spatial .tag.gaze .cap,#spatial .tag:hover .cap{background:var(--c-ink)!important;color:var(--c-paper)!important}
#spatial .tag.gaze b,#spatial .tag:hover b{color:var(--c-paper)!important}
#spatial .tag.gaze small,#spatial .tag:hover small{color:var(--c-paper3)!important}
#spatial .tag .stem{background:var(--c-paper)!important;opacity:.85}

/* ── panels ── */
#spatial .panel{background:var(--c-paper)!important;color:var(--c-ink)!important;border-radius:24px!important;padding:22px 22px 24px!important;
  box-shadow:inset 0 0 0 1px var(--c-hair),0 30px 70px -28px rgba(10,11,14,.6)!important;scrollbar-width:thin}
#spatial .panel .hd{display:flex;align-items:center;gap:12px;margin:0 52px 18px 0}
#spatial .panel .hd .ic{flex:none;width:40px;height:40px;border-radius:50%;background:var(--c-paper2)!important;display:grid;place-items:center}
#spatial .panel .hd .ic svg{width:20px;height:20px;stroke:var(--c-ink)!important}
#spatial .panel .hd small,#spatial .hd small{font:500 12.5px/1.2 var(--c-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--c-ink3)!important;margin:0 0 3px}
#spatial .panel h3{font:600 24px/1.05 var(--c-font)!important;font-stretch:115%!important;letter-spacing:-.015em!important;color:var(--c-ink)!important;margin:0}
#spatial .panel .x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:0!important;outline:0;background:var(--c-paper2)!important;color:var(--c-ink);display:grid;place-items:center;box-shadow:none!important;cursor:pointer}
#spatial .panel .x:hover{background:var(--c-paper3)!important}
#spatial .panel .x svg{width:18px;height:18px;stroke:currentColor}
/* no tiny tracked capitals inside panels */
#spatial .panel :is(small,.lbl,.chip,.hd2,.kick,dt,dd,.fx-specs dt,.fx-specs dd,.fx-btn,.fx-soon,.fx-stages span){text-transform:none!important;letter-spacing:0!important}
#spatial .lbl{font:600 13px/1 var(--c-font)!important;color:var(--c-ink2)!important;margin:18px 0 8px!important}
#spatial .fx-specs div{border-top:1px solid var(--c-hair)!important;padding:10px 0!important}
#spatial .fx-specs dt{font:400 13.5px/1.3 var(--c-font)!important;color:var(--c-ink2)!important}
#spatial .fx-specs dd{font:600 13.5px/1.3 var(--c-font)!important;color:var(--c-ink)!important}
#spatial .fx-prose,#spatial .panel p{font:400 14.5px/1.5 var(--c-font);color:var(--c-ink2)}
#spatial .fx-btn{border-radius:999px!important;font:600 13.5px/1 var(--c-font)!important;padding:0 20px!important;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--c-ink)!important;color:var(--c-paper)!important}
#spatial .fx-btn:hover{background:var(--c-live)!important;color:#fff!important}
#spatial .fx-btn.ghost{background:transparent!important;color:var(--c-ink)!important;box-shadow:inset 0 0 0 1px var(--c-hair2)!important}
#spatial .fx-btn.ghost:hover{background:var(--c-paper2)!important}
#spatial .fx-btn.sm{min-height:36px;padding:0 14px!important;font-size:13px!important}
#spatial .fx-row,#spatial .fx-place{border:0!important;border-radius:16px!important;background:var(--c-paper2)!important;margin:0 0 6px!important;padding:14px 16px!important;color:var(--c-ink)!important;transition:background .15s}
#spatial .fx-row:hover,#spatial .fx-place:hover{background:var(--c-paper3)!important}
#spatial .fx-row b{font:600 15px/1.2 var(--c-font)!important}
#spatial .fx-row small{font:400 13px/1.3 var(--c-font)!important;color:var(--c-ink3)!important}
#spatial .fx-row>em,#spatial .fx-row>i:last-child,#spatial .fx-row .go{font:600 13px/1 var(--c-font)!important;font-style:normal!important;color:var(--c-ink)!important;letter-spacing:0!important;text-transform:none!important}
#spatial .btn{border-radius:999px!important;font:500 13.5px/1 var(--c-font)!important;min-height:40px;padding:0 16px!important;background:var(--c-paper2)!important;color:var(--c-ink)!important;border:0!important;letter-spacing:0!important;text-transform:none!important}
#spatial .btn:hover{background:var(--c-paper3)!important}
#spatial .btn.primary{background:var(--c-ink)!important;color:var(--c-paper)!important}
#spatial .muted{color:var(--c-ink3)!important}

/* map panel: the café from above, places and people beside it */
#spatial .panel.house-panel .house{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"map" "goto" "legend" "mgr"!important;gap:14px}
#spatial .panel.house-panel .house>.mgr{max-height:none!important;overflow:visible!important;margin:0}
#spatial .panel.house-panel canvas.map{width:100%;height:auto;max-height:46vh;object-fit:contain;border-radius:16px;background:#f6f3ee;box-shadow:inset 0 0 0 1px var(--c-hair)}
#spatial .panel.house-panel .goto{display:flex;flex-wrap:wrap;gap:6px}
#spatial .panel.house-panel .goto button{border:0;border-radius:999px;background:var(--c-paper2);color:var(--c-ink);font:500 13px/1 var(--c-font);min-height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
#spatial .panel.house-panel .goto button:hover{background:var(--c-paper3)}
#spatial .panel.house-panel .goto svg{width:16px;height:16px;stroke:currentColor;fill:none}
#spatial .panel.house-panel .mgr{display:grid;gap:4px}
#spatial .panel.house-panel .mrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--c-hair)}
#spatial .panel.house-panel .mrow i{width:12px;height:12px;border-radius:50%;flex:none}
#spatial .panel.house-panel .mrow span{display:flex;flex-direction:column;gap:2px;flex:1}
#spatial .panel.house-panel .mrow b{font:600 14px/1.2 var(--c-font)}
#spatial .panel.house-panel .mrow small{font:400 12.5px/1.2 var(--c-font);color:var(--c-ink3)}
#spatial .panel.house-panel .legend[hidden]{display:none}

/* desktop: every panel is the same docked sheet on the right; the atmosphere control steps aside while it is open */
@media (min-width:600px){
  html[data-sheet=right] #spatial .panel{position:fixed!important;left:auto!important;right:20px!important;top:84px!important;bottom:auto!important;
    width:min(430px,calc(100vw - 40px))!important;max-height:calc(100vh - 176px)!important;height:auto;overflow:auto;transform-origin:100% 50%;animation:c-sheet .26s cubic-bezier(.2,.8,.2,1)}
  html[data-sheet=right] #spatial .panel.xl,html[data-sheet=right] #spatial .panel.house-panel{width:min(520px,calc(100vw - 40px))!important}
  html[data-sheet=right] #spatial .panel.closing{animation:c-sheet-out .18s ease forwards}
  html[data-sheet=right] body:has(#spatial .panel) #sceneControls{opacity:0;pointer-events:none}
  @keyframes c-sheet{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
  @keyframes c-sheet-out{to{opacity:0;transform:translateX(16px)}}
}
@media (prefers-reduced-motion:reduce){html[data-sheet=right] #spatial .panel{animation:none!important}}

/* toasts: one ink pill, top centre */
#spatial .toast,#spatial .toast.glass,#worldToast{background:var(--c-ink)!important;color:var(--c-paper)!important;border-radius:999px!important;font:500 13.5px/1.2 var(--c-font)!important;padding:11px 18px!important;box-shadow:var(--c-shadow)!important;border:0!important}

/* seated status bar */
.fx-seat-status{border-radius:999px!important;font:500 13px/1 var(--c-font)!important;padding:6px 6px 6px 18px!important;bottom:92px!important}
.fx-seat-status button{border-radius:999px!important;background:var(--c-ink)!important;color:var(--c-paper)!important;font:600 13px/1 var(--c-font)!important;padding:0 16px!important;min-height:36px}

/* ── chat ── */
.fx-talk{position:fixed;z-index:62;left:20px;bottom:92px;width:372px;display:flex;flex-direction:column;color:var(--c-ink);font:400 14px/1.4 var(--c-font);pointer-events:none}
.fx-talk>*{pointer-events:auto}
.fx-talk .fx-talk-head{display:none;position:static!important;inset:auto!important;flex:none}
.fx-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;overflow:hidden;pointer-events:none}
.fx-feed li{transition:opacity .6s;overflow-wrap:anywhere}
.fx-feed li[style*="opacity: 0"]{display:none}
.fx-feed .av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:600 12.5px/1 var(--c-font);font-style:normal}
.fx-feed .mb{min-width:0}
.fx-feed .mh{margin:0;display:flex;align-items:baseline;gap:8px}
.fx-feed .mh b{font-weight:600;font-size:13.5px;color:var(--c-ink)}
.fx-feed .mh time{font-size:11.5px;color:var(--c-ink3)}
.fx-feed .mt{margin:1px 0 0;font-size:14px;line-height:1.42;color:var(--c-ink)}
.fx-feed li.act{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-ink3)}
.fx-feed li.act .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.fx-feed li.act b{font-weight:600;color:var(--c-ink2)}

/* closed: the last few lines as compact cards over the scene */
.fx-talk:not(.open) .fx-feed{margin-bottom:8px}
.fx-talk:not(.open) .fx-feed li.msg{align-self:flex-start;display:flex;gap:9px;align-items:flex-start;max-width:100%;background:var(--c-paper);border-radius:18px;padding:8px 14px 9px 8px;box-shadow:inset 0 0 0 1px var(--c-hair),var(--c-shadow)}
.fx-talk:not(.open) .fx-feed li.msg .av{width:24px;height:24px;font-size:11px}
.fx-talk:not(.open) .fx-feed li.msg .mh time{display:none}
.fx-talk:not(.open) .fx-feed li.msg.cont{margin-top:-2px}.fx-talk:not(.open) .fx-feed li.msg.cont .mh{display:none}.fx-talk:not(.open) .fx-feed li.msg.cont .av{visibility:hidden;height:0}
.fx-talk:not(.open) .fx-feed li.act{align-self:flex-start;background:var(--c-paper);border-radius:999px;padding:6px 12px;box-shadow:inset 0 0 0 1px var(--c-hair),var(--c-shadow);color:var(--c-ink2)}

/* the composer bar (with the voice button inside on desktop) */
.fx-say{display:flex;align-items:center;gap:4px;background:var(--c-paper);border-radius:999px;box-shadow:inset 0 0 0 1px var(--c-hair),var(--c-shadow);padding:4px 4px 4px 18px;height:52px}
.fx-say input{flex:1;min-width:0;border:0;background:transparent;font:400 14.5px/1 var(--c-font);color:var(--c-ink);outline:none;height:100%}
.fx-say input::placeholder{color:var(--c-ink3)}
.fx-key{flex:none;font:600 11px/1 var(--c-font);color:var(--c-ink3);background:var(--c-paper2);border-radius:6px;padding:5px 7px;margin-right:4px;box-shadow:inset 0 -1px 0 var(--c-hair2)}
.fx-say:focus-within .fx-key{display:none}
.fx-send{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--c-ink);color:var(--c-paper);display:grid;place-items:center;cursor:pointer}
.fx-send:hover{background:var(--c-live);color:#fff}
.fx-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-say:not(:focus-within) .fx-send{display:none}
.fx-say .fx-r{width:44px;height:44px;box-shadow:none!important;background:transparent}
.fx-say .fx-r:hover{background:var(--c-paper2)}
.fx-say .fx-r .fx-ring{width:44px;height:44px}

/* open (desktop): one card, header + conversation + composer */
.fx-talk.open{background:var(--c-paper);border-radius:24px;box-shadow:inset 0 0 0 1px var(--c-hair),0 30px 70px -28px rgba(10,11,14,.6);padding:6px}
.fx-talk.open .fx-talk-head{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 14px}
.fx-talk-head b{font:600 16px/1 var(--c-font);font-stretch:112%}
.fx-talk-head small{flex:1;color:var(--c-ink3);font-size:12.5px;display:flex;align-items:center;gap:6px}
.fx-talk-head small::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-live)}
.fx-talk-close{width:36px;height:36px;border:0;border-radius:50%;background:var(--c-paper2);display:grid;place-items:center;color:var(--c-ink);cursor:pointer}
.fx-talk-close:hover{background:var(--c-paper3)}
.fx-talk-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.fx-talk.open .fx-feed{pointer-events:auto;overflow-y:auto;max-height:min(46vh,420px);min-height:120px;padding:4px 10px 12px 12px;gap:2px;border-top:1px solid var(--c-hair);scrollbar-width:thin}
.fx-talk.open .fx-feed li.msg{display:flex;gap:10px;align-items:flex-start;padding:8px 0 2px}
.fx-talk.open .fx-feed li.msg.cont{padding-top:0}
.fx-talk.open .fx-feed li.msg.cont .av{visibility:hidden;height:0}
.fx-talk.open .fx-feed li.msg.cont .mh{display:none}
.fx-talk.open .fx-feed li.act{padding:6px 0 4px 10px}
.fx-talk.open .fx-feed:empty::before{content:attr(data-empty);color:var(--c-ink3);font-size:13.5px;padding:14px 4px}
.fx-talk.open .fx-say{box-shadow:none;background:var(--c-paper2);height:50px}
.fx-talk.open .fx-say .fx-r:hover{background:var(--c-paper3)}

/* voice + chat rail (touch, and narrow desktop) */
.fx-rail{position:fixed;z-index:62;display:none;gap:8px}
.fx-r{position:relative;width:46px;height:46px;border:0;border-radius:50%;background:var(--c-paper);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-hair),var(--c-shadow);display:grid;place-items:center;cursor:pointer;padding:0}
.fx-r>svg:first-child{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fx-r:hover{background:var(--c-paper2)}
.fx-unread{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--c-live);box-shadow:0 0 0 2px var(--c-paper)}
.fx-ring{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg);pointer-events:none;opacity:0}
.fx-ring circle{fill:none;stroke:var(--c-live);stroke-width:3;stroke-dasharray:138;stroke-dashoffset:calc(138 - 138 * var(--lvl,0));transition:stroke-dashoffset .08s linear}
.fx-voice-btn[aria-pressed=true]{background:var(--c-live)!important;color:#fff!important}
html.flow .fx-voice-btn[aria-pressed=true]{color:#000!important}
.fx-voice-btn[aria-pressed=true] .fx-ring circle{stroke:#fff}
.on-air .fx-ring,.fx-say:has(.fx-voice-btn[aria-pressed=true]) .fx-ring{opacity:1}
.fx-mute-btn[aria-pressed=true]{background:var(--c-ink)!important;color:var(--c-paper)!important}
.fx-r[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:54px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--c-ink);color:var(--c-paper);font:500 12px/1 var(--c-font);padding:8px 10px;border-radius:999px;pointer-events:none}
.fx-rail.touch .fx-r[data-tip]:hover::after{display:none}
.fx-rail.touch{display:flex}

/* narrow desktop windows: the chat card sits above the dock, full left column */
@media (max-width:1180px) and (pointer:fine){
  .fx-talk{bottom:92px;width:340px}
}
/* every touch screen: round buttons on the right edge, chat in a bottom sheet */
@media (pointer:coarse){
  .fx-rail{left:auto;right:14px;top:46%;flex-direction:column;transform:translateY(-50%)}
  .fx-talk{left:14px;right:84px;top:118px;bottom:auto;width:auto}
  .fx-talk:not(.open) .fx-say{display:none}
  .fx-talk:not(.open) .fx-feed li.msg{padding:6px 12px 7px 6px}
  .fx-talk.open{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;height:min(64svh,540px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:24px 24px 0 0;padding:6px 12px calc(12px + env(safe-area-inset-bottom));z-index:80}
  .fx-talk.open .fx-feed{max-height:none}
  .fx-talk.open .fx-say .fx-send{display:grid}
  body:has(.fx-talk.open) #sticks,body:has(.fx-talk.open) .fx-rail,body:has(.fx-talk.open) .bottom-area{visibility:hidden}
  body:has(#spatial .panel) .fx-rail,body:has(#spatial .panel) .fx-talk:not(.open){visibility:hidden}
}
@media (max-width:600px){
  header .identity.fluxo-identity{min-height:44px;padding:0 16px!important}
  .fluxo-local-weather{display:none!important}
  header .header-actions{min-height:44px}
  header .header-actions button{min-width:38px!important;min-height:38px!important}
  #sceneControls{top:64px!important}
  .fx-talk{top:68px}
  html body .tour-dock{bottom:14px!important}
  #walkHint{bottom:220px!important}
  .fx-seat-status{bottom:84px!important}
}

/* dialogs (people, settings, about) follow the same surfaces */
html body #people,html body #settings,html body #info{background:var(--c-paper)!important;color:var(--c-ink)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-radius:24px!important}
#people h2,#settings h2,#info h2{color:var(--c-ink)!important}
#people .dialog-close,#settings .dialog-close,#info .dialog-close{background:var(--c-paper2)!important;box-shadow:none!important;outline:0}
#people .dialog-close:focus-visible,#settings .dialog-close:focus-visible,#info .dialog-close:focus-visible{outline:2px solid var(--c-ink)!important}
#people label,.fx-you-row>span{font:600 13px/1 var(--c-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--c-ink2)!important}
button:focus-visible,a:focus-visible{outline:2px solid var(--c-ink)!important;outline-offset:3px}

/* layout carried over from the retired spatial-glass.css (without its glass) */
.fx-seat-status{position:fixed;z-index:70;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;white-space:nowrap}
.fx-seat-status[hidden]{display:none!important}
.seated #sticks,.seated #crosshair,.seated #walkHint{display:none!important}
.fluxo-local-weather{position:absolute;z-index:12}
.live-weather-toggle{display:flex;align-items:center;gap:8px;padding:10px 0;font:500 13px var(--c-font)}
.local-weather-credit{display:block;font:400 11.5px/1.4 var(--c-font);color:var(--c-ink3);margin-top:12px}
.clean .fluxo-local-weather{display:none!important}
@media (max-width:600px){
  .fluxo-identity{max-width:200px;gap:0}.fluxo-identity .brand{display:none}.fluxo-identity .property-heading{padding:0!important;border:0!important}
  html body .tour-dock{gap:1px!important;max-width:calc(100vw - 24px)}
  .tour-dock button span{display:none!important}
  .tour-dock button,.tour-dock .orn.in-dock button,.tour-dock .book-btn.fx-shop{min-width:34px!important;padding:0 7px!important}
  .tour-dock .dock-sep{margin:0 1px!important}
  html body .tour-dock{overflow-x:auto;scrollbar-width:none;justify-content:space-between}
  .tour-dock svg{width:18px!important;height:18px!important}
  #spatial .panel{bottom:84px!important;max-height:66vh!important}
  .fx-seat-status{gap:10px;font-size:12px!important;padding-left:14px!important;max-width:calc(100vw - 24px)}
}

/* FLUXO mode switch in the café header (store/flow.js runs it; the store keeps the same setting) */
header .header-actions .flowbtn{display:grid;place-items:center;padding:0!important}
.flowbtn i{position:relative;width:24px;height:24px;border-radius:50%;background:conic-gradient(from 200deg,#000 0 50%,#1d2cb3 50% 80%,#c8f53a 80% 100%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.flowbtn i::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--c-paper)}
.flowbtn:hover i{transform:rotate(180deg)}
.flowbtn[aria-pressed=true] i::after{background:#c8f53a;inset:8px}
html.flow .flowbtn i{box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.fxsplash{position:fixed;inset:0;z-index:200;pointer-events:none;width:100%;height:100%}
.fxpaint{display:none!important}
/* FLUXO mode inside: dark chrome, lime for what is live, the scene untouched */
html.flow #spatial .panel,html.flow .fx-talk.open{box-shadow:inset 0 0 0 1px var(--c-hair),0 30px 70px -28px rgba(0,0,0,.85)!important}
html.flow #spatial .fx-btn:hover,html.flow .fx-send:hover{background:#c8f53a!important;color:#000!important}
html.flow #spatial .tag.gaze .cap,html.flow #spatial .tag:hover .cap{background:#c8f53a!important}
html.flow #spatial .tag.gaze b,html.flow #spatial .tag:hover b,html.flow #spatial .tag.gaze small,html.flow #spatial .tag:hover small{color:#000!important}
html.flow #spatial .panel h3,html.flow .fx-talk-head b{text-transform:uppercase;font-weight:800!important;font-stretch:80%!important;letter-spacing:0!important}
html.flow #spatial .panel.house-panel canvas.map{filter:invert(.92) hue-rotate(180deg)}
html.flow .fx-feed .mh b,html.flow .fx-feed .mt{color:var(--c-ink)}
html.flow .fx-key{background:var(--c-paper3)}
html.flow #people,html.flow #settings,html.flow #info{color:var(--c-ink)!important}
html.flow #people input,html.flow #settings select{background:var(--c-paper2)!important;color:var(--c-ink)!important;border-color:var(--c-hair2)!important}
html.flow .fx-you-stage{background:radial-gradient(120% 90% at 50% 30%,#2a2a31 0%,#18181d 60%,#0e0e12 100%)!important}
html.flow #people .fx-chips button{background:var(--c-paper2)!important;color:var(--c-ink)!important;border-color:var(--c-hair2)!important}
html.flow #people .fx-chips button[aria-checked=true],html.flow #people .guest-row button,html.flow #people .fx-up-btn{background:#c8f53a!important;color:#000!important;border-color:#c8f53a!important}
html.flow .fx-up{background:var(--c-paper2)!important}