/* Тематические переменные */
:root{
  --code-bg:#ffffff;
  --code-fg:#24292f;
}

/* Базовая модалка */
.modal-overlay{
position:fixed; inset:0; background:rgba(0,0,0,.65);
display:flex; justify-content:center; align-items:center;
opacity:0; visibility:hidden; transition:.25s ease; z-index:1000;
}
.modal-overlay.active{ opacity:1; visibility:visible; }

/* По умолчанию — обычное окно; для галереи добавляем .square */
.modal-box{
background:var(--card); border-radius:12px; width:90%; max-width:1000px; max-height:90vh;
display:flex; flex-direction:column; overflow:hidden; box-shadow:0 0 24px rgba(0,0,0,.25);
transform:translateY(12px); transition:.25s ease;
}
.modal-box.square{
/* Квадрат: берём минимальную сторону окна и не выходим за 90vmin */
width: min(90vmin, 1000px);
height: min(90vmin, 1000px);
max-width: none; max-height: none;
}

/* ▼ Новый режим для широких кадров — «fluid» (адаптивная высота без пустого низа) */
.modal-box.gallery-fluid{
  width: min(90vmin, 1000px);
  height: auto;
  max-height: 90vh;
}

.modal-overlay.active .modal-box{ transform:translateY(0); }

.modal-header{
padding:10px 16px; background:var(--card); border-bottom:1px solid var(--border);
display:flex; align-items:center; gap:8px; justify-content:flex-end;
}
.modal-header h3{ margin-right:auto; font-size:1rem; }
.modal-close,
.modal-fs{
cursor:pointer; font-size:1.05rem; background:transparent; border:1px solid var(--border);
color:var(--text); width:34px; height:28px; border-radius:8px; display:inline-grid; place-items:center;
}

/* Контент */
.modal-content{
overflow:auto; padding:12px;
flex:1;
display: flex;
flex-direction: column;
min-height: 0;
}

/* ===== Видео ===== */
.modal-content .video{
width:100%; height:auto; display:block; background:#000;
border-top:1px solid var(--border);
}

/* ===== Галерея ===== */
.gallery-stage{
padding:12px; background:var(--card); border:1px solid var(--border);
border-radius:12px; margin:0 0 12px 0;
display: flex; flex-direction: column;
flex-shrink: 1; min-height: 0;
}
.gallery-stage .lb-img{
display:block; width:100%; max-height:100%; object-fit:contain;
background:var(--card); border-radius:10px; border:1px solid var(--border);
transition: transform .25s ease;
}

/* В полноэкранном режиме обе модалки ведут себя адекватно */
.modal-box.square:fullscreen .modal-content,
.modal-box.gallery-fluid:fullscreen .modal-content { padding: 20px; }
.modal-box.square:fullscreen .gallery-stage,
.modal-box.gallery-fluid:fullscreen .gallery-stage { flex-grow: 1; }

.gallery-toolbar{
display:flex; gap:8px; justify-content:center; margin-top:8px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.gallery-toolbar .btn.small{
background:var(--accent); border:1px solid var(--border); color:var(--text);
padding:8px 10px; border-radius:10px; cursor:pointer;
}

.gallery-thumbs{
display:grid; gap:10px; padding:8px 0 4px;
grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
flex-shrink: 0;
}

/* Кнопка превью */
.g-thumb{
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  display:block;
  outline:none; /* убираем системный outline у кнопки */
}

/* Дополнительно глушим фокус, чтобы не мигал чёрный обвод */
.g-thumb:focus,
.g-thumb:focus-visible{
  outline:none !important;
}

/* Картинка превью */
.g-thumb img{
  width:100%;
  height:auto;
  border-radius:8px;
  transition:.25s;
  border:1px solid var(--border);
  background:var(--card);
  outline:none; /* на всякий случай и у img */
}
.g-thumb img:focus,
.g-thumb img:focus-visible{
  outline:none !important;
}

.g-thumb img:hover{ transform:scale(1.03) }
.gallery-thumbs.hidden{ display:none }

/* ===== Код-вьювер ===== */
.modal-box.modal-box-code {
height: 85vh;
max-height: 85vh;
}

.code-viewer{
display:flex;
flex: 1;
min-height: 0;
background:#ffffff; color:var(--text);
}

.file-tree{
width:260px; background:var(--card); border-right:1px solid var(--border);
overflow:auto; padding:8px; font-size:13px; line-height:1.4;
flex-shrink: 0;
}
.file-tree ul{ list-style:none; margin:0; padding-left:14px }
.file-tree li{ cursor:pointer; margin:2px 0; white-space:nowrap }
.file-tree .folder::before{ content:"📁"; margin-right:6px }
.file-tree .file::before{ content:"📄"; margin-right:6px; opacity:.7 }
.file-tree .open{ font-weight:600 }

.code-pane{
flex:1; min-width:0;
display:flex; flex-direction:column;
padding:12px; background:#ffffff;
overflow:hidden;
}
.code-toolbar{ display:flex; gap:8px; align-items:center; margin-bottom:8px }
.code-toolbar .spacer{ flex:1 }

.code-host {
flex: 1;
min-height: 0;
border: 1px solid var(--border);
border-radius: 12px;
overflow-x: auto;
overflow-y: hidden;
}

/* Общий контейнер прокрутки для обоих режимов */
.code-scroll-container {
height: 100%;
overflow-y: auto;
scrollbar-gutter: stable;
}

/* Текстовый режим */
.code-block {
margin: 0;
padding: 12px;
min-width: 100%;
width: fit-content;
}
pre code{
font-family:"JetBrains Mono",Consolas,monospace;
font-size:13px; line-height:1.5;
}
.hljs{ background:transparent !important; }

/* Режим изображения */
.image-preview{
display: none;            /* по умолчанию выключен */
align-items: center;
justify-content: center;
padding: 8px;
min-height: 100%;
}
.image-preview img{
max-width: 100%;
height: auto;
display: block;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--card);
}

/* Переключение режимов на контейнере */
.code-host.image-mode .code-block { display: none; }
.code-host.image-mode .image-preview { display: flex; }

@media (max-width:980px){
.modal-box{ width:96% }
.modal-box.square{ width:96vmin; height:96vmin }
/* fluid тоже ограничим по высоте на мобильном */
.modal-box.gallery-fluid{ width:96vmin; height:auto; max-height:96vh; }
.code-viewer{ flex-direction:column; }
.file-tree{ width:auto; max-height:30vh; border-right:0; border-bottom:1px solid var(--border) }
}

/* === Защищённые файлы (из предыдущей задачи) === */
.code-host.code-protected .code-scroll-container { overflow-x: hidden; }

.protected-message {
display: grid;
gap: 8px;
padding: 24px;
text-align: center;
color: var(--muted);
user-select: none;
-webkit-user-select: none;
}
.protected-message .pm-ico { font-size: 28px; line-height: 1; opacity: .9; }
.protected-message .pm-title { font-weight: 600; font-size: 15px; color: var(--text); opacity: .9; }
.protected-message .pm-sub { font-size: 13px; }


/* === Только папки жирным, файлы — обычным === */
.file-tree li { font-weight: 400; }
.file-tree li .node-label { font-weight: 400; }
.file-tree li.folder > .node-label { font-weight: 600; } /* папка */
.file-tree li.open > .node-label { font-weight: 600; }   /* открытая папка */
.file-tree li ul { font-weight: 400; } /* сброс наследования для потомков */

/* === Предпросмотр шрифтов === */
.font-specimen { display:flex; flex-direction:column; gap:10px; padding:16px; }
.font-specimen .fs-title { opacity:.8; font-size:12px; }
.font-specimen .fs-xxl { font-size:42px; line-height:1.2; }
.font-specimen .fs-xl  { font-size:28px; line-height:1.3; }
.font-specimen .fs-md  { font-size:18px; line-height:1.4; }
.font-specimen .fs-meta{ font-size:12px; opacity:.7; }

/* Подсветка активного превью — через box-shadow, без outline */
.g-thumb.active img {
  box-shadow: 0 0 0 2px rgba(90,130,255,0.95);
  border-color: rgba(90,130,255,0.95);
}