/* LilVR workspace — floating view/broadcast windows (FaceTime-style PiP over the globe) */

#workspace-layer {
  position: fixed;
  inset: 0;
  z-index: 2600;
  pointer-events: none;
}

#ws-limit-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 2650;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(8, 10, 20, 0.94);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
#ws-limit-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#ws-go-live-fab { display: none !important; }

.ws-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(8, 10, 20, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 212, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
  touch-action: none;
  min-width: 220px;
  min-height: 160px;
}

.ws-window.ws-focused {
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 212, 255, 0.2),
    0 0 32px rgba(0, 212, 255, 0.12);
}

.ws-window.ws-pinned {
  border-color: rgba(251, 191, 36, 0.4);
}

.ws-window {
  position: absolute;
}

.ws-pin-always {
  position: absolute;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  flex-shrink: 0;
}

.ws-pin-top-left {
  top: 52px;
  left: 8px;
}

.ws-pin-bottom-left {
  bottom: 8px;
  left: 8px;
}

.ws-window.ws-freeform .ws-pin-top-left,
.ws-window.ws-freeform .ws-pin-bottom-left,
.ws-window.ws-freeform-layout-mode .ws-pin-top-left,
.ws-window.ws-freeform-layout-mode .ws-pin-bottom-left {
  z-index: 50;
}

.ws-window.ws-controls-hidden .ws-pin-top-left,
.ws-window.ws-controls-hidden .ws-pin-bottom-left {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.ws-window.ws-freeform {
  overflow: visible !important;
  outline: 1px dashed rgba(0, 212, 255, 0.45);
  outline-offset: 1px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.ws-window.ws-freeform-layout {
  overflow: visible;
  outline: 2px dashed rgba(239, 68, 68, 0.65);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2), 0 20px 60px rgba(0, 0, 0, 0.55);
}

.ws-freeform-btn.active {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(0, 180, 220, 0.25));
  border-color: rgba(0, 212, 255, 0.75);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.45);
}

.ws-freeform-btn.layout-active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(220, 38, 38, 0.3));
  border-color: rgba(239, 68, 68, 0.8);
  color: #fff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.ws-window.ws-freeform-layout-mode {
  display: block;
  position: absolute;
}

.ws-window.ws-freeform-layout-mode .ws-header,
.ws-window.ws-freeform-layout-mode .fcp-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.52)) !important;
  border: none !important;
  border-bottom: 1px dashed rgba(239, 68, 68, 0.55) !important;
  outline: 1px dashed rgba(239, 68, 68, 0.35);
  outline-offset: -1px;
  pointer-events: none;
  padding: 0 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 10;
}

.ws-window.ws-freeform-layout-mode .ws-footer,
.ws-window.ws-freeform-layout-mode .fcp-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  background: rgba(0, 0, 0, 0.72) !important;
  border: none !important;
  border-top: 1px dashed rgba(239, 68, 68, 0.55) !important;
  outline: 1px dashed rgba(239, 68, 68, 0.35);
  outline-offset: -1px;
  pointer-events: none;
  padding: 0 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 10;
}

.ws-window.ws-freeform-layout-mode .ws-body,
.ws-window.ws-freeform-layout-mode .fcp-video-wrap {
  position: absolute;
  top: 44px;
  bottom: 52px;
  left: 0;
  right: 0;
  min-height: 0;
  z-index: 1;
  overflow: hidden;
}

.ws-window.ws-freeform-layout-mode [data-ws-layout-id] {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  z-index: 14;
}

.ws-window.ws-freeform-layout-mode [data-ws-layout-id]:active {
  cursor: grabbing;
}

.ws-window.ws-freeform-layout-mode .ws-header-toolbar,
.ws-window.ws-freeform-layout-mode .fcp-header-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ws-window.ws-freeform-layout-mode .ws-foot-tools,
.ws-window.ws-freeform-layout-mode .fcp-foot-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ws-window.ws-freeform-layout-mode .ws-foot-group,
.ws-window.ws-freeform-layout-mode .fcp-foot-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fcp-window.ws-freeform-layout-mode,
.fcp-window.fcp-freeform-layout-mode {
  display: block;
  position: absolute;
}

.fcp-window.ws-freeform-layout-mode .fcp-header,
.fcp-window.fcp-freeform-layout-mode .fcp-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.52)) !important;
  border: none !important;
  border-bottom: 1px dashed rgba(239, 68, 68, 0.55) !important;
  outline: 1px dashed rgba(239, 68, 68, 0.35);
  outline-offset: -1px;
  pointer-events: none;
  padding: 0 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 10;
}

.fcp-window.ws-freeform-layout-mode .fcp-footer,
.fcp-window.fcp-freeform-layout-mode .fcp-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  background: rgba(0, 0, 0, 0.72) !important;
  border: none !important;
  border-top: 1px dashed rgba(239, 68, 68, 0.55) !important;
  outline: 1px dashed rgba(239, 68, 68, 0.35);
  outline-offset: -1px;
  pointer-events: none;
  padding: 0 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 10;
}

.fcp-window.ws-freeform-layout-mode .fcp-video-wrap,
.fcp-window.fcp-freeform-layout-mode .fcp-video-wrap {
  position: absolute;
  top: 44px;
  bottom: 52px;
  left: 0;
  right: 0;
  min-height: 0;
  z-index: 1;
}

.fcp-window.ws-freeform-layout-mode [data-ws-layout-id],
.fcp-window.fcp-freeform-layout-mode [data-ws-layout-id] {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  z-index: 14;
}

.fcp-window.ws-freeform-layout-mode [data-ws-layout-id]:active,
.fcp-window.fcp-freeform-layout-mode [data-ws-layout-id]:active {
  cursor: grabbing;
}

.fcp-window.ws-freeform-layout-mode .fcp-header-toolbar,
.fcp-window.fcp-freeform-layout-mode .fcp-header-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.fcp-window.ws-freeform-layout-mode .fcp-foot-tools,
.fcp-window.fcp-freeform-layout-mode .fcp-foot-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.fcp-window.ws-freeform-layout-mode .fcp-foot-group,
.fcp-window.fcp-freeform-layout-mode .fcp-foot-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Locked custom layout (icons stay put after leaving red edit mode) */
.ws-window.ws-custom-layout,
.fcp-window.ws-custom-layout {
  display: block;
  position: absolute;
}

.ws-window.ws-custom-layout .ws-header,
.fcp-window.ws-custom-layout .fcp-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.ws-window.ws-custom-layout .ws-footer,
.fcp-window.ws-custom-layout .fcp-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.ws-window.ws-custom-layout .ws-body,
.fcp-window.ws-custom-layout .fcp-video-wrap {
  position: absolute;
  top: 44px;
  bottom: 52px;
  left: 0;
  right: 0;
  min-height: 0;
  z-index: 1;
  overflow: hidden;
}

.ws-window.ws-custom-layout [data-ws-layout-id],
.fcp-window.ws-custom-layout [data-ws-layout-id] {
  position: absolute !important;
  pointer-events: auto;
  z-index: 14;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
}

.ws-custom-layout .ws-viewer-overlay,
.ws-custom-layout .ws-reaction-stack,
.ws-custom-layout .ws-jump-in-top,
.ws-custom-layout .ws-slide-end,
.fcp-window.ws-custom-layout .fcp-viewer-overlay,
.fcp-window.ws-custom-layout .fcp-jump-in-top,
.fcp-window.ws-custom-layout .fcp-slide-end {
  pointer-events: auto;
}

.ws-custom-layout .ws-slide-end {
  width: auto;
  min-width: 60px;
  max-width: 28vw;
}

.ws-type-broadcast {
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 24px rgba(239, 68, 68, 0.15);
}

.ws-chrome-accent {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  opacity: 0.35;
}
.ws-accent-bl {
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 0% 100%, rgba(0, 212, 255, 0.5), transparent 70%);
}
.ws-accent-br {
  bottom: 0;
  right: 0;
  background: radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.45), transparent 70%);
}

.ws-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(8, 10, 20, 0.96) 0%, rgba(8, 10, 20, 0.78) 100%);
  border-bottom: 1px solid rgba(0, 212, 255, 0.14);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  flex-shrink: 0;
  min-height: 44px;
  z-index: 12;
}
.ws-header:active { cursor: grabbing; }

/* Streamer-style flex chrome (no scattered custom icon layout) */
.ws-window:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.ws-window:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-header-left {
  grid-column: 1;
  grid-row: 1;
}

.ws-window:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-header-center.ws-jump-in-header {
  position: static;
  transform: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  max-width: min(46vw, 210px);
}

.ws-window:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-header-toolbar {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.ws-window.ws-type-view:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-header-end {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  z-index: 13;
}

.ws-window.ws-type-view:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-header-center.ws-jump-in-header {
  max-width: min(40vw, 196px);
  width: 100%;
  min-width: 0;
  z-index: 11;
}

.ws-window.ws-type-view:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-jump-in-header .lc-jump-btn {
  max-width: 100%;
  width: 100%;
  padding: 0 8px 0 6px;
}

.ws-window.ws-type-view:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-jump-in-header .lc-jump-label {
  font-size: 9px;
}

.ws-window.ws-type-view:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-jump-in-header .lc-jump-sub {
  font-size: 8px;
}

.ws-window:not(.ws-custom-layout):not(.ws-freeform-layout-mode) .ws-header-title {
  display: none;
}

.ws-header-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ws-header-left .ws-freeform-btn {
  margin-right: 2px;
}

.ws-window.ws-type-view {
  --ws-ui-scale: 1;
}

.ws-react-btn {
  font-size: 15px;
  line-height: 1;
  padding: 6px 8px;
}

.ws-viewer-stack {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 10px;
  z-index: 20;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.ws-viewer-stack-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  pointer-events: none;
  flex-shrink: 0;
}

.ws-viewer-stack-left > .ws-tip-on-video {
  pointer-events: auto;
}

.ws-viewer-count-wrap {
  position: relative;
  pointer-events: none;
}

.ws-viewer-count-wrap > .ws-viewer-overlay {
  pointer-events: auto;
}

.ws-viewer-count-wrap > .ws-viewer-list-panel {
  pointer-events: auto;
}

.ws-type-view .ws-emoji-on-video {
  flex-shrink: 0;
  pointer-events: auto;
  margin-left: auto;
}

.ws-viewer-stack[data-ws-layout-id="viewer"] {
  position: absolute;
  top: 3px;
  left: 4px;
  right: 8px;
}

.ws-custom-layout .ws-viewer-stack[data-ws-layout-id="viewer"],
.ws-freeform-layout-mode .ws-viewer-stack[data-ws-layout-id="viewer"] {
  top: auto;
  left: auto;
}

.ws-reaction-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  pointer-events: auto;
  z-index: 21;
}

.ws-type-view .ws-reaction-stack,
.ws-type-view.ws-viewer-ui-ready .ws-reaction-stack {
  display: flex !important;
  visibility: visible;
  opacity: 1;
}

.ws-react-glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(8, 10, 20, 0.78);
  color: #e2e8f0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.ws-react-emoji {
  display: block;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}

.ws-react-glass-btn:hover,
.ws-react-glass-btn.active {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.12);
}

.ws-react-glass-btn:active,
.ws-react-glass-btn.dragging {
  transform: scale(0.94);
  background: rgba(0, 212, 255, 0.18);
  border-color: rgba(0, 212, 255, 0.45);
}

.ws-header-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  flex-shrink: 0;
}

.ws-type-view .ws-header-status {
  color: #00d4ff;
}

.ws-type-view.ws-stream-ready .ws-header-status {
  color: #fca5a5;
}

.ws-type-view.ws-stream-ready .ws-live-dot.on {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  animation: ws-pulse 1.5s infinite;
}

.ws-type-broadcast.ws-broadcast-live .ws-header-status {
  color: #fca5a5;
}

.ws-live-dot.on {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  animation: ws-pulse 1.5s infinite;
}

.ws-live-dot.connecting {
  background: #f97316;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.75);
  animation: ws-pulse 1.2s infinite;
}

.ws-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  flex-shrink: 0;
}
.ws-pill-watch { color: #00d4ff; background: rgba(0, 212, 255, 0.1); }
.ws-pill-live { color: #fca5a5; background: rgba(239, 68, 68, 0.12); }
.ws-pill-active .ws-live-dot { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.8); animation: ws-pulse 1.5s infinite; }

.ws-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
}
.ws-dot-cyan { background: #00d4ff; box-shadow: 0 0 6px rgba(0, 212, 255, 0.7); }

.ws-codec-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  flex-shrink: 0;
}
.ws-format-badge { color: #00d4ff; background: rgba(0, 212, 255, 0.1); }

.ws-header-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 4px;
}

.ws-header-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ws-head-icon.ws-help-btn {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.ws-type-view .ws-header-end .ws-head-icon.ws-help-btn {
  border-radius: 50%;
}

.ws-head-icon.ws-social-btn {
  color: #7dd3fc;
}

.ws-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.ws-action-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ws-action-group + .ws-action-group {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.ws-group-broadcast-tools {
  gap: 8px;
}

.ws-hide-narrow {
  display: none;
}
@media (min-width: 280px) {
  .ws-window { min-width: 260px; }
  .ws-hide-narrow { display: inline-flex; }
}

.ws-viewer-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.ws-viewer-chip svg { opacity: 0.75; }

.ws-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ws-head-icon:hover {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.35);
  color: #e2e8f0;
}
.ws-head-icon.active {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(124, 58, 237, 0.3));
  border-color: rgba(0, 212, 255, 0.65);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.35);
}
.ws-head-icon.ws-settings-btn.active {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(124, 58, 237, 0.3));
  border-color: rgba(0, 212, 255, 0.65);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.35);
}

/* Single emoji reaction button + picker (replaces on-video reaction stack) */
.ws-emoji-control {
  position: relative;
  display: inline-flex;
}
.ws-emoji-btn {
  font-size: 16px;
}
.ws-emoji-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(8, 10, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s, transform 0.14s;
  z-index: 30;
}
.ws-emoji-control.open .ws-emoji-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

/* Watcher: emoji on right, tip jar under viewer count on left */
.ws-type-view .ws-viewer-stack .ws-emoji-on-video,
.ws-type-view .ws-viewer-stack .ws-tip-on-video {
  pointer-events: auto;
}

.ws-type-view .ws-emoji-on-video {
  position: relative;
  display: inline-flex;
}

.ws-type-view .ws-emoji-on-video .ws-emoji-pop {
  top: calc(100% + 6px);
  left: 50%;
  right: auto;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%) scale(0.96);
}

.ws-type-view .ws-emoji-on-video.open .ws-emoji-pop,
.ws-type-view .ws-emoji-on-video.locked .ws-emoji-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.ws-type-view .ws-emoji-on-video.locked .ws-emoji-btn {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(124, 58, 237, 0.3));
  border-color: rgba(0, 212, 255, 0.65);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.35);
}

.ws-type-view .ws-emoji-on-video .ws-emoji-btn.locked {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(124, 58, 237, 0.3));
  border-color: rgba(0, 212, 255, 0.65);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.35);
}

.ws-video-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(8, 10, 20, 0.78);
  color: #e2e8f0;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.38);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ws-video-action-btn:hover,
.ws-video-action-btn.active {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.35);
}

.ws-type-view .ws-emoji-on-video.open .ws-emoji-pop {
  transform: translateX(-50%) scale(1);
}

.ws-type-view .ws-tip-on-video {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2px * var(--ws-ui-scale, 1));
  width: calc(36px * var(--ws-ui-scale, 1));
  min-width: calc(36px * var(--ws-ui-scale, 1));
  height: calc(50px * var(--ws-ui-scale, 1));
  padding: calc(5px * var(--ws-ui-scale, 1)) calc(4px * var(--ws-ui-scale, 1)) calc(4px * var(--ws-ui-scale, 1));
  border-color: rgba(20, 83, 45, 0.95);
  color: #bbf7d0;
  background: rgba(20, 83, 45, 0.82);
  border-radius: calc(10px * var(--ws-ui-scale, 1));
}

.ws-type-view .ws-tip-on-video .ws-tip-jar-svg {
  width: calc(18px * var(--ws-ui-scale, 1));
  height: calc(18px * var(--ws-ui-scale, 1));
  flex-shrink: 0;
}

.ws-type-view .ws-tip-label {
  font-size: calc(9px * var(--ws-ui-scale, 1));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: #dcfce7;
}

.ws-type-view .ws-tip-on-video svg {
  width: calc(18px * var(--ws-ui-scale, 1));
  height: calc(18px * var(--ws-ui-scale, 1));
}

.ws-type-view .ws-tip-on-video:hover {
  border-color: rgba(22, 101, 52, 1);
  background: rgba(22, 101, 52, 0.88);
  color: #dcfce7;
}

.ws-emoji-opt {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.ws-emoji-opt:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.12);
}
.ws-emoji-opt:active {
  transform: scale(0.95);
}

/* VR format picker — Flat / 180 / 360 (footer toolbar, emoji-style pop) */
.ws-vr-format-control {
  position: relative;
  display: inline-flex;
}
.ws-vr-format-btn {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.ws-vr-format-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 72px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(8, 10, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s, transform 0.14s;
  z-index: 30;
}
.ws-vr-format-control.open .ws-vr-format-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.ws-vr-format-opt {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
}
.ws-vr-format-opt:hover,
.ws-vr-format-opt.active {
  background: rgba(0, 212, 255, 0.16);
  border-color: rgba(0, 212, 255, 0.45);
  color: #fff;
}
.ws-format-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  touch-action: none;
}

/* legacy */
.ws-icon-btn.ws-close { display: none; }

.ws-body {
  position: relative;
  flex: 1;
  min-height: 80px;
  background: #080a14;
  overflow: hidden;
}

.ws-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080a14;
  display: block;
}

.ws-viewer-overlay {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ws-viewer-dot {
  display: none;
}

.ws-viewer-icon {
  flex-shrink: 0;
  color: #94a3b8;
  opacity: 0.95;
}

.ws-viewer-n {
  font-variant-numeric: tabular-nums;
}

.ws-viewer-list-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 12;
  min-width: 160px;
  max-width: calc(100vw - 24px);
  max-height: 140px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(12, 14, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
}

.ws-viewer-list-panel h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.ws-viewer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-viewer-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ws-viewer-list-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-viewer-list-reactions {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.ws-viewer-list li:last-child {
  border-bottom: none;
}

.ws-viewer-list-empty {
  font-size: 12px;
  color: #94a3b8;
}

.ws-viewer-overlay.open {
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.15);
}

.ws-viewer-overlay.has-stream-notification {
  position: relative;
}

.ws-viewer-overlay.has-stream-notification::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid rgba(4, 6, 14, 0.9);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.65);
  pointer-events: none;
}

.ws-stream-notif-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  min-width: 160px;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(4, 6, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-stream-notif-popover[hidden] {
  display: none !important;
}

.ws-stream-notif-msg {
  font-size: 11px;
  line-height: 1.35;
  color: #fff;
}

.ws-stream-notif-all {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: #00d4ff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.ws-viewer-notif-row {
  border-left: 2px solid rgba(0, 212, 255, 0.45);
}

.ws-type-broadcast .ws-viewer-overlay {
  display: none;
}

.ws-type-broadcast.ws-broadcast-live .ws-viewer-stack {
  display: flex;
}

.ws-type-broadcast.ws-broadcast-live .ws-viewer-overlay {
  display: inline-flex;
}

.ws-type-view .ws-viewer-stack {
  display: flex;
  top: 3px;
  left: 4px;
  right: 6px;
}

.ws-type-view .ws-viewer-stack-left {
  gap: calc(3px * var(--ws-ui-scale, 1));
}

.ws-type-view .ws-emoji-on-video .ws-emoji-btn {
  width: calc(28px * var(--ws-ui-scale, 1));
  height: calc(28px * var(--ws-ui-scale, 1));
  font-size: calc(16px * var(--ws-ui-scale, 1));
}

.ws-type-view .ws-viewer-overlay {
  display: inline-flex;
  padding: calc(3px * var(--ws-ui-scale, 1)) calc(7px * var(--ws-ui-scale, 1));
  gap: calc(4px * var(--ws-ui-scale, 1));
  font-size: calc(10px * var(--ws-ui-scale, 1));
}

.ws-type-view .ws-viewer-icon {
  width: calc(11px * var(--ws-ui-scale, 1));
  height: calc(11px * var(--ws-ui-scale, 1));
}

/* reaction stack visibility handled above — keep viewer stack visible when UI ready */
.ws-type-view.ws-viewer-ui-ready .ws-viewer-stack {
  display: flex;
  z-index: 20;
}

.ws-type-broadcast .ws-reaction-stack {
  display: none !important;
}

.ws-type-view .ws-header .ws-viewer-chip {
  display: none;
}

.ws-body-expand {
  display: none !important;
}

.ws-audio-stack {
  display: none !important;
}

.ws-broadcast-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ws-type-broadcast.ws-broadcast-live .ws-broadcast-label {
  animation: ws-broadcast-label-timeout 10s forwards;
}

@keyframes ws-broadcast-label-timeout {
  0%, 88% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.ws-type-broadcast.ws-broadcast-live .ws-header-title:empty {
  display: none;
}

.ws-type-broadcast:not(.ws-broadcast-live) .ws-broadcast-label {
  display: none;
}

.ws-jump-in-top {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.ws-header-center.ws-jump-in-header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  max-width: min(46vw, 210px);
}

.ws-jump-in-header .lc-jump-wrap,
.ws-jump-in-top .lc-jump-wrap {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 1;
}

.ws-jump-in-header .lc-jump-btn,
.ws-jump-in-top .lc-jump-btn {
  height: 34px;
  max-width: min(46vw, 190px);
  padding: 0 10px 0 8px;
}

.ws-jump-in-header .lc-jump-icon-box,
.ws-jump-in-top .lc-jump-icon-box {
  width: 26px;
  height: 26px;
}

.ws-jump-in-header .lc-jump-label,
.ws-jump-in-top .lc-jump-label {
  font-size: 10px;
}

.ws-jump-in-header .lc-jump-sub,
.ws-jump-in-top .lc-jump-sub {
  font-size: 8px;
}

.ws-window.ws-freeform .ws-jump-in-top .lc-jump-copy,
.ws-window.ws-freeform-layout .ws-jump-in-top .lc-jump-copy {
  display: none;
}

.ws-window.ws-freeform .ws-jump-in-top .lc-jump-btn,
.ws-window.ws-freeform-layout .ws-jump-in-top .lc-jump-btn {
  width: 38px;
  height: 38px;
  max-width: 38px;
  padding: 0;
  gap: 0;
}

.ws-window.ws-freeform .ws-jump-in-top .lc-jump-icon-box,
.ws-window.ws-freeform-layout .ws-jump-in-top .lc-jump-icon-box {
  width: 28px;
  height: 28px;
}

.ws-window.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-header,
.ws-window.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-footer,
.ws-window.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-broadcast-label,
.ws-window.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-jump-in-top,
.ws-window.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-jump-in-header,
.ws-window.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-freeform-hint,
.ws-window.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-status {
  display: none !important;
}

/* Watcher: collapse chrome like streamer — layout stays spread out when re-shown */
.ws-window.ws-type-view.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-header.ws-chrome-head,
.ws-window.ws-type-view.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-footer.ws-chrome-foot {
  display: flex !important;
}

.ws-window.ws-type-view.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-header.ws-chrome-head {
  opacity: 0;
  pointer-events: none !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 6;
}

.ws-window.ws-type-view.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-footer.ws-chrome-foot {
  min-height: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border-top: none;
  box-shadow: none;
  background: transparent;
}

.ws-window.ws-type-view.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-foot-controls {
  opacity: 0;
  pointer-events: none !important;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.ws-window.ws-type-view.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-jump-in-header,
.ws-window.ws-type-view.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-freeform-hint,
.ws-window.ws-type-view.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-status {
  display: none !important;
}

/* Keep viewer count + reaction emojis visible when chrome auto-hides */
.ws-window.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-viewer-stack {
  display: flex !important;
  z-index: 24;
}

.ws-window.ws-controls-hidden .ws-body {
  flex: 1 1 auto;
  min-height: 0;
}

.ws-window.ws-controls-hidden:not(.ws-freeform):not(.ws-freeform-layout) .ws-body {
  cursor: grab;
}

.ws-window.ws-expanded {
  border-radius: 0 !important;
  z-index: 5000 !important;
}

.ws-group-expand {
  justify-content: flex-start;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.ws-window.ws-type-view .ws-foot-controls .ws-screenmax-btn {
  flex: 0 0 32px;
}

.ws-foot-tools-view {
  width: 100%;
}

/* Watcher footer — streamer-style single row, no scrunch in freeform */
.ws-window.ws-type-view .ws-foot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 52px;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.ws-window.ws-type-view .ws-foot-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: min-content;
  flex-wrap: nowrap;
  overflow: visible;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ws-window.ws-type-view .ws-foot-controls-end {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ws-window.ws-type-view .ws-foot-icon,
.ws-window.ws-type-view .ws-volume-footer .ws-audio-mute {
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 32px;
}

.ws-window.ws-type-view .ws-volume-footer {
  position: relative;
  flex: 0 0 auto;
}

.ws-window.ws-type-view .ws-slide-end {
  min-width: 84px;
  max-width: 118px;
  flex-shrink: 0;
}

.ws-window.ws-type-view.ws-freeform .ws-footer {
  overflow: visible;
}

.ws-window.ws-type-view.ws-freeform .ws-foot-tools {
  overflow: visible;
}

.ws-chrome-head,
.ws-chrome-foot {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.ws-foot-icon.ws-screenmax-btn.active,
.ws-foot-icon.ws-expand-btn.active {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(124, 58, 237, 0.3));
  border-color: rgba(0, 212, 255, 0.65);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.ws-volume-footer .ws-volume-slider-wrap {
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(6px) scale(0.92);
  transform-origin: bottom center;
}

.ws-window.ws-vol-open .ws-volume-footer .ws-volume-slider-wrap {
  transform: translateX(-50%) translateY(0) scale(1);
}

.ws-volume-footer .ws-audio-mute.muted {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.12);
}

.ws-group-volume,
.ws-group-help {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex: 0 0 auto;
  position: relative;
  z-index: 8;
}

.ws-foot-icon.ws-help-btn {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.ws-volume-header .ws-volume-slider-wrap {
  bottom: auto;
  top: calc(100% + 6px);
  transform-origin: top center;
  transform: translateX(-50%) scaleY(0.6);
}

.ws-window.ws-vol-open .ws-volume-header .ws-volume-slider-wrap {
  transform: translateX(-50%) scaleY(1);
}

.ws-volume-header .ws-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: min(110px, 30vh);
  margin: 0;
  padding: 0;
  accent-color: #00d4ff;
  background: transparent;
  cursor: pointer;
  writing-mode: vertical-lr;
  direction: rtl;
}

.ws-header-toolbar .ws-volume-control {
  flex-direction: column;
}

.ws-volume-control {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.ws-volume-slider-wrap {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scaleY(0.6);
  transform-origin: bottom center;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(8, 10, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.ws-window.ws-vol-open .ws-volume-slider-wrap {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scaleY(1);
}

.ws-window.ws-vol-open .ws-audio-mute {
  border-color: rgba(0, 212, 255, 0.55);
  background: rgba(0, 212, 255, 0.12);
  color: #00d4ff;
}

.ws-group-volume .ws-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: min(100px, 28vh);
  padding: 0;
  margin: 0;
  accent-color: #00d4ff;
  background: transparent;
  cursor: pointer;
  writing-mode: vertical-lr;
  direction: rtl;
}

.ws-group-volume .ws-volume-slider::-webkit-slider-runnable-track {
  width: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.ws-group-volume .ws-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00d4ff;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.ws-group-volume .ws-volume-slider::-moz-range-track {
  width: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.ws-group-volume .ws-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00d4ff;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.ws-foot-icon.active {
  border-color: rgba(0, 212, 255, 0.55);
  background: rgba(0, 212, 255, 0.12);
  color: #00d4ff;
}

.ws-vol-icon.ws-vol-off {
  display: none;
}

.ws-audio-mute.muted .ws-vol-icon.ws-vol-on {
  display: none;
}

.ws-audio-mute.muted .ws-vol-icon.ws-vol-off {
  display: block;
}

.ws-status {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 16px;
}
.ws-status.error { color: #fca5a5; }

.ws-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(0, 212, 255, 0.2);
  border-top-color: #00d4ff;
  border-radius: 50%;
  animation: ws-spin 0.8s linear infinite;
}

.ws-freeform-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(148, 163, 184, 0.85);
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.ws-window.ws-freeform .ws-freeform-hint { opacity: 1; }
.ws-window.ws-freeform-layout .ws-freeform-hint { opacity: 1; }

.ws-layout-reset-btn {
  position: absolute;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  z-index: 22;
  pointer-events: auto;
  touch-action: manipulation;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.2);
  color: #fecaca;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.ws-layout-reset-btn:hover {
  background: rgba(239, 68, 68, 0.32);
  border-color: rgba(239, 68, 68, 0.85);
}

.ws-layout-reset-btn:active {
  transform: translateX(-50%) scale(0.97);
}

.ws-layout-reset-btn[hidden] {
  display: none !important;
}

.fcp-window .ws-layout-reset-btn {
  bottom: 58px;
}

.ws-freeform-layout-mode [data-ws-layout-id] {
  touch-action: none;
  cursor: grab;
}

.ws-freeform-layout-mode [data-ws-layout-id]:active {
  cursor: grabbing;
}

/* Toolbar-slot icons — vertically centered in bar */
.ws-custom-layout [data-ws-layout-zone="header"],
.ws-freeform-layout-mode [data-ws-layout-zone="header"] {
  transform: translate(0, -50%) !important;
  margin-top: 0;
}

.ws-custom-layout [data-ws-layout-zone="header"][data-ws-layout-id="jump-in"],
.ws-freeform-layout-mode [data-ws-layout-zone="header"][data-ws-layout-id="jump-in"] {
  transform: translate(-50%, -50%) !important;
}

.ws-custom-layout [data-ws-layout-zone="footer"],
.ws-freeform-layout-mode [data-ws-layout-zone="footer"] {
  transform: translate(0, -50%) !important;
}

/* Body overlays — viewer, jump-in */
.ws-custom-layout [data-ws-layout-zone="body"],
.ws-freeform-layout-mode [data-ws-layout-zone="body"] {
  transform: translate(0, 0);
}

.ws-custom-layout [data-ws-layout-zone="body"][data-ws-layout-id="jump-in"],
.ws-freeform-layout-mode [data-ws-layout-zone="body"][data-ws-layout-id="jump-in"] {
  transform: translate(-50%, 0) !important;
}

.ws-custom-layout [data-ws-layout-zone="footer"][data-ws-layout-id="slide-end"],
.ws-freeform-layout-mode [data-ws-layout-zone="footer"][data-ws-layout-id="slide-end"] {
  transform: translate(-100%, 0) !important;
}

.ws-custom-layout .ws-header-toolbar,
.ws-custom-layout .ws-foot-tools,
.ws-custom-layout .fcp-header-toolbar,
.ws-custom-layout .fcp-foot-tools,
.ws-freeform-layout-mode .ws-header-toolbar,
.ws-freeform-layout-mode .ws-foot-tools,
.ws-freeform-layout-mode .fcp-header-toolbar,
.ws-freeform-layout-mode .fcp-foot-tools {
  opacity: 0;
  pointer-events: none;
}

.ws-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  min-height: 52px;
  background: linear-gradient(0deg, rgba(8, 10, 20, 0.96) 0%, rgba(8, 10, 20, 0.78) 100%);
  border-top: 1px solid rgba(0, 212, 255, 0.14);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  flex-shrink: 0;
  z-index: 12;
}

.ws-foot-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ws-foot-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

.ws-group-playback {
  justify-content: flex-start;
}

.ws-foot-slot-spacer {
  width: 44px;
  height: 44px;
  flex: 0 0 36px;
}

.ws-foot-icon.disabled,
.ws-foot-icon:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.ws-mic-btn.muted {
  opacity: 0.65;
}

.ws-jump-in-slot {
  display: none;
}

.ws-foot-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ws-foot-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.35);
}
.ws-foot-icon.active {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(124, 58, 237, 0.3));
  border-color: rgba(0, 212, 255, 0.65);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
}

.ws-foot-close {
  display: none;
}

.ws-slide-end {
  position: relative;
  flex: 1 1 auto;
  min-width: 96px;
  max-width: 148px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.ws-group-slide-end {
  margin-left: auto;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.ws-type-view .ws-foot-tools {
  flex-wrap: nowrap;
}

.ws-type-view .ws-group-playback {
  flex-shrink: 0;
}

.ws-slide-end-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(252, 165, 165, 0.85);
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
  transition: opacity 0.15s;
}

.ws-slide-end.ws-slide-active .ws-slide-end-label,
.ws-slide-end.ws-slide-complete .ws-slide-end-label {
  opacity: 0.35;
}

.ws-slide-end-track {
  position: relative;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
  overflow: visible;
  touch-action: none;
  user-select: none;
}

.ws-slide-end-thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.45);
  transform: translateX(0);
  transition: background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.ws-slide-end-thumb svg {
  width: 14px;
  height: 14px;
}

.ws-slide-end-thumb:active {
  cursor: grabbing;
}

.ws-slide-end.ws-slide-complete .ws-slide-end-track {
  background: rgba(239, 68, 68, 0.28);
  border-color: rgba(239, 68, 68, 0.55);
}

.ws-slide-end.ws-slide-complete .ws-slide-end-thumb {
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55);
}

/* legacy foot buttons */
.ws-foot-btn { display: none; }

.ws-resize-handle {
  position: absolute;
  z-index: 60;
  touch-action: none;
  background: transparent;
  display: none;
  pointer-events: none;
}

.ws-window.ws-freeform {
  overflow: visible !important;
  outline: 1px dashed rgba(0, 212, 255, 0.45);
  outline-offset: 1px;
}

.ws-window .fcp-handle {
  display: none;
  pointer-events: none;
}

.ws-window.ws-freeform .ws-header,
.ws-window.ws-freeform .ws-footer {
  z-index: 10;
  overflow: visible;
}

.ws-window.ws-freeform .fcp-handle {
  display: block;
  position: absolute;
  pointer-events: auto;
  z-index: 100;
}

.ws-window.ws-freeform .fcp-handle::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
  pointer-events: none;
}

.ws-window.ws-freeform .fcp-handle-n::after,
.ws-window.ws-freeform .fcp-handle-s::after,
.ws-window.ws-freeform .fcp-handle-e::after,
.ws-window.ws-freeform .fcp-handle-w::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ws-window.ws-freeform .fcp-handle-ne::after { right: 8px; top: 8px; }
.ws-window.ws-freeform .fcp-handle-nw::after { left: 8px; top: 8px; }
.ws-window.ws-freeform .fcp-handle-se::after { right: 8px; bottom: 8px; }
.ws-window.ws-freeform .fcp-handle-sw::after { left: 8px; bottom: 8px; }

.ws-window.ws-freeform .ws-body {
  overflow: visible;
  z-index: 1;
}

/* Watcher freeform handle hit areas — mirror streamer (.fcp-handle) placement */
.ws-window.ws-freeform .fcp-handle-n,
.ws-window.ws-freeform .fcp-handle-s {
  left: 8px;
  right: 8px;
  height: 36px;
}

.ws-window.ws-freeform .fcp-handle-n { top: -12px; cursor: ns-resize; }
.ws-window.ws-freeform .fcp-handle-s { bottom: -12px; cursor: ns-resize; }

.ws-window.ws-freeform .fcp-handle-e,
.ws-window.ws-freeform .fcp-handle-w {
  top: 8px;
  bottom: 8px;
  width: 36px;
}

.ws-window.ws-freeform .fcp-handle-e { right: -12px; cursor: ew-resize; }
.ws-window.ws-freeform .fcp-handle-w { left: -12px; cursor: ew-resize; }

.ws-window.ws-freeform .fcp-handle-ne,
.ws-window.ws-freeform .fcp-handle-nw,
.ws-window.ws-freeform .fcp-handle-se,
.ws-window.ws-freeform .fcp-handle-sw {
  width: 48px;
  height: 48px;
}

.ws-window.ws-freeform .fcp-handle-ne { top: -12px; right: -12px; cursor: nesw-resize; }
.ws-window.ws-freeform .fcp-handle-nw { top: -12px; left: -12px; cursor: nwse-resize; }
.ws-window.ws-freeform .fcp-handle-se { bottom: -12px; right: -12px; cursor: nwse-resize; }
.ws-window.ws-freeform .fcp-handle-sw { bottom: -12px; left: -12px; cursor: nesw-resize; }

.ws-window.ws-freeform .ws-body .ws-resize-handle {
  display: block;
  pointer-events: auto;
  z-index: 60;
}

/* Watcher freeform handles — match streamer (.fcp-handle) sizing */
.ws-window.ws-freeform .ws-body .ws-resize-n,
.ws-window.ws-freeform .ws-body .ws-resize-s {
  left: 8px;
  right: 8px;
  height: 36px;
}

.ws-window.ws-freeform .ws-body .ws-resize-n { top: -12px; cursor: ns-resize; }
.ws-window.ws-freeform .ws-body .ws-resize-s { bottom: -12px; cursor: ns-resize; }

.ws-window.ws-freeform .ws-body .ws-resize-e,
.ws-window.ws-freeform .ws-body .ws-resize-w {
  top: 8px;
  bottom: 8px;
  width: 36px;
}

.ws-window.ws-freeform .ws-body .ws-resize-e { right: -12px; cursor: ew-resize; }
.ws-window.ws-freeform .ws-body .ws-resize-w { left: -12px; cursor: ew-resize; }

.ws-window.ws-freeform .ws-body .ws-resize-ne,
.ws-window.ws-freeform .ws-body .ws-resize-nw,
.ws-window.ws-freeform .ws-body .ws-resize-se,
.ws-window.ws-freeform .ws-body .ws-resize-sw {
  width: 48px;
  height: 48px;
}

.ws-window.ws-freeform .ws-body .ws-resize-ne { top: -12px; right: -12px; cursor: nesw-resize; }
.ws-window.ws-freeform .ws-body .ws-resize-nw { top: -12px; left: -12px; cursor: nwse-resize; }
.ws-window.ws-freeform .ws-body .ws-resize-se { bottom: -12px; right: -12px; cursor: nesw-resize; }
.ws-window.ws-freeform .ws-body .ws-resize-sw { bottom: -12px; left: -12px; cursor: nwse-resize; }

.ws-window.ws-freeform .ws-body .ws-resize-handle::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
  pointer-events: none;
}

.ws-window.ws-freeform .ws-body .ws-resize-n::after,
.ws-window.ws-freeform .ws-body .ws-resize-s::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ws-window.ws-freeform .ws-body .ws-resize-e::after,
.ws-window.ws-freeform .ws-body .ws-resize-w::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ws-window.ws-freeform .ws-body .ws-resize-ne::after { right: 8px; top: 8px; }
.ws-window.ws-freeform .ws-body .ws-resize-nw::after { left: 8px; top: 8px; }
.ws-window.ws-freeform .ws-body .ws-resize-se::after { right: 8px; bottom: 8px; }
.ws-window.ws-freeform .ws-body .ws-resize-sw::after { left: 8px; bottom: 8px; }

/* Legacy window-level handles (unused — kept for safety) */
.ws-resize-n, .ws-resize-s { left: 20px; right: 20px; height: 14px; }
.ws-resize-n { top: -5px; cursor: ns-resize; }
.ws-resize-s { bottom: -5px; cursor: ns-resize; }
.ws-resize-e, .ws-resize-w { top: 20px; bottom: 20px; width: 14px; }
.ws-resize-e { right: -5px; cursor: ew-resize; }
.ws-resize-w { left: -5px; cursor: ew-resize; }
.ws-resize-ne, .ws-resize-nw, .ws-resize-se, .ws-resize-sw { width: 22px; height: 22px; }
.ws-resize-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.ws-resize-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.ws-resize-se { bottom: -6px; right: -6px; cursor: nesw-resize; }
.ws-resize-sw { bottom: -6px; left: -6px; cursor: nwse-resize; }

/* Control layout handles (stage 2 — red) */
.ws-freeform-layout-mode .ws-layout-item {
  box-sizing: border-box;
  min-width: 24px;
  min-height: 24px;
  outline: 1px dashed rgba(239, 68, 68, 0.5);
  outline-offset: 2px;
}

.ws-freeform-layout-mode .ws-layout-selected.ws-layout-item {
  outline: 2px solid rgba(239, 68, 68, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.ws-layout-handle {
  position: absolute;
  z-index: 20;
  touch-action: none;
  background: transparent;
  pointer-events: none;
  display: none;
}

.ws-freeform-layout-mode .ws-layout-selected .ws-layout-handle {
  display: block;
  pointer-events: auto;
}

.ws-layout-n, .ws-layout-s { left: 8px; right: 8px; height: 12px; }
.ws-layout-n { top: -4px; cursor: ns-resize; }
.ws-layout-s { bottom: -4px; cursor: ns-resize; }
.ws-layout-e, .ws-layout-w { top: 8px; bottom: 8px; width: 12px; }
.ws-layout-e { right: -4px; cursor: ew-resize; }
.ws-layout-w { left: -4px; cursor: ew-resize; }
.ws-layout-ne, .ws-layout-nw, .ws-layout-se, .ws-layout-sw { width: 16px; height: 16px; }
.ws-layout-ne { top: -4px; right: -4px; cursor: nesw-resize; }
.ws-layout-nw { top: -4px; left: -4px; cursor: nwse-resize; }
.ws-layout-se { bottom: -4px; right: -4px; cursor: nesw-resize; }
.ws-layout-sw { bottom: -4px; left: -4px; cursor: nwse-resize; }

.ws-freeform-layout-mode .ws-layout-handle::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.95);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  pointer-events: none;
}
.ws-layout-n::after, .ws-layout-s::after { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ws-layout-e::after, .ws-layout-w::after { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ws-layout-ne::after { right: 2px; top: 2px; }
.ws-layout-nw::after { left: 2px; top: 2px; }
.ws-layout-se::after { right: 2px; bottom: 2px; }
.ws-layout-sw::after { left: 2px; bottom: 2px; }

.ws-window button {
  cursor: pointer;
}

/* Floating watch windows stay visible in WebXR (passthrough + VR globe). */
body.in-vr #workspace-layer,
body.in-ar #workspace-layer,
body.in-ar-lite #workspace-layer {
  visibility: visible;
  pointer-events: none;
}
body.in-vr #workspace-layer .ws-window,
body.in-ar #workspace-layer .ws-window,
body.in-ar-lite #workspace-layer .ws-window {
  pointer-events: auto;
}
body.in-vr #floating-camera-root,
body.in-ar #floating-camera-root,
body.in-ar-lite #floating-camera-root {
  visibility: visible;
  pointer-events: none;
  z-index: 3000;
}
body.in-vr #floating-camera-root .fcp-window,
body.in-ar #floating-camera-root .fcp-window,
body.in-ar-lite #floating-camera-root .fcp-window {
  pointer-events: auto;
}

body.in-vr.in-stream #floating-camera-root,
body.in-ar.in-stream #floating-camera-root {
  visibility: visible !important;
  pointer-events: none;
  z-index: 3000;
}
body.in-vr.in-stream #floating-camera-root .fcp-window,
body.in-ar.in-stream #floating-camera-root .fcp-window {
  visibility: visible !important;
  pointer-events: auto;
  display: flex !important;
}

/* Keep globe + virtual layers visible while broadcasting (in-stream). */
body.in-stream #canvas-container,
body.in-stream #globe-canvas,
body.in-stream #workspace-layer {
  visibility: visible !important;
}

@keyframes ws-spin { to { transform: rotate(360deg); } }
@keyframes ws-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Floating emoji reactions — top layer across all stream windows */
.lilvr-reaction-float-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3600;
  overflow: visible;
}
.lilvr-reaction-float {
  position: fixed;
  font-size: 28px;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  will-change: transform, opacity;
}
.lilvr-reaction-float.lilvr-reaction-float-active {
  animation: lilvr-reaction-drift 2.4s ease-out forwards;
}
@keyframes lilvr-reaction-drift {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift-x, 60px)), calc(-50% + var(--drift-y, -140px))) scale(1.15);
  }
}

button.ws-viewer-overlay {
  margin: 0;
  font: inherit;
  cursor: default;
  font-family: inherit;
}
.ws-type-view button.ws-viewer-overlay {
  pointer-events: auto;
}