/* Session Replay playback (/support-request/{id}, "Session Replay" tab).
   The player shell and transport controls are built by js/sessionReplayPlayer.js around a bare
   rrweb Replayer (no rrweb-player package), so all of its styling lives here. */
.session-replay-player-scope {
    max-width: 100%;
}

.session-replay-player {
    max-width: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

/* Clips the scaled stage; height is set in JS to the scaled recording height. */
.session-replay-player__frame {
    position: relative;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

/* Holds the Replayer at the recorded viewport size and is scaled down to fit the frame. */
.session-replay-player__stage {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}

/* MudBlazor sets a global `iframe { width: 100%; height: 100% }`, which beats the width/height
   ATTRIBUTES rrweb puts on the replay iframe. The percentage height then has nothing to resolve
   against (rrweb's wrapper is height:auto) and the iframe collapses to the 150px default, so only
   the top sliver of the recording renders. Give the wrapper a definite size and re-assert 100% here
   — the stage is already sized to the recorded viewport in JS. */
.session-replay-player__stage iframe {
    border: none;
    background: #fff;
    width: 100%;
    height: 100%;
}

/* rrweb draws its own absolutely-positioned wrapper + cursor inside the stage. */
.session-replay-player__stage .replayer-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.session-replay-player__stage .replayer-mouse {
    position: absolute;
    width: 20px;
    height: 20px;
    transition: left 0.05s linear, top 0.05s linear;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5%202l14%2010-6%201%203%206-2%201-3-6-4%204z%27%20fill%3D%27%23000%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
    pointer-events: none;
    z-index: 2;
}

.session-replay-player__stage .replayer-mouse.active::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    opacity: 0.35;
}

.session-replay-player__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.session-replay-player__play {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
}

.session-replay-player__play:hover {
    background: var(--mud-palette-action-default-hover);
}

.session-replay-player__seek {
    flex: 1 1 auto;
    min-width: 80px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.session-replay-player__time {
    flex: 0 0 auto;
    font-family: monospace;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.session-replay-player__speed {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}