/* =========================================================================
   Screen recorder — record button state and the trim / export window.
   Uses the host's tokens (--bg, --fg, --line, --muted…) with fallbacks,
   so the same file fits Dimensión, Configuración and Materia.
   ========================================================================= */

/* Record button: same width in both states (the bar does not shift); the dot pulses while recording */
#record-btn { min-width: 118px; justify-content: center; }
.srec-dot { fill: currentColor; stroke: none; }
.is-recording .srec-dot { animation: srec-pulse 1.2s ease-in-out infinite; }
.is-recording { border-color: var(--fg, #fff) !important; }
.srec-time { font-variant-numeric: tabular-nums; color: var(--muted, #8c8c8c); margin-left: 2px; }
@keyframes srec-pulse { 50% { opacity: .25; } }

/* Window */
.srec-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-items: center;
    padding: 24px;
    background: color-mix(in srgb, var(--bg, #000) 72%, transparent);
    backdrop-filter: blur(6px);
}
.srec-modal {
    width: min(920px, 100%);
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px 20px 20px;
    background: var(--bg, #000); color: var(--fg, #fff);
    border: 1px solid var(--line, #2a2a2a);
    border-radius: var(--r-box, 14px);
    font-family: inherit;
}
.srec-head { display: flex; align-items: baseline; gap: 12px; }
.srec-head h2 { font-size: var(--t-body, 14px); font-weight: 500; }
.srec-meta { color: var(--muted, #8c8c8c); font-size: var(--t-micro, 11px); font-variant-numeric: tabular-nums; }
.srec-close {
    margin-left: auto; align-self: center;
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 8px; color: var(--muted, #8c8c8c);
}
.srec-close:hover { color: var(--fg, #fff); background: var(--hover, rgba(255,255,255,.06)); }

.srec-stage {
    min-height: 0; flex: 1;
    display: grid; place-items: center;
    border: 1px solid var(--line, #2a2a2a);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg, #000);
}
.srec-stage video { display: block; max-width: 100%; max-height: 56vh; }

/* Trim: play button + track with two handles and a playhead */
.srec-trim { display: flex; align-items: center; gap: 16px; }
.srec-play {
    width: 38px; height: 38px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--fg, #fff); color: var(--bg, #000);
}
.srec-play svg { fill: currentColor; stroke: none; }
.srec-play .i-pause, .srec-modal.is-playing .srec-play .i-play { display: none; }
.srec-modal.is-playing .srec-play .i-pause { display: block; }

.srec-track {
    position: relative; flex: 1; height: 34px;
    cursor: pointer; touch-action: none;
}
.srec-track::before { /* the whole recording */
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
    background: var(--line, #2a2a2a); border-radius: 2px;
}
.srec-range { /* the part that will be exported */
    position: absolute; top: 50%; height: 4px; margin-top: -2px;
    background: var(--fg, #fff); border-radius: 2px;
}
.srec-head-line {
    position: absolute; top: 6px; bottom: 6px; width: 1px; margin-left: -.5px;
    background: var(--muted, #8c8c8c); pointer-events: none;
}
.srec-handle {
    position: absolute; top: 50%;
    width: 12px; height: 26px; margin: -13px 0 0 -6px;
    border-radius: 4px;
    background: var(--fg, #fff);
    border: 3px solid var(--bg, #000);
    box-shadow: 0 0 0 1px var(--fg, #fff);
    cursor: ew-resize;
}
.srec-handle:focus-visible { outline: 1.5px solid var(--fg, #fff); outline-offset: 3px; }
.srec-times { margin-top: -6px; padding-left: 54px; color: var(--muted, #8c8c8c); font-size: var(--t-micro, 11px); font-variant-numeric: tabular-nums; white-space: pre; }

.srec-options { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.srec-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--t-small, 12.5px); }
.srec-check input {
    -webkit-appearance: none; appearance: none; margin: 0;
    width: 16px; height: 16px; flex-shrink: 0;
    border: 1px solid var(--line-strong, #4a4a4a); border-radius: 4px;
    display: grid; place-items: center; cursor: pointer;
}
.srec-check input:checked { background: var(--fg, #fff); border-color: var(--fg, #fff); }
.srec-check input:checked::after {
    content: ''; width: 8px; height: 4px; margin-top: -2px;
    border-left: 1.5px solid var(--bg, #000); border-bottom: 1.5px solid var(--bg, #000);
    transform: rotate(-45deg);
}
.srec-check input:focus-visible { outline: 1.5px solid var(--fg, #fff); outline-offset: 2px; }

.srec-foot { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.srec-status { margin-right: auto; color: var(--muted, #8c8c8c); font-size: var(--t-micro, 11px); font-variant-numeric: tabular-nums; }
.srec-btn {
    height: 38px; padding: 0 18px;
    border: 1px solid var(--line, #2a2a2a); border-radius: var(--r-pill, 999px);
    font-weight: 400;
}
.srec-btn:hover { border-color: var(--fg, #fff); }
.srec-btn--solid { background: var(--fg, #fff); color: var(--bg, #000); border-color: var(--fg, #fff); }
.srec-modal.is-busy .srec-btn, .srec-modal.is-busy .srec-trim, .srec-modal.is-busy .srec-options { opacity: .45; pointer-events: none; }
.srec-modal.is-busy .srec-close { visibility: hidden; }

@media (prefers-reduced-motion: reduce) { .is-recording .srec-dot { animation: none; } }