/*
 * Editor preview panel for the Video (YouTube or Vimeo) block.
 *
 * Loaded on every admin page via insert_global_admin_css (Wagtail 6.3 has no
 * editor-only CSS hook), so every rule is namespaced under
 * .video-embed-preview -- an element only video_embed_preview.js creates.
 */
.video-embed-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 32rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--w-color-border-furniture, #e6e6e6);
    border-radius: 3px;
    background: var(--w-color-surface-menus, #f9f9f9);
    line-height: 1.35;
}

.video-embed-preview[hidden] { display: none; }

.video-embed-preview__thumb {
    width: 160px;
    max-width: 160px;
    height: auto;
    flex: 0 0 auto;
    border-radius: 2px;
    display: block;
}

.video-embed-preview__meta {
    min-width: 0;
}

/* Block-level so title and provider stack even if this file fails to load. */
.video-embed-preview__title {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.video-embed-preview__provider {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85em;
    color: var(--w-color-text-meta, #5c5c5c);
}

.video-embed-preview__message {
    margin: 0;
    font-size: 0.9em;
    color: var(--w-color-text-meta, #5c5c5c);
}