/* mindmap5.3 · media-reader.css —— 本地媒体阅读、时间点笔记和来源按钮 */
.local-media-reader { width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; color: var(--ui-text); background: var(--ui-panel); }
.local-media-reader[hidden] { display: none; }
.local-media-stage { flex: 1; min-height: 0; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.local-media-stage:has(img) { touch-action: none; cursor: grab; }
.local-media-stage img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; user-select: none; }
.local-media-stage video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.local-media-controls { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--section-gap); padding: var(--ui-topbar-padding); padding-bottom: max(var(--ui-topbar-padding), env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); }
.local-media-controls button, .local-media-controls select, .local-media-controls input,
.media-note-dialog button, .media-note-dialog input, .media-note-dialog select, .media-note-dialog textarea {
  font: inherit; color: var(--ui-text); background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: var(--radius-btn); min-height: var(--node-action-touch-size); padding: 8px 10px; box-sizing: border-box;
}
.local-media-controls input { width: var(--media-time-input-width); }
.local-media-time { font-variant-numeric: tabular-nums; font-size: 13px; }
.media-note-dialog { width: min(var(--media-note-width), calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 20px; border: 1px solid var(--ui-border); border-radius: var(--radius-panel); background: var(--ui-panel); color: var(--ui-text); box-shadow: var(--whiteboard-card-shadow); }
.media-note-dialog::backdrop { background: var(--media-backdrop); }
.media-note-dialog h2 { margin: 0 0 12px; font-size: 19px; }
.media-note-dialog label { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 14px; }
.media-note-dialog textarea { resize: vertical; min-height: 100px; }
.media-note-dialog input, .media-note-dialog select, .media-note-dialog textarea { width: 100%; min-width: 0; font-size: 16px; }
.media-note-origin, .media-note-feedback { overflow-wrap: anywhere; font-size: 13px; }
.media-note-actions { display: flex; justify-content: flex-end; gap: var(--section-gap); }
.ic-card .frag.frag--media-note { display: block; }
.media-source { display: block; width: 100%; text-align: start; margin-top: 8px; padding: 8px; min-height: var(--node-action-touch-size); border: 1px solid var(--ui-border); border-radius: var(--radius-btn); color: var(--ui-text); background: var(--ui-panel); font: inherit; font-size: 12px; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.rm-media-preview { object-fit: contain; width: 100%; height: 100%; }
.rm-format > .rm-structure-preview { width: 100%; height: 100%; margin: 0; border: 0; grid-column: auto; overflow: hidden; }
@media (max-width: 899px) { .local-media-controls { gap: 6px; padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); } .local-media-controls button, .local-media-controls input, .local-media-controls select { font-size: 13px; } }

/* B 站外链区域保持比例，窄屏说明与操作独立滚动。 */
.remote-video-reader { overflow: auto; }
.remote-video-stage { flex: none; width: 100%; aspect-ratio: 16 / 9; background: var(--media-backdrop); }
.remote-video-stage iframe, .remote-video-native { width: 100%; height: 100%; display: block; border: 0; }
.remote-video-status, .remote-video-help { margin: 0; padding: var(--ui-topbar-padding); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.remote-video-help { color: var(--ui-text-muted); }
.remote-video-reader .local-media-controls label { display: flex; align-items: center; gap: var(--section-gap); }
.remote-video-reader .local-media-controls a { color: var(--ui-accent); display: inline-flex; align-items: center; min-height: var(--node-action-touch-size); }