/* Public-UI layer injected by the doorman into the sanitized operator page (code/demo/index.html).
   body.gws-simple  = visitor view: landing overlay -> views + status bar only; the operator dashboard sits behind "details".
   body.gws-embed   = /embed variant (iframe on the project website): no header strip, compact paddings.                */
body.gws-simple header, body.gws-simple .dash, body.gws-simple section.row, body.gws-simple #legendbox,
body.gws-simple #gws_bar { display: none !important; }
/* ---- details drop-down (#gws_dd, public_ui.js): the operator dashboard, moved in at load, closed by default ---- */
#gws_dd { position: fixed; z-index: 45; top: calc(var(--top-h, 56px) + 6px); left: 50%; transform: translateX(-50%); width: min(1480px, 97vw);
          max-height: calc(100vh - var(--top-h, 56px) - 18px); overflow: auto; box-sizing: border-box; padding: 0 12px 12px; }
#gws_dd[hidden] { display: none !important; }
#gws_dd .dd-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 10px 2px 8px; }
#gws_dd .dd-head .sp { flex: 1; }
#gws_dd .dd-links { display: inline-flex; gap: 12px; } #gws_dd .dd-links a { text-decoration: none; }
#gws_dd .dd-body { display: grid; gap: 10px; }
body.gws-simple #gws_dd header { display: flex !important; flex-wrap: wrap; border-radius: 6px; }
body.gws-simple #gws_dd header h1 { display: none; }
body.gws-simple #gws_dd .dash { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }
body.gws-simple:not(.gws-wide):not(.gws-mid) #gws_dd { top: 6px; max-height: calc(100vh - 12px); }
@media (max-width: 700px) { #gws_dd .dd-k { display: none; } #gws_dd { padding: 0 8px 8px; } }
body.gws-simple #gws_dd section.row { display: flex !important; }
body.gws-simple.gws-kbd #gws_dd #legendbox { display: block !important; }
body.gws-theater #gws_dd { display: none !important; }
body.gws-simple main { padding: 10px 14px; gap: 10px; }
body.gws-embed main { padding: 6px 8px; gap: 8px; }
body.gws-embed #gws_bar { display: none !important; }

/* ---- landing overlay ---- */
#gws_land { position: fixed; inset: 0; z-index: 50; background: #0e1116; color: #d7dde5; overflow: auto;
            font: 15px/1.5 -apple-system, Inter, "Segoe UI", Roboto, sans-serif; }
#gws_land .wrap { max-width: 860px; margin: 6vh auto; padding: 0 20px; }
body.gws-embed #gws_land .wrap { margin: 2vh auto; }
#gws_land h1 { font-size: 22px; margin: 0 0 4px; }
#gws_land .sub { color: #8b95a3; margin: 0 0 18px; font-size: 14px; }
#gws_land .modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
#gws_land .mode { background: #161b22; border: 2px solid #2a313c; border-radius: 12px; padding: 18px 16px; cursor: pointer;
                  text-align: left; color: inherit; font: inherit; }
#gws_land .mode:hover { border-color: #5aa9ff; }
#gws_land .mode.sel { border-color: #3ddc97; background: #14241d; }
#gws_land .mode:disabled { opacity: .45; cursor: not-allowed; }
#gws_land .mode b { display: block; font-size: 17px; margin-bottom: 4px; }
#gws_land .mode span { color: #8b95a3; font-size: 13px; }
#gws_land .pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 16px; }
#gws_land select { background: #0b0e13; color: #d7dde5; border: 1px solid #2a313c; border-radius: 8px; padding: 8px 10px; font: inherit; min-width: 260px; }
#gws_land .start { background: #3ddc97; color: #06140d; border: 0; border-radius: 10px; padding: 12px 26px; font: 600 16px inherit; cursor: pointer; }
#gws_land .start:disabled { opacity: .5; cursor: wait; }
#gws_land .hint { color: #8b95a3; font-size: 13px; margin-top: 10px; }
#gws_land .priv { color: #8b95a3; font-size: 12px; margin-top: 14px; border-top: 1px solid #2a313c; padding-top: 10px; }
#gws_land .wait { color: #f5b942; font-size: 13px; }

/* ---- session bar ---- */
#gws_top { display: none; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 14px; background: #161b22;
           border-bottom: 1px solid #2a313c; font: 13px/1.4 -apple-system, Inter, "Segoe UI", Roboto, sans-serif; color: #d7dde5; }
body.gws-simple #gws_top { display: flex; }
#gws_top .pill { padding: 4px 12px; border-radius: 999px; border: 1px solid #2a313c; background: #0b0e13; font-weight: 600; white-space: nowrap; }
#gws_top .pill.ok { color: #3ddc97; border-color: #1f5a44; } #gws_top .pill.warn { color: #f5b942; border-color: #5a4a22; }
#gws_top .pill.bad { color: #ff6b6b; border-color: #6b1f1f; } #gws_top .pill.on { color: #5aa9ff; border-color: #274566; }
#gws_top .hint { color: #b8c0cc; flex: 1 1 260px; min-width: 200px; }
#gws_top .hint kbd { background: #0b0e13; border: 1px solid #2a313c; border-radius: 4px; padding: 0 5px; font: 12px ui-monospace, Menlo, monospace; }
#gws_top .left { font: 600 13px ui-monospace, Menlo, monospace; color: #3ddc97; white-space: nowrap; }
#gws_top .left.gws_warn { color: #f5b942; } #gws_top .left.gws_over { color: #ff6b6b; }
#gws_top button { background: #0b0e13; color: #d7dde5; border: 1px solid #2a313c; border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; }
#gws_top button:hover { border-color: #5aa9ff; }
#gws_top button.end { color: #ff8a8a; }
#gws_top .sp { flex: 1; }
#gws_top select { background: #0b0e13; color: #d7dde5; border: 1px solid #2a313c; border-radius: 8px; padding: 5px 8px; font: inherit; max-width: 240px; }
#gws_priv { color: #8b95a3; font-size: 12px; padding: 4px 14px 0; display: none; }
body.gws-simple.gws-hand #gws_priv { display: block; }
body.gws-embed #gws_priv { padding: 2px 8px 0; }

/* ---- touch keypad (keyboard mode on coarse pointers) ---- */
#gws_pad { display: none; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 14px 14px; }
body.gws-simple.gws-kbd.gws-touch #gws_pad { display: grid; }
#gws_pad .arm { background: #161b22; border: 1px solid #2a313c; border-radius: 10px; padding: 8px; }
#gws_pad .arm h4 { margin: 0 0 6px; font: 600 12px -apple-system, Inter, sans-serif; color: #8b95a3; text-transform: uppercase; letter-spacing: .5px; }
#gws_pad .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#gws_pad button { background: #0b0e13; color: #d7dde5; border: 1px solid #2a313c; border-radius: 8px; padding: 12px 0; font: 600 14px ui-monospace, Menlo, monospace;
                  touch-action: none; user-select: none; -webkit-user-select: none; }
#gws_pad button.on { background: #14241d; border-color: #3ddc97; color: #3ddc97; }
#gws_pad button small { display: block; font: 10px -apple-system, Inter, sans-serif; color: #8b95a3; }

/* ---- mobile ---- */
@media (max-width: 820px) {
  body.gws-simple .views { grid-template-columns: 1fr 1fr; }
  body.gws-simple .views figure:first-child { grid-column: 1 / span 2; }
  #gws_land .modes { grid-template-columns: 1fr; }
  #gws_top .hint { flex-basis: 100%; }
}

/* ---- /embed "theater": one video area filling the iframe, everything else overlaid ------------------------------- */
body.gws-embed.gws-theater { background: #000; overflow: hidden; }
body.gws-theater main { padding: 0 !important; gap: 0 !important; display: block; height: 100vh; position: relative; }
body.gws-theater #gws_top, body.gws-theater #gws_priv, body.gws-theater #gws_pad, body.gws-theater header, body.gws-theater .dash,
body.gws-theater section.row, body.gws-theater #legendbox, body.gws-theater #gws_bar, body.gws-theater #toasts { display: none !important; }
body.gws-theater .views { position: absolute; inset: 0; display: block; }
body.gws-theater .views figure { position: absolute; border: 0; border-radius: 0; background: #000; margin: 0; }
body.gws-theater .views figure canvas { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
body.gws-theater .views figure figcaption { font-size: 10px; opacity: .6; }
/* top view = the big picture, wrist views = small insets bottom-left / bottom-right */
body.gws-theater .views figure:nth-child(2) { left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
body.gws-theater .views figure:nth-child(1) { left: 1.2%; bottom: 2%; width: 26%; height: 36%; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; overflow: hidden; z-index: 2; }
body.gws-theater .views figure:nth-child(3) { right: 1.2%; bottom: 2%; width: 26%; height: 36%; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; overflow: hidden; z-index: 2; }
body.gws-theater #pip { position: absolute; right: 1.2%; top: 2%; margin: 0; z-index: 30; padding: 4px; background: rgba(11,14,19,.75); }
body.gws-theater #pip img { width: 160px; height: 90px; } body.gws-theater #pip .hud, body.gws-theater #pip .cap { font-size: 10px; max-width: 320px; }
/* overlay layer */
#gws_ov { position: absolute; inset: 0; z-index: 40; pointer-events: none; font: 14px/1.4 -apple-system, Inter, "Segoe UI", Roboto, sans-serif; color: #fff; }
#gws_ov * { pointer-events: auto; }
#gws_ov .pill { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25);
                font: 600 12px ui-monospace, Menlo, monospace; letter-spacing: .3px; backdrop-filter: blur(4px); }
#gws_ov .pill.ok { color: #3ddc97; } #gws_ov .pill.on { color: #5aa9ff; } #gws_ov .pill.warn { color: #f5b942; } #gws_ov .pill.bad { color: #ff6b6b; }
#gws_ov .time { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25);
                font: 600 12px ui-monospace, Menlo, monospace; color: #3ddc97; }
#gws_ov .time.gws_warn { color: #f5b942; } #gws_ov .time.gws_over { color: #ff6b6b; }
#gws_ov .btns { position: absolute; top: 40px; right: 10px; display: flex; gap: 6px; }
#gws_ov .btns button, #gws_ov .chip { background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 4px 10px; font: 12px inherit; cursor: pointer; backdrop-filter: blur(4px); }
#gws_ov .btns button:hover, #gws_ov .chip:hover { border-color: #5aa9ff; }
#gws_ov .chip.sel { border-color: #3ddc97; color: #3ddc97; } #gws_ov .chip:disabled { opacity: .4; cursor: not-allowed; }
/* first screen / hint layer, centered */
#gws_ov .hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, 1.2vh, 12px); text-align: center;
                background: rgba(0,0,0,.45); transition: opacity .6s; padding: 12px; overflow: auto; }
body.gws-pick #gws_ov .hint { padding-top: 38px; }                  /* keep the picker clear of the status pill row */
body.gws-pick #gws_ov .time { display: none; }                      /* countdown appears once a session starts */
#gws_ov .hint.fade { opacity: 0; pointer-events: none; }
#gws_ov .hint h2 { margin: 0; font-size: clamp(11px, 2.2vw + 5px, 18px); line-height: 1.25; font-weight: 600; text-shadow: 0 1px 4px #000; max-width: 92%; }
#gws_ov .hint p { margin: 0; max-width: min(560px, 94%); color: #e6ebf1; text-shadow: 0 1px 4px #000; font-size: clamp(9px, 1.4vw + 4px, 13px); line-height: 1.35; }
#gws_ov .hint kbd { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 0 5px; font: 12px ui-monospace, Menlo, monospace; }
#gws_ov .chips { display: flex; gap: clamp(4px, 1vw, 8px); flex-wrap: wrap; justify-content: center; align-items: center; }
#gws_ov .chip { font-size: clamp(10px, 1.3vw + 4px, 12px); padding: clamp(2px, .6vh, 4px) clamp(6px, 1.2vw, 10px); }
#gws_ov .start { background: #3ddc97; color: #06140d; border: 0; border-radius: 999px; padding: clamp(4px, 1vh, 9px) clamp(12px, 2.6vw, 22px); font: 600 clamp(11px, 1.5vw + 4px, 14px) inherit; cursor: pointer; }
#gws_ov .start:disabled { opacity: .5; }
#gws_ov select.tiny { background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: clamp(2px, .6vh, 4px) 8px; font: clamp(10px, 1.3vw + 4px, 12px) inherit; max-width: min(240px, 70vw); }
#gws_ov .priv { font-size: 11px; color: #b8c0cc; max-width: 520px; }
#gws_ov .priv.small { font-size: 10px; }
@media (max-width: 480px) {
  #gws_ov .chips { flex-direction: column; gap: 4px; }
  #gws_ov .chips .chip, #gws_ov .chips select.tiny, #gws_ov .chips .start { width: min(220px, 80vw); box-sizing: border-box; }
  #gws_ov .hint .sub { display: none; }
  body.gws-pick #gws_ov .hint { padding-top: 30px; justify-content: flex-start; }
}
@media (max-height: 240px) {
  #gws_ov .hint h2 { font-size: 10.5px; line-height: 1.2; } #gws_ov .hint p { font-size: 9px; } #gws_ov .hint { gap: 2px; padding: 6px 8px 4px; }
  body.gws-pick #gws_ov .hint { padding-top: 26px; justify-content: flex-start; }
  #gws_ov .chips { gap: 2px; } #gws_ov .chip, #gws_ov select.tiny { padding: 1px 6px; font-size: 10px; line-height: 1.5; }
  #gws_ov .start { padding: 3px 12px; font-size: 11px; line-height: 1.5; }
  #gws_ov .pill { font-size: 9px; padding: 2px 6px; top: 6px; left: 6px; } #gws_ov .time { font-size: 9px; padding: 2px 6px; top: 6px; right: 6px; }
  #gws_ov .btns { top: 30px; } #gws_ov .btns button { font-size: 10px; padding: 2px 7px; }
}
@media (max-width: 500px) {
  body.gws-theater .views figure:nth-child(1), body.gws-theater .views figure:nth-child(3) { width: 30%; height: 30%; }
  #gws_ov .hint h2 { font-size: 14px; } #gws_ov .hint p { font-size: 11px; } #gws_ov .btns { top: 34px; } #gws_ov .pill, #gws_ov .time { font-size: 10px; padding: 3px 7px; }
  #gws_ov .start { padding: 6px 14px; font-size: 12px; } #gws_ov .priv { display: none; } #gws_ov .hint { gap: 6px; }
}

/* first screen: no empty inset frames / action buttons behind the picker */
body.gws-theater.gws-pick .views figure:nth-child(1), body.gws-theater.gws-pick .views figure:nth-child(3),
body.gws-theater.gws-pick #gws_ov .btns { display: none !important; }

/* ---- claim-on-Start: in-line state + "session ended" (a click is needed to rejoin) ---------------------------------- */
#gws_land .start:disabled { cursor: wait; }
#gws_ended { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(14, 17, 22, .92); color: #d7dde5; align-items: center; justify-content: center;
             font: 15px/1.5 -apple-system, Inter, "Segoe UI", Roboto, sans-serif; text-align: center; padding: 20px; }
#gws_ended.on { display: flex; }
#gws_ended .box { max-width: 480px; background: #161b22; border: 1px solid #2a313c; border-radius: 12px; padding: 22px 26px; }
#gws_ended h2 { margin: 0 0 8px; font-size: 20px; }
#gws_ended p { margin: 0 0 14px; color: #b8c0cc; }
#gws_ended p.small { margin: 12px 0 0; font-size: 12px; color: #8b95a3; }
#gws_ended .start { background: #3ddc97; color: #06140d; border: 0; border-radius: 10px; padding: 10px 26px; font: 600 15px inherit; cursor: pointer; }
#gws_ov .wait { color: #f5b942; font: 600 12px ui-monospace, Menlo, monospace; min-height: 0; }
#gws_ov .wait:empty { display: none; }

/* ---- mode cards: one-line description per mode (landing cards; theater chips show it when there is room, else the selected
   mode's line under the chips) ---- */
#gws_ov .chip .title { display: block; font-weight: 600; }
#gws_ov .chip .desc { display: block; max-width: 190px; white-space: normal; font-size: .82em; line-height: 1.25; color: #b8c0cc; margin-top: 2px; }
#gws_ov .chip { text-align: center; }
#gws_ov .hint p.mdesc { display: none; color: #b8c0cc; font-size: clamp(9px, 1.2vw + 4px, 12px); }
@media (max-width: 700px), (max-height: 420px) {
  #gws_ov .chip .desc { display: none; }
  #gws_ov .hint p.mdesc { display: block; }
}