/* Shared recording editor and playback details. */
.recording-editor { grid-column: 1 / -1; display: block; padding-top: 12px; border-top: 1px solid var(--border,#e2e8f0); }
.recording-editor .recording-fields { width:100%; }
.recording-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.recording-editor input:not([type=file]), .recording-editor textarea { box-sizing: border-box; width: 100%; padding: 6px 9px; border: 1px solid var(--border,#cbd5e1); border-radius: 10px; color: var(--text-primary,#0f172a); background: var(--bg-card,#fff); font: inherit; font-size: 14px; font-weight: 400; line-height: 1.5; }
.recording-editor textarea { resize: vertical; min-height: 54px; font-family: inherit; }
.recording-editor button,.recording-upload { font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--border,#cbd5e1); background: var(--bg-card,#fff); color: var(--text-primary,#0f172a); border-radius: 10px; cursor: pointer; }
.recording-editor button:disabled { opacity: .6; cursor: wait; }
.recording-editor .recording-save { background: var(--text-primary,#0f172a); color: #fff; border-color: var(--text-primary,#0f172a); }
.recording-cover { display:none; }
.recording-cover-preview { display:none; }
.recording-cover-preview.drag-over { border-color: var(--text-primary,#0f172a); background: #f8fafc; outline: 2px solid var(--text-primary,#0f172a); }
.recording-cover-preview:focus-visible { outline: 2px solid var(--text-primary,#0f172a); outline-offset: 2px; }
.recording-cover-preview img { width: 100%; height: 100%; object-fit: contain; }
.recording-upload { text-align: center; position: relative; overflow: hidden; }
.recording-upload input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.recording-upload:focus-within { outline: 2px solid var(--text-primary,#0f172a); outline-offset: 2px; }
.recording-hint { color: var(--text-muted,#64748b); font-size: 12px; font-weight: 400; }
.recording-image-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.recording-image-actions button,.recording-image-actions .recording-upload { padding: 7px 5px; font-size: 12px; }
.recording-editor-footer { display: flex; flex-wrap: wrap; margin-top: 3px; justify-content: flex-end; align-items: center; gap: 10px; }
.recording-error:empty { display: none; }
.recording-error { flex-basis: 100%; color: #b42318; font-size: 13px; margin-right: auto; }
.recording-playback { display: flex; gap: 12px; align-items: center; margin: 12px 0; font-size: 13px; }
.recording-playback select { border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 8px; font: inherit; background: #fff; color: #0f172a; }
.recording-description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin: 20px 0; color: #334155; }
.recording-description a { color: #166534; text-decoration: underline; }
.recording-chapters h2 { font-size: 16px; margin: 20px 0 10px; }
.recording-chapter-list { display: flex; flex-wrap: wrap; gap: 8px; }
.recording-chapter-list button,.recording-copy-transcript { background: #fff; color: #334155; border: 1px solid #cbd5e1; padding: 8px 12px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px; }
.recording-chapter-list button[aria-current] { background: #f1f5f9; border-color: #64748b; }
.recording-transcript { margin: 22px 0; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; }
.recording-transcript summary { cursor: pointer; font-size: 15px; font-weight: 600; }
.recording-copy-transcript { margin: 12px 0; }
.recording-copy-status { margin-left: 10px; font-size: 12px; }
.recording-transcript-lines { max-height: 350px; overflow-y: auto; }
.recording-transcript-line { display: flex; gap: 12px; padding: 8px; border-radius: 5px; line-height: 1.5; font-size: 14px; }
.recording-transcript-line.active { background: #f1f5f9; }
.recording-transcript-line button { align-self: flex-start; border: 0; background: none; color: #166534; cursor: pointer; font: inherit; font-size: 12px; padding-top: 2px; }
.recording-transcript-line span { overflow-wrap: anywhere; min-width: 0; }
@media(max-width:650px) { .recording-editor-footer { flex-wrap: wrap; } .recording-error { flex-basis: 100%; } }

.recording-chapter-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.recording-chapter-heading label { margin:0; }
.recording-chapter-heading .recording-generate { padding:3px 8px; font-size:12px; }
.recording-generation-status { display:block; margin-top:4px; font-size:12px; color:var(--text-muted,#64748b); }
.recording-generation-status:empty { display:none; }

.recording-editor input:not([type=file]):focus-visible,.recording-editor textarea:focus-visible { outline:2px solid var(--text-primary,#0f172a); outline-offset:1px; }

.recording-playback { flex-wrap:wrap; }
.recording-tool { padding:5px 8px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#0f172a; font:inherit; cursor:pointer; }
.recording-tool[aria-pressed=true] { background:#0f172a; border-color:#0f172a; color:#fff; }
.recording-transcript-search { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.recording-transcript-search input { width:100%; max-width:320px; padding:7px 10px; border:1px solid #cbd5e1; border-radius:7px; font:inherit; font-size:14px; font-weight:400; }
.recording-transcript-search [role=status] { font-size:12px; color:#64748b; }
.recording-transcript-line[hidden] { display:none; }

.recording-frame-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(15,23,42,.38); }
.recording-frame-dialog { width:min(680px,100%); max-height:calc(100vh - 48px); overflow:auto; padding:20px; border:1px solid var(--border,#e2e8f0); border-radius:14px; background:var(--bg-card,#fff); box-shadow:0 20px 60px rgba(15,23,42,.2); }
.recording-frame-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; color:var(--text-primary,#0f172a); }
.recording-frame-close { flex:0 0 auto; border:0 !important; padding:4px 0 !important; background:transparent !important; color:var(--text-secondary,#64748b) !important; font-size:13px !important; }
.recording-frame-dialog video { width:100%; aspect-ratio:16/9; background:#0f172a; border-radius:8px; display:block; }
.recording-frame-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.recording-frame-actions button { border:1px solid var(--border,#cbd5e1); border-radius:10px; background:var(--bg-card,#fff); color:var(--text-primary,#0f172a); font:inherit; font-size:13px; padding:8px 12px; cursor:pointer; }
.recording-frame-actions button:first-child { background:var(--text-primary,#0f172a); border-color:var(--text-primary,#0f172a); color:#fff; }
.recording-frame-actions button:disabled { opacity:.6; cursor:wait; }
.video-thumb-wrap { position:relative; width:144px; height:90px; }
.video-thumb-wrap:hover .recording-thumbnail-tools, .video-thumb-wrap:focus-within .recording-thumbnail-tools { opacity:1; }
.recording-thumbnail-tools { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; padding:6px; background:linear-gradient(transparent,rgba(15,23,42,.82)); opacity:0; transition:opacity .15s ease; }
.recording-thumbnail-tools .recording-upload, .recording-thumbnail-tools button { font:inherit; font-size:11px; padding:5px 7px; border:1px solid rgba(255,255,255,.7); border-radius:7px; background:rgba(15,23,42,.78); color:#fff; cursor:pointer; }
.recording-thumbnail-tools .recording-upload { position:relative; overflow:hidden; }
.recording-thumbnail-tools .recording-upload input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.recording-thumbnail-tools .recording-hint { width:100%; text-align:center; color:#fff; font-size:10px; }
@media(max-width:800px) { .video-thumb-wrap { width:140px; height:88px; } }
@media(max-width:480px) { .video-thumb-wrap { width:100px; height:72px; } }
@media(max-width:650px) { .recording-frame-modal { padding:12px; } .recording-frame-dialog { padding:14px; } .recording-frame-actions { flex-direction:column-reverse; } }