/* Abertura dos vídeos: espaço estável, capa e recuperação de conexão. */
.video-dialog { width: min(calc(100% - 24px), 960px); max-height: calc(100dvh - 24px); }
.video-stage { height: min(60dvh, 600px); background: #101b16; }
.video-stage #dialog-video { width: 100%; height: 100%; max-height: none; object-fit: contain; background: #101b16; }
.video-feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 78px; padding: 14px 18px; border-top: 1px solid #52665b; background: #233a32; }
.video-feedback p { margin: 0; font-size: 13px; line-height: 1.5; color: #f5f3ec; }
.video-feedback[data-state="loading"] p::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 10px; border: 2px solid #72877a; border-top-color: #f5f3ec; border-radius: 50%; vertical-align: -2px; animation: video-loading 1s linear infinite; }
#video-retry { flex-shrink: 0; min-height: 44px; padding: 10px 16px; border: 1px solid #f5f3ec; background: #f5f3ec; color: #233a32; font-size: 13px; font-weight: 700; }
#video-retry[hidden] { display: none; }
#video-retry:hover { background: #e7e9e1; }
@keyframes video-loading { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .video-stage { height: min(52dvh, 420px); } .video-feedback { align-items: flex-start; flex-direction: column; gap: 10px; min-height: 84px; padding: 12px 14px; } .video-feedback p { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .video-feedback[data-state="loading"] p::before { animation: none; } }