.lesson-recording-layer { position: fixed; z-index: 33; left: 1rem; bottom: 1rem; width: min(34rem, calc(100vw - 2rem)); pointer-events: none; }
.lesson-recording { pointer-events: auto; display: grid; gap: .65rem; max-height: calc(100vh - 2rem); overflow: auto; padding: 1rem; border: 1px solid var(--line, #cbd5e1); border-radius: 1rem; background: var(--surface, #fff); box-shadow: 0 .75rem 2rem rgb(15 23 42 / .16); }
.lesson-recording__warning, .lesson-recording__help { margin: 0; color: #475569; font-size: .82rem; }
.lesson-recording__state { margin: 0; color: #1e3a8a; font-weight: 700; font-variant-numeric: tabular-nums; }
.lesson-recording__controls { display: flex; flex-wrap: wrap; gap: .45rem; }
.lesson-recording button { min-height: 2.25rem; padding: .4rem .7rem; border: 1px solid var(--line, #cbd5e1); border-radius: .55rem; background: transparent; cursor: pointer; }
.lesson-recording button.is-primary { color: #fff; background: #1d4ed8; border-color: #1d4ed8; }
.lesson-recording button:disabled { opacity: .5; cursor: not-allowed; }
.lesson-recording__timeline { display: grid; gap: .35rem; margin: 0; padding-left: 1.4rem; }
.lesson-recording__segment { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: .4rem; padding: .4rem .5rem; border: 1px solid #dbe4ef; border-radius: .5rem; background: #f8fafc; }
.lesson-recording__time { color: #1e3a8a; font-variant-numeric: tabular-nums; }
@media (max-width: 430px) { .lesson-recording-layer { left: .5rem; bottom: .5rem; width: calc(100vw - 1rem); } .lesson-recording__segment { grid-template-columns: 3rem 1fr; } .lesson-recording__segment button { grid-column: 2; justify-self: start; } }
@media (forced-colors: active) { .lesson-recording { border: 2px solid CanvasText; box-shadow: none; } .lesson-recording button.is-primary { background: Highlight; color: HighlightText; } }
@media print { .lesson-recording-layer, .lesson-recording-launcher { display: none !important; } }