/* A small tool on the canvas; the session's navigation and camera layout stay undisturbed. */
.shared-pointer-tool {
    position: absolute; z-index: 5; top: 14px; right: 14px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    max-width: calc(100% - 28px); pointer-events: none; font-family: var(--sans);
}
.shared-pointer-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.shared-pointer-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 38px; padding: 9px 13px; border: 1px solid #ffffff5c; border-radius: 12px;
    background: #f9faf1f0; color: #465c40; box-shadow: 0 2px 12px #14251b16;
    backdrop-filter: blur(18px); font: 500 12px/1.4 var(--sans); pointer-events: auto;
    transition: background 160ms ease, border-color 160ms ease;
}
.shared-pointer-toggle .icon { width: 13px; height: 13px; font-size: 13px; }
.shared-pointer-toggle:hover:not(:disabled) { background: #fffef8; border-color: #fffef8; }
.shared-pointer-toggle[aria-pressed="true"] { background: #e7eedef5; border-color: #c9d7b8; color: #3f5834; }
.shared-pointer-toggle:disabled { background: #f4f5ebdc; color: #65735e; cursor: default; }
.shared-pointer-toggle:focus-visible { outline: 2px solid #c9d8b5; outline-offset: 3px; }
.shared-pointer-hint {
    max-width: 190px; padding: 6px 10px; border-radius: 9px; background: #25382ddb; color: #f5f6ee;
    font-size: 10px; line-height: 1.6; text-align: right; text-wrap: balance; backdrop-filter: blur(12px);
}
.shared-pointer-notice {
    max-width: 238px; margin: 0; padding: 11px 13px; border: 1px solid #e2e7d7;
    border-radius: 12px; background: #fcfdf5f5; color: #516549; box-shadow: 0 2px 16px #14251b18;
    font-size: 11px; line-height: 1.6; text-wrap: pretty;
}
.video-area:has(.shared-pointer-tool:not([hidden])) .drawing-guide-trigger { max-width: calc(100% - 180px); }
.video-area:has(.drawing-guide-trigger:not([hidden])) .shared-pointer-hint { display: none; }
.video-grid[data-pointing="true"] .feed-tile { cursor: crosshair; touch-action: none; }
.call-view[data-role] .video-grid[data-shared-pointer="true"] .feed-tile video { object-fit: contain; }
.video-grid[data-pointing="true"] .feed-tile:focus-visible { outline: 2px solid #d6e5bf; outline-offset: -3px; }
.shared-pointer-marker {
    --pointer-color: #dce9c0; --pointer-ink: #33482b;
    position: absolute; z-index: 4; top: 0; left: 0; width: 0; height: 0;
    pointer-events: none; transition: transform 65ms linear; will-change: transform;
}
.shared-pointer-marker[data-role="client"] { --pointer-color: #fae0bb; --pointer-ink: #634b31; }
.shared-pointer-marker::before {
    content: ""; position: absolute; width: 19px; height: 19px; box-sizing: border-box;
    top: -9.5px; left: -9.5px; border: 2px solid var(--pointer-color); border-radius: 50%;
    background: #2033241f; box-shadow: 0 0 0 1px #24382990, 0 2px 7px #17241c30;
}
.shared-pointer-marker::after {
    content: ""; position: absolute; top: -2px; left: -2px; width: 4px; height: 4px;
    border-radius: 50%; background: var(--pointer-color); box-shadow: 0 0 2px #233426;
}
.shared-pointer-marker > span {
    position: absolute; top: 12px; left: 12px; width: max-content; max-width: 120px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px;
    border: 1px solid #ffffff75; border-radius: 5px 9px 9px 9px;
    background: var(--pointer-color); color: var(--pointer-ink); box-shadow: 0 2px 8px #17241c20;
    font: 500 10px/1.4 var(--sans);
}
.shared-pointer-marker.label-left > span { left: auto; right: 12px; border-radius: 9px 5px 9px 9px; }
.shared-pointer-marker.label-above > span { top: auto; bottom: 12px; }
.shared-pointer-marker.is-own { transition: none; }
.shared-pointer-marker.is-own > span { display: none; }
.room-app[data-privacy-covered="true"] .shared-pointer-tool,
.room-app[data-privacy-covered="true"] .shared-pointer-marker { display: none; }
@media (max-width: 600px) {
    .shared-pointer-tool { top: 10px; right: 10px; }
    .shared-pointer-toggle { min-height: 42px; padding-inline: 11px; }
    .shared-pointer-hint { max-width: 166px; }
}
@media (prefers-reduced-motion: reduce) {
    .shared-pointer-toggle, .shared-pointer-marker { transition: none; }
}