:root { --grid-size: 140px; }
* { box-sizing: border-box; }
body { background-color: #121212; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 15px; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; }

.card { background: #1c1c1e; padding: 20px; border-radius: 12px; border: 1px solid #2c2c2e; margin-bottom: 20px; }
h1, h2 { margin-top: 0; color: #fff; }

/* Drag Overlay */
#global-drop-zone {
    display: none; position: fixed; inset: 0; background: rgba(18, 18, 18, 0.92);
    border: 4px dashed #6366f1; z-index: 99999; justify-content: center; align-items: center;
    flex-direction: column; color: #818cf8; pointer-events: none;
}
#global-drop-zone h2 { font-size: 28px; margin-bottom: 8px; text-align: center; }

.nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.public-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; color: #fff; padding: 14px; font-size: 15px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: 0.2s; text-align: center; }
.public-btn.admin { background: linear-gradient(135deg, #059669, #10b981); }
.public-btn.tfg { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.public-btn:hover { opacity: 0.9; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #2c2c2e; border: 1px solid #3a3a3c; color: #fff; font-weight: 500; font-size: 13px; border-radius: 6px; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.btn:hover { background: #3a3a3c; }
.btn-primary { background: #4f46e5; border-color: #6366f1; }
.btn-primary:hover { background: #4338ca; }
.btn-danger { background: #dc2626; border-color: #ef4444; }
.btn-danger:hover { background: #b91c1c; }

input[type="text"], input[type="password"] { width: 100%; padding: 12px; margin: 8px 0; background: #2c2c2e; border: 1px solid #3a3a3c; color: #fff; border-radius: 6px; }
.switch-link { text-align: center; margin-top: 15px; color: #aaa; cursor: pointer; }
.switch-link span { color: #818cf8; text-decoration: underline; }

.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.action-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 14px; background: #252528; border-radius: 8px; margin-bottom: 15px; font-size: 15px; border: 1px solid #333; }
.crumb { padding: 4px 8px; border-radius: 4px; cursor: pointer; color: #818cf8; text-decoration: none; }
.crumb:hover { background: #3a3a3c; color: #fff; }
.crumb.drag-over { background: #4f46e5 !important; color: #fff !important; }
.crumb-sep { color: #666; }

/* Прогресс-бары (общий + по файлам) */
#progress-wrap { display: none; margin-bottom: 15px; background: #252528; padding: 12px; border-radius: 8px; }
.progress-row { margin-bottom: 8px; }
.progress-row:last-child { margin-bottom: 0; }
.progress-label { font-size: 12px; color: #ccc; display: flex; justify-content: space-between; margin-bottom: 3px; }
.progress-bar-bg { width: 100%; background: #2c2c2e; border-radius: 6px; height: 8px; overflow: hidden; }
.progress-bar-fill { width: 0%; height: 100%; background: #10b981; transition: width 0.1s; }

/* Таблица */
.table-responsive { width: 100%; overflow-x: auto; }
.file-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 500px; }
.file-table th { padding: 10px 12px; border-bottom: 2px solid #333; color: #888; font-size: 12px; text-transform: uppercase; }
.file-table td { padding: 10px 12px; border-bottom: 1px solid #28282a; font-size: 14px; vertical-align: middle; }
.file-table tr.selected { background: rgba(99, 102, 241, 0.18); }
.file-table tr.drag-target { background: rgba(16, 185, 129, 0.25); outline: 1px dashed #10b981; }
.file-table tr:hover:not(.selected) { background: #242426; }
.col-check { width: 36px; text-align: center; }
.col-size { width: 100px; color: #888; }
.col-actions { width: 160px; text-align: right; }
.item-name-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* Сетка (GridView) с двумерным изменением размера */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-size), 1fr)); gap: 15px; }
.grid-card { position: relative; background: #242426; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; align-items: center; border: 1px solid transparent; cursor: pointer; transition: 0.15s; }
.grid-card:hover { border-color: #444; background: #2a2a2d; }
.grid-card.selected { border-color: #6366f1; background: rgba(99, 102, 241, 0.2); }
.grid-card.drag-target { border-color: #10b981; background: rgba(16, 185, 129, 0.2); }
.grid-checkbox { position: absolute; top: 8px; left: 8px; z-index: 2; }
.grid-preview { width: 100%; height: calc(var(--grid-size) * 0.65); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; border-radius: 4px; overflow: hidden; background: #18181a; }
.grid-preview img, .grid-preview video { width: 100%; height: 100%; object-fit: cover; }
.grid-title { font-size: 13px; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-actions { display: flex; gap: 4px; margin-top: 8px; }

.icon-btn { background: none; border: none; color: #9ca3af; cursor: pointer; padding: 5px; border-radius: 4px; display: inline-flex; align-items: center; }
.icon-btn:hover { background: #374151; color: #fff; }

/* Модальные окна (Плеер, Редактор, Перемещение) */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 10000; justify-content: center; align-items: center; padding: 20px; }
.modal-box { background: #1e1e1e; padding: 25px; border-radius: 12px; width: 100%; max-width: 500px; border: 1px solid #333; max-height: 90vh; display: flex; flex-direction: column; }
.modal-box.fullscreen { max-width: 90vw; height: 90vh; }
.folder-picker-list { max-height: 250px; overflow-y: auto; border: 1px solid #333; border-radius: 6px; margin: 15px 0; }
.folder-picker-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #2a2a2a; }
.folder-picker-item:hover, .folder-picker-item.active { background: #4f46e5; color: #fff; }

/* Редактор кода */
.code-editor-wrap { display: flex; flex-direction: column; flex-grow: 1; border: 1px solid #333; border-radius: 6px; overflow: hidden; margin-top: 10px; }
.code-textarea { background: #121212; color: #e0e0e0; font-family: monospace; font-size: 14px; padding: 12px; width: 100%; height: 400px; border: none; outline: none; resize: none; line-height: 1.5; }

/* Адаптивность для смартфонов */
@media(max-width: 768px) {
    body { padding: 8px; }
    .card { padding: 12px; }
    .nav-grid { grid-template-columns: 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .action-group { width: 100%; justify-content: space-between; }
    .btn { flex-grow: 1; justify-content: center; }
    #grid-scale-label { display: none !important; }
}

/* --- ВИДЖЕТ ЧАТА --- */
.chat-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #6366f1;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    z-index: 999;
    transition: transform 0.2s, background 0.2s;
}
.chat-toggle-btn:hover { background: #4f46e5; transform: scale(1.05); }

.chat-widget {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 340px;
    height: 440px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    z-index: 1000;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    background: #252528;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    font-weight: 600;
}
.chat-close-btn { background: none; border: none; color: #888; font-size: 16px; cursor: pointer; }
.chat-close-btn:hover { color: #fff; }

.chat-messages {
    flex-grow: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-bubble {
    background: #2a2a2d;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}
.chat-bubble .meta {
    font-size: 11px;
    color: #818cf8;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
}
.chat-bubble .meta span { color: #666; }

/* Разделитель дат (как в Telegram) */
.chat-date-sep {
    display: flex; justify-content: center;
    margin: 6px 0; position: sticky; top: 4px; z-index: 1;
}
.chat-date-sep span {
    background: rgba(30, 30, 34, 0.92);
    border: 1px solid #333;
    color: #a5b4fc; font-size: 11px; font-weight: 600;
    padding: 3px 12px; border-radius: 12px;
    backdrop-filter: blur(4px);
}

/* Блюр мата */
.chat-text .mat-blur {
    background: #3a3a3e; color: transparent;
    border-radius: 3px; cursor: pointer;
    text-shadow: 0 0 8px rgba(255,255,255,0.4);
    transition: background 0.15s, color 0.15s, text-shadow 0.15s;
    user-select: none;
}
.chat-text .mat-blur.revealed {
    background: transparent; color: inherit;
    text-shadow: none; user-select: auto;
}

.chat-input-area {
    display: flex;
    padding: 10px;
    background: #252528;
    border-top: 1px solid #333;
    gap: 6px;
}
.chat-input-area input {
    flex-grow: 1;
    background: #121212;
    border: 1px solid #444;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    outline: none;
    font-size: 13px;
}
.chat-input-area input:focus { border-color: #6366f1; }
.chat-input-area button { padding: 8px 14px; }

@media (max-width: 480px) {
    .chat-widget {
        right: 10px;
        bottom: 70px;
        width: calc(100vw - 20px);
        height: 70vh;
    }
}

/* ================= ПУБЛИЧНЫЙ ОБМЕННИК ================= */
.temp-list { display: flex; flex-direction: column; gap: 8px; }
.temp-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: #242426; border-radius: 8px; border: 1px solid #2c2c2e;
    flex-wrap: wrap;
}
.temp-name { flex-grow: 1; font-size: 14px; word-break: break-all; min-width: 150px; }
.temp-meta { font-size: 12px; color: #888; white-space: nowrap; }
.temp-actions { display: flex; gap: 6px; }
.temp-actions .btn { text-decoration: none; }

/* ================= ЗАЯВКИ (админ) ================= */
.pending-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid #2a2a2a; gap: 10px; flex-wrap: wrap;
}
.pending-item:last-child { border-bottom: none; }
.pending-name { font-size: 14px; }
.pending-actions { display: flex; gap: 6px; }