/* frontend/static/css/video-modal.css */
#video-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,0.75);
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
#video-modal-overlay.show { display:flex; }

#video-modal {
  width: min(1100px, 96%);
  max-height: 92%;
  background: #0b0b0b;
  border-radius: 12px;
  overflow: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  color: var(--text);
  padding: 12px;
  position: relative;
}

/* grid inside modal */
#video-modal .modal-grid {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 16px;
  align-items: start;
}
#video-modal .modal-side {
  padding:8px 6px;
  color:#ddd;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#video-modal .modal-tags { display:flex; gap:8px; flex-wrap:wrap; }
#video-modal .modal-actions { margin-top:auto; display:flex; gap:8px; align-items:center; }
#video-modal .modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}
#video-modal .modal-label { color: #9aa0a6; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; }
#video-modal .modal-prompt { background: rgba(255,255,255,0.02); padding: 8px; border-radius: 8px; white-space: pre-wrap; }
#video-modal .modal-footer { display:flex; justify-content:center; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.04); }


        /* video wrap fills card with aspect ratio portrait */
        .video-wrap{
          position:relative;
          width:100%;
          aspect-ratio: 9/16;
          background: var(--panel);
          overflow:hidden;
        }
        .video-wrap iframe,
        .video-wrap video,
        .video-wrap .embed-link{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            border:0;
            display:block;
            background:transparent;
        }
        .video-wrap video {
          position:absolute;
          inset:0;
          width:100%;
          height:100%;
          object-fit:cover;
          background: var(--panel);
        }

                /* ---- modal styles (обновлённые) ---- */
        #video-modal-overlay {
          position: fixed;
          inset: 0;
          display: none;
          background: rgba(0,0,0,0.75);
          align-items: center;
          justify-content: center;
          z-index: 9999;
          padding: 24px;
        }
        #video-modal {
          width: min(1100px, 96%);
          max-height: 92%;
          background: #0b0b0b;
          border-radius: 12px;
          overflow: auto;
          box-shadow: 0 8px 40px rgba(0,0,0,0.6);
          color: var(--text);
          padding: 12px;
          position: relative;
        }
                /* grid внутри модалки: видео меньше (≈40%), справа детали */
        #video-modal .modal-grid {
          display: grid;
          grid-template-columns: 40% 1fr;
          gap: 16px;
          align-items: start;
        }

        /* видео - уменьшено в сравнении с полной шириной */
        #video-modal .modal-main {
          background: var(--panel);
          border-radius:8px;
          overflow:hidden;
          /* min-height: 220px; */
          display:flex;
          /* align-items:center; */
          /* justify-content:center; */
          margin-top: 25px;
        }
        #video-modal .modal-main video {
          width:100%;
          height:100%;
          object-fit:contain;
          max-height:60vh;
        }
        
        #video-modal .modal-side {
          padding:8px 6px;
          color:#ddd;
          display:flex;
          flex-direction:column;
          gap:8px;
        }

        #video-modal .modal-title { font-weight:700; font-size:18px; color:var(--text); }
        #video-modal .modal-desc { color:var(--text); font-size:14px; white-space:pre-wrap; max-height:36vh; overflow:auto; padding-right:6px; }
        #video-modal .modal-tags { display:flex; gap:8px; flex-wrap:wrap; }
        #video-modal .modal-actions { margin-top:auto; display:flex; gap:8px; align-items:center; }
        #video-modal .modal-close {
          position: absolute;
          right: 12px;
          top: 12px;
          background: transparent;
          border: 0;
          color: var(--text);
          font-size: 17px;
          cursor: pointer;
        }
        /* основная кнопка в модалке - яркая основная */
        #video-modal .btn-primary {
          background: #D6FF3F;
          color: #000;
          padding: 13px 30px;
          border-radius: 12px;
          border: none;
          font-weight: 700;
          cursor: pointer;
          box-shadow: 0 6px 18px rgba(214,255,63,0.12);
        }

        /* сохранём ghost-стиль для вторичных кнопок */
        #video-modal .btn-ghost {
          /* background: var(--panel); */
          background: #171717;
          color: var(--text-muted);
          border: 1px solid rgba(255,255,255,0.06);
          padding: 10px;
          border-radius: 10px;
          cursor: pointer;
          width: 50%;
        }
        /* кнопка prompt внутри модалки видео */
        #video-modal .btn-ghost { font-weight:600; padding:8px 10px; }

        /* prompt modal */
        #prompt-modal-overlay { display:none; align-items:center; justify-content:center; }
        #prompt-modal pre { margin:0; }

        /* делаем кнопку генерации шире на мобильных */
        @media (max-width:700px){
          #video-modal .modal-footer { flex-direction: column-reverse; gap: 10px; }
          #video-modal .btn-primary { width: 100%; }
          #video-modal .btn-ghost { width: 100%; }
        }

        @media (max-width:700px) {
          #video-modal { padding:10px; }
          #video-modal .modal-grid { grid-template-columns: 1fr; }
          #video-modal .modal-main { min-height: 40vh; }
        }