/* src/frontend/static/css/video-modal.css */

#video-modal-overlay.show { display:flex; }

/* 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: 999997;
          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;
        }

        /* видео - уменьшено в сравнении с полной шириной */
        #video-modal .modal-main {
          background: var(--panel);
          border-radius:8px;
          overflow:hidden;
          display:flex;
          margin-top: 25px;
          height: 65vh; /* Фиксируем высоту контейнера */
          width: 100%;
          align-items: center;
          justify-content: center;
        }
        #video-modal .modal-main video,
        #video-modal .modal-main img,
        #video-modal .modal-main .modal-image-element,
        #video-modal .modal-main .modal-gallery,
        #video-modal .modal-main .modal-gallery-img {
          width:100%;
          height:100%;
          object-fit:contain; /* Контент адаптируется внутри */
          max-height: 100%; /* Убираем прошлые ограничения, так как родитель фиксирован */
        }
        
        #video-modal .modal-side {
          padding:0px 25px 10px 5px;
          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: #171717;
          color: var(--text-muted);
          border: 1px solid rgba(255,255,255,0.06);
          padding: 10px;
          border-radius: 10px;
          cursor: pointer;
          width: 100%;
        }
        /* кнопка 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; }
        }



.modal-gallery { position: relative; overflow: hidden; display: none; }
.modal-gallery .gallery-prev,
.modal-gallery .gallery-next {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20000;
  background: none;
  border: none;
  color: #fff;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  user-select: none;
  pointer-events: auto;
}
.modal-gallery .gallery-prev { left: 8px; }
.modal-gallery .gallery-next { right: 8px; }



.modal-copy-link-btn { border:0; background:transparent; cursor:pointer; }
.modal-copy-link-btn img { width:22px; height:22px; display:block; cursor: pointer;}
.modal-tags-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 30px;
}

.modal-tags-row .modal-label {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #9aa0a6;
  font-size: 13px;
  margin-top: 0px;
}

.modal-tags-row .modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}