/*
 * hdrop: раскладка страницы передачи файлов.
 * Использует готовую тему Windows 98 (98.css):
 * серебряные панели с фасками, синие титлбары, бирюзовый «рабочий стол»,
 * белые «колодцы». Здесь — только раскладка этой страницы.
 * CSP сервера запрещает data:-URI — никаких картинок в стилях.
 */

html.style-98 body.hd-page,
body.hd-page {
    margin: 0;
    min-height: 100vh;
    background: var(--s98-desktop, #008080);
    font-family: var(--s98-font, Tahoma, "Segoe UI", Verdana, Arial, sans-serif);
    font-size: 12px;
    color: var(--s98-text, #0a0a0a);
}

.hd-desktop {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* ==================== окно ==================== */

.hd-window {
    background: var(--s98-face, #c0c0c0);
    box-shadow: inset -1px -1px var(--s98-dark, #0a0a0a),
                inset 1px 1px var(--s98-hilite, #fff),
                inset -2px -2px var(--s98-shadow, #808080),
                inset 2px 2px var(--s98-light, #dfdfdf),
                3px 3px 0 rgba(0, 0, 0, .35);
    padding: 3px;
    width: min(520px, calc(100vw - 24px));
}

#room-window { width: min(560px, calc(100vw - 24px)); }

.hd-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg,
                var(--s98-title-a, #000080), var(--s98-title-b, #1084d0));
    color: var(--s98-title-text, #fff);
    padding: 4px 8px;
}

.hd-titlebar-text {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hd-body { margin: 10px 8px 8px 8px; }

/* ==================== элементы форм ==================== */

.hd-fieldrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px 0;
}

.hd-fieldrow:last-child { margin-bottom: 0; }

.hd-btnrow { justify-content: flex-start; flex-wrap: wrap; }

/* нижняя строка комнаты: слева «Покинуть комнату», посередине пустое
 * пространство, справа — кнопка «Тема», небольшой отступ и кнопка
 * языка у самого правого края окна */
.hd-bottomrow { flex-wrap: wrap; }

.hd-bottomrow .hd-spring { flex: 1 1 auto; align-self: stretch; }

/* небольшой отступ между кнопкой темы и кнопкой языка */
.hd-bottomrow .hd-langbtn { margin-left: 6px; }

.hd-fieldrow label {
    flex: none;
    font-size: 11px;
}

.hd-fieldrow input[type=text] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--s98-font, Tahoma, sans-serif);
    font-size: 12px;
}

/* кнопка по умолчанию — с чёрной рамкой (как «Выбрать файлы») */
.hd-default {
    box-shadow: inset -2px -2px var(--s98-dark, #0a0a0a),
                inset 1px 1px var(--s98-dark, #0a0a0a),
                inset 2px 2px var(--s98-hilite, #fff),
                inset -3px -3px var(--s98-shadow, #808080),
                inset 3px 3px var(--s98-light, #dfdfdf);
}

.hd-default:active {
    box-shadow: inset -1px -1px var(--s98-hilite, #fff),
                inset 1px 1px var(--s98-dark, #0a0a0a),
                inset -2px -2px var(--s98-light, #dfdfdf),
                inset 2px 2px var(--s98-shadow, #808080);
}

.hd-hint {
    margin: 8px 0 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--s98-text-dim, #444);
}

.hd-error {
    margin: 8px 0 0 0;
    font-size: 11px;
    font-weight: 700;
    color: #a00000;
}

/* ==================== строка статуса окна ==================== */

.hd-statusbar {
    gap: 2px;
    display: flex;
    margin: 0 1px 1px 1px;
}

.hd-status-field {
    box-shadow: inset -1px -1px var(--s98-light, #dfdfdf),
                inset 1px 1px var(--s98-shadow, #808080);
    flex: none;
    padding: 2px 4px;
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hd-status-grow { flex: 1 1 auto; min-width: 0; }

/* ==================== комната ==================== */

.hd-peer-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin: 0 0 8px 0;
    font-size: 12px;
    box-shadow: inset -1px -1px var(--s98-light, #dfdfdf),
                inset 1px 1px var(--s98-shadow, #808080);
}

.hd-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset -1px -1px rgba(0, 0, 0, .4),
                inset 1px 1px rgba(255, 255, 255, .6);
}

.hd-dot-wait { background: #c8c800; }   /* ждём второго        */
.hd-dot-on   { background: #00a800; }   /* собеседник на месте */
.hd-dot-off  { background: #808080; }   /* соединение потеряно */

/* ссылка-приглашение — «колодец» только для чтения */
#invite-link[readonly] { background: var(--s98-face, #c0c0c0); }

/* ==================== зона передачи ==================== */

.hd-dropzone {
    box-sizing: border-box;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    background: var(--s98-well, #fff);
    box-shadow: inset -1px -1px var(--s98-hilite, #fff),
                inset 1px 1px var(--s98-shadow, #808080),
                inset -2px -2px var(--s98-light, #dfdfdf),
                inset 2px 2px var(--s98-dark, #0a0a0a);
    outline: none;
}

.hd-dropzone-or { font-size: 11px; color: var(--s98-text-dim, #444); }

.hd-dropzone.hd-drag {
    background: var(--s98-light, #dfdfdf);
    box-shadow: inset -1px -1px var(--s98-hilite, #fff),
                inset 1px 1px var(--s98-title-b, #1084d0),
                inset -2px -2px var(--s98-light, #dfdfdf),
                inset 2px 2px var(--s98-title-a, #000080);
}

.hd-dropzone.hd-dropzone-disabled { color: var(--s98-shadow, #808080); }

/* ==================== список передач ==================== */

.hd-transfers {
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--s98-well, #fff);
    box-shadow: inset -1px -1px var(--s98-hilite, #fff),
                inset 1px 1px var(--s98-shadow, #808080),
                inset -2px -2px var(--s98-light, #dfdfdf),
                inset 2px 2px var(--s98-dark, #0a0a0a);
    padding: 4px;
}

.hd-transfer {
    padding: 4px 4px 6px 4px;
    font-size: 11px;
    line-height: 1.5;
}

.hd-transfer + .hd-transfer { border-top: 1px solid var(--s98-light, #dfdfdf); }

.hd-transfer-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.hd-transfer-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 700;
    color: var(--s98-text, #0a0a0a);
}

.hd-transfer-size { flex: none; color: var(--s98-text-dim, #444); }

.hd-transfer-dir {
    flex: none;
    font-weight: 700;
    color: var(--s98-text, #0a0a0a);
}

.hd-transfer-status { color: var(--s98-text-dim, #444); }

.hd-transfer-status.hd-transfer-err { color: #a00000; }

/* кнопка «Сохранить» в строке полученного файла */
.hd-save {
    margin-left: 6px;
    min-width: 0;
    min-height: 0;
    padding: 0 8px;
    font-size: 11px;
    font-family: var(--s98-font, Tahoma, sans-serif);
}

/* ==================== 98-прогресс: синие блоки в колодце ==================== */

.hd-progress {
    margin-top: 3px;
    height: 14px;
    background: var(--s98-well, #fff);
    box-shadow: inset -1px -1px var(--s98-hilite, #fff),
                inset 1px 1px var(--s98-shadow, #808080),
                inset -2px -2px var(--s98-light, #dfdfdf),
                inset 2px 2px var(--s98-dark, #0a0a0a);
    padding: 2px;
    box-sizing: border-box;
}

.hd-progress-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(
        90deg,
        var(--s98-title-a, #000080) 0px,
        var(--s98-title-a, #000080) 8px,
        transparent 8px,
        transparent 10px);
}

/* ==================== телефон ==================== */

@media only screen and (max-width: 480px) {
    .hd-desktop { padding: 8px; align-items: flex-start; }
    .hd-desktop > .hd-window { margin-top: 8px; }
    .hd-fieldrow { flex-wrap: wrap; }
    .hd-fieldrow input[type=text] { flex: 1 1 100%; }
    /* нижняя строка не переносится: выход слева, тема и язык справа */
    .hd-bottomrow { flex-wrap: nowrap; }
    .hd-bottomrow .hd-navbtn label { white-space: nowrap; }
}