/* Просмотр картинки — по макету 2026-08-04.
   Шахматка под прозрачность, масштаб, действия, сведения. */

.ivw {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

/* ── вкладки ─────────────────────────────────────────────────────────── */
.ivw-tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.09));
}
.ivw-tab {
    position: relative;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted, #9a958c);
    padding: 0 0 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color 150ms;
}
.ivw-tab::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: #f05a32;
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity 150ms, transform 150ms cubic-bezier(.23,1,.32,1);
}
.ivw-tab:hover, .ivw-tab.is-active { color: var(--text, #f2efe8); }
.ivw-tab.is-active::after { opacity: 1; transform: scaleX(1); }
.ivw-tab:focus-visible { outline: 2px solid #f05a32; outline-offset: 3px; }

/* ── холст ───────────────────────────────────────────────────────────── */
.ivw-stage {
    position: relative;
    min-height: 0;
    /* Высота от окна, а не от картинки: иначе панель распухает под большое
       изображение и кнопки уезжают за край. */
    height: min(56vh, 520px);
    border: 1px solid var(--border, rgba(255,255,255,.09));
    border-radius: 10px;
    overflow: auto;
    display: grid;
    place-items: center;
    /* Шахматка — чтобы прозрачные места было видно, а не путать с фоном. */
    background-color: #141312;
    background-image:
        linear-gradient(45deg, #1e1c1a 25%, transparent 25%, transparent 75%, #1e1c1a 75%),
        linear-gradient(45deg, #1e1c1a 25%, transparent 25%, transparent 75%, #1e1c1a 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
}
.ivw-stage img {
    display: block;
    /* Масштаб задаётся переменной: 0 = «вписать». */
    max-width: 100%;
    max-height: 100%;
    image-rendering: auto;
}
.ivw-stage.is-zoomed { place-items: start; }
.ivw-stage.is-zoomed img {
    max-width: none;
    max-height: none;
    width: calc(var(--ivw-zoom, 1) * var(--ivw-nat-w, 100) * 1px);
    height: auto;
    /* Пиксель-арт при увеличении обязан оставаться пиксель-артом. */
    image-rendering: pixelated;
}

/* ── действия ────────────────────────────────────────────────────────── */
.ivw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ivw-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #c8c2b8);
    font: inherit;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 140ms, color 140ms, border-color 140ms;
}
.ivw-btn:hover { background: var(--bg-hover, #211f1d); color: var(--text, #f2efe8); }
.ivw-btn:focus-visible { outline: 2px solid #f05a32; outline-offset: 2px; }
.ivw-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ivw-btn.is-on { border-color: #f05a32; color: #f05a32; }
.ivw-zoom { min-width: 96px; }

/* ── сведения ────────────────────────────────────────────────────────── */
.ivw-facts {
    border: 1px solid var(--border, rgba(255,255,255,.09));
    border-radius: 10px;
    overflow: hidden;
}
.ivw-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    color: #78d642;
    font-size: 12.5px;
    line-height: 1.35;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.09));
}
.ivw-note.is-warn { color: #d7b568; }
.ivw-note svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ivw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 38px;
    padding: 0 13px;
    color: var(--text-muted, #9a958c);
    font-size: 12.5px;
}
.ivw-row + .ivw-row { border-top: 1px solid var(--border, rgba(255,255,255,.09)); }
.ivw-row b { color: var(--text, #f2efe8); font-weight: 500; }
.ivw-row .ivw-ok { color: #78d642; display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 620px) {
    .ivw-stage { height: min(44vh, 360px); }
    .ivw-btn span { display: none; }
    .ivw-btn { padding: 0 10px; }
    .ivw-zoom span { display: inline; }
}

/* ── Прикреплённые файлы (макет 2026-08-04) ──────────────────────────────
   Карточка на файл: лицо (миниатюра или тип), имя и СТРОКА СОСТОЯНИЯ.
   Состояние настоящее: файлы уезжают по одному, поэтому «Загрузка 64%» —
   это правда, а не украшение. Раньше вся пачка уходила одним запросом,
   прогресса на файл не было в принципе, а один сбойный ронял всю отправку. */
.atx-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
}
.atx-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 210px;
    max-width: 290px;
    padding: 10px 34px 10px 10px;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    border-radius: 12px;
    background: var(--bg-card, #181817);
}
.atx-card.atx-done { border-color: rgba(120,214,66,.42); }
.atx-card.atx-error { border-color: rgba(239,68,68,.45); }

.atx-face {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 9px;
    overflow: hidden;
    background: #0d0c0b;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.atx-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atx-face-generic {
    cursor: default;
    color: var(--text-muted, #9a958c);
    font: 600 10px/1 ui-monospace, monospace;
    letter-spacing: .04em;
}

.atx-body { min-width: 0; flex: 1 1 auto; }
.atx-name {
    color: var(--text, #f2efe8);
    font-size: 12.5px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atx-status {
    margin-top: 4px;
    color: var(--text-muted, #9a958c);
    font-size: 11px;
    line-height: 1.3;
}
.atx-done .atx-status { color: #78d642; }
.atx-error .atx-status { color: #ef4444; }

.atx-bar {
    margin-top: 6px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
}
.atx-bar i {
    display: block;
    height: 100%;
    background: #f05a32;
    transition: width 180ms linear;
}

.atx-fix { display: flex; gap: 6px; margin-top: 7px; }
.atx-btn {
    appearance: none;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid var(--border, rgba(255,255,255,.14));
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary, #c8c2b8);
    font: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
.atx-btn:hover { background: var(--bg-hover, #211f1d); color: var(--text, #f2efe8); }
.atx-btn:focus-visible { outline: 2px solid #f05a32; outline-offset: 2px; }

.atx-x {
    position: absolute;
    top: 8px; right: 8px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #9a958c);
    cursor: pointer;
    padding: 0;
}
.atx-x:hover { background: var(--bg-hover, #211f1d); color: var(--text, #f2efe8); }
.atx-x:focus-visible { outline: 2px solid #f05a32; outline-offset: 2px; }

@media (max-width: 620px) {
    .atx-card { min-width: 0; flex: 1 1 100%; max-width: none; }
}