/* the invitee's phone screen (js/viewerhud.js): the view, one header, one joystick. body.vh = a viewer / guest on a phone */
.vh-top{position:fixed;top:0;left:0;right:0;z-index:8900;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 14px;background:linear-gradient(rgba(8,12,18,.82),rgba(8,12,18,0));pointer-events:none}
.vh-top>*{pointer-events:auto}
.vh-b,.vh-top .lc-btn-open{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border-radius:20px;border:1px solid rgba(255,255,255,.2);background:rgba(18,23,32,.8);color:#fff;font:600 15px system-ui,sans-serif;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;touch-action:manipulation}
.vh-back{font-size:26px;line-height:1;padding:0 0 3px}
.vh-top .lc-btn-open.unread{background:#d9a35b;color:#1a1408;border-color:#d9a35b}
.vh-top .lcl-open.incall{background:#24523d;border-color:#4cc38a}
.vh-title{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:20px;border:1px solid rgba(255,255,255,.2);background:rgba(18,23,32,.8);color:#fff;font:600 14px system-ui,sans-serif;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:left;cursor:pointer;touch-action:manipulation}
.vh-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vh-car{opacity:.65;font-size:11px}.vh-ic{font-size:15px}

/* everything an invitee does not need leaves the screen */
body.vh .topbar,body.vh #mobile-tabs,body.vh .sheet3d-bar,body.vh #nav-helpers,body.vh .guest-bar,body.vh .viewer-bar,body.vh .walk-btns,body.vh .perf-hud,body.vh .st-showbar,body.vh #cloud-bar,body.vh #statusbar,body.vh .statusbar,body.vh .story-bar,body.vh .zhint,body.vh .cam-quick,body.vh .camq,body.vh .sel3d,body.vh .h3d-layer{display:none!important}
body.vh #stage{top:0!important}
body.vh .joy{bottom:calc(env(safe-area-inset-bottom,0px) + 26px);left:20px;width:128px;height:128px}
body.vh .joy-label{display:none}
body.vh #toast{top:calc(env(safe-area-inset-top,0px) + 62px);bottom:auto}

/* the call: a thin strip under the header, not a panel over the view */
body.is-mobile.vh .live-call{top:calc(env(safe-area-inset-top,0px) + 58px);bottom:auto;height:auto;left:8px;right:8px;transform:none;max-width:none;padding:6px 8px;gap:4px;border-radius:14px}
body.vh .lcl-head{display:none}
body.vh .lcl-msg .lcl-note:not(.warn):not(.tap){display:none}
body.vh .lcl-tiles{max-height:60px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start}
body.vh .lcl-tile{flex:none;width:56px;height:56px;border-radius:50%}
body.vh .lcl-init{width:34px;height:34px;font-size:13px}
body.vh .lcl-name{display:none}
body.vh .lcl-bar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
body.vh .lcl-b{flex:none;padding:7px 11px;white-space:nowrap;font-size:13px}

/* sheets: Views, Quality */
.vh-sheet-wrap{position:fixed;inset:0;z-index:9500;display:flex;align-items:flex-end;background:rgba(0,0,0,.45)}
.vh-sheet{width:100%;max-height:72vh;overflow:auto;padding:14px 14px calc(env(safe-area-inset-bottom,0px) + 16px);background:#161b24;color:#e8eef6;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.5);font:14px system-ui,sans-serif}
.vh-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.vh-sheet-head b{font-size:16px}
.vh-sub{margin:0 0 10px;color:#9fb0c4;font-size:13px;line-height:1.4}
.vh-list{display:flex;flex-direction:column;gap:6px}
.vh-group{margin:8px 4px 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7f90a6}
.vh-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#1e2531;color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.vh-row.on{border-color:#d9a35b;background:#2a2418}
.vh-rn{flex:1;min-width:0}
.vh-radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #6b7a90}.vh-q.on .vh-radio{border-color:#d9a35b;background:radial-gradient(#d9a35b 45%,transparent 50%)}
.vh-qt{display:flex;flex-direction:column;gap:2px}.vh-qt b{font-size:15px}.vh-qt span{color:#9fb0c4;font-size:12.5px}
.vh-q-now{margin-top:10px;color:#9fb0c4;font-size:12.5px;text-align:center}
.vh-hint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 168px);transform:translateX(-50%);z-index:8800;display:flex;flex-direction:column;gap:2px;align-items:center;max-width:calc(100% - 32px);padding:10px 16px;border-radius:14px;background:rgba(18,23,32,.88);color:#fff;font:13px system-ui,sans-serif;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:opacity .4s;pointer-events:none}
.vh-hint b{font-size:14px}.vh-hint.out{opacity:0}

/* v3: centred joystick flanked by the tilt and the exposure columns (an iPhone camera's), the left pair, sheets on the right edge in landscape */
.vh-ctl{display:none}body.vh-3d .vh-ctl{display:block}
body.is-mobile.vh .joy{left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 30px);width:124px;height:124px}
body.is-mobile.vh.vh-tap .joy{display:none!important}
.vh-left{position:fixed;left:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 34px);z-index:8800;display:flex;flex-direction:column;align-items:center;gap:10px}
.vh-cb{width:46px;height:46px;border-radius:23px;border:1.5px solid rgba(255,255,255,.3);background:rgba(18,23,32,.62);color:#e8eef6;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);touch-action:manipulation;cursor:pointer}
.vh-cb.on{background:#7c5cff;border-color:#b9a8ff;color:#fff}
.vh-navsw{display:flex;flex-direction:column;gap:6px;padding:4px;border-radius:27px;background:rgba(18,23,32,.5);border:1px solid rgba(255,255,255,.18)}
.vh-navsw .vh-cb{width:40px;height:40px;border-radius:20px;border-color:transparent;background:transparent}
.vh-navsw .vh-cb.on{background:#7c5cff}
.vh-col{position:fixed;z-index:8800;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);height:168px;width:46px;display:flex;flex-direction:column;align-items:center;gap:8px}
.vh-col-l{left:calc(50% - 62px - 8px - 46px)}.vh-col-r{left:calc(50% + 62px + 8px)}
.vh-cb i{display:none}
.vh-col .vh-cb{width:40px;height:40px;border-radius:20px;flex:none}
.vh-auto{position:relative;flex-direction:column;gap:0}
.vh-auto i{display:block;position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);padding:0 4px;border-radius:6px;background:rgba(18,23,32,.9);font:700 8px/12px system-ui,sans-serif;letter-spacing:.06em;font-style:normal}
.vh-auto.on{background:#ffd60a;border-color:#ffd60a;color:#1a1408}.vh-auto.on i{background:#1a1408;color:#ffd60a}
.vh-vs{position:relative;flex:1;width:46px;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.vh-vs-line{position:absolute;left:50%;top:6px;bottom:6px;width:3px;margin-left:-1.5px;border-radius:2px;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.3));box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.vh-vs-knob{position:absolute;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(18,23,32,.82);color:#ffd60a;border:2px solid #ffd60a;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.vh-vs-knob svg{width:18px;height:18px}.vh-vs-knob b{width:8px;height:8px;border-radius:50%;background:#ffd60a}
.vh-vs.drag .vh-vs-knob{transform:scale(1.15)}
.vh-vs-tip{position:absolute;left:50%;top:-26px;transform:translateX(-50%);padding:2px 8px;border-radius:11px;background:rgba(18,23,32,.85);color:#ffd60a;font:600 12px system-ui,sans-serif;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.vh-vs-tip.on{opacity:1}

/* the shutter and the PC's exposure group */
.vh-shot{color:#fff}
.vh-xbar{display:inline-flex;align-items:center;gap:6px;margin-left:4px}
.vh-xbar .vh-cb{width:32px;height:32px;border-radius:16px;padding:0;flex:none}
.vh-xbar .vh-auto i{display:none}
.vh-xbar .vh-auto{border:1px solid #3a4150;background:#2a303b;color:#e8eaed}.vh-xbar .vh-auto.on{background:#ffd60a;color:#1a1408;border-color:#ffd60a}
.vh-xrange{width:92px;accent-color:#ffd60a;cursor:pointer}
.vh-xlab{min-width:42px;color:#9fb0c4;font:600 12px system-ui,sans-serif}.vh-xlab.on{color:#ffd60a}
.vh-rico{font-size:20px;flex:none}
.vh-list.busy{opacity:.5;pointer-events:none}
.gb-q,.vh-shot.gb-q{margin-left:4px}
/* on a PC the sheets are a card in the middle, not a bottom sheet */
@media (min-width:700px){.vh-sheet-wrap{justify-content:center;align-items:center}.vh-sheet{width:min(440px,92vw);border-radius:18px;max-height:80vh}}

/* chat and call sit like the quality sheet: along the bottom */
body.is-mobile.vh .live-chat,body.is-mobile.vh .live-call{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;transform:none;border-radius:18px 18px 0 0;padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 14px);z-index:9400;box-shadow:0 -10px 30px rgba(0,0,0,.5);gap:8px}
body.is-mobile.vh .live-chat{height:min(62vh,440px);max-height:62vh}
body.is-mobile.vh .live-call{max-height:62vh;overflow:auto}
body.is-mobile.vh .lcl-head{display:flex}
body.is-mobile.vh .lcl-msg .lcl-note:not(.warn):not(.tap){display:block}
body.is-mobile.vh .lcl-tiles{max-height:34vh;flex-wrap:wrap;overflow-y:auto;justify-content:center}
body.is-mobile.vh .lcl-tile{width:104px;height:78px;border-radius:10px}
body.is-mobile.vh .lcl-name{display:block}
body.is-mobile.vh .lcl-bar{flex-wrap:wrap;justify-content:center;overflow:visible}

/* landscape phone: the header shrinks, the controls go to the thumbs' corners, every sheet is a panel on the right edge */
@media (orientation:landscape) and (max-height:540px){
  .vh-top{padding:calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 12px) 10px calc(env(safe-area-inset-left,0px) + 12px)}
  .vh-b,.vh-top .lc-btn-open,.vh-title{height:36px;min-width:36px;border-radius:18px}
  body.is-mobile.vh .joy{bottom:calc(env(safe-area-inset-bottom,0px) + 18px);width:108px;height:108px}
  .vh-col{bottom:calc(env(safe-area-inset-bottom,0px) + 18px);height:132px}
  .vh-col-l{left:calc(50% - 54px - 8px - 46px)}.vh-col-r{left:calc(50% + 54px + 8px)}
  .vh-left{left:calc(env(safe-area-inset-left,0px) + 24px);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);flex-direction:row;align-items:flex-end}
  .vh-navsw{flex-direction:row}
  .vh-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 140px)}
  .vh-sheet-wrap{justify-content:flex-end;align-items:stretch}
  .vh-sheet{width:min(360px,46vw);max-height:none;height:100%;border-radius:18px 0 0 18px;padding:calc(env(safe-area-inset-top,0px) + 12px) calc(env(safe-area-inset-right,0px) + 14px) 14px 14px}
  body.is-mobile.vh .live-chat,body.is-mobile.vh .live-call{left:auto;right:0;top:0;bottom:0;width:min(360px,46vw);height:auto;max-height:none;border-radius:18px 0 0 18px;padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
  body.is-mobile.vh .live-chat{height:auto}
}

body.vh .editor{padding-bottom:0!important}
.vh-seg{display:flex;gap:4px;padding:3px;margin:0 0 10px;border-radius:12px;background:#1e2531}.vh-seg button{flex:1;padding:8px 6px;border:0;border-radius:9px;background:transparent;color:#9fb0c4;font:600 13px system-ui,sans-serif;cursor:pointer}.vh-seg button.on{background:#ffd60a;color:#1a1408}
body.is-mobile.vh.vh-drone .joy{display:none!important}
.vh-droneb.on{background:#7c5cff;border-color:#b9a8ff;color:#fff}

/* orbit (no joystick): the tilt column goes, the brightness column moves to the right edge */
body.vh-orbit .vh-col-l{display:none}
body.vh-orbit .vh-col-r{left:auto;right:14px}

/* ── ONE THUMB (js/viewerring.js): the joystick in the middle of a ring — tilt arc left, light arc right, four buttons on the diagonals ── */
body.vh{--ring:248px;--ring-b:calc(env(safe-area-inset-bottom,0px) + 6px)}
.vh-ring{position:fixed;left:50%;bottom:var(--ring-b);width:var(--ring);height:var(--ring);transform:translateX(-50%);z-index:8800;pointer-events:none}
.vh-ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vh-arc{fill:none;stroke:rgba(255,255,255,.6);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
.vh-arc-hit{fill:none;stroke:transparent;stroke-width:46;pointer-events:stroke;touch-action:none;cursor:pointer}
.vh-arc-zero{fill:rgba(255,255,255,.85)}
.vh-rknob{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(18,23,32,.86);border:2px solid #fff;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:auto;touch-action:none;transition:transform .12s}
.vh-rknob svg{width:18px;height:18px}.vh-rknob b{width:8px;height:8px;border-radius:50%;background:#fff}
.vh-rsun{border-color:#ffd60a;color:#ffd60a}.vh-rknob.drag{transform:scale(1.18)}
.vh-rb{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;pointer-events:auto;flex-direction:column;gap:0}
.vh-rb i{display:block;position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);padding:0 4px;border-radius:6px;background:rgba(18,23,32,.92);font:700 7.5px/12px system-ui,sans-serif;letter-spacing:.05em;font-style:normal;white-space:nowrap}
.vh-rb.vh-auto.on{background:#ffd60a;border-color:#ffd60a;color:#1a1408}.vh-rb.vh-auto.on i{background:#1a1408;color:#ffd60a}
.vh-rcap{position:absolute;transform:translate(-50%,-50%);font:700 8.5px/1 system-ui,sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.7);text-shadow:0 1px 3px #000;pointer-events:none}
.vh-rtip{position:absolute;left:50%;top:0;transform:translate(-50%,-110%);padding:4px 11px;border-radius:12px;background:rgba(18,23,32,.9);color:#ffd60a;font:600 12.5px system-ui,sans-serif;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.vh-rtip.on{opacity:1}
/* the joystick sits in the middle of the ring (Walk3D's own element) */
body.is-mobile.vh.vh-ring-on .joy{left:50%;transform:translateX(-50%);width:108px;height:108px;bottom:calc(var(--ring-b) + (var(--ring) - 108px) / 2)}
/* the hint goes up, out of the ring's way */
body.vh-ring-on .vh-hint{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 64px)}
/* a phone on its side: a smaller ring */
@media (orientation:landscape) and (max-height:540px){
  body.vh{--ring:204px}
  body.is-mobile.vh.vh-ring-on .joy{width:88px;height:88px;bottom:calc(var(--ring-b) + (var(--ring) - 88px) / 2)}
  .vh-rb{width:38px;height:38px;margin:-19px 0 0 -19px}
}