.screen-ping-choice { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 12px; padding:12px 0 2px; border-top:1px solid var(--stroke); cursor:pointer; }
.screen-ping-choice[hidden] { display:none; }
.screen-ping-choice strong { display:block; font-size:12px; color:var(--text); }
.screen-ping-choice small { display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.screen-ping-choice input { appearance:none; flex:0 0 34px; width:34px; height:20px; border-radius:20px; background:color-mix(in srgb, var(--panel-2) 85%, white); border:1px solid var(--stroke-strong); cursor:pointer; transition:background .2s; }
.screen-ping-choice input::before { content:''; display:block; width:14px; height:14px; border-radius:50%; background:#d6ded9; margin:2px; transition:transform .2s; }
.screen-ping-choice input:checked { background:var(--accent); }
.screen-ping-choice input:checked::before { transform:translateX(14px); background:white; }
#room .tile-action[hidden], #room .zoom-panel[hidden], #room .zoom-map[hidden], #room .ping-hint[hidden], .screen-marker[hidden] { display:none !important; }
#room .reaction-picker[hidden], #room .pause-hint[hidden] { display:none; }
#room .pause-frame { position:absolute;object-fit:contain;touch-action:none;z-index:1; }
#room .video-zoomed .pause-frame { cursor:grab; }
#room .video-panning .pause-frame { cursor:grabbing; }
#room .pause-frame[hidden] { display:none; }
#room .locally-paused video { visibility:hidden; }
#room .tile-action:disabled { opacity:.35;cursor:default; }
#room .pause-action[aria-pressed=true] { color:var(--accent); }
#room .pause-hint { position:absolute;left:10px;z-index:7;max-width:calc(100% - 20px);padding:5px 8px;border:1px solid #ffffff18;border-radius:8px;background:#10131ccc;color:#c8d5cd;font:500 10px Inter,system-ui,sans-serif;pointer-events:none; }
#room .navigation-preview .pause-hint { display:none; }
#room .reaction-dock { position:absolute;right:12px;bottom:44px;width:32px;height:32px;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s; }
#room .stream-tile:is(:hover,:focus-within,.touch-active) .reaction-dock, #room .reaction-dock.reaction-open { opacity:.95;pointer-events:auto; }
#room .reaction-dock .reaction-action { width:32px;height:32px;border-radius:50%;color:#d6ddd9;background:#0c1018bb;border-color:#ffffff1a;transition:opacity .18s,transform .25s cubic-bezier(.22,1,.36,1); }
#room .reaction-open .reaction-action { opacity:0;transform:translateY(-5px) scale(.65) rotate(-10deg);pointer-events:none; }
#room .reaction-picker { position:absolute;bottom:0;right:0;z-index:65;display:grid;gap:2px;width:max-content;padding:4px;border:1px solid #ffffff20;border-radius:20px;background:#12151bef;box-shadow:0 5px 18px #0004;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;opacity:0;transform:translateY(8px) scale(.9);transform-origin:bottom right;transition:opacity .18s,transform .18s;pointer-events:none; }
#room .reaction-picker::-webkit-scrollbar { display:none; }
#room .reaction-open .reaction-picker { opacity:1;transform:translateY(0) scale(1);pointer-events:auto; }
#room .reaction-picker button { display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;font-size:21px;cursor:pointer; }
#room .reaction-open .reaction-picker button { animation:reaction-option .26s cubic-bezier(.22,1,.36,1) var(--emoji-delay,0ms) both; }
#room .reaction-picker button:hover, #room .reaction-picker button:focus-visible { background:#ffffff12; }
@keyframes reaction-option { from { opacity:0;transform:translateY(6px) scale(.85); } to { opacity:1;transform:translateY(0) scale(1); } }
#room .navigation-preview .reaction-dock { display:none; }
#room .stream-tile:is(.portrait-opening,.picture-moving) .reaction-dock, #room.viewing-idle .reaction-dock { opacity:0!important;pointer-events:none!important; }
#room .stream-tile:is(:fullscreen,:-webkit-full-screen) .reaction-dock { z-index:60; }
@media (hover:none), (pointer:coarse) { #room .reaction-dock { opacity:.95;pointer-events:auto; } }
#room .floating-reactions { position:absolute;z-index:6;overflow:hidden;border-radius:inherit;pointer-events:none; }
.floating-emoji { position:absolute;right:12px;bottom:42px;font-size:25px;line-height:1.2;filter:drop-shadow(0 2px 4px #0004);will-change:transform,opacity; }
@media (prefers-reduced-motion:reduce) { #room .reaction-dock, #room .reaction-dock .reaction-action, #room .reaction-picker { transition:none; } #room .reaction-picker button { animation:none!important; } }
#room .tile-actions { max-width:calc(100% - 20px); flex-wrap:wrap; justify-content:flex-end; }
#room .tools-compact .tile-actions { max-width:calc(100% - 8px);gap:3px;top:4px;right:4px; }
#room .grid-picture.tools-compact .tile-actions { top:calc(4px - var(--picture-top,0px));right:calc(4px - var(--picture-left,0px)); }
#room .grid-picture.tools-compact:is(.phone-portrait-picture,.picture-tiny) .tile-actions { top:4px;right:4px; }
#room .tile-action.ping-action.active { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,transparent); background:color-mix(in srgb,var(--accent) 18%,var(--bg)); }
#room .zoom-panel { position:absolute; bottom:44px; left:8px; z-index:8; display:flex; align-items:center; max-width:calc(100% - 16px); padding:2px; border:1px solid #ffffff20; border-radius:9px; background:#10131cd9; box-shadow:0 3px 12px #0003; opacity:0; pointer-events:none; transition:opacity .18s; }
#room .zoom-panel button { flex:0 1 25px; height:26px; min-width:18px; padding:0 3px; border:0; border-radius:6px; background:transparent; color:#e0e8e3; font:600 11px Inter,system-ui,sans-serif; cursor:pointer; }
#room .zoom-panel button:hover { background:#ffffff14; }
#room .zoom-panel .zoom-reset { flex:1 1 44px; min-width:32px; }
#room .zoom-map { position:absolute; z-index:8; overflow:hidden; border:1px solid #ffffff35; border-radius:7px; box-shadow:0 4px 18px #0008; background:#111116; opacity:0; pointer-events:none; transition:opacity .18s; cursor:crosshair; touch-action:none; }
#room .zoom-map canvas { display:block; width:100%; height:100%; opacity:.82; }
#room .zoom-view { position:absolute; pointer-events:none; border:1.5px solid var(--accent); border-radius:2px; box-shadow:0 0 0 160px #0005; }
#room .stream-tile:is(:hover,:focus-within,.touch-active):not(.portrait-opening,.picture-moving) :is(.zoom-panel,.zoom-map) { opacity:1; pointer-events:auto; }
#room.viewing-idle .stream-tile :is(.zoom-panel,.zoom-map,.ping-hint) { opacity:0 !important; pointer-events:none !important; }
#room .stream-tile video { touch-action:none; }
#room .stream-tile { -webkit-tap-highlight-color: transparent; }
#room .video-zoomed video { cursor:grab; }
#room .video-panning, #room .video-panning video { cursor:grabbing; user-select:none; }
#room .stream-tile.navigation-preview video { cursor:pointer; touch-action:pan-x pan-y; }
#room .ping-mode video { cursor:crosshair; touch-action:none; }
#room .ping-hint { position:absolute; left:50%; top:50px; transform:translateX(-50%); z-index:9; max-width:calc(100% - 16px); padding:6px 10px; border:1px solid color-mix(in srgb,var(--accent) 15%,transparent); border-radius:9px; color:color-mix(in srgb,var(--accent) 35%,var(--text)); background:color-mix(in srgb,var(--bg-soft) 85%,transparent); font:500 11px Inter,system-ui,sans-serif; white-space:nowrap; pointer-events:none; }
#room .ping-cooldown .ping-action svg { opacity:.4; }
#room .video-markers { position:absolute; z-index:5; overflow:hidden; pointer-events:none; border-radius:inherit; }
.screen-marker { position:absolute; width:0; height:0; pointer-events:none; animation:marker-life 2.2s ease both; }
.screen-marker :is(.marker-dot,.marker-ring,.marker-aura) { position:absolute; left:0; top:0; border-radius:50%; transform:translate(-50%,-50%); }
.marker-dot { width:7px; height:7px; background:color-mix(in srgb,var(--accent) 35%,white); box-shadow:0 0 9px var(--accent); }
.marker-ring { width:30px; height:30px; border:1.5px solid color-mix(in srgb,var(--accent) 65%,white); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 27%,transparent); animation:marker-ring 1.1s cubic-bezier(.16,1,.3,1) both; }
.marker-aura { width:76px; height:76px; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 8%,transparent) 40%,transparent 70%); animation:marker-aura 1.6s ease-out both; }
.marker-name { position:absolute; top:20px; left:0; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 7px; border-radius:6px; color:color-mix(in srgb,var(--accent) 35%,var(--text)); background:color-mix(in srgb,var(--bg-soft) 70%,transparent); font:500 10px Inter,system-ui,sans-serif; transform:translateX(-50%); }
@keyframes marker-ring { from { width:12px;height:12px;opacity:.4; } 35% { opacity:1; } to { width:38px;height:38px;opacity:.65; } }
@keyframes marker-aura { from { opacity:0;scale:.4; } 25% { opacity:1; } to { opacity:.45;scale:1.2; } }
@keyframes marker-life { 0% { opacity:0; } 12%,70% { opacity:1; } 100% { opacity:0; } }
@media (hover:none) { #room .video-zoomed :is(.zoom-panel,.zoom-map) { opacity:1;pointer-events:auto; } }
@media (prefers-reduced-motion:reduce) { .screen-marker,.marker-ring,.marker-aura { animation:none; } .screen-marker { opacity:.9; } }