<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content">
<title>Brum - Multi-Pane Web Environment</title>
<link rel="icon" type="image/webp" href="assets/brum_icon.webp">
<link rel="apple-touch-icon" href="assets/brum_icon.webp">
<link rel="shortcut icon" href="assets/brum.ico">
<link rel="stylesheet" href="app.css">
<style>
html.auth-pending-login #login-modal,
html.auth-pending-lock #session-lock-screen {
display: flex !important;
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important;
opacity: 1 !important;
visibility: visible !important;
}
html.auth-pending-login .app-header,
html.auth-pending-login .fkey-bar,
html.auth-pending-login .app-main-layout,
html.auth-pending-login .mobile-bottom-bar,
html.auth-pending-login .floating-window,
html.auth-pending-login .panes-container,
html.auth-pending-lock .app-header,
html.auth-pending-lock .fkey-bar,
html.auth-pending-lock .app-main-layout,
html.auth-pending-lock .mobile-bottom-bar,
html.auth-pending-lock .floating-window,
html.auth-pending-lock .panes-container,
html.auth-verifying .app-header,
html.auth-verifying .fkey-bar,
html.auth-verifying .app-main-layout,
html.auth-verifying .mobile-bottom-bar,
html.auth-verifying .floating-window,
html.auth-verifying .panes-container {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html.fkeys-disabled .bottom-fkey-bar {
display: none !important;
}
</style>
<script>
(function() {
try {
if (localStorage.getItem('cd_show_fkeys') === 'false') {
document.documentElement.classList.add('fkeys-disabled');
}
var token = localStorage.getItem('cd_token');
var isLocked = localStorage.getItem('cd_is_locked') === 'true';
var isTauri = window.__TAURI__ !== undefined || window.__TAURI_INTERNALS__ !== undefined || window.__WRY__ !== undefined;
if (isLocked) {
document.documentElement.classList.add('auth-pending-lock');
} else if (!token && !isTauri) {
document.documentElement.classList.add('auth-pending-login');
} else {
document.documentElement.classList.add('auth-verifying');
}
} catch (_) {
document.documentElement.classList.add('auth-pending-login');
}
function updateVersionElements(v) {
if (!v) return;
document.querySelectorAll('.login-version-badge').forEach(function(el) { el.textContent = 'v' + v; });
document.querySelectorAll('.lock-version-badge, #lock-corner-version-badge').forEach(function(el) { el.textContent = 'Brum v' + v; });
document.querySelectorAll('.login-app-version, #login-app-version').forEach(function(el) { el.textContent = v; });
document.querySelectorAll('#about-version-badge, .about-version-badge').forEach(function(el) { el.textContent = 'v' + v + ' (Desktop & Web)'; });
}
document.addEventListener('DOMContentLoaded', function() {
try {
var v = localStorage.getItem('cd_cached_version');
if (v) updateVersionElements(v);
if (localStorage.getItem('cd_is_locked') === 'true') {
var localAvatar = localStorage.getItem('cd_local_avatar');
var localNick = localStorage.getItem('cd_local_nickname');
var cachedInfo = null;
try { cachedInfo = JSON.parse(localStorage.getItem('cd_user_info') || 'null'); } catch (_) {}
var avatar = (cachedInfo && cachedInfo.avatar_url) || localAvatar || '👤';
var uname = (cachedInfo && (cachedInfo.nickname || cachedInfo.username)) || localNick || localStorage.getItem('cd_last_username') || 'Brum User';
var userTextEl = document.getElementById('lock-username-text');
if (userTextEl) userTextEl.textContent = uname;
var avatarEl = document.getElementById('lock-avatar-thumb');
if (avatarEl && avatar) {
var isImg = avatar.startsWith('data:image') || avatar.startsWith('http://') || avatar.startsWith('https://') || avatar.startsWith('/') || avatar.startsWith('blob:') || avatar.startsWith('assets/') || /\.(png|jpe?g|webp|gif|svg|ico)(\?.*)?$/i.test(avatar);
if (isImg) {
avatarEl.innerHTML = '<img src="' + avatar + '" alt="Avatar" style="width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;">';
} else {
avatarEl.textContent = avatar;
}
}
}
fetch('/api/system/status').then(function(r) { return r.json(); }).then(function(d) {
if (d && d.version) {
localStorage.setItem('cd_cached_version', d.version);
updateVersionElements(d.version);
}
}).catch(function() {});
} catch (_) {}
});
setTimeout(function() {
if (document.documentElement.classList.contains('auth-verifying')) {
document.documentElement.classList.remove('auth-verifying');
var isLocked = localStorage.getItem('cd_is_locked') === 'true';
if (isLocked) {
document.documentElement.classList.add('auth-pending-lock');
} else if (!localStorage.getItem('cd_token')) {
document.documentElement.classList.add('auth-pending-login');
}
}
}, 10000);
})();
</script>
<link rel="preload" href="assets/fonts/JetBrainsMonoNerdFont-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="assets/fonts/SymbolsNerdFontMono-Regular.ttf" as="font" type="font/ttf" crossorigin>
<script src="assets/vendor/lucide.min.js"></script>
<script src="assets/vendor/marked.min.js"></script>
<link rel="stylesheet" href="assets/vendor/prism-tomorrow.min.css" />
<script src="assets/vendor/prism.min.js"></script>
<link rel="stylesheet" href="assets/vendor/xterm.min.css" />
<script src="assets/vendor/xterm.min.js"></script>
<script src="assets/vendor/addon-fit.min.js"></script>
<script src="assets/vendor/addon-web-links.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js" defer></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js" defer></script>
</head>
<body>
<header class="app-header">
<div class="logo-area" style="display: flex; align-items: center; gap: 8px;">
<div class="logo-brand-btn" id="btn-logo-about" onclick="openAboutModal()" title="About Brum (Click to open)">
<img src="assets/brum_logo.webp" alt="Brum" class="header-logo-img">
<span class="app-logo-text" style="font-weight: 700;">Brum</span>
</div>
<div class="fleet-switcher-wrapper" id="fleet-switcher-wrapper">
<span class="header-hostname-badge style-text color-slate" id="header-hostname-badge" onclick="toggleFleetSwitcherDropdown(event)" title="Fleet Control (Click to switch server / manage fleet)" style="display: none; cursor: pointer;">
<i data-lucide="server" id="header-hostname-icon" style="display: none;"></i>
<span id="header-hostname-text">@localhost</span>
<i data-lucide="chevron-down" class="header-hostname-chevron" style="width: 10px; height: 10px; margin-left: 2px; opacity: 0.6;"></i>
</span>
<div class="fleet-switcher-dropdown" id="fleet-switcher-dropdown" style="display: none;" onclick="event.stopPropagation()">
<div class="fleet-dropdown-header">
<span class="fleet-dropdown-title"><i data-lucide="network" style="width: 13px; height: 13px; color: var(--accent);"></i> Fleet Control</span>
<span class="fleet-dropdown-status" id="fleet-active-node-tag">Local Node</span>
</div>
<div class="fleet-dropdown-nodes" id="fleet-dropdown-nodes-list">
</div>
<div class="fleet-dropdown-actions">
<button type="button" class="fleet-dropdown-action-btn" onclick="openFleetAddModal()"><i data-lucide="plus" style="width: 12px; height: 12px;"></i> Add Node</button>
<button type="button" class="fleet-dropdown-action-btn" onclick="openFleetManagerModal()"><i data-lucide="settings" style="width: 12px; height: 12px;"></i> Manage Fleet</button>
</div>
</div>
</div>
</div>
<div class="header-actions header-actions-right">
<button class="btn btn-icon desktop-only" id="btn-refresh-all" style="display: none;" onclick="refreshAllPanes()" title="Refresh All Panels"><i data-lucide="rotate-cw"></i></button>
<div class="header-sep desktop-only" id="sep-refresh-all" style="display: none;"></div>
<div class="layout-btn-group desktop-only">
<button class="btn btn-icon" id="layout-1" title="Single Pane (Alt+1)"><i data-lucide="square"></i></button>
<button class="btn btn-icon" id="layout-2v" title="Dual Vertical Split (Alt+2)"><i data-lucide="columns-2"></i></button>
<button class="btn btn-icon" id="layout-2h" title="Dual Horizontal Split"><i data-lucide="rows-2"></i></button>
<button class="btn btn-icon" id="layout-3" title="Triple Columns (Alt+3)"><i data-lucide="columns-3"></i></button>
<button class="btn btn-icon" id="layout-3s" title="Triple Split 1+2 (1 Main + 2 Stacked)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><line x1="12" x2="12" y1="3" y2="21"/><line x1="12" x2="21" y1="12" y2="12"/></svg></button>
<button class="btn btn-icon" id="layout-4" title="Quad Pane 2x2 (Alt+4)"><i data-lucide="grid-2x2"></i></button>
</div>
<button class="btn btn-icon desktop-only" id="btn-toggle-tree" onclick="toggleFolderTree()" title="Toggle Folder Tree (Ctrl+T)">
<i data-lucide="folder-tree"></i>
</button>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon" id="btn-header-spotlight" onclick="openSpotlightModal()" title="Spot! Quick-Switcher & Unified Search (Ctrl+K)">
<img src="assets/spot.webp" alt="Spot!" style="width: 17px; height: 17px; object-fit: contain;">
</button>
<div class="tools-dropdown-wrapper">
<button class="btn btn-icon" id="btn-tools-menu" onclick="toggleToolsMenu(event)" title="ChewToys & Tools (Terminal, Edit, Calculator, Backup, Search)">
<img src="assets/amber-frameless-apps.webp" alt="ChewToys & Tools" style="width: 18px; height: 18px; object-fit: contain; vertical-align: middle;">
</button>
<div class="tools-dropdown-menu" id="tools-dropdown-menu">
<div class="dropdown-item" onclick="openSpotlightModal()"><img src="assets/spot.webp" alt="Spot!" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Spot! (Ctrl+K)</div>
<div class="dropdown-item" onclick="openFloatingNoteDog()"><img src="assets/note.webp" alt="Notes" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Notes</div>
<div class="dropdown-item" onclick="openFloatingNoteDog('manual://README.md')"><i data-lucide="book-open" style="width: 15px; height: 15px; color: var(--accent); flex-shrink: 0;"></i> Manuals & Docs</div>
<div class="dropdown-item" onclick="openFloatingCalculator()"><img src="assets/calc.webp" alt="Calculator" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Calculator</div>
<div class="dropdown-item" onclick="toggleTerminal()"><img src="assets/term.webp" alt="Terminal" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Terminal (`)</div>
<div class="dropdown-item" onclick="openFloatingEditor()"><img src="assets/edit.webp" alt="Edit" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Edit (F4)</div>
<div class="dropdown-item" onclick="triggerDiff()"><img src="assets/diff.webp" alt="Compare" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Compare (F9)</div>
<div class="dropdown-item" onclick="openSearchModal()"><img src="assets/search.webp" alt="Search" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Search (Ctrl+F)</div>
<div class="dropdown-item" onclick="openFleetManagerModal()"><i data-lucide="network" style="width: 15px; height: 15px; color: var(--accent); flex-shrink: 0;"></i> Fleet</div>
<div class="dropdown-item" onclick="openSharesManager()"><img src="assets/sharemgr.webp" alt="Share Manager" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Share Manager</div>
<div class="dropdown-item" onclick="openSyncModal()"><img src="assets/sync.webp" alt="Backup" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Backup</div>
<div class="dropdown-item" onclick="openDiskUsageModal()"><img src="assets/amber-piechart.webp" alt="Stats" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Stats</div>
<div class="dropdown-item" onclick="openSyncthingModal()"><img src="assets/syncthing.webp" alt="Syncthing" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Syncthing</div>
<div class="dropdown-item" onclick="openConverterModal()"><img src="assets/convertx.webp" alt="Format Converter" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Format Converter</div>
<div class="dropdown-item" onclick="openPdfToolModal()"><img src="assets/amber-pdftool.webp" alt="PDF Studio" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> PDF Studio</div>
<div class="dropdown-item" onclick="openMediaPlayer()"><img src="assets/media.webp" alt="Mediaplayer" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Mediaplayer</div>
<div class="dropdown-item" onclick="openSoundDog()"><img src="assets/amber-media.webp" alt="Audioplayer" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Audioplayer</div>
<div class="dropdown-item" onclick="openTetraDog()"><img src="assets/amber-tetris.webp" alt="Tetra" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Tetra</div>
<div class="dropdown-item" onclick="openFloatingTaskManager()"><img src="assets/task.webp" alt="Task Manager" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Task Manager</div>
</div>
</div>
<button class="btn header-task-btn" id="btn-header-tasks" onclick="toggleFloatingTaskManager()" title="Background Tasks & Transfers (Click to toggle)">
<img src="assets/task.webp" id="header-task-icon" alt="Tasks" style="width: 15px; height: 15px; object-fit: contain; vertical-align: middle;">
<span class="header-task-badge" id="header-task-count">0</span>
<span class="header-task-speed" id="header-task-speed" style="display: none;">0 B/s</span>
</button>
<div class="profile-dropdown-wrapper">
<button class="btn profile-btn" id="btn-user-profile" onclick="toggleProfileMenu(event)" title="User Profile">
<div class="profile-avatar-thumb" id="header-avatar-thumb">👤</div>
<span class="desktop-only" id="header-username-label">User</span>
<i data-lucide="chevron-down" class="desktop-only" style="width: 12px; margin-left: 2px;"></i>
</button>
<div class="profile-dropdown-menu" id="profile-dropdown-menu">
<div class="profile-dropdown-header">
<div class="profile-avatar-large profile-avatar-clickable" id="menu-avatar-large" onclick="openUserProfileModal()" title="Edit profile">👤</div>
<div style="overflow: hidden; flex: 1;">
<div style="font-weight: 700; font-size: 13px;" id="menu-user-name">User</div>
<div style="font-size: 11px; color: var(--text-dim);" id="menu-user-email">user@localhost</div>
<span class="user-role-badge" id="menu-role-badge" style="margin-top: 4px; display: inline-block;">ADMIN</span>
</div>
<button type="button" class="profile-header-shield-btn" id="profile-paranoid-shield" onclick="openParanoidSettings()" title="Paranoid Mode Settings">
<i data-lucide="shield-check"></i>
</button>
</div>
<div class="dropdown-item" id="menu-admin-panel-item" onclick="openAdminPanel()"><img src="assets/amber-frameless-admin.webp" alt="Admin" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Admin Control Panel</div>
<div class="dropdown-item" onclick="openSettingsModal()"><img src="assets/amber-frameless-settings.webp" alt="Settings" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> Settings (F10)</div>
<div class="dropdown-item" onclick="openAboutModal()"><img src="assets/amber-frameless-info.webp" alt="About" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;"> About Brum</div>
<div class="profile-dropdown-footer">
<button type="button" class="profile-action-btn" onclick="lockSession()" title="Lock Session (Ctrl+Alt+L)">
<i data-lucide="lock"></i>
<span>Lock</span>
</button>
<button type="button" class="profile-action-btn btn-danger-action" id="btn-profile-logout" onclick="handleLogoutOrExit()" title="Log Out">
<i data-lucide="log-out" id="icon-profile-logout"></i>
<span id="label-profile-logout">Log Out</span>
</button>
</div>
</div>
</div>
</div>
</header>
<main class="main-workspace">
<aside class="tree-view-sidebar" id="tree-view-sidebar" style="display: none;">
<div class="tree-sidebar-header">
<div class="tree-sidebar-title">
<img src="assets/amber-folder-tree.webp" alt="Tree" style="width: 15px; height: 15px; object-fit: contain; vertical-align: middle;">
<span>Folder Tree</span>
</div>
<div class="tree-sidebar-actions">
<button class="btn btn-icon btn-xs" onclick="refreshFolderTree()" title="Refresh Tree"><i data-lucide="refresh-cw" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs" onclick="toggleFolderTree(false)" title="Hide Tree (Ctrl+T)"><i data-lucide="chevron-left" style="width: 12px; height: 12px;"></i></button>
</div>
</div>
<div class="tree-view-content" id="tree-view-root">
</div>
</aside>
<div class="tree-resizer-handle" id="tree-resizer-handle" style="display: none;"></div>
<div class="panes-container layout-dual-vertical" id="panes-grid">
</div>
</main>
<footer class="bottom-fkey-bar">
<button class="fkey-btn" onclick="openHelpModal()"><span class="fkey-num">F1</span> Help</button>
<button class="fkey-btn" onclick="triggerRename()"><span class="fkey-num">F2</span> Rename</button>
<button class="fkey-btn" onclick="triggerView()"><span class="fkey-num">F3</span> View</button>
<button class="fkey-btn" onclick="triggerEditor()"><span class="fkey-num">F4</span> Edit</button>
<button class="fkey-btn" onclick="triggerCopy()"><span class="fkey-num">F5</span> Copy</button>
<button class="fkey-btn" onclick="triggerMove()"><span class="fkey-num">F6</span> Move</button>
<button class="fkey-btn" onclick="triggerMkdir()"><span class="fkey-num">F7</span> Mkdir</button>
<button class="fkey-btn" onclick="triggerDelete()"><span class="fkey-num">F8</span> Delete</button>
<button class="fkey-btn" onclick="triggerDiff()"><span class="fkey-num">F9</span> Diff</button>
<button class="fkey-btn" onclick="openSettingsModal()"><span class="fkey-num">F10</span> Settings</button>
</footer>
<div id="mobile-task-peek-bar" class="mobile-task-peek-bar" title="Swipe up to open Tasks drawer">
<div class="mobile-peek-pill">
<div class="mobile-peek-handle"></div>
<div id="mobile-peek-badge" class="mobile-peek-badge" style="display: none;">
<span class="tasks-pill-pulse"></span>
<span id="mobile-peek-text">0 active</span>
</div>
</div>
</div>
<input type="file" id="direct-file-uploader" multiple style="display:none;" onchange="handleDirectFileUpload(this.files)">
<input type="file" id="direct-folder-uploader" webkitdirectory directory multiple style="display:none;" onchange="handleDirectFileUpload(this.files)">
<footer class="mobile-bottom-bar" id="mobile-bottom-bar">
<button class="mob-cmd-btn" id="mob-btn-copy" onclick="triggerCopy()" title="Copy (F5)">
<i data-lucide="copy"></i>
<span>Copy</span>
</button>
<button class="mob-cmd-btn" id="mob-btn-move" onclick="triggerMove()" title="Move (F6)">
<i data-lucide="move"></i>
<span>Move</span>
</button>
<button class="mob-cmd-btn" id="mob-btn-upload" onclick="triggerDeviceUpload()" title="Upload files from device">
<i data-lucide="upload"></i>
<span>Upload</span>
</button>
<button class="mob-cmd-btn" id="mob-btn-download" onclick="triggerDownload()" title="Download selected to device">
<i data-lucide="download"></i>
<span>Download</span>
</button>
<button class="mob-cmd-btn" id="mob-btn-delete" onclick="triggerDelete()" title="Delete / Move to Trash (F8)">
<i data-lucide="trash-2"></i>
<span>Delete</span>
</button>
<button class="mob-cmd-btn mob-cmd-accent" id="mob-btn-actions" onclick="showTouchActionsMenu(event)" title="Actions & Tools Menu">
<i data-lucide="zap"></i>
<span id="mob-actions-label">Actions</span>
</button>
</footer>
<div id="context-menu-backdrop" class="context-menu-backdrop" onclick="hideContextMenu()"></div>
<div id="context-menu" class="context-menu">
<div class="context-item" id="ctx-item-view" onclick="triggerView()"><i data-lucide="eye" style="width: 14px;"></i> Quick View (F3)</div>
<div class="context-item" id="ctx-item-edit" onclick="triggerEditor()"><img src="assets/edit.webp" alt="Edit" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 4px;"> Edit File (F4)</div>
<div class="context-item context-submenu-parent" id="ctx-item-openwith" onmouseenter="populateOpenWithSubmenu()">
<span style="display: flex; align-items: center; gap: 6px;"><i data-lucide="external-link" style="width: 14px; color: var(--accent);"></i> Open With...</span>
<i data-lucide="chevron-right" style="width: 12px; margin-left: auto;"></i>
<div class="context-submenu" id="ctx-openwith-submenu"></div>
</div>
<div class="context-item context-submenu-parent" id="ctx-item-custom-actions" onmouseenter="populateCustomActionsSubmenu()" style="display: none;">
<span style="display: flex; align-items: center; gap: 6px;"><i data-lucide="terminal" style="width: 14px; color: var(--accent);"></i> Custom Actions...</span>
<i data-lucide="chevron-right" style="width: 12px; margin-left: auto;"></i>
<div class="context-submenu" id="ctx-custom-actions-submenu"></div>
</div>
<div class="context-item" id="ctx-item-download" onclick="triggerDownload()"><i data-lucide="download" style="width: 14px;"></i> Download / Batch Zip</div>
<div class="context-item" id="ctx-item-share" onclick="triggerShare()"><img src="assets/sharemgr.webp" alt="Share" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 4px;"> Share Link / Guest Dropbox...</div>
<div class="context-item" id="ctx-item-diff" onclick="triggerDiff()"><img src="assets/diff.webp" alt="Compare" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 4px;"> Compare / Diff</div>
<div class="context-sep"></div>
<div class="context-item" onclick="triggerPermissions()"><i data-lucide="lock" style="width: 14px;"></i> Permissions & Ownership</div>
<div class="context-item" onclick="triggerCopy()"><i data-lucide="copy" style="width: 14px;"></i> Copy to Target Pane (F5)</div>
<div class="context-item" onclick="triggerMove()"><i data-lucide="move" style="width: 14px;"></i> Move to Target Pane (F6)</div>
<div class="context-item" onclick="triggerRename()"><i data-lucide="edit-3" style="width: 14px;"></i> Rename (F2)</div>
<div class="context-item" onclick="triggerDelete()"><i data-lucide="trash-2" style="width: 14px;"></i> Delete / Move to Trash (F8)</div>
<div class="context-sep"></div>
<div class="context-item" onclick="triggerChecksum()"><i data-lucide="shield-check" style="width: 14px;"></i> Calculate SHA-256 Hash</div>
<div class="context-item" onclick="triggerConvertFile()"><img src="assets/convertx.webp" alt="Convert" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 4px;"> Format Converter (Transcode)...</div>
<div class="context-item" onclick="triggerCompressModal()"><i data-lucide="archive" style="width: 14px;"></i> Compress to Archive...</div>
<div class="context-item" onclick="triggerExtractModal()"><i data-lucide="folder-archive" style="width: 14px;"></i> Extract Archive...</div>
<div class="context-sep"></div>
<div class="context-item context-color-palette-item" style="display: flex; justify-content: space-between; align-items: center;" onclick="event.stopPropagation()">
<span style="display: flex; align-items: center; gap: 6px;"><i data-lucide="tag" style="width: 14px; color: var(--accent);"></i> Color Label:</span>
<div class="context-color-palette">
<span class="color-dot color-red" onclick="setContextFileColor('red')" title="Red (Urgent)"></span>
<span class="color-dot color-orange" onclick="setContextFileColor('orange')" title="Orange (Pending)"></span>
<span class="color-dot color-yellow" onclick="setContextFileColor('yellow')" title="Yellow (Review)"></span>
<span class="color-dot color-green" onclick="setContextFileColor('green')" title="Green (Approved)"></span>
<span class="color-dot color-blue" onclick="setContextFileColor('blue')" title="Blue (Important)"></span>
<span class="color-dot color-purple" onclick="setContextFileColor('purple')" title="Purple (Personal)"></span>
<span class="color-dot color-none" onclick="setContextFileColor('none')" title="Clear Label">✕</span>
</div>
</div>
<div class="context-item" onclick="triggerEditTagsModal()"><i data-lucide="tags" style="width: 14px;"></i> Edit Custom Tags...</div>
</div>
<div class="modal-overlay" id="permissions-modal">
<div class="modal-box" style="width: 500px;">
<div class="modal-header">
<span>🔒 Unix Permissions & Ownership Manager</span>
<button class="btn" onclick="closeModal('permissions-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<div>
<div style="font-weight: 700; font-size: 13px;" id="perm-target-name">filename.txt</div>
<div style="font-size: 11px; color: var(--text-muted); font-family: var(--font-mono);" id="perm-target-path">/path/to/file</div>
</div>
<div class="perm-octal-badge" id="perm-octal-display">0755</div>
</div>
<table class="perm-matrix">
<thead>
<tr>
<th>Class</th>
<th>Read (r - 4)</th>
<th>Write (w - 2)</th>
<th>Execute (x - 1)</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight: 600; color: var(--accent);">Owner (User)</td>
<td><input type="checkbox" id="perm-u-r" onchange="updatePermFromCheckboxes()"></td>
<td><input type="checkbox" id="perm-u-w" onchange="updatePermFromCheckboxes()"></td>
<td><input type="checkbox" id="perm-u-x" onchange="updatePermFromCheckboxes()"></td>
</tr>
<tr>
<td style="font-weight: 600; color: var(--info);">Group</td>
<td><input type="checkbox" id="perm-g-r" onchange="updatePermFromCheckboxes()"></td>
<td><input type="checkbox" id="perm-g-w" onchange="updatePermFromCheckboxes()"></td>
<td><input type="checkbox" id="perm-g-x" onchange="updatePermFromCheckboxes()"></td>
</tr>
<tr>
<td style="font-weight: 600; color: var(--text-muted);">Others (Public)</td>
<td><input type="checkbox" id="perm-o-r" onchange="updatePermFromCheckboxes()"></td>
<td><input type="checkbox" id="perm-o-w" onchange="updatePermFromCheckboxes()"></td>
<td><input type="checkbox" id="perm-o-x" onchange="updatePermFromCheckboxes()"></td>
</tr>
</tbody>
</table>
<div style="margin-top: 10px;">
<span style="font-size: 11px; color: var(--text-muted); font-weight: 600;">1-Click Presets:</span>
<div class="perm-preset-container">
<button class="perm-chip" onclick="applyPermPreset(0o644)">📄 Standard File (0644)</button>
<button class="perm-chip" onclick="applyPermPreset(0o755)">⚡ Executable / Script (0755)</button>
<button class="perm-chip" onclick="applyPermPreset(0o600)">🔒 Private & Secure (0600)</button>
<button class="perm-chip" onclick="applyPermPreset(0o700)"><span class="file-icon-custom-glyph icon-sm" style="color: var(--accent); margin-right: 4px;"></span> Private Dir / SSH (0700)</button>
<button class="perm-chip" onclick="applyPermPreset(0o777)">🌐 Full Public (0777)</button>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;">
<div class="form-group" style="margin-bottom: 0;">
<label>Owner (User):</label>
<select id="perm-owner-select" class="pane-quick-filter" style="width: 100%;"></select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label>Group:</label>
<select id="perm-group-select" class="pane-quick-filter" style="width: 100%;"></select>
</div>
</div>
<div style="margin-top: 12px; display: flex; align-items: center; gap: 6px;">
<input type="checkbox" id="perm-recursive">
<label for="perm-recursive" style="font-size: 11px; color: var(--text-muted); cursor: pointer;">Apply recursively to all subdirectories & files (-R)</label>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('permissions-modal')">Cancel</button>
<button class="btn btn-accent" id="btn-save-permissions">Apply Permissions</button>
</div>
</div>
</div>
<div class="modal-overlay" id="properties-modal" style="z-index: 2950;">
<div class="modal-box" style="width: 560px; max-width: 95vw; height: 580px; max-height: 90vh; display: flex; flex-direction: column;">
<div class="modal-header" style="padding: 10px 16px; border-bottom: 1px solid var(--border);">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;">
<span id="prop-header-icon" style="display: inline-flex; align-items: center; margin-right: 4px;"><span class="file-icon-custom-glyph icon-sm" style="color: var(--accent);"></span></span>
<span id="prop-header-title" style="font-weight: 700; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Properties</span>
</div>
<button class="btn btn-icon" onclick="closeModal('properties-modal')"><i data-lucide="x"></i></button>
</div>
<div class="settings-tabs">
<button class="settings-tab-btn active" id="btn-prop-tab-general" onclick="switchPropertiesTab('prop-tab-general')"><i data-lucide="info"></i> General</button>
<button class="settings-tab-btn" id="btn-prop-tab-security" onclick="switchPropertiesTab('prop-tab-security')"><i data-lucide="shield"></i> Security</button>
<button class="settings-tab-btn" id="btn-prop-tab-checksums" onclick="switchPropertiesTab('prop-tab-checksums')"><i data-lucide="hash"></i> Checksums</button>
<button class="settings-tab-btn" id="btn-prop-tab-tags" onclick="switchPropertiesTab('prop-tab-tags')"><i data-lucide="tag"></i> Color & Tags</button>
</div>
<div class="modal-body" style="flex: 1; overflow-y: auto; padding: 14px 16px;">
<div class="settings-tab-content active" id="prop-tab-general">
<div style="display: flex; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px;">
<div id="prop-big-icon-container" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-active); border-radius: 8px; border: 1px solid var(--border);">
<span id="prop-big-icon" class="file-icon-custom-glyph icon-lg" style="color: var(--accent);"></span>
</div>
<div style="flex: 1; min-width: 0;">
<input type="text" id="prop-input-filename" class="pane-quick-filter" style="width: 100%; font-weight: 700; font-size: 13px; padding: 5px 8px;" readonly>
<div id="prop-file-type-desc" style="font-size: 11px; color: var(--text-muted); margin-top: 3px;">File Folder</div>
</div>
</div>
<table class="properties-table" style="width: 100%; font-size: 12px; border-collapse: collapse;">
<tr>
<td style="width: 110px; color: var(--text-muted);">Location:</td>
<td style="font-family: var(--font-mono); font-size: 11px; word-break: break-all;" id="prop-val-location">/home/user</td>
</tr>
<tr>
<td style="color: var(--text-muted);">Size:</td>
<td style="font-weight: 600;" id="prop-val-size">0 B (0 bytes)</td>
</tr>
<tr>
<td style="color: var(--text-muted);">Contains:</td>
<td id="prop-val-contains">-</td>
</tr>
<tr>
<td style="color: var(--text-muted);">Created:</td>
<td id="prop-val-created">-</td>
</tr>
<tr>
<td style="color: var(--text-muted);">Modified:</td>
<td id="prop-val-modified">-</td>
</tr>
<tr>
<td style="color: var(--text-muted);">Permissions:</td>
<td style="font-family: var(--font-mono);" id="prop-val-mode">-</td>
</tr>
</table>
<div id="prop-media-section" style="display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);">
<div style="font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px;">Media & EXIF Metadata</div>
<div id="prop-media-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 11px;"></div>
</div>
</div>
<div class="settings-tab-content" id="prop-tab-security">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<span style="font-weight: 600; font-size: 12px; color: var(--accent);">Unix POSIX Permissions & Ownership</span>
<span class="perm-octal-badge" id="prop-perm-octal">0755</span>
</div>
<table class="perm-matrix" style="width: 100%; margin-bottom: 12px;">
<thead>
<tr>
<th>Class</th>
<th>Read (r)</th>
<th>Write (w)</th>
<th>Execute (x)</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight: 600; color: var(--accent);">Owner (u)</td>
<td><input type="checkbox" id="prop-perm-u-r" onchange="updatePropPermFromCheckboxes()"></td>
<td><input type="checkbox" id="prop-perm-u-w" onchange="updatePropPermFromCheckboxes()"></td>
<td><input type="checkbox" id="prop-perm-u-x" onchange="updatePropPermFromCheckboxes()"></td>
</tr>
<tr>
<td style="font-weight: 600; color: var(--info);">Group (g)</td>
<td><input type="checkbox" id="prop-perm-g-r" onchange="updatePropPermFromCheckboxes()"></td>
<td><input type="checkbox" id="prop-perm-g-w" onchange="updatePropPermFromCheckboxes()"></td>
<td><input type="checkbox" id="prop-perm-g-x" onchange="updatePropPermFromCheckboxes()"></td>
</tr>
<tr>
<td style="font-weight: 600; color: var(--text-muted);">Others (o)</td>
<td><input type="checkbox" id="prop-perm-o-r" onchange="updatePropPermFromCheckboxes()"></td>
<td><input type="checkbox" id="prop-perm-o-w" onchange="updatePropPermFromCheckboxes()"></td>
<td><input type="checkbox" id="prop-perm-o-x" onchange="updatePropPermFromCheckboxes()"></td>
</tr>
</tbody>
</table>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;">
<div>
<label style="font-size: 11px; display: block; margin-bottom: 4px;">Owner User:</label>
<select id="prop-perm-owner" class="pane-quick-filter" style="width: 100%;"></select>
</div>
<div>
<label style="font-size: 11px; display: block; margin-bottom: 4px;">Group:</label>
<select id="prop-perm-group" class="pane-quick-filter" style="width: 100%;"></select>
</div>
</div>
<div style="margin-bottom: 12px;" id="prop-perm-recursive-wrapper">
<label style="font-weight: normal; font-size: 12px; display: flex; align-items: center; gap: 6px;">
<input type="checkbox" id="prop-perm-recursive"> Apply recursively to subfolders
</label>
</div>
<button class="btn btn-accent btn-sm" onclick="savePropertiesSecurity()"><i data-lucide="check"></i> Apply Security Changes</button>
</div>
<div class="settings-tab-content" id="prop-tab-checksums">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<span style="font-weight: 600; font-size: 12px; color: var(--accent);">File Checksums & Integrity</span>
<button class="btn btn-sm" onclick="calculatePropertiesChecksums()"><i data-lucide="play"></i> Compute Checksums</button>
</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div>
<label style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 700;">SHA-256 Checksum:</label>
<div style="display: flex; gap: 6px; margin-top: 2px;">
<input type="text" id="prop-hash-sha256" class="pane-quick-filter" readonly style="flex: 1; font-family: var(--font-mono); font-size: 11px;" value="-">
<button class="btn btn-icon btn-sm" onclick="copyPropHash('prop-hash-sha256')" title="Copy SHA-256"><i data-lucide="copy"></i></button>
</div>
</div>
<div>
<label style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 700;">MD5 Checksum:</label>
<div style="display: flex; gap: 6px; margin-top: 2px;">
<input type="text" id="prop-hash-md5" class="pane-quick-filter" readonly style="flex: 1; font-family: var(--font-mono); font-size: 11px;" value="-">
<button class="btn btn-icon btn-sm" onclick="copyPropHash('prop-hash-md5')" title="Copy MD5"><i data-lucide="copy"></i></button>
</div>
</div>
<div>
<label style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 700;">SHA-1 Checksum:</label>
<div style="display: flex; gap: 6px; margin-top: 2px;">
<input type="text" id="prop-hash-sha1" class="pane-quick-filter" readonly style="flex: 1; font-family: var(--font-mono); font-size: 11px;" value="-">
<button class="btn btn-icon btn-sm" onclick="copyPropHash('prop-hash-sha1')" title="Copy SHA-1"><i data-lucide="copy"></i></button>
</div>
</div>
</div>
</div>
<div class="settings-tab-content" id="prop-tab-tags">
<div class="form-group">
<label style="font-weight: 600; font-size: 12px; margin-bottom: 6px; display: block;">Color Label:</label>
<div class="context-color-palette" style="display: flex; gap: 8px; margin-top: 4px;">
<span class="color-dot color-red" onclick="setPropFileColor('red')" title="Red (Urgent)"></span>
<span class="color-dot color-orange" onclick="setPropFileColor('orange')" title="Orange (Pending)"></span>
<span class="color-dot color-yellow" onclick="setPropFileColor('yellow')" title="Yellow (Review)"></span>
<span class="color-dot color-green" onclick="setPropFileColor('green')" title="Green (Approved)"></span>
<span class="color-dot color-blue" onclick="setPropFileColor('blue')" title="Blue (Important)"></span>
<span class="color-dot color-purple" onclick="setPropFileColor('purple')" title="Purple (Personal)"></span>
<span class="color-dot color-none" onclick="setPropFileColor('none')" title="Clear Label">✕</span>
</div>
</div>
<div class="form-group" style="margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<label style="font-weight: 600; font-size: 12px; margin: 0;">Customize Folder / File Icon & Emote:</label>
<div id="prop-current-icon-badge" style="font-size: 11px; color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;"></div>
</div>
<div class="icon-presets-container" style="margin-bottom: 10px;">
<div style="font-size: 11px; color: var(--text-muted); margin-bottom: 6px;">Quick Presets (Click to apply):</div>
<div id="prop-preset-buttons-container" style="display: flex; flex-wrap: wrap; gap: 6px; max-height: 110px; overflow-y: auto; padding: 4px; background: var(--bg-active); border-radius: 6px; border: 1px solid var(--border);">
</div>
</div>
<div style="display: flex; gap: 6px; align-items: center;">
<input type="text" id="prop-input-custom-icon" class="pane-quick-filter" placeholder="Paste any emoji (📁, 🚀), Nerd Font (, ), lucide:star, or img:path..." style="flex: 1; padding: 6px 8px; font-family: var(--font-mono), sans-serif; font-size: 12px;">
<button class="btn btn-sm btn-accent" onclick="applyPropCustomIconInput()"><i data-lucide="check"></i> Apply</button>
<button class="btn btn-sm" onclick="clearPropCustomIcon()"><i data-lucide="rotate-ccw"></i> Reset</button>
</div>
<div class="form-hint" style="margin-top: 5px; font-size: 11px; color: var(--text-dim);">
Custom icon is saved specifically for this path and displayed across tables, compact, grid, and tree views.
</div>
</div>
<div class="form-group" style="margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);">
<label style="font-weight: 600; font-size: 12px; margin-bottom: 6px; display: block;">Custom Tags:</label>
<div id="prop-tags-container" style="display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; min-height: 28px;"></div>
<div style="display: flex; gap: 6px; margin-top: 6px;">
<input type="text" id="prop-input-new-tag" class="pane-quick-filter" placeholder="Add tag (e.g. docs, urgent)..." style="flex: 1;" onkeydown="if(event.key==='Enter')addPropCustomTag()">
<button class="btn btn-sm btn-accent" onclick="addPropCustomTag()"><i data-lucide="plus"></i> Add</button>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="padding: 10px 16px; border-top: 1px solid var(--border);">
<button class="btn btn-accent btn-sm" onclick="closeModal('properties-modal')">Close</button>
</div>
</div>
</div>
<div class="modal-overlay" id="spotlight-modal" style="z-index: 3000; align-items: flex-start; padding-top: 10vh;" onclick="if(event.target === this) closeSpotlightModal();">
<div class="spotlight-box" id="spotlight-box">
<div class="spotlight-input-wrapper">
<img src="assets/spot.webp" alt="Spot!" class="spotlight-search-icon" style="width: 16px; height: 16px; object-fit: contain; flex-shrink: 0;">
<input type="text" id="spotlight-input" class="spotlight-input" placeholder="Search actions, files, /text to grep, re:pattern, or path..." autocomplete="off" spellcheck="false" oninput="handleSpotlightInput(this.value)" onkeydown="handleSpotlightKey(event)">
<button class="btn btn-icon spotlight-clear-btn" id="spotlight-clear-btn" onclick="clearSpotlightInput()" style="display: none;" title="Clear">
<i data-lucide="x" style="width: 13px; height: 13px;"></i>
</button>
<button class="btn btn-icon spotlight-close-btn" onclick="closeSpotlightModal()" title="Close (Esc)">
<i data-lucide="x" style="width: 15px; height: 15px;"></i>
</button>
</div>
<div class="spotlight-categories">
<button class="spotlight-cat-btn active" id="spotlight-cat-all" onclick="filterSpotlightCategory('all')">All</button>
<button class="spotlight-cat-btn" id="spotlight-cat-actions" onclick="filterSpotlightCategory('actions')"><i data-lucide="zap"></i> Actions</button>
<button class="spotlight-cat-btn" id="spotlight-cat-paths" onclick="filterSpotlightCategory('paths')"><i data-lucide="folder"></i> Paths</button>
<button class="spotlight-cat-btn" id="spotlight-cat-files" onclick="filterSpotlightCategory('files')"><i data-lucide="file-code"></i> Files</button>
<button class="spotlight-cat-btn" id="spotlight-cat-grep" onclick="filterSpotlightCategory('grep')"><i data-lucide="search"></i> In-File Grep</button>
<button class="spotlight-cat-btn" id="spotlight-cat-bookmarks" onclick="filterSpotlightCategory('bookmarks')"><i data-lucide="star"></i> Bookmarks</button>
<button class="spotlight-cat-btn" id="spotlight-cat-recent" onclick="filterSpotlightCategory('recent')"><i data-lucide="history"></i> Recent</button>
</div>
<div class="spotlight-results" id="spotlight-results">
</div>
<div class="spotlight-footer">
<div class="spotlight-hint">
<kbd>↑</kbd><kbd>↓</kbd> Navigate
</div>
<div class="spotlight-hint">
<kbd>↵</kbd> Select / Open
</div>
<div class="spotlight-hint">
<kbd>Esc</kbd> Close
</div>
<div style="flex: 1;"></div>
<div style="font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 4px;">
<img src="assets/spot.webp" alt="Spot!" style="width: 12px; height: 12px; object-fit: contain;"> Brum Spotlight
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="share-create-modal">
<div class="modal-box" style="width: 560px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column;">
<div class="modal-header" style="min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;">
<span style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent);">
<img src="assets/sharemgr.webp" alt="Share" style="width: 16px; height: 16px; object-fit: contain;">
<span id="share-modal-heading">Advanced Sharing & Showcase Center</span>
</span>
<button class="btn btn-icon modal-close-btn" style="width: 28px; height: 28px;" onclick="closeModal('share-create-modal')" title="Close"><i data-lucide="x" style="width: 14px;"></i></button>
</div>
<div class="modal-body" style="padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;">
<div style="background: var(--bg-header); border: 1px solid var(--border); padding: 10px 14px; border-radius: 6px; display: flex; align-items: center; gap: 12px;">
<span id="share-item-icon" style="font-size: 24px;">📁</span>
<div style="flex: 1; min-width: 0;">
<div style="font-weight: 700; font-size: 13px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" id="share-item-name">item_name</div>
<div style="font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" id="share-item-path">/path/to/item</div>
</div>
</div>
<div>
<label style="font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; display: block;">Share Mode & Permissions:</label>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;">
<label class="share-mode-card" id="mode-card-full" style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; align-items: center; gap: 6px;">
<input type="radio" name="share-mode" id="share-mode-full" value="full" checked onchange="handleShareModeChange()">
<span style="font-weight: 700; font-size: 12px; color: var(--text-main);">Full Share</span>
</div>
<span style="font-size: 10px; color: var(--text-muted);">View & Download enabled</span>
</label>
<label class="share-mode-card" id="mode-card-showcase" style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; align-items: center; gap: 6px;">
<input type="radio" name="share-mode" id="share-mode-showcase" value="showcase" onchange="handleShareModeChange()">
<span style="font-weight: 700; font-size: 12px; color: #10b981;">Showcase Mode</span>
</div>
<span style="font-size: 10px; color: var(--text-muted);">View-Only (No Download)</span>
</label>
<label class="share-mode-card" id="mode-card-dropbox" style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; align-items: center; gap: 6px;">
<input type="radio" name="share-mode" id="share-mode-dropbox" value="dropbox" onchange="handleShareModeChange()">
<span style="font-weight: 700; font-size: 12px; color: #60a5fa;">Guest Dropbox</span>
</div>
<span style="font-size: 10px; color: var(--text-muted);">Upload dropzone</span>
</label>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 11px; font-weight: 600; color: var(--text-muted);">Custom Share Title:</label>
<input type="text" id="share-custom-title" class="pane-quick-filter" style="width: 100%; padding: 6px 10px; font-size: 12px;" placeholder="Optional title...">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 11px; font-weight: 600; color: var(--text-muted);">Link Expiration:</label>
<select id="share-expiry-select" class="pane-quick-filter" style="width: 100%; padding: 6px 10px; font-size: 12px;">
<option value="1">1 Hour</option>
<option value="6">6 Hours</option>
<option value="24" selected>24 Hours (1 Day)</option>
<option value="168">7 Days (1 Week)</option>
<option value="720">30 Days (1 Month)</option>
<option value="0">Never Expire (Permanent)</option>
</select>
</div>
</div>
<div style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 10px;">
<div style="font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px;">🛡️ Access Security & Whitelist</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 11px; color: var(--text-muted);">Password Protection (Optional):</label>
<input type="password" id="share-password-input" class="pane-quick-filter" style="width: 100%; padding: 6px 10px; font-size: 12px;" placeholder="Leave empty for open access...">
</div>
<div>
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--text-main); font-weight: 600;">
<input type="checkbox" id="share-require-email" onchange="document.getElementById('share-emails-box').style.display = this.checked ? 'block' : 'none'">
<span>Require Guest Email Whitelist (Restricted Access)</span>
</label>
<div id="share-emails-box" style="display: none; margin-top: 6px;">
<input type="text" id="share-allowed-emails" class="pane-quick-filter" style="width: 100%; padding: 6px 10px; font-size: 11px; font-family: var(--font-mono);" placeholder="client@agency.com, * @acme.corp (comma-separated)">
<div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">Only visitors with matching emails will be granted access.</div>
</div>
</div>
</div>
<div style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 10px;">
<div style="font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px;">💧 Anti-Leak Dynamic Watermarking</div>
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--text-main); font-weight: 600;">
<input type="checkbox" id="share-watermark-toggle" onchange="document.getElementById('share-watermark-text-box').style.display = this.checked ? 'block' : 'none'">
<span>Enable Diagonal Watermark on Previews & Documents</span>
</label>
<div id="share-watermark-text-box" style="display: none;">
<input type="text" id="share-watermark-text" class="pane-quick-filter" style="width: 100%; padding: 6px 10px; font-size: 11px;" value="CONFIDENTIAL • {email} • {date}" placeholder="Pattern: CONFIDENTIAL • {email} • {date}">
<div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">Tags <code>{email}</code> and <code>{date}</code> will be dynamically replaced on guest inspection.</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 11px; color: var(--text-muted);">Max Downloads Limit (0 = Unlimited):</label>
<input type="number" id="share-max-downloads" class="pane-quick-filter" style="width: 100%; padding: 6px 10px; font-size: 12px;" min="0" value="0" placeholder="0">
</div>
<div id="share-result-box" style="display: none; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); padding: 12px; border-radius: 6px;">
<div style="font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 6px;">Share Link Generated Successfully:</div>
<div style="display: flex; gap: 8px;">
<input type="text" id="share-result-url" readonly class="pane-quick-filter" style="flex: 1; font-family: var(--font-mono); font-size: 12px; padding: 6px 8px; color: var(--accent);">
<button class="btn btn-accent" style="height: 28px; padding: 0 10px;" onclick="copyShareUrl()"><i data-lucide="copy" style="width: 13px;"></i> Copy</button>
<a id="share-result-open-btn" target="_blank" class="btn btn-outline" style="height: 28px; padding: 0 10px; text-decoration: none;" title="Open in New Tab"><i data-lucide="external-link" style="width: 13px;"></i></a>
</div>
</div>
</div>
<div class="modal-footer" style="padding: 10px 16px; display: flex; justify-content: space-between; align-items: center;">
<button class="btn btn-outline" style="height: 28px; font-size: 12px;" onclick="closeModal('share-create-modal')">Close</button>
<button class="btn btn-accent" id="btn-generate-share" style="height: 28px; font-size: 12px;" onclick="executeCreateShare()"><i data-lucide="link" style="width: 13px;"></i> Save & Generate Link</button>
</div>
</div>
</div>
<div class="floating-shares-window" id="floating-shares-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="shares-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="shares-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="shares-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="shares-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="shares-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header shares-header" id="shares-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="shares-drag-handle">
<img src="assets/sharemgr.webp" alt="Shares" style="width: 17px; height: 17px; object-fit: contain; flex-shrink: 0;" onerror="this.src='assets/amber-frameless-apps.webp'">
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">Sharing Center</span>
<span class="badge badge-showcase" id="shares-count-badge" style="margin-left: 4px;">0 Active</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon desktop-only" id="btn-shares-dock" onclick="dockSharesToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-shares-maximize" onclick="toggleMaximizeShares()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingShares()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingShares()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="shares-body" id="shares-body" style="display: flex; flex-direction: column; flex: 1; overflow: hidden; height: calc(100% - 42px);">
<div class="shares-scroll-content" style="padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px;">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;">
<div style="background: var(--bg-header); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; display: flex; align-items: center; gap: 10px;">
<div style="font-size: 20px;">📦</div>
<div>
<div style="font-size: 10px; color: var(--text-muted); font-weight: 600;">ACTIVE SHARES</div>
<div style="font-size: 16px; font-weight: 700; color: var(--text-main);" id="kpi-shares-active">0</div>
</div>
</div>
<div style="background: var(--bg-header); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; display: flex; align-items: center; gap: 10px;">
<div style="font-size: 20px;">👁️</div>
<div>
<div style="font-size: 10px; color: var(--text-muted); font-weight: 600;">TOTAL VISITS</div>
<div style="font-size: 16px; font-weight: 700; color: #60a5fa;" id="kpi-shares-visits">0</div>
</div>
</div>
<div style="background: var(--bg-header); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; display: flex; align-items: center; gap: 10px;">
<div style="font-size: 20px;">🖼️</div>
<div>
<div style="font-size: 10px; color: var(--text-muted); font-weight: 600;">FILE PREVIEWS</div>
<div style="font-size: 16px; font-weight: 700; color: #10b981;" id="kpi-shares-previews">0</div>
</div>
</div>
<div style="background: var(--bg-header); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; display: flex; align-items: center; gap: 10px;">
<div style="font-size: 20px;">⬇️</div>
<div>
<div style="font-size: 10px; color: var(--text-muted); font-weight: 600;">TOTAL DOWNLOADS</div>
<div style="font-size: 16px; font-weight: 700; color: var(--accent);" id="kpi-shares-downloads">0</div>
</div>
</div>
</div>
<div style="display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap;">
<input type="text" id="shares-search-input" class="pane-quick-filter" style="padding: 4px 10px; font-size: 11.5px; min-width: 180px; flex: 1; height: 26px;" placeholder="🔍 Filter shares by name or path..." oninput="handleSharesFilterChange()">
<select id="shares-status-filter" class="pane-quick-filter" style="padding: 2px 8px; font-size: 11.5px; width: 130px; height: 26px;" onchange="handleSharesFilterChange()">
<option value="all">All Statuses</option>
<option value="active" selected>Active Only</option>
<option value="showcase">Showcase Mode</option>
<option value="dropbox">Guest Dropboxes</option>
<option value="revoked">Revoked</option>
</select>
<button class="btn btn-accent btn-xs" style="height: 26px; font-size: 11.5px; padding: 0 10px;" onclick="triggerShare()"><i data-lucide="plus" style="width: 13px;"></i> New Share</button>
<button class="btn btn-outline btn-icon btn-xs" style="width: 26px; height: 26px;" onclick="loadActiveShares()" title="Refresh Shares"><i data-lucide="rotate-cw" style="width: 13px;"></i></button>
</div>
<div style="overflow-x: auto; background: var(--bg-dark); border-radius: 6px; border: 1px solid var(--border); flex: 1; min-height: 140px;">
<table class="file-table" style="width: 100%;">
<thead>
<tr>
<th style="width: 32px; text-align: center;">Mode</th>
<th>Name / Shared Path</th>
<th style="width: 110px;">Access Gates</th>
<th style="width: 80px;">Status</th>
<th style="width: 90px;">Expires</th>
<th style="width: 100px; text-align: center;">Activity</th>
<th style="width: 130px; text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="shares-table-tbody">
<tr>
<td colspan="7" style="text-align: center; color: var(--text-muted); padding: 24px;">Loading active shares...</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer" style="padding: 8px 16px; background: var(--bg-header); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 11px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px;">
<i data-lucide="info" style="width: 13px; height: 13px;"></i> Drag files or folders here to quickly create a share link
</span>
<button class="btn btn-sm" onclick="closeFloatingShares()">Close</button>
</div>
</div>
</div>
<div class="shares-pill" id="shares-pill" style="display: none;" onclick="restoreFloatingShares()" title="Click to restore Sharing Center">
<img src="assets/sharemgr.webp" alt="Shares" style="width: 14px; height: 14px; object-fit: contain;" onerror="this.src='assets/amber-frameless-apps.webp'">
<span>Sharing Center</span>
</div>
<div class="modal-overlay" id="share-logs-modal">
<div class="modal-box" style="width: 780px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column;">
<div class="modal-header" style="min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="activity" style="width: 16px; height: 16px; color: var(--accent);"></i>
<span style="font-weight: 700; color: var(--accent); font-size: 13px;">Visitor Audit Trail:</span>
<span id="share-logs-title" style="font-size: 13px; color: var(--text-main); font-weight: 600;">Share Name</span>
</div>
<button class="btn btn-icon modal-close-btn" style="width: 28px; height: 28px;" onclick="closeModal('share-logs-modal')" title="Close"><i data-lucide="x" style="width: 14px;"></i></button>
</div>
<div class="modal-body" style="padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;">
<div style="overflow-x: auto; background: var(--bg-dark); border-radius: 6px; border: 1px solid var(--border);">
<table class="file-table" style="width: 100%;">
<thead>
<tr>
<th style="width: 130px;">Time</th>
<th style="width: 80px;">Action</th>
<th>Visitor / IP</th>
<th>Target File</th>
<th>User Agent / Browser</th>
</tr>
</thead>
<tbody id="share-logs-tbody">
<tr>
<td colspan="5" style="text-align: center; color: var(--text-muted); padding: 20px;">Loading access logs...</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer" style="padding: 10px 16px; display: flex; justify-content: flex-end;">
<button class="btn btn-outline" style="height: 28px; font-size: 12px;" onclick="closeModal('share-logs-modal')">Close</button>
</div>
</div>
</div>
<div class="modal-overlay" id="archive-compress-modal">
<div class="modal-box" style="width: 480px;">
<div class="modal-header">
<span>📦 Compress to Archive</span>
<button class="btn" onclick="closeModal('archive-compress-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div style="background: var(--bg-header); border: 1px solid var(--border); padding: 10px; border-radius: 6px; margin-bottom: 12px;" id="compress-summary">
Compressing items...
</div>
<div class="form-group">
<label>Archive Name:</label>
<input type="text" id="compress-name-input" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="archive.zip">
</div>
<div class="form-group">
<label>Archive Format:</label>
<select id="compress-format-select" class="pane-quick-filter" style="width: 100%; padding: 8px;" onchange="updateCompressExt(this.value)">
<option value="zip" selected>ZIP Archive (.zip)</option>
<option value="targz">GZipped Tarball (.tar.gz)</option>
</select>
</div>
<div class="form-group">
<label>Destination Directory:</label>
<div style="display: flex; gap: 6px;">
<input type="text" id="compress-dest-input" class="pane-quick-filter" style="flex: 1; padding: 8px;">
<button class="btn" onclick="setCompressDestToOpposite()" title="Use Opposite Pane Path"><i data-lucide="arrow-right-left"></i></button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('archive-compress-modal')">Cancel</button>
<button class="btn btn-accent" onclick="executeCompressArchive()"><i data-lucide="archive"></i> Create Archive</button>
</div>
</div>
</div>
<div class="modal-overlay" id="archive-extract-modal">
<div class="modal-box" style="width: 480px;">
<div class="modal-header">
<span>📂 Extract Archive</span>
<button class="btn" onclick="closeModal('archive-extract-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div style="background: var(--bg-header); border: 1px solid var(--border); padding: 10px; border-radius: 6px; margin-bottom: 12px;">
<div style="font-weight: 700; font-size: 13px;" id="extract-archive-name">archive.zip</div>
<div style="font-size: 11px; color: var(--text-muted); font-family: var(--font-mono);" id="extract-archive-path">/path/to/archive</div>
</div>
<div class="form-group">
<label>Extraction Destination:</label>
<select id="extract-mode-select" class="pane-quick-filter" style="width: 100%; padding: 8px;" onchange="handleExtractModeChange(this.value)">
<option value="here" selected>Extract Here (Current Folder)</option>
<option value="subfolder">Extract to New Subfolder (/<span id="extract-subfolder-label">name</span>/)</option>
<option value="opposite">Extract to Opposite Pane</option>
<option value="custom">Custom Path...</option>
</select>
</div>
<div class="form-group" id="extract-custom-path-group" style="display: none;">
<label>Target Directory Path:</label>
<input type="text" id="extract-target-dir-input" class="pane-quick-filter" style="width: 100%; padding: 8px;">
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('archive-extract-modal')">Cancel</button>
<button class="btn btn-accent" onclick="executeExtractArchive()"><i data-lucide="folder-archive"></i> Extract</button>
</div>
</div>
</div>
<div class="modal-overlay" id="settings-modal">
<div class="modal-box settings-modal-box">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 7px;"><img src="assets/amber-frameless-settings.webp" alt="Settings" style="width: 16px; height: 16px; object-fit: contain;"> User Settings & Preferences</span>
<button class="btn" onclick="closeModal('settings-modal')"><i data-lucide="x"></i></button>
</div>
<div class="settings-modal-layout">
<div class="settings-sidebar">
<div class="settings-sidebar-group-title">Appearance & UI</div>
<button class="settings-nav-btn active" onclick="switchSettingsTab('tab-general')"><i data-lucide="sliders"></i> General</button>
<button class="settings-nav-btn" onclick="switchSettingsTab('tab-palette')"><i data-lucide="palette"></i> Themes</button>
<button class="settings-nav-btn" onclick="switchSettingsTab('tab-icons')"><i data-lucide="sparkles"></i> Icons & Filetypes</button>
<div class="settings-sidebar-group-title">Workflow & Chewtoys</div>
<button class="settings-nav-btn" onclick="switchSettingsTab('tab-plugins')"><i data-lucide="puzzle"></i> Chewtoys & Extensions</button>
<button class="settings-nav-btn" onclick="switchSettingsTab('tab-tools')"><img src="assets/amber-frameless-apps.webp" alt="Tools" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle;"> Tools Menu</button>
<button class="settings-nav-btn desktop-only-setting" id="settings-nav-desktop-apps" onclick="switchSettingsTab('tab-desktop-apps')"><i data-lucide="monitor"></i> External Programs</button>
<button class="settings-nav-btn desktop-only-setting" id="settings-nav-openwith" onclick="switchSettingsTab('tab-openwith')"><i data-lucide="external-link"></i> Open With</button>
<button class="settings-nav-btn" onclick="switchSettingsTab('tab-context')"><i data-lucide="mouse-pointer"></i> Context Menu</button>
<button class="settings-nav-btn" onclick="switchSettingsTab('tab-templates')"><i data-lucide="file-code-2"></i> Templates</button>
<div class="settings-sidebar-group-title">System & Shortcuts</div>
<button class="settings-nav-btn" onclick="switchSettingsTab('tab-bookmarks')"><i data-lucide="bookmark"></i> Bookmarks</button>
<button class="settings-nav-btn" onclick="switchSettingsTab('tab-keys')"><i data-lucide="keyboard"></i> Keybindings</button>
<button class="settings-nav-btn" onclick="switchSettingsTab('tab-about')"><img src="assets/amber-frameless-info.webp" alt="About" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle;"> About Brum</button>
</div>
<div class="settings-content-area">
<div class="settings-tab-content active" id="tab-general">
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="layout-grid"></i> Layout & Viewport Defaults
</h4>
</div>
<p class="settings-card-desc">Configure default multi-panel arrangements and touchscreen panel limits.</p>
<div class="settings-grid-2col">
<div class="settings-field">
<label class="settings-field-label" for="setting-default-layout">Default Desktop Layout:</label>
<select id="setting-default-layout" class="settings-select">
<option value="layout-single">1 Single Pane</option>
<option value="layout-dual-vertical" selected>2 Panes (Dual Vertical)</option>
<option value="layout-dual-horizontal">2 Panes (Dual Horizontal)</option>
<option value="layout-triple">3 Panes (Triple Columns)</option>
<option value="layout-triple-stacked">3 Panes (1 Main + 2 Stacked)</option>
<option value="layout-quad">4 Panes (2x2 Quad Grid)</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-phone-tablet-max-panes">Phone & Tablet Maximum Panels:</label>
<select id="setting-phone-tablet-max-panes" class="settings-select" onchange="updatePhoneTabletMaxPanes(this.value)">
<option value="2" selected>2 Panels (Default: Cap at Dual Panels for Mobile & Tablets)</option>
<option value="1">1 Panel (Single Panel Focus Only)</option>
<option value="3">3 Panels (Allow Triple Layout on Tablets/Foldables)</option>
<option value="4">4 Panels (Allow Full Quad Layout on Tablets/Foldables)</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-pane-tabs-mode">Multi-Tab Panels (Tab Strips):</label>
<select id="setting-pane-tabs-mode" class="settings-select" onchange="updatePaneTabsMode(this.value)">
<option value="pc_only" selected>PC & Desktop Only (>1024px)</option>
<option value="always">All Viewports (PC, Tablet & Phone)</option>
<option value="pc_tablet">PC & Tablet (≥600px)</option>
<option value="disabled">Disabled (Single Tab per Panel)</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-mobile-bottom-bar-mode">Mobile & Tablet Bottom Actions Bar:</label>
<select id="setting-mobile-bottom-bar-mode" class="settings-select" onchange="updateMobileBottomBarMode(this.value)">
<option value="icons_text" selected>Icons and Text (Default)</option>
<option value="icons_only">Icons Only</option>
<option value="off">Off (Hidden)</option>
</select>
<div class="settings-field-hint">Display mode for bottom command bar on touch, phone, and tablet screens.</div>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 4px; margin-top: 4px;">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-pane-reorder" onchange="togglePaneReordering(this.checked)" checked>
<div>
<strong>Drag-and-Drop Panel Rearrangement</strong>
<div class="settings-field-hint">Allow dragging the panel number badge (1, 2, 3, 4) in the header to swap and reorder panels.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-activate-on-hover" onchange="toggleActivateOnHover(this.checked)">
<div>
<strong>Activate Panel on Mouse Hover (Focus Follows Mouse)</strong>
<div class="settings-field-hint">Automatically activate panel and switch keyboard focus when hovering the mouse over it.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-sync-scroll" onchange="toggleSyncScroll(this.checked)">
<div>
<strong>Synchronize Pane Scrolling (Sync Scroll)</strong>
<div class="settings-field-hint">Mirror vertical and horizontal scroll positions across all visible file panels.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-sync-nav" onchange="toggleSyncNav(this.checked)">
<div>
<strong>Synchronize Directory Navigation (Sync Nav)</strong>
<div class="settings-field-hint">Mirror relative subfolder and parent folder traversal across visible panels.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-show-fkeys" onchange="toggleFKeyBar(this.checked)">
<div>
<strong>Bottom Function Key Bar (F1..F10)</strong>
<div class="settings-field-hint">Display classic orthodox commander function key shortcuts at the bottom.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-media-stop-on-close" onchange="toggleMediaStopOnClose(this.checked)" checked>
<div>
<strong>Stop Playback on Close (Media Player)</strong>
<div class="settings-field-hint">Stop audio and video playback when closing the Media Player. Use the Minimize button (-) to keep playing in the background pill.</div>
</div>
</label>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="power"></i> Startup & Session Recovery
</h4>
</div>
<p class="settings-card-desc">Configure initial panel directories, session restoration, and remote host startup fallback.</p>
<div class="settings-grid-2col">
<div class="settings-field">
<label class="settings-field-label" for="setting-startup-mode">Startup Panel Directories:</label>
<select id="setting-startup-mode" class="settings-select" onchange="handleStartupSettingChange()">
<option value="restore" selected>🔄 Restore Last Session (Remember and restore last opened folders)</option>
<option value="home">🏠 User Home (Always open Home ~ across all panels)</option>
<option value="root">📁 Filesystem Root (Always open Root / or C:\ across all panels)</option>
<option value="custom">⚙️ Custom Presets (Define specific folders per panel)</option>
</select>
<div class="settings-field-hint">Choose what folders are opened when launching Brum.</div>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-startup-remote-fallback">Remote Host on Startup:</label>
<select id="setting-startup-remote-fallback" class="settings-select" onchange="handleStartupSettingChange()">
<option value="home_fallback" selected>🏠 Reset to Local Home (Fast boot, avoid network lag/timeouts)</option>
<option value="reconnect">🌐 Reconnect to Remote Node (May delay startup if host is offline)</option>
</select>
<div class="settings-field-hint">Panes connected to remote nodes will boot locally to eliminate network connection lag.</div>
</div>
</div>
<div id="wrapper-startup-custom-presets" class="settings-field" style="display: none; margin-top: 8px; padding: 10px; background: rgba(0, 0, 0, 0.15); border: 1px solid var(--border); border-radius: var(--radius);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<label class="settings-field-label" style="margin-bottom: 0;"><strong>Panel Custom Startup Folders:</strong></label>
<button type="button" class="btn btn-xs btn-outline" onclick="captureCurrentPathsForCustomStartup()" style="height: 24px; font-size: 11px; display: flex; align-items: center; gap: 4px;">
<i data-lucide="folder-check" style="width: 12px; height: 12px;"></i> Use Current Panel Paths
</button>
</div>
<div class="settings-grid-2col" style="gap: 8px;">
<div>
<label class="settings-field-label" style="font-size: 11px;">Panel 1 Default Path:</label>
<input type="text" id="setting-startup-custom-path-0" class="settings-input" style="font-family: var(--font-mono); font-size: 11px;" placeholder="~ (Leave empty for User Home)" onchange="handleStartupSettingChange()">
</div>
<div>
<label class="settings-field-label" style="font-size: 11px;">Panel 2 Default Path:</label>
<input type="text" id="setting-startup-custom-path-1" class="settings-input" style="font-family: var(--font-mono); font-size: 11px;" placeholder="~ (Leave empty for User Home)" onchange="handleStartupSettingChange()">
</div>
<div>
<label class="settings-field-label" style="font-size: 11px;">Panel 3 Default Path:</label>
<input type="text" id="setting-startup-custom-path-2" class="settings-input" style="font-family: var(--font-mono); font-size: 11px;" placeholder="~ (Leave empty for User Home)" onchange="handleStartupSettingChange()">
</div>
<div>
<label class="settings-field-label" style="font-size: 11px;">Panel 4 Default Path:</label>
<input type="text" id="setting-startup-custom-path-3" class="settings-input" style="font-family: var(--font-mono); font-size: 11px;" placeholder="~ (Leave empty for User Home)" onchange="handleStartupSettingChange()">
</div>
</div>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="zap"></i> File Operations & Transfers
</h4>
</div>
<p class="settings-card-desc">Configure copy engine defaults, background job notifications, and drag-and-drop actions.</p>
<div class="settings-grid-2col">
<div class="settings-field">
<label class="settings-field-label" for="setting-default-copy-action">Default Copy (F5) Engine:</label>
<select id="setting-default-copy-action" class="settings-select" onchange="updateDefaultCopyAction(this.value)">
<option value="deltacopy" selected>⚡ DeltaCopy (Resume & Checksums)</option>
<option value="standard">Standard Copy (Direct Transfer)</option>
</select>
<div class="settings-field-hint">Choose which transfer engine is highlighted and default on F5.</div>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-task-verbosity">Transfer Manager Display Detail:</label>
<select id="setting-task-verbosity" class="settings-select" onchange="setTaskVerbosity(this.value)">
<option value="detailed" selected>Detailed (TeraCopy Stream, Files & Hashes)</option>
<option value="compact">Compact (Overall Progress & Speed Only)</option>
<option value="log">Diagnostic Stream / Verbose Logs</option>
</select>
<div class="settings-field-hint">Choose between rich per-file streams or compact progress.</div>
</div>
</div>
<div class="settings-grid-2col" style="margin-top: 4px;">
<div class="settings-field">
<label class="settings-field-label" for="setting-dnd-default-action">Default Drag-and-Drop Action:</label>
<select id="setting-dnd-default-action" class="settings-select" onchange="handleDndSettingChange()">
<option value="ask">❓ Ask Every Time (Prompt for Move / Copy)</option>
<option value="move">📦 Move (Move items to destination)</option>
<option value="copy">📋 Copy (Copy items to destination)</option>
</select>
<div class="settings-field-hint">Keyboard modifiers: <kbd>Shift</kbd> = Move, <kbd>Alt</kbd>/<kbd>Ctrl</kbd> = Copy.</div>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-dnd-prompt-mode">Drag-and-Drop Confirmation:</label>
<select id="setting-dnd-prompt-mode" class="settings-select" onchange="handleDndSettingChange()">
<option value="ask">💬 Always Ask / Show Confirmation Dialog</option>
<option value="direct">⚡ Direct Execution (No Asking / Silent Action)</option>
</select>
<div class="settings-field-hint">Direct execution performs action immediately upon mouse drop.</div>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 4px; margin-top: 4px;">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-dnd-paranoid-prompt" checked onchange="handleDndSettingChange()">
<div>
<strong>Paranoid Mode Prompt on Drag-and-Drop</strong>
<div class="settings-field-hint">Show confirmation dialog before initiating paranoid SHA-256 verification transfers.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-auto-open-tasks" checked>
<div>
<strong>Floating Transfer Window</strong>
<div class="settings-field-hint">Automatically open floating transfer manager when background jobs start.</div>
</div>
</label>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="shield-check"></i> Navigation, Safety & Trash Bin
</h4>
</div>
<p class="settings-card-desc">Safety prompts, directory navigation preferences, and trash retention.</p>
<div style="display: flex; flex-direction: column; gap: 4px;">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-show-hidden" onchange="toggleGlobalDotfiles(this.checked)">
<div>
<strong>Show Hidden Files & Dotfiles</strong>
<div class="settings-field-hint">Display hidden files (e.g. <code>.bashrc</code>, <code>.git</code>) across all directory panels.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-confirm-delete" checked>
<div>
<strong>Confirm before deleting files</strong>
<div class="settings-field-hint">Prompt for confirmation before moving files to trash or deleting.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-confirm-overwrite" checked>
<div>
<strong>Confirm before overwriting existing files</strong>
<div class="settings-field-hint">Show overwrite warning dialog when files with the same name already exist.</div>
</div>
</label>
<label class="settings-checkbox-row windows-only-setting">
<input type="checkbox" id="setting-windows-native-ops" checked onchange="toggleWindowsNativeOpsSetting(this.checked)">
<div>
<strong>Windows Native Shell & Recycle Bin</strong>
<div class="settings-field-hint">Use Windows native functions ($Recycle.Bin, SHFileOperation) instead of Brum's internal POSIX filesystem engine.</div>
</div>
</label>
<label class="settings-checkbox-row windows-only-setting">
<input type="checkbox" id="setting-detect-file-locks" checked onchange="toggleDetectFileLocksSetting(this.checked)">
<div>
<strong>Identify Locking Processes (Restart Manager)</strong>
<div class="settings-field-hint">Inspect and report active applications/processes (e.g. Explorer, Excel, Thumbs.db) locking files on Windows.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-remember-paths" checked>
<div>
<strong>Remember last opened directories across sessions</strong>
<div class="settings-field-hint">Restore pane directory paths on subsequent application launches.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-dblclick-up" checked>
<div>
<strong>Double-Click Navigation</strong>
<div class="settings-field-hint">Double-click in empty panel space jumps up to parent directory.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-show-parent-dir" checked>
<div>
<strong>Parent Directory ("..") Row</strong>
<div class="settings-field-hint">Show classic ".." parent entry at the top of file tables.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-haptic-feedback" checked onchange="toggleHapticFeedbackSetting(this.checked)">
<div>
<strong>Haptic Touch Feedback</strong>
<div class="settings-field-hint">Vibration feedback on touch swipes, row selections & pull-to-refresh on mobile devices.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-show-global-refresh" onchange="toggleGlobalRefreshButton(this.checked)">
<div>
<strong>Global Header Refresh Button</strong>
<div class="settings-field-hint">Show global "Refresh All" button in the top header bar (off by default).</div>
</div>
</label>
</div>
<div style="padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px;">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-user-trash-enabled" checked onchange="toggleTrashSetting(this.checked)">
<div>
<strong>Enable Safe Trash Bin</strong>
<div class="settings-field-hint">Move deleted items to trash directory instead of immediate permanent deletion.</div>
</div>
</label>
<div id="wrapper-custom-trash-dir" class="settings-field" style="margin-left: 28px;">
<label class="settings-field-label" for="setting-user-custom-trash">Custom Trash Directory (Optional):</label>
<input type="text" id="setting-user-custom-trash" class="settings-input" placeholder="Leave empty for OS default (~/.local/share/Trash)" onchange="saveCustomTrashDir(this.value)">
<div class="settings-field-hint">When a custom directory is set, deleted files are safely timestamped and preserved in that folder.</div>
</div>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="notebook-pen"></i> NoteDog Notes Directory
</h4>
</div>
<p class="settings-card-desc">Configure where NoteDog ChewToy and TUI store notebooks, markdown notes, and sections.</p>
<div class="settings-field">
<div style="display: flex; gap: 8px; align-items: center;">
<input type="text" id="setting-notedog-folder" class="settings-input" style="flex: 1; font-family: var(--font-mono);" placeholder="~/Notes" onchange="saveNoteDogFolderSetting(this.value)">
<button type="button" class="btn btn-sm btn-outline" onclick="browseNoteDogFolder()" title="Use active pane's current path as notes folder" style="height: 28px; white-space: nowrap; display: flex; align-items: center; gap: 5px;">
<i data-lucide="folder-check" style="width: 13px; height: 13px;"></i> Use Active Pane
</button>
</div>
<div class="settings-field-hint">Also synchronized with <code>config.toml</code> (<code>[notedog] notes_folder</code>) and NoteDog TUI (<code>~/.config/notedog/notedog.toml</code>).</div>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="columns-3"></i> Columns & File List Display
</h4>
<button type="button" class="btn btn-xs btn-outline" onclick="resetAllColumnWidths()" style="display: flex; align-items: center; gap: 4px; height: 26px;">
<i data-lucide="rotate-ccw" style="width: 12px; height: 12px;"></i> Reset Column Widths
</button>
</div>
<p class="settings-card-desc">Customize default view modes, table column visibility, and row formatting.</p>
<div class="settings-field">
<label class="settings-field-label">Default Panel View Mode:</label>
<div style="display: flex; flex-direction: column; gap: 4px; margin-top: 2px;">
<label class="settings-checkbox-row">
<input type="radio" name="setting-view-mode" value="details" checked onchange="setDefaultViewMode(this.value)">
<div>
<strong>Details Table</strong>
<div class="settings-field-hint">Orthodox table with Name, Ext, Size, Modified, Mode, Owner, Group, SHA-256.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="radio" name="setting-view-mode" value="grid" onchange="setDefaultViewMode(this.value)">
<div>
<strong>Thumbnail Gallery / Grid</strong>
<div class="settings-field-hint">Visual preview cards for photos, media & documents.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="radio" name="setting-view-mode" value="compact" onchange="setDefaultViewMode(this.value)">
<div>
<strong>Compact Multi-Column List</strong>
<div class="settings-field-hint">High-density multi-column filename browser.</div>
</div>
</label>
</div>
</div>
<div class="settings-field" style="margin-top: 6px;">
<label class="settings-field-label">Visible Table Columns (Details Mode):</label>
<div class="settings-grid-2col" style="margin-top: 4px;" id="column-visibility-checkboxes">
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-name" checked disabled> <strong>File Name</strong> (Always Visible)</label>
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-ext" onchange="toggleColumnVisibility('ext', this.checked)"> File Extension (.ext)</label>
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-size" checked onchange="toggleColumnVisibility('size', this.checked)"> File Size</label>
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-modified" checked onchange="toggleColumnVisibility('modified', this.checked)"> Date Modified</label>
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-created" onchange="toggleColumnVisibility('created', this.checked)"> Date Created</label>
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-mode" checked onchange="toggleColumnVisibility('mode', this.checked)"> Permissions / Mode</label>
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-owner" checked onchange="toggleColumnVisibility('owner', this.checked)"> Owner</label>
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-group" onchange="toggleColumnVisibility('group', this.checked)"> Group</label>
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-hash" onchange="toggleColumnVisibility('hash', this.checked)"> SHA-256 Checksum</label>
<label class="settings-checkbox-row"><input type="checkbox" id="col-toggle-tags" onchange="toggleColumnVisibility('tags', this.checked)"> Tags & Colors</label>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--border);">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-sticky-col-headers" checked onchange="toggleStickyColHeaders(this.checked)">
<div>
<strong>Sticky Column Headers (Frosted Glass)</strong>
<div class="settings-field-hint">Pin column header to the top when scrolling with a dynamic frosted glass effect.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-col-separators" checked onchange="toggleColSeparators(this.checked)">
<div>
<strong>Discrete Column Separators</strong>
<div class="settings-field-hint">Display subtle vertical dividers between table columns.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-compact-dates" checked onchange="toggleCompactDates(this.checked)">
<div>
<strong>Compact Date Format</strong>
<div class="settings-field-hint">Use short, space-saving timestamps (e.g. <code>09-08 09:15</code> / <code>YYYY-MM-DD</code>).</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-show-dir-tag" onchange="toggleShowDirTag(this.checked)">
<div>
<strong>Show classic <DIR> tag</strong>
<div class="settings-field-hint">Display classic <code><DIR></code> in file size column for directories (leave unchecked for clean blank folder sizes).</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-file-list-multiline" onchange="toggleFileListMultiline(this.checked)">
<div>
<strong>Multi-Line Subtext on Phone Screens</strong>
<div class="settings-field-hint">Wrap secondary metadata into a second subtext line on narrow phone screens.</div>
</div>
</label>
</div>
</div>
<div class="settings-group-card web-only-setting server-only-setting">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="cloud"></i> Cross-Device Workspace Sync (Server Mode)
</h4>
<span id="cross-device-sync-badge" class="badge" style="background: rgba(16, 185, 129, 0.15); color: #34d399; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;">Cloud Sync Active</span>
</div>
<p class="settings-card-desc">Your pane custom names, colors, active layout, and start directories persist across your phones, tablets, laptops, and desktop browsers.</p>
<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;">
<button type="button" class="btn btn-sm btn-accent" onclick="saveCurrentWorkspaceAsDefault()" style="font-size: 11px; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px;">
<i data-lucide="save" style="width: 13px; height: 13px;"></i> Save Current Workspace as Default
</button>
<button type="button" class="btn btn-sm btn-outline" onclick="resetServerPreferences()" style="font-size: 11px; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;">
<i data-lucide="rotate-ccw" style="width: 13px; height: 13px;"></i> Reset Server Defaults
</button>
</div>
</div>
<div class="settings-group-card desktop-only-setting">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="monitor"></i> Desktop, Windowing & System Tray
</h4>
<span class="user-role-badge" style="background: rgba(245, 158, 11, 0.2); color: var(--accent);">Desktop Standalone Only</span>
</div>
<p class="settings-card-desc">Configure native window behavior, system tray integration, and global hotkeys for Linux (Hyprland, X11, Wayland), macOS, and Windows.</p>
<div style="display: flex; flex-direction: column; gap: 4px;">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-minimize-tray" checked onchange="toggleMinimizeToTray(this.checked)">
<div>
<strong>Minimize to System Tray on Close</strong>
<div class="settings-field-hint">Closing the window keeps Brum running in the background system tray.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-start-minimized" onchange="toggleStartMinimized(this.checked)">
<div>
<strong>Start Minimized</strong>
<div class="settings-field-hint">Launch directly to system tray on system boot / autostart.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-desktop-decorations" checked onchange="toggleWindowDecorations(this.checked)">
<div>
<strong>Native Window Frame & Decorations</strong>
<div class="settings-field-hint">Uncheck for a clean frameless window that tiles seamlessly without header waste in Hyprland. Launch with <code>brum --no-decorations</code>.</div>
</div>
</label>
</div>
<div class="settings-field" style="margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--border);">
<label class="settings-field-label" for="setting-global-hotkey">Global Summon / Toggle Hotkey:</label>
<div style="display: flex; gap: 8px; align-items: center;">
<input type="text" id="setting-global-hotkey" class="settings-input" style="width: 220px;" value="Super+C" readonly>
<span class="user-role-badge" style="background: rgba(245, 158, 11, 0.2); color: var(--accent);">Default: Super+C</span>
</div>
<div class="settings-field-hint">Pressing this keybind anywhere in your operating system brings Brum to the foreground instantly.</div>
</div>
</div>
</div>
<div class="settings-tab-content desktop-only-setting" id="tab-desktop-apps" style="padding: 16px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;">
<div>
<h4 style="margin: 0; font-size: 13px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px;">
<i data-lucide="monitor" style="width: 16px; height: 16px;"></i> External Programs & Desktop Handlers
</h4>
<div class="form-hint" style="margin-top: 2px;">Configure external text editors, media viewers, and terminal emulators for standalone desktop mode.</div>
</div>
<span class="user-role-badge" style="background: rgba(245, 158, 11, 0.2); color: var(--accent);">Desktop Standalone Only</span>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label style="font-weight: 700; color: var(--text);">External Text & Code Editor (F4):</label>
<div style="display: flex; gap: 8px; margin-bottom: 6px;">
<input type="text" id="setting-ext-editor" class="pane-quick-filter" style="flex: 1; font-family: var(--font-mono); padding: 7px 10px;" placeholder='e.g. code "%1" or gedit "%1" or kate "%1" or subl "%1"'>
<button class="btn btn-sm" onclick="testExternalProgram('editor')" title="Test launching the configured editor"><i data-lucide="play"></i> Test</button>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;">
<span style="font-size: 10px; color: var(--text-muted); align-self: center; margin-right: 2px;">Quick Presets:</span>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('editor', 'code "%1"')">VS Code</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('editor', 'codium "%1"')">VSCodium</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('editor', 'gedit "%1"')">Gedit</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('editor', 'kate "%1"')">Kate</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('editor', 'subl "%1"')">Sublime</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('editor', 'notepad++ "%1"')">Notepad++</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('editor', 'nvim-qt "%1"')">Neovim GUI</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('editor', 'xdg-open "%1"')">System Default</button>
</div>
<label style="font-weight: normal; display: flex; align-items: center; gap: 8px;">
<input type="checkbox" id="setting-use-ext-editor-f4" onchange="toggleUseExtEditor(this.checked)">
<span><b>Override F4 (Edit):</b> Launch external editor when pressing F4 or clicking Edit (instead of built-in EditorDog)</span>
</label>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label style="font-weight: 700; color: var(--text);">External Document & Media Viewer (F3):</label>
<div style="display: flex; gap: 8px; margin-bottom: 6px;">
<input type="text" id="setting-ext-viewer" class="pane-quick-filter" style="flex: 1; font-family: var(--font-mono); padding: 7px 10px;" placeholder='e.g. xdg-open "%1" or vlc "%1" or mpv "%1" or eog "%1"'>
<button class="btn btn-sm" onclick="testExternalProgram('viewer')" title="Test launching the configured viewer"><i data-lucide="play"></i> Test</button>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;">
<span style="font-size: 10px; color: var(--text-muted); align-self: center; margin-right: 2px;">Quick Presets:</span>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('viewer', 'xdg-open "%1"')">System Default (xdg-open / open)</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('viewer', 'vlc "%1"')">VLC Media Player</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('viewer', 'mpv "%1"')">MPV Video Player</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('viewer', 'eog "%1"')">Eye of GNOME (eog)</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('viewer', 'feh "%1"')">Feh Image Viewer</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('viewer', 'zathura "%1"')">Zathura PDF</button>
</div>
<label style="font-weight: normal; display: flex; align-items: center; gap: 8px;">
<input type="checkbox" id="setting-use-ext-viewer-f3" onchange="toggleUseExtViewer(this.checked)">
<span><b>Override F3 (Quick View):</b> Launch external viewer when pressing F3 or clicking Quick View</span>
</label>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<label style="font-weight: 700; color: var(--text);">External Terminal Emulator:</label>
<div style="display: flex; gap: 8px; margin-bottom: 6px;">
<input type="text" id="setting-ext-terminal" class="pane-quick-filter" style="flex: 1; font-family: var(--font-mono); padding: 7px 10px;" placeholder='e.g. alacritty --working-directory "%1" or kitty --directory "%1"'>
<button class="btn btn-sm" onclick="testExternalProgram('terminal')" title="Test launching the configured terminal"><i data-lucide="terminal"></i> Test</button>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 6px;">
<span style="font-size: 10px; color: var(--text-muted); align-self: center; margin-right: 2px;">Quick Presets:</span>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('terminal', 'alacritty --working-directory "%1"')">Alacritty</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('terminal', 'kitty --directory "%1"')">Kitty</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('terminal', 'gnome-terminal --working-directory="%1"')">GNOME Terminal</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('terminal', 'konsole --workdir "%1"')">Konsole</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('terminal', 'wezterm start --cwd "%1"')">WezTerm</button>
<button type="button" class="ext-preset-btn" onclick="applyExternalProgramPreset('terminal', 'x-terminal-emulator')">XTerm / Default</button>
</div>
</div>
<div style="margin-top: 20px; padding: 10px 12px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 6px; font-size: 11px;">
<div style="font-weight: 700; color: var(--accent); margin-bottom: 4px;">Dynamic Command Tokens:</div>
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
<span><code>%1</code> or <code>{file}</code> Target file/directory path</span>
<span><code>{dir}</code> Parent directory path</span>
<span><code>{selection}</code> All selected file paths</span>
<span><code>{target_pane}</code> Opposing pane path</span>
</div>
</div>
</div>
<div class="settings-tab-content desktop-only-setting" id="tab-openwith">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<div>
<h4 style="color: var(--accent); margin: 0;">Open With & External Application Handlers</h4>
<p style="color: var(--text-muted); font-size: 11px; margin: 4px 0 0;">Map file extensions to external desktop applications and custom launchers.</p>
</div>
<button class="btn btn-accent btn-sm" onclick="showAddOpenWithRulePrompt()"><i data-lucide="plus"></i> Add Handler</button>
</div>
<div id="openwith-rules-list" style="margin-top: 12px;">
</div>
<div id="openwith-rule-form" style="display: none; background: var(--bg-active); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-top: 12px;">
<input type="hidden" id="openwith-edit-id" value="">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
<div>
<label style="font-size: 11px; display: block; margin-bottom: 4px;">Application / Rule Name:</label>
<input type="text" id="openwith-input-name" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. VLC Player">
</div>
<div>
<label style="font-size: 11px; display: block; margin-bottom: 4px;">Matching Extensions (comma-separated):</label>
<input type="text" id="openwith-input-exts" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. mp4, mkv, avi, webm">
</div>
</div>
<div style="margin-bottom: 10px;">
<label style="font-size: 11px; display: block; margin-bottom: 4px;">Command Line (%1 or {file} = full path):</label>
<input type="text" id="openwith-input-cmd" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono);" placeholder='e.g. vlc "%1" or code "%1"'>
</div>
<div style="display: flex; gap: 8px;">
<button class="btn btn-accent btn-sm" onclick="saveOpenWithRule()"><i data-lucide="check"></i> Save Rule</button>
<button class="btn btn-sm" onclick="hideOpenWithRuleForm()">Cancel</button>
</div>
</div>
</div>
<div class="settings-tab-content" id="tab-context">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<div>
<h4 style="color: var(--accent); margin: 0;">Context Menu Customizer & Shell Actions</h4>
<p style="color: var(--text-muted); font-size: 11px; margin: 4px 0 0;">Toggle built-in context actions and create custom scripts with parameter tokens.</p>
</div>
<button class="btn btn-accent btn-sm" onclick="showAddCustomActionPrompt()"><i data-lucide="plus"></i> New Shell Action</button>
</div>
<div class="form-group" style="margin-top: 12px;">
<label>Built-in Context Menu Items Visibility:</label>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px;" id="context-items-checkboxes">
<label style="font-weight: normal; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="ctx-toggle-view" checked onchange="toggleContextItemVisibility('view', this.checked)"> Quick View (F3)</label>
<label style="font-weight: normal; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="ctx-toggle-edit" checked onchange="toggleContextItemVisibility('edit', this.checked)"> Edit in EditorDog (F4)</label>
<label style="font-weight: normal; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="ctx-toggle-openwith" checked onchange="toggleContextItemVisibility('openwith', this.checked)"> Open With Submenu</label>
<label style="font-weight: normal; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="ctx-toggle-download" checked onchange="toggleContextItemVisibility('download', this.checked)"> Download / Batch Zip</label>
<label style="font-weight: normal; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="ctx-toggle-share" checked onchange="toggleContextItemVisibility('share', this.checked)"> Share Link / Guest Dropbox</label>
<label style="font-weight: normal; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="ctx-toggle-diff" checked onchange="toggleContextItemVisibility('diff', this.checked)"> Compare / Diff (F9)</label>
</div>
</div>
<div class="form-group" style="margin-top: 16px;">
<label>User-Defined Shell Actions ({file}, {dir}, {selection}, {target_pane}):</label>
<div id="custom-actions-list" style="margin-top: 8px;">
</div>
</div>
<div id="custom-action-form" style="display: none; background: var(--bg-active); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-top: 12px;">
<input type="hidden" id="custom-action-edit-id" value="">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
<div>
<label style="font-size: 11px; display: block; margin-bottom: 4px;">Action Label:</label>
<input type="text" id="custom-action-input-label" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. Git Pull Repo">
</div>
<div>
<label style="font-size: 11px; display: block; margin-bottom: 4px;">Lucide Icon Name:</label>
<input type="text" id="custom-action-input-icon" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. git-branch, terminal, file-code">
</div>
</div>
<div style="margin-bottom: 10px;">
<label style="font-size: 11px; display: block; margin-bottom: 4px;">Shell Command (Tokens: <code>{file}</code>, <code>{dir}</code>, <code>{selection}</code>, <code>{target_pane}</code>):</label>
<input type="text" id="custom-action-input-cmd" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono);" placeholder="e.g. git -C {dir} pull or 7z a -tzip archive.zip {selection}">
</div>
<div style="display: flex; gap: 8px;">
<button class="btn btn-accent btn-sm" onclick="saveCustomShellAction()"><i data-lucide="check"></i> Save Action</button>
<button class="btn btn-sm" onclick="hideCustomActionForm()">Cancel</button>
</div>
</div>
</div>
<div class="settings-tab-content" id="tab-templates" style="padding: 16px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<div>
<h4 style="margin: 0; font-size: 13px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px;">
<i data-lucide="file-code-2" style="width: 16px; height: 16px;"></i> File & Document Templates
</h4>
<div class="form-hint" style="margin-top: 2px;">Create new files with boilerplate headers, dynamic dates, and variable replacement anywhere via right-click.</div>
</div>
<div style="display: flex; gap: 6px;">
<button class="btn btn-sm btn-accent" onclick="openCreateTemplateModal()"><i data-lucide="plus"></i> + New Template</button>
<button class="btn btn-sm" onclick="resetFileTemplatesToDefault()"><i data-lucide="rotate-ccw"></i> Reset Defaults</button>
</div>
</div>
<div style="margin-bottom: 14px; padding: 10px 12px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 6px; font-size: 11px;">
<div style="font-weight: 700; color: var(--accent); margin-bottom: 4px;">Dynamic Template Variables:</div>
<div style="display: flex; flex-wrap: wrap; gap: 6px;">
<span class="var-chip" onclick="copyVariableTag('{{TITLE}}')"><code>{{TITLE}}</code> Title</span>
<span class="var-chip" onclick="copyVariableTag('{{FILENAME}}')"><code>{{FILENAME}}</code> Filename</span>
<span class="var-chip" onclick="copyVariableTag('{{NAME}}')"><code>{{NAME}}</code> Base Name</span>
<span class="var-chip" onclick="copyVariableTag('{{DATE}}')"><code>{{DATE}}</code> YYYY-MM-DD</span>
<span class="var-chip" onclick="copyVariableTag('{{TIME}}')"><code>{{TIME}}</code> HH:MM:SS</span>
<span class="var-chip" onclick="copyVariableTag('{{USER}}')"><code>{{USER}}</code> Username</span>
<span class="var-chip" onclick="copyVariableTag('{{ISO_DATE}}')"><code>{{ISO_DATE}}</code> ISO8601</span>
<span class="var-chip" onclick="copyVariableTag('{{YEAR}}')"><code>{{YEAR}}</code> Year</span>
</div>
</div>
<div id="settings-templates-list" style="display: flex; flex-direction: column; gap: 8px;">
</div>
</div>
<div class="settings-tab-content" id="tab-plugins" style="padding: 16px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; flex-wrap: wrap;">
<div>
<h4 style="margin: 0; font-size: 13.5px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 8px;">
<i data-lucide="puzzle" style="width: 18px; height: 18px; color: var(--accent);"></i> Chewtoys & Extensions (.grr)
</h4>
<div class="form-hint" style="margin-top: 2px;">
Browse, enable, configure, and install modular Chewtoys into your workspace.
</div>
</div>
<div style="display: flex; gap: 8px; align-items: center;">
<input type="file" id="input-chewtoy-file" accept=".grr,.zip" style="display: none;" onchange="handleChewToyFileSelect(event)">
<button class="btn btn-sm" id="btn-install-chewtoy" onclick="document.getElementById('input-chewtoy-file').click()" style="display: flex; align-items: center; gap: 6px; background: rgba(245, 158, 11, 0.15); border-color: var(--accent); color: var(--accent); font-weight: 600;">
<i data-lucide="plus"></i> Install Chewtoy (.grr)
</button>
<button class="btn btn-sm btn-icon" onclick="loadInstalledChewToys(true)" title="Refresh Chewtoys"><i data-lucide="rotate-ccw"></i></button>
</div>
</div>
<div class="chewtoy-dropzone" id="chewtoy-dropzone" ondragover="handleChewToyDragOver(event)" ondragleave="handleChewToyDragLeave(event)" ondrop="handleChewToyDrop(event)" onclick="document.getElementById('input-chewtoy-file').click()">
<div class="chewtoy-dropzone-icon"><i data-lucide="upload-cloud"></i></div>
<div style="font-weight: 600; font-size: 12.5px; color: var(--text-main);">Drag & Drop <code style="color: var(--accent); background: rgba(245,158,11,0.12); padding: 1px 6px; border-radius: 4px;">.grr</code> Chewtoy package here</div>
<div style="font-size: 11px; opacity: 0.7; margin-top: 2px;">or click to browse from your computer</div>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin: 16px 0 8px 0;">
<div style="font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; display: flex; align-items: center; gap: 6px;">
<span>Installed Chewtoys</span>
<span class="badge" id="chewtoys-count-badge" style="font-size: 10px; padding: 1px 6px; background: rgba(245,158,11,0.2); color: var(--accent);">0</span>
</div>
<div style="display: flex; gap: 8px; align-items: center;">
<input type="text" id="chewtoy-filter-input" placeholder="Filter Chewtoys..." oninput="filterInstalledChewToys(this.value)" class="form-input" style="height: 26px; font-size: 11.5px; width: 160px; padding: 2px 8px;">
</div>
</div>
<div id="chewtoys-installed-grid" class="chewtoys-grid">
<div style="grid-column: 1 / -1; padding: 32px; text-align: center; opacity: 0.6; font-size: 12px;">Loading installed Chewtoys...</div>
</div>
</div>
<div class="settings-tab-content" id="tab-tools" style="padding: 16px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<div>
<h4 style="margin: 0; font-size: 13px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px;">
<img src="assets/amber-frameless-apps.webp" alt="Chewtoys" style="width: 16px; height: 16px; object-fit: contain;"> Tools & Chewtoys Launchpad Customizer
</h4>
<div class="form-hint" style="margin-top: 2px;">Rearrange tool order, toggle menu visibility, or reset the Tools & Utilities launchpad dropdown.</div>
</div>
<div style="display: flex; gap: 6px;">
<button class="btn btn-sm" onclick="resetToolsMenuToDefault()"><i data-lucide="rotate-ccw"></i> Reset Defaults</button>
</div>
</div>
<div style="margin-bottom: 12px; padding: 8px 12px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 6px; font-size: 11px; display: flex; align-items: center; justify-content: space-between;">
<span>💡 <strong>Tip:</strong> Drag items up/down or use arrow buttons to reorder. Uncheck boxes to hide tools from the menu.</span>
<span id="tools-visible-counter" style="font-weight: 700; color: var(--accent);">16 / 16 Visible</span>
</div>
<div id="settings-tools-list" style="display: flex; flex-direction: column; gap: 6px;">
</div>
</div>
<div class="settings-tab-content" id="tab-palette">
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="palette"></i> Brum Theme & Visual Palette
</h4>
<button type="button" class="btn btn-xs btn-outline" onclick="toggleCustomThemeCreator()" style="display: flex; align-items: center; gap: 4px; height: 26px;">
<i data-lucide="plus" style="width: 12px; height: 12px;"></i> Custom Theme
</button>
</div>
<p class="settings-card-desc">Choose your active color theme across Brum panels, editor, and tools.</p>
<div class="settings-field">
<label class="settings-field-label" for="settings-theme-selector">Active Theme:</label>
<select id="settings-theme-selector" class="settings-select" onchange="applyTheme(this.value)">
<option value="amber-charcoal">Woofsons Amber Charcoal</option>
<option value="zink">Woofsons Amber Zink</option>
<option value="gruvbox">Gruvbox Dark</option>
<option value="catppuccin-mocha">Catppuccin Mocha</option>
<option value="catppuccin-latte">Catppuccin Latte (Light)</option>
<option value="tokyo-night">Tokyo Night</option>
<option value="monokai">Monokai Pro</option>
<option value="solarized-dark">Solarized Dark</option>
<option value="ayu-dark">Ayu Dark</option>
<option value="nord">Nord Frost</option>
<option value="dracula">Dracula Dark</option>
<option value="midnight-blue">Midnight Commander Blue</option>
<option value="skumring">Larvikite Skumring</option>
<option value="demring">Larvikite Demring</option>
<option value="trollnatt">Larvikite Trollnatt</option>
<option value="myrtaake">Larvikite Myrtåke</option>
<option value="bergtatt">Kittelsen Bergtatt</option>
<option value="soria-moria">Kittelsen Soria Moria</option>
<option value="pestanatt">Kittelsen Pestanatt</option>
<option value="sotslette">Kittelsen Sotslette</option>
</select>
</div>
<div class="settings-field" style="margin-top: 6px;">
<label class="settings-field-label">Visual Theme Swatches (Click to Apply):</label>
<div id="theme-swatch-grid" class="theme-swatch-grid">
</div>
<div class="settings-field-hint">Supports built-in themes and custom external themes from <code>~/.config/brum/themes/</code>.</div>
</div>
<div id="custom-theme-creator" style="display: none; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-top: 10px;">
<div style="font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;">
<i data-lucide="sparkles" style="width: 14px; height: 14px;"></i> Create Custom Web Theme
</div>
<div class="settings-grid-2col" style="margin-bottom: 12px;">
<div class="settings-field">
<label class="settings-field-label">Theme Name:</label>
<input type="text" id="custom-theme-name" class="settings-input" placeholder="e.g. Cyber Sunset">
</div>
<div class="settings-field">
<label class="settings-field-label">Accent Highlight:</label>
<div class="settings-color-swatch-input">
<input type="color" id="custom-theme-accent" value="#00e5ff" oninput="document.getElementById('custom-theme-accent-txt').value = this.value">
<input type="text" id="custom-theme-accent-txt" value="#00e5ff" oninput="document.getElementById('custom-theme-accent').value = this.value">
</div>
</div>
<div class="settings-field">
<label class="settings-field-label">Dark Background:</label>
<div class="settings-color-swatch-input">
<input type="color" id="custom-theme-bg-dark" value="#0b0f14" oninput="document.getElementById('custom-theme-bg-dark-txt').value = this.value">
<input type="text" id="custom-theme-bg-dark-txt" value="#0b0f14" oninput="document.getElementById('custom-theme-bg-dark').value = this.value">
</div>
</div>
<div class="settings-field">
<label class="settings-field-label">Panel Background:</label>
<div class="settings-color-swatch-input">
<input type="color" id="custom-theme-bg-panel" value="#111822" oninput="document.getElementById('custom-theme-bg-panel-txt').value = this.value">
<input type="text" id="custom-theme-bg-panel-txt" value="#111822" oninput="document.getElementById('custom-theme-bg-panel').value = this.value">
</div>
</div>
</div>
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<button type="button" class="btn btn-accent btn-sm" onclick="saveCustomBrowserTheme()"><i data-lucide="check"></i> Save & Apply</button>
<button type="button" class="btn btn-sm btn-outline" onclick="exportCustomThemeToml()"><i data-lucide="download"></i> Export TOML</button>
<button type="button" class="btn btn-sm" onclick="toggleCustomThemeCreator()">Cancel</button>
</div>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="type"></i> Interface & Text Scaling
</h4>
<span class="slider-val-badge" id="setting-font-size-val">13px</span>
</div>
<p class="settings-card-desc">Adjust text size smoothly across file tables, breadcrumbs, panes, and dialogs.</p>
<div class="settings-field">
<div class="slider-container">
<input type="range" min="10" max="18" value="13" class="range-slider" id="setting-font-size-slider" oninput="handleFontSizeChange(this.value)">
</div>
<div class="perm-preset-container" style="margin-top: 8px;">
<button type="button" class="perm-chip" onclick="setFontSizePreset(11)">Compact (11px)</button>
<button type="button" class="perm-chip" onclick="setFontSizePreset(13)">Standard (13px)</button>
<button type="button" class="perm-chip" onclick="setFontSizePreset(15)">Medium (15px)</button>
<button type="button" class="perm-chip" onclick="setFontSizePreset(17)">Large (17px)</button>
</div>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="frame"></i> Panel Border, Focus & Two-Tone Gradient
</h4>
</div>
<p class="settings-card-desc">Fine-tune panel border thickness, active highlight style, and custom two-tone gradient angle.</p>
<div class="settings-grid-3col">
<div class="settings-field">
<label class="settings-field-label" for="setting-border-width">Panel Border Width:</label>
<select id="setting-border-width" class="settings-select" onchange="applyBorderSettings(this.value, null, null)">
<option value="0px">0px (Borderless / Minimal)</option>
<option value="0.5px">0.5px (Ultra Hairline)</option>
<option value="1px" selected>1px (Subtle Hairline - Default)</option>
<option value="1.5px">1.5px (Solid Border)</option>
<option value="2px">2px (Medium Accent)</option>
<option value="3px">3px (Retro Bold)</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-ring-style">Active Focus Highlight Style:</label>
<select id="setting-ring-style" class="settings-select" onchange="applyBorderSettings(null, this.value, null)">
<option value="none">Border Color Only (No Extra Ring)</option>
<option value="subtle" selected>Subtle (1px Accent Ring)</option>
<option value="bold">Bold (2px Crisp Accent Ring)</option>
<option value="glow">Neon Glow (Aura Glow Highlight)</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-border-angle">Border Gradient Angle:</label>
<select id="setting-border-angle" class="settings-select" onchange="applyBorderSettings(null, null, this.value)">
<option value="45deg" selected>45° Diagonal (↗ Default)</option>
<option value="90deg">90° Horizontal (→)</option>
<option value="135deg">135° Diagonal (↘)</option>
<option value="180deg">180° Vertical (↓)</option>
<option value="225deg">225° Diagonal (↙)</option>
<option value="270deg">270° Horizontal (←)</option>
<option value="315deg">315° Diagonal (↖)</option>
<option value="0deg">0° Vertical (↑)</option>
</select>
</div>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="layers"></i> Panel Identification Colors (Two-Tone Complementary)
</h4>
</div>
<p class="settings-card-desc">Define two-tone complementary border and badge accent gradients for each panel for instant visual orientation.</p>
<div class="settings-grid-2col">
<div class="settings-field">
<label class="settings-field-label" for="setting-pane-color-0">Pane 1 Color:</label>
<select id="setting-pane-color-0" class="settings-select" onchange="setPaneColorPref(0, this.value)">
<option value="default">Default (Amber Glow #f59e0b → #ea580c)</option>
<option value="amber">Amber Gold (#f59e0b → #f97316)</option>
<option value="emerald">Emerald Cyan (#10b981 → #06b6d4)</option>
<option value="sky">Sky Indigo (#38bdf8 → #818cf8)</option>
<option value="purple">Purple Rose (#c084fc → #f43f5e)</option>
<option value="rose">Rose Coral (#f43f5e → #fb923c)</option>
<option value="indigo">Indigo Violet (#6366f1 → #a855f7)</option>
<option value="teal">Teal Mint (#14b8a6 → #10b981)</option>
<option value="orange">Orange Amber (#f97316 → #eab308)</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-pane-color-1">Pane 2 Color:</label>
<select id="setting-pane-color-1" class="settings-select" onchange="setPaneColorPref(1, this.value)">
<option value="default">Default (Amber Glow #f59e0b → #ea580c)</option>
<option value="amber">Amber Gold (#f59e0b → #f97316)</option>
<option value="emerald">Emerald Cyan (#10b981 → #06b6d4)</option>
<option value="sky">Sky Indigo (#38bdf8 → #818cf8)</option>
<option value="purple">Purple Rose (#c084fc → #f43f5e)</option>
<option value="rose">Rose Coral (#f43f5e → #fb923c)</option>
<option value="indigo">Indigo Violet (#6366f1 → #a855f7)</option>
<option value="teal">Teal Mint (#14b8a6 → #10b981)</option>
<option value="orange">Orange Amber (#f97316 → #eab308)</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-pane-color-2">Pane 3 Color:</label>
<select id="setting-pane-color-2" class="settings-select" onchange="setPaneColorPref(2, this.value)">
<option value="default">Default (Amber Glow #f59e0b → #ea580c)</option>
<option value="amber">Amber Gold (#f59e0b → #f97316)</option>
<option value="emerald">Emerald Cyan (#10b981 → #06b6d4)</option>
<option value="sky">Sky Indigo (#38bdf8 → #818cf8)</option>
<option value="purple">Purple Rose (#c084fc → #f43f5e)</option>
<option value="rose">Rose Coral (#f43f5e → #fb923c)</option>
<option value="indigo">Indigo Violet (#6366f1 → #a855f7)</option>
<option value="teal">Teal Mint (#14b8a6 → #10b981)</option>
<option value="orange">Orange Amber (#f97316 → #eab308)</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-pane-color-3">Pane 4 Color:</label>
<select id="setting-pane-color-3" class="settings-select" onchange="setPaneColorPref(3, this.value)">
<option value="default">Default (Amber Glow #f59e0b → #ea580c)</option>
<option value="amber">Amber Gold (#f59e0b → #f97316)</option>
<option value="emerald">Emerald Cyan (#10b981 → #06b6d4)</option>
<option value="sky">Sky Indigo (#38bdf8 → #818cf8)</option>
<option value="purple">Purple Rose (#c084fc → #f43f5e)</option>
<option value="rose">Rose Coral (#f43f5e → #fb923c)</option>
<option value="indigo">Indigo Violet (#6366f1 → #a855f7)</option>
<option value="teal">Teal Mint (#14b8a6 → #10b981)</option>
<option value="orange">Orange Amber (#f97316 → #eab308)</option>
</select>
</div>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="server"></i> Hostname & Fleet Indicator
</h4>
<div style="display: flex; align-items: center; gap: 6px;">
<span style="font-size: 11px; color: var(--text-dim);">Live Preview:</span>
<span id="hostname-settings-preview-badge" class="header-hostname-badge color-slate style-text size-md" style="display: inline-flex;">
<span id="hostname-preview-text">@localhost</span>
<i data-lucide="chevron-down" class="header-hostname-chevron" style="width: 10px; height: 10px; margin-left: 2px; opacity: 0.6;"></i>
</span>
</div>
</div>
<p class="settings-card-desc">Display and style a custom environment/hostname prompt or badge next to the logo in the top header (e.g. <code>@nas-prod</code>, <code>@homelab</code>, <code>@dev-box</code>).</p>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-show-hostname-badge" checked onchange="toggleHostnameBadgeSetting(this.checked)">
<div>
<strong>Show Hostname Indicator in Header</strong>
<div class="settings-field-hint">Display host status / fleet prompt next to the Brum logo.</div>
</div>
</label>
<div id="wrapper-custom-hostname" style="display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border);">
<div class="settings-field">
<label class="settings-field-label" for="setting-custom-hostname-label">Custom Environment / Hostname Label (Optional):</label>
<input type="text" id="setting-custom-hostname-label" class="settings-input" style="font-family: var(--font-mono);" placeholder="Leave empty for auto-detected system hostname" oninput="handleHostnameSettingChange()">
<div class="settings-field-hint">Customize the label shown in the header prompt (e.g. <code>@nas-prod</code>, <code>@homelab-01</code>, <code>@dev-box</code>).</div>
</div>
<div class="settings-grid-auto">
<div class="settings-field">
<label class="settings-field-label" for="setting-hostname-color">Indicator Color:</label>
<select id="setting-hostname-color" class="settings-select" onchange="handleHostnameSettingChange()">
<option value="slate" selected>⚪ Slate / Dim Text (Default)</option>
<option value="amber">🔶 Amber Accent</option>
<option value="emerald">🟢 Emerald Green</option>
<option value="sky">🔷 Sky Blue</option>
<option value="purple">🟣 Purple</option>
<option value="rose">🔴 Rose Red</option>
<option value="orange">🟧 Orange</option>
<option value="cyan">💠 Cyan</option>
<option value="custom">🎨 Custom Free-form Color...</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-hostname-style">Visual Style:</label>
<select id="setting-hostname-style" class="settings-select" onchange="handleHostnameSettingChange()">
<option value="text" selected>Text Prompt (@host) (Default)</option>
<option value="subtle">Subtle Tint Badge</option>
<option value="solid">Solid Fill Badge</option>
<option value="outline">Outline Border Badge</option>
<option value="pill">Pill Capsule Badge</option>
<option value="glow">Neon Glow Badge</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-hostname-icon">Icon / Prefix:</label>
<select id="setting-hostname-icon" class="settings-select" onchange="handleHostnameSettingChange()">
<option value="none" selected>🚫 No Icon (Text Only, Default)</option>
<option value="server">🖥️ Server</option>
<option value="hard-drive">💽 Hard Drive (NAS)</option>
<option value="cpu">⚡ CPU / Compute</option>
<option value="terminal">💻 Terminal / Dev</option>
<option value="cloud">☁️ Cloud / VPS</option>
<option value="shield">🛡️ Shield / Secure</option>
<option value="box">📦 Container / Box</option>
<option value="home">🏠 Homelab / Home</option>
<option value="globe">🌐 Globe / Gateway</option>
<option value="radio">📻 Radio / Remote</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-hostname-size">Text Size:</label>
<select id="setting-hostname-size" class="settings-select" onchange="handleHostnameSettingChange()">
<option value="sm">Small (Compact 18px)</option>
<option value="md" selected>Medium (Standard 22px)</option>
<option value="lg">Large (Prominent 26px)</option>
</select>
</div>
</div>
<div id="hostname-custom-color-picker-row" style="display: none; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; flex-direction: column; gap: 10px;">
<div style="font-size: 11.5px; font-weight: 700; color: var(--accent); display: flex; align-items: center; justify-content: space-between;">
<span style="display: flex; align-items: center; gap: 5px;"><i data-lucide="palette" style="width: 14px; height: 14px;"></i> Custom Badge Colors (Free-form Hex / RGBA)</span>
<div style="display: flex; gap: 4px; flex-wrap: wrap;">
<button type="button" class="perm-chip" onclick="applyCustomBadgePreset('#f59e0b', 'rgba(245, 158, 11, 0.15)', 'rgba(245, 158, 11, 0.35)', 'rgba(245, 158, 11, 0.4)')">Amber</button>
<button type="button" class="perm-chip" onclick="applyCustomBadgePreset('#06b6d4', 'rgba(6, 182, 212, 0.15)', 'rgba(6, 182, 212, 0.35)', 'rgba(6, 182, 212, 0.4)')">Cyan</button>
<button type="button" class="perm-chip" onclick="applyCustomBadgePreset('#10b981', 'rgba(16, 185, 129, 0.15)', 'rgba(16, 185, 129, 0.35)', 'rgba(16, 185, 129, 0.4)')">Emerald</button>
<button type="button" class="perm-chip" onclick="applyCustomBadgePreset('#c084fc', 'rgba(192, 132, 252, 0.15)', 'rgba(192, 132, 252, 0.35)', 'rgba(192, 132, 252, 0.4)')">Purple</button>
<button type="button" class="perm-chip" onclick="applyCustomBadgePreset('#f43f5e', 'rgba(244, 63, 94, 0.15)', 'rgba(244, 63, 94, 0.35)', 'rgba(244, 63, 94, 0.4)')">Rose</button>
</div>
</div>
<div class="settings-grid-2col">
<div class="settings-field">
<label class="settings-field-label">Text & Icon Color:</label>
<div class="settings-color-swatch-input">
<input type="color" id="setting-hostname-custom-text-picker" value="#f59e0b" oninput="document.getElementById('setting-hostname-custom-text').value = this.value; handleHostnameSettingChange();">
<input type="text" id="setting-hostname-custom-text" value="#f59e0b" placeholder="#f59e0b" oninput="handleHostnameSettingChange();">
</div>
</div>
<div class="settings-field">
<label class="settings-field-label">Background Color / Tint:</label>
<div class="settings-color-swatch-input">
<input type="color" id="setting-hostname-custom-bg-picker" value="#261b0b" oninput="document.getElementById('setting-hostname-custom-bg').value = this.value; handleHostnameSettingChange();">
<input type="text" id="setting-hostname-custom-bg" value="rgba(245, 158, 11, 0.15)" placeholder="rgba(...) or #hex" oninput="handleHostnameSettingChange();">
</div>
</div>
<div class="settings-field">
<label class="settings-field-label">Border Color:</label>
<div class="settings-color-swatch-input">
<input type="color" id="setting-hostname-custom-border-picker" value="#f59e0b" oninput="document.getElementById('setting-hostname-custom-border').value = this.value; handleHostnameSettingChange();">
<input type="text" id="setting-hostname-custom-border" value="rgba(245, 158, 11, 0.35)" placeholder="rgba(...) or #hex" oninput="handleHostnameSettingChange();">
</div>
</div>
<div class="settings-field">
<label class="settings-field-label">Glow / Neon Shadow:</label>
<div class="settings-color-swatch-input">
<input type="color" id="setting-hostname-custom-glow-picker" value="#f59e0b" oninput="document.getElementById('setting-hostname-custom-glow').value = this.value; handleHostnameSettingChange();">
<input type="text" id="setting-hostname-custom-glow" value="rgba(245, 158, 11, 0.4)" placeholder="rgba(...) or #hex" oninput="handleHostnameSettingChange();">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="layout"></i> Browser Window & Instance Title
</h4>
</div>
<p class="settings-card-desc">Customize the window and browser tab title. Brum dynamically updates the title with the playing track when audio or media playback is active.</p>
<div class="settings-field">
<label class="settings-field-label" for="setting-custom-window-title">Custom Window / Document Title (Optional):</label>
<div style="display: flex; gap: 8px;">
<input type="text" id="setting-custom-window-title" class="settings-input" style="flex: 1;" placeholder="Brum - Multi-Pane Web Environment" oninput="handleWindowTitleSettingChange()">
<button type="button" class="btn btn-sm btn-outline" style="white-space: nowrap;" onclick="resetWindowTitleSetting()">Reset Default</button>
</div>
<div class="settings-field-hint">Leave empty to use the default <code>Brum - Multi-Pane Web Environment</code> or server configuration.</div>
</div>
</div>
</div>
<div class="settings-tab-content" id="tab-bookmarks">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<span style="font-weight: 600;">Saved Bookmarks & Favorite Paths</span>
<button class="btn btn-accent" onclick="addNewBookmark()"><i data-lucide="plus"></i> Add Bookmark</button>
</div>
<table class="file-table">
<thead>
<tr><th>Name</th><th>Protocol</th><th>Target Path / URL</th><th>Action</th></tr>
</thead>
<tbody id="bookmarks-table-body">
<tr>
<td>Home Directory</td>
<td><span style="color:var(--accent);">LOCAL</span></td>
<td><code>/home/bolt</code></td>
<td><button class="btn btn-icon"><i data-lucide="trash-2" style="width:12px;"></i></button></td>
</tr>
<tr>
<td>Root Filesystem</td>
<td><span style="color:var(--accent);">LOCAL</span></td>
<td><code>/</code></td>
<td><button class="btn btn-icon"><i data-lucide="trash-2" style="width:12px;"></i></button></td>
</tr>
</tbody>
</table>
</div>
<div class="settings-tab-content" id="tab-keys">
<table class="file-table">
<tr><th style="width: 140px;">Key</th><th>Action</th></tr>
<tr><td><code>Tab / Shift+Tab</code></td><td>Switch Active Focused Pane</td></tr>
<tr><td><code>F1</code></td><td>Quick Help</td></tr>
<tr><td><code>F2</code></td><td>Rename Selected File / Directory</td></tr>
<tr><td><code>F3</code></td><td>Quick View / File Preview</td></tr>
<tr><td><code>F4</code></td><td>Dual-Pane Editor / Code Viewer</td></tr>
<tr><td><code>F5</code></td><td>Copy Selected Items to Target Pane</td></tr>
<tr><td><code>F6</code></td><td>Move Selected Items to Target Pane</td></tr>
<tr><td><code>F7</code></td><td>Create New Folder (Mkdir)</td></tr>
<tr><td><code>F8 / Delete</code></td><td>Delete / Move to Trash</td></tr>
<tr><td><code>F9 / Ctrl+D</code></td><td>Folder & File Comparison (Diff)</td></tr>
<tr><td><code>F10</code></td><td>User Settings & Preferences</td></tr>
<tr><td><code>Ctrl + F</code></td><td>Editor Search / Global Search</td></tr>
<tr><td><code>Ctrl + H</code></td><td>Editor Search & Replace</td></tr>
<tr><td><code>Alt + 1..4</code></td><td>Direct Focus to Pane 1, 2, 3, or 4</td></tr>
<tr><td><code>Insert / Space</code></td><td>Toggle Selection & Step Down</td></tr>
<tr><td><code>Ctrl + A</code></td><td>Select All in Current Pane</td></tr>
<tr><td><code>Ctrl + P</code></td><td>Toggle Paranoid File Handling Mode</td></tr>
<tr><td><code>Ctrl + Alt + S</code></td><td>Toggle Synchronized Pane Scrolling</td></tr>
<tr><td><code>Ctrl + Alt + N</code></td><td>Toggle Synchronized Relative Directory Navigation</td></tr>
<tr><td><code>Ctrl + Q</code></td><td>Quit / Clean Close Brum</td></tr>
</table>
<div style="margin-top: 14px; padding: 12px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;">
<div>
<div style="font-weight: 700; font-size: 12px; color: var(--accent); display: flex; align-items: center; gap: 6px;"><i data-lucide="book-open" style="width: 14px; height: 14px;"></i> User Manuals & Documentation</div>
<div style="font-size: 11px; color: var(--text-dim); margin-top: 2px;">Access all 16 built-in guides and QA test manuals natively in Notes.</div>
</div>
<div style="display: flex; gap: 6px;">
<button type="button" class="btn btn-sm btn-accent" onclick="closeModal('settings-modal'); openFloatingNoteDog('manual://README.md');"><i data-lucide="book-open"></i> Open Manuals</button>
<button type="button" class="btn btn-sm btn-outline" onclick="closeModal('settings-modal'); openFloatingNoteDog('manual://qa-testing.md');"><i data-lucide="flask-conical"></i> QA Manual</button>
</div>
</div>
</div>
<div class="settings-tab-content" id="tab-icons" style="padding: 16px;">
<div class="form-group">
<label style="font-weight: 700; font-size: 12px;">Global Icon Theme:</label>
<select id="setting-icon-theme" class="pane-quick-filter" style="width: 340px; padding: 6px;" onchange="changeGlobalIconTheme(this.value)">
<option value="default" selected>Default (Woofson Classic Lucide + Assets)</option>
<option value="nerdfont">Nerd Font Developer Suite ( )</option>
<option value="emoji">Rich Emoji Suite (📁 🦀 🐍 ⚡ 📦 📝 🎬)</option>
<option value="custom">Custom Rules (Per-Extension Mappings)</option>
</select>
<div class="form-hint">Choose between classic graphical icons, developer Nerd Fonts, or rich colorful emojis across all panels.</div>
</div>
<div class="form-group" style="margin-top: 14px;">
<label style="font-weight: 700; font-size: 12px;">Global Default Folder Icon / Emote:</label>
<div style="display: flex; gap: 8px; align-items: center;">
<input type="text" id="setting-global-folder-icon" class="pane-quick-filter" style="width: 240px; padding: 6px 8px; font-family: var(--font-mono), sans-serif;" placeholder="Default folder (e.g. , 📁, , 📂)">
<button class="btn btn-sm btn-accent" onclick="saveGlobalFolderIcon()"><i data-lucide="check"></i> Save</button>
<button class="btn btn-sm" onclick="resetGlobalFolderIcon()"><i data-lucide="rotate-ccw"></i> Reset</button>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;" id="setting-folder-icon-presets">
<span class="icon-preset-chip" onclick="selectGlobalFolderPreset('')">Default ( Nerd Glyph)</span>
<span class="icon-preset-chip" onclick="selectGlobalFolderPreset('📁')">📁 Yellow Folder</span>
<span class="icon-preset-chip" onclick="selectGlobalFolderPreset('📂')">📂 Open Folder</span>
<span class="icon-preset-chip" onclick="selectGlobalFolderPreset('🗂️')">🗂️ Card Dividers</span>
<span class="icon-preset-chip" onclick="selectGlobalFolderPreset('')"> Nerd Font Dir</span>
<span class="icon-preset-chip" onclick="selectGlobalFolderPreset('')"> Nerd Font Folder</span>
<span class="icon-preset-chip" onclick="selectGlobalFolderPreset('📦')">📦 Box Package</span>
<span class="icon-preset-chip" onclick="selectGlobalFolderPreset('🚀')">🚀 Rocket Project</span>
</div>
</div>
<div class="form-group" style="margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<div>
<label style="font-weight: 700; margin: 0;">Per-Filetype & Extension Custom Icons:</label>
<div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">Map specific file extensions (e.g. <code>rs</code>, <code>py</code>, <code>md</code>, <code>iso</code>) to any custom emoji, emote, or Nerd Font glyph.</div>
</div>
<div style="display: flex; gap: 6px;">
<button class="btn btn-xs" onclick="loadNerdFontPresets()"><i data-lucide="code"></i> Load Nerd Fonts</button>
<button class="btn btn-xs" onclick="loadEmojiPresets()"><i data-lucide="smile"></i> Load Emojis</button>
<button class="btn btn-xs btn-danger" onclick="clearAllCustomFileIcons()"><i data-lucide="trash-2"></i> Clear All</button>
</div>
</div>
<div style="display: flex; gap: 8px; align-items: center; background: var(--bg-header); padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); margin-bottom: 10px;">
<div style="display: flex; align-items: center; gap: 4px;">
<span style="font-size: 11px; color: var(--text-muted);">Ext:</span>
<input type="text" id="setting-new-icon-ext" class="pane-quick-filter" placeholder="e.g. rs, py, zip, folder" style="width: 140px; padding: 4px 6px; font-family: var(--font-mono); font-size: 11px;">
</div>
<div style="display: flex; align-items: center; gap: 4px; flex: 1;">
<span style="font-size: 11px; color: var(--text-muted);">Icon/Emote:</span>
<input type="text" id="setting-new-icon-val" class="pane-quick-filter" placeholder="e.g. 🦀, 🐍, , , lucide:code" style="flex: 1; padding: 4px 6px; font-family: var(--font-mono), sans-serif; font-size: 11px;">
</div>
<button class="btn btn-sm btn-accent" onclick="addCustomFileIconRule()"><i data-lucide="plus"></i> Add Rule</button>
</div>
<div style="max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px;">
<table class="file-table" style="width: 100%; font-size: 12px;">
<thead>
<tr style="background: var(--bg-header); text-align: left;">
<th style="padding: 6px 10px; width: 140px;">Extension / Type</th>
<th style="padding: 6px 10px;">Icon / Glyph</th>
<th style="padding: 6px 10px; width: 80px; text-align: center;">Preview</th>
<th style="padding: 6px 10px; width: 80px; text-align: right;">Action</th>
</tr>
</thead>
<tbody id="setting-custom-icons-table-body">
</tbody>
</table>
</div>
</div>
</div>
<div class="settings-tab-content" id="tab-about">
<div class="settings-group-card" style="text-align: center; padding: 22px 16px;">
<img src="assets/brum_logo.webp" alt="Brum" style="height: 56px; width: auto; object-fit: contain; margin-bottom: 10px;">
<div style="font-size: 20px; font-weight: 800; color: var(--accent); letter-spacing: 0.5px;">Brum</div>
<div style="font-size: 11px; color: var(--text-muted); margin: 4px 0 12px;">Multi-Pane Web Environment (File Commander/Manager) — By Woofson</div>
<div style="display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;">
<span class="badge about-version-badge" style="background: rgba(245, 158, 11, 0.2); color: var(--accent); border: 1px solid rgba(245, 158, 11, 0.4); font-weight: 700;"></span>
<span class="badge" style="background: rgba(56, 189, 248, 0.15); color: var(--info); border: 1px solid rgba(56, 189, 248, 0.3);">Rust 2021 + Axum 0.7</span>
<span class="badge" style="background: rgba(34, 197, 94, 0.15); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.3);">MIT Open Source</span>
</div>
</div>
<div class="settings-group-card">
<p style="font-size: 12px; color: var(--text-main); line-height: 1.6; margin: 0;">
<strong>Brum</strong> brings the speed, keyboard ergonomics, and multi-pane productivity of classic orthodox commanders (Midnight Commander, Total Commander, Norton Commander) directly to the modern web browser and Linux/Hyprland desktop — powered by a lightweight Rust backend, multi-cloud storage drivers, real-time background transfer queues, and paranoid cryptographic data verification.
</p>
</div>
<div class="settings-group-card">
<div class="settings-card-header" style="margin-bottom: 12px;">
<h4 class="settings-section-title">
<i data-lucide="cpu"></i> System & Runtime Architecture
</h4>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; font-size: 11px;">
<div><span style="color: var(--text-muted);">Creator & Lab:</span> <strong style="color: var(--text-main);">Bolt J Woofson @ Woofsons Lab</strong> (<a href="https://www.arf.ac" target="_blank" style="color: var(--accent); text-decoration: none;">www.arf.ac</a>)</div>
<div><span style="color: var(--text-muted);">Contact:</span> <a href="mailto:bolt@boop.no" style="color: var(--accent); text-decoration: none;">bolt@boop.no</a></div>
<div><span style="color: var(--text-muted);">Backend Core:</span> <span style="font-family: var(--font-mono);">Rust 2021 (Axum 0.7 + Tokio)</span></div>
<div><span style="color: var(--text-muted);">Operating System:</span> <strong class="about-sys-os" style="color: var(--text-main);">Linux</strong></div>
<div><span style="color: var(--text-muted);">Execution Mode:</span> <span class="about-sys-mode">Desktop & Web</span></div>
<div><span style="color: var(--text-muted);">Terminal Engine:</span> <span>Native PTY (portable-pty) + Nerd Font</span></div>
<div><span style="color: var(--text-muted);">Auth & Permissions:</span> <span>Linux PAM + SQLite RBAC</span></div>
<div><span style="color: var(--text-muted);">Frontend Stack:</span> <span>Vanilla JS + Prism + Lucide</span></div>
<div><span style="color: var(--text-muted);">Repository:</span> <a href="https://github.com/Woofson/brum" target="_blank" style="color: var(--accent); text-decoration: none;">github.com/Woofson/brum</a></div>
<div><span style="color: var(--text-muted);">Support / Ko-fi:</span> <a href="https://ko-fi.com/J7P327BXTR" target="_blank" style="color: #ff5e5b; font-weight: 600; text-decoration: none;">ko-fi.com/J7P327BXTR</a></div>
<div><span style="color: var(--text-muted);">License:</span> <span>MIT Open Source License</span></div>
</div>
</div>
<div class="settings-group-card" style="text-align: center; padding: 14px; background: rgba(255, 94, 91, 0.05); border: 1px solid rgba(255, 94, 91, 0.25);">
<div style="font-size: 11px; color: var(--text-muted); margin-bottom: 8px;">Support ongoing development of Brum & Chewtoys:</div>
<a href="https://ko-fi.com/J7P327BXTR" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
<img src="https://ko-fi.com/img/githubbutton_sm.svg" alt="Support on Ko-fi" style="height: 32px; border: 0;">
</a>
</div>
<div class="settings-group-card">
<div class="settings-card-header" style="margin-bottom: 12px;">
<h4 class="settings-section-title">
<i data-lucide="sparkles"></i> Power Features & ChewToys
</h4>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; font-size: 11px;">
<div style="padding: 10px 12px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius);">
<strong style="color: var(--accent);">🗂️ 1-to-4 Dynamic Panes</strong>
<div style="color: var(--text-dim); font-size: 10px; margin-top: 2px;">Single, Dual, Triple & Quad grid layouts</div>
</div>
<div style="padding: 10px 12px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius);">
<strong style="color: var(--accent);">🌐 Multi-Cloud & Mounts</strong>
<div style="color: var(--text-dim); font-size: 10px; margin-top: 2px;">SMB/CIFS, NFS, S3, SFTP, WebDAV, Proton</div>
</div>
<div style="padding: 10px 12px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius);">
<strong style="color: var(--accent);">⚡ DeltaCopy & TeraCopy</strong>
<div style="color: var(--text-dim); font-size: 10px; margin-top: 2px;">CRC32 / SHA-256 integrity verification</div>
</div>
<div style="padding: 10px 12px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius);">
<strong style="color: var(--accent);">🔄 ConvertX Converter</strong>
<div style="color: var(--text-dim); font-size: 10px; margin-top: 2px;">Universal Image, Audio, Video & Doc conversions</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="admin-panel-modal">
<div class="modal-box settings-modal-box">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<img src="assets/amber-frameless-admin.webp" alt="Admin" style="width: 18px; height: 18px; object-fit: contain;">
<span style="font-weight: 700; color: var(--accent); font-size: 14px;">Administrator Control Panel</span>
<span class="user-role-badge">GLOBAL SERVER CONFIG</span>
</div>
<button class="btn" onclick="closeModal('admin-panel-modal')"><i data-lucide="x"></i></button>
</div>
<div class="settings-modal-layout">
<div class="settings-sidebar">
<div class="settings-sidebar-group-title">Server Administration</div>
<button class="settings-nav-btn active" onclick="switchAdminTab('admin-tab-users')"><i data-lucide="users"></i> Users & RBAC</button>
<button class="settings-nav-btn" onclick="switchAdminTab('admin-tab-tokens')"><i data-lucide="key-round"></i> API & Fleet Tokens</button>
<button class="settings-nav-btn" onclick="switchAdminTab('admin-tab-storage')"><i data-lucide="server"></i> Remote Storage & Mounts</button>
<button class="settings-nav-btn" onclick="switchAdminTab('admin-tab-syncthing')"><i data-lucide="repeat"></i> Syncthing Global</button>
<div class="settings-sidebar-group-title">Security & Config</div>
<button class="settings-nav-btn" onclick="switchAdminTab('admin-tab-security')"><i data-lucide="shield-check"></i> Paranoid & Security</button>
<button class="settings-nav-btn" onclick="switchAdminTab('admin-tab-config')"><i data-lucide="file-cog"></i> Server config.toml</button>
</div>
<div class="settings-content-area">
<div class="settings-tab-content active" id="admin-tab-users">
<div class="settings-card-header" style="margin-bottom: 14px;">
<div>
<h4 class="settings-section-title">
<i data-lucide="users"></i> User Accounts & Granular Service Permissions
</h4>
<p class="settings-card-desc" style="margin-top: 2px;">
Manage internal and PAM accounts, assign Admin privileges, and grant or restrict service access per user.
</p>
</div>
<button type="button" class="btn btn-accent btn-sm" onclick="showAddUserPrompt()" style="height: 28px; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
<i data-lucide="user-plus" style="width: 13px; height: 13px;"></i> New User
</button>
</div>
<div id="users-cards-container" style="display: flex; flex-direction: column; gap: 14px;">
</div>
</div>
<div class="settings-tab-content" id="admin-tab-tokens">
<div class="settings-card-header" style="margin-bottom: 14px;">
<div>
<h4 class="settings-section-title">
<i data-lucide="key-round"></i> API Keys & Fleet Service Tokens
</h4>
<p class="settings-card-desc" style="margin-top: 2px;">
Create and manage cryptographically signed long-lived Bearer tokens for Fleet Control nodes, backup daemons, and automated scripts.
</p>
</div>
<button type="button" class="btn btn-accent btn-sm" onclick="openCreateApiTokenModal()" style="height: 28px; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
<i data-lucide="plus" style="width: 13px; height: 13px;"></i> Generate Token
</button>
</div>
<div id="admin-api-tokens-list" style="display: flex; flex-direction: column; gap: 10px;">
</div>
</div>
<div class="settings-tab-content" id="admin-tab-storage">
<div class="settings-group-card">
<div class="settings-card-header">
<div>
<h4 class="settings-section-title">
<i data-lucide="server"></i> Global Storage, Network Shares & User Access
</h4>
<p class="settings-card-desc" style="margin-top: 2px;">
Configure network shares and assign which users can access them via their Favorites menu.
</p>
</div>
<button type="button" class="btn btn-accent btn-sm" onclick="openRemoteModal(App.activePaneIndex, true)" style="height: 28px; display: flex; align-items: center; gap: 5px; white-space: nowrap;">
<i data-lucide="plus" style="width: 13px; height: 13px;"></i> Add Global Mount
</button>
</div>
<div style="overflow-x: auto;">
<table class="admin-table" style="margin-top: 6px;">
<thead>
<tr>
<th>Mount Name</th>
<th>Protocol</th>
<th>Target URI / Share Path</th>
<th>Allowed Users</th>
<th style="text-align: center; width: 120px;">Actions</th>
</tr>
</thead>
<tbody id="admin-global-mounts-tbody">
<tr><td colspan="5" style="text-align: center; padding: 16px; color: var(--text-muted);">Loading global network mounts...</td></tr>
</tbody>
</table>
</div>
</div>
<div class="settings-grid-2col">
<div class="settings-group-card" style="margin-bottom: 0;">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="share-2"></i> Samba / Windows Share (CIFS)
</h4>
</div>
<p class="settings-card-desc">Native client using <code>smbclient</code> with Workgroup, Active Directory Domain, and guest authentication.</p>
<div class="settings-field">
<label class="settings-field-label" for="admin-default-smb-workgroup">Default Workgroup / Domain:</label>
<input type="text" class="settings-input" value="WORKGROUP" id="admin-default-smb-workgroup">
</div>
</div>
<div class="settings-group-card" style="margin-bottom: 0;">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="server"></i> Linux Network File System (NFS)
</h4>
</div>
<p class="settings-card-desc">Automated export discovery via <code>showmount -e</code> and mounts to <code>/run/brum/mounts/nfs/</code>.</p>
<div class="settings-field">
<label class="settings-field-label">NFS Base Mountpoint:</label>
<input type="text" class="settings-input" value="/run/brum/mounts/nfs" readonly>
</div>
</div>
</div>
</div>
<div class="settings-tab-content" id="admin-tab-syncthing">
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="repeat"></i> Global Syncthing Daemon Configuration
</h4>
</div>
<p class="settings-card-desc">
Configure the cluster Syncthing daemon used for continuous background sync across nodes.
</p>
<div class="settings-grid-2col">
<div class="settings-field">
<label class="settings-field-label" for="setting-syncthing-url">Syncthing Daemon URL:</label>
<input type="text" id="setting-syncthing-url" class="settings-input" value="http://127.0.0.1:8384">
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-syncthing-key">REST API Key:</label>
<div style="position: relative; display: flex; align-items: center;">
<input type="password" id="setting-syncthing-key" class="settings-input" style="padding-right: 32px;" placeholder="Leave empty for auto-discovery">
<button type="button" class="btn btn-icon" onclick="togglePasswordVisibility('setting-syncthing-key')" style="position: absolute; right: 2px; width: 26px; height: 26px; background: transparent; border: none;">
<i data-lucide="eye" style="width: 14px; height: 14px;"></i>
</button>
</div>
</div>
</div>
<div style="display: flex; gap: 8px; margin-top: 6px;">
<button type="button" class="btn btn-accent btn-sm" onclick="testAndSaveSyncthingConfig()" style="height: 28px; display: flex; align-items: center; gap: 5px;">
<i data-lucide="activity" style="width: 13px; height: 13px;"></i> Test Connection & Dashboard
</button>
</div>
<div id="syncthing-settings-status" style="font-size: 11px; margin-top: 4px; display: none;"></div>
</div>
</div>
<div class="settings-tab-content" id="admin-tab-security">
<div class="settings-card-header" style="margin-bottom: 12px;">
<div>
<h4 class="settings-section-title">
<i data-lucide="shield-check"></i> Global File Safety, Paranoid Integrity & Auto-Lock
</h4>
<p class="settings-card-desc" style="margin-top: 2px;">
Configure default transaction rules, session timeout, auto-lock on workstation inactivity, and cryptographic validation.
</p>
</div>
</div>
<div class="settings-grid-2col">
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="lock"></i> Session Auto-Lock & Inactivity
</h4>
</div>
<p class="settings-card-desc">Locks screen on idle inactivity without interrupting background transfers or closing open files.</p>
<div style="display: flex; flex-direction: column; gap: 4px;">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-autolock-enabled" checked>
<div>
<strong>Enable Automatic Workstation Lock</strong>
<div class="settings-field-hint">Enforces password prompt on idle session timeout.</div>
</div>
</label>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-autolock-minutes">Auto-Lock Inactivity Timer:</label>
<select id="setting-autolock-minutes" class="settings-select">
<option value="5">5 Minutes Inactivity</option>
<option value="10">10 Minutes Inactivity</option>
<option value="15" selected>15 Minutes Inactivity (Recommended)</option>
<option value="30">30 Minutes Inactivity</option>
<option value="60">1 Hour Inactivity</option>
<option value="120">2 Hours Inactivity</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-session-hours">Session Expiration / Max Token Age:</label>
<select id="setting-session-hours" class="settings-select">
<option value="1">1 Hour</option>
<option value="4">4 Hours</option>
<option value="8" selected>8 Hours (Work Day)</option>
<option value="24">24 Hours</option>
<option value="72">3 Days</option>
<option value="168">7 Days</option>
</select>
</div>
<div style="display: flex; flex-direction: column; gap: 4px;">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-autolock-prevent-tasks" checked>
<div>
<strong>Prevent Lock during Active Transfers</strong>
<div class="settings-field-hint">Do not lock while background file transfers/copy tasks are running.</div>
</div>
</label>
</div>
<div style="margin-top: 6px;">
<button type="button" class="btn btn-accent btn-sm" onclick="saveAdminSecuritySettings()" style="height: 28px; display: flex; align-items: center; gap: 5px;">
<i data-lucide="check" style="width: 13px; height: 13px;"></i> Save Auto-Lock Policies
</button>
</div>
</div>
<div class="settings-group-card">
<div class="settings-card-header">
<h4 class="settings-section-title">
<i data-lucide="shield-check"></i> Paranoid Mode & Integrity
</h4>
</div>
<p class="settings-card-desc">Cryptographic validation and atomic file system operations.</p>
<div style="display: flex; flex-direction: column; gap: 4px;">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-paranoid-enabled" checked>
<div>
<strong>Enable Paranoid File Handling Globally</strong>
<div class="settings-field-hint">Enforces strict validation on all file copy/move operations.</div>
</div>
</label>
</div>
<div class="settings-field">
<label class="settings-field-label" for="setting-checksum-algo">Integrity Checksum Algorithm:</label>
<select id="setting-checksum-algo" class="settings-select">
<option value="sha256" selected>SHA-256 (Cryptographic / Strict)</option>
<option value="md5">MD5 (Legacy Fast)</option>
<option value="sha1">SHA-1</option>
</select>
<div class="settings-field-hint">Files transferred in Paranoid mode have their checksum verified upon completion.</div>
</div>
<div style="display: flex; flex-direction: column; gap: 4px;">
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-atomic-writes" checked>
<div>
<strong>Atomic File Writes</strong>
<div class="settings-field-hint">Write to hidden temporary file first, then atomically rename.</div>
</div>
</label>
<label class="settings-checkbox-row">
<input type="checkbox" id="setting-trash-enabled" checked onchange="toggleTrashSetting(this.checked)">
<div>
<strong id="admin-setting-trash-title">Safe Trash Bin</strong>
<div class="settings-field-hint" id="admin-setting-trash-hint">Move deleted items to XDG Trash instead of permanent deletion.</div>
</div>
</label>
<label class="settings-checkbox-row windows-only-setting">
<input type="checkbox" id="admin-setting-windows-native-ops" checked onchange="toggleWindowsNativeOpsSetting(this.checked)">
<div>
<strong>Windows Native Shell & Recycle Bin</strong>
<div class="settings-field-hint">Use Windows Shell APIs ($Recycle.Bin, SHFileOperation) across Windows drives instead of POSIX trash.</div>
</div>
</label>
<label class="settings-checkbox-row windows-only-setting">
<input type="checkbox" id="admin-setting-detect-file-locks" checked onchange="toggleDetectFileLocksSetting(this.checked)">
<div>
<strong>Windows Process Lock Inspection</strong>
<div class="settings-field-hint">Use Windows Restart Manager to report specific locking process names and PIDs on access violations.</div>
</div>
</label>
</div>
<div class="settings-field" style="margin-top: 4px;">
<label class="settings-field-label" for="setting-custom-trash-dir">Server Custom Trash Directory (Optional):</label>
<input type="text" id="setting-custom-trash-dir" class="settings-input" placeholder="Leave empty for OS default (~/.local/share/Trash)" onchange="saveCustomTrashDir(this.value)">
</div>
</div>
</div>
</div>
<div class="settings-tab-content" id="admin-tab-config">
<div class="settings-group-card">
<div class="settings-card-header" style="flex-wrap: wrap; gap: 10px;">
<div>
<h4 class="settings-section-title">
<i data-lucide="file-cog"></i> Master Server Configuration (<code>config.toml</code>)
<span class="user-role-badge" id="admin-config-path-badge" style="background: rgba(245, 158, 11, 0.2); color: var(--accent); margin-left: 6px;">~/.config/brum/config.toml</span>
</h4>
<p class="settings-card-desc" style="margin-top: 2px;">
Directly view and edit server settings, layouts, keybinds, and defaults in TOML format.
</p>
</div>
<div style="display: flex; gap: 6px; flex-wrap: wrap;">
<button type="button" class="btn btn-sm btn-outline" onclick="loadMasterConfigEditor()" title="Discard unsaved changes and fetch fresh config from disk" style="height: 28px; font-size: 11px; display: flex; align-items: center; gap: 4px;">
<i data-lucide="rotate-cw" style="width: 12px; height: 12px;"></i> Discard / Fetch
</button>
<button type="button" class="btn btn-sm btn-outline" onclick="triggerServerReload()" title="Reload settings into running server memory" style="height: 28px; font-size: 11px; display: flex; align-items: center; gap: 4px;">
<i data-lucide="refresh-cw" style="width: 12px; height: 12px;"></i> Reload Config
</button>
<button type="button" class="btn btn-sm btn-danger-action" onclick="triggerServerRestart()" title="Restart Brum server process" style="height: 28px; font-size: 11px; display: flex; align-items: center; gap: 4px;">
<i data-lucide="power" style="width: 12px; height: 12px;"></i> Restart Server
</button>
<button type="button" class="btn btn-sm btn-accent" onclick="saveMasterConfigFile()" id="btn-save-master-config" style="height: 28px; font-size: 11px; display: flex; align-items: center; gap: 4px;">
<i data-lucide="save" style="width: 12px; height: 12px;"></i> Save config.toml
</button>
</div>
</div>
<div style="position: relative; margin-top: 6px;">
<textarea id="admin-config-editor-textarea" spellcheck="false" style="width: 100%; height: 420px; font-family: var(--font-mono); font-size: 12px; background: var(--bg-panel); color: var(--text-main); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; line-height: 1.5; resize: vertical; box-sizing: border-box; outline: none;"></textarea>
</div>
<div id="admin-config-status" style="margin-top: 8px; font-size: 12px; font-family: var(--font-mono); display: none;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="profile-modal">
<div class="modal-box" style="width: 480px;">
<div class="modal-header">
<span>👤 User Profile & Account Settings</span>
<button class="btn" onclick="closeModal('profile-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px; background: var(--bg-header); padding: 12px; border-radius: var(--radius);">
<div style="position: relative; display: inline-block;">
<div class="profile-avatar-large" id="profile-edit-avatar" onclick="document.getElementById('profile-avatar-file-input').click()" title="Click to upload profile photo" style="cursor: pointer;">👤</div>
<button type="button" class="btn btn-sm btn-icon" onclick="document.getElementById('profile-avatar-file-input').click()" title="Upload Photo" style="position: absolute; bottom: -3px; right: -3px; border-radius: 50%; width: 22px; height: 22px; background: var(--accent); color: #000; border: none; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.5); cursor: pointer;">
<i data-lucide="camera" style="width: 12px; height: 12px;"></i>
</button>
</div>
<input type="file" id="profile-avatar-file-input" accept="image/png,image/jpeg,image/webp,image/gif" style="display: none;" onchange="handleAvatarFileUpload(event)">
<div style="flex: 1;">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div>
<div style="font-weight: 700; font-size: 15px;" id="profile-edit-username">User</div>
<div style="font-size: 11px; color: var(--text-dim);" id="profile-edit-auth-type">PAM / Local Linux Account</div>
</div>
<span class="user-role-badge" id="profile-edit-role-badge">ADMIN</span>
</div>
<div style="display: flex; gap: 6px; margin-top: 8px;">
<button type="button" class="btn btn-sm" onclick="document.getElementById('profile-avatar-file-input').click()"><i data-lucide="upload" style="width: 12px;"></i> Upload Photo</button>
<button type="button" class="btn btn-sm" onclick="resetAvatarToDefault()"><i data-lucide="rotate-ccw" style="width: 12px;"></i> Reset</button>
</div>
</div>
</div>
<div class="form-group">
<label>Display Name / Nickname:</label>
<input type="text" id="profile-input-nickname" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="e.g. Woofson">
</div>
<div class="form-group">
<label>Email Address:</label>
<input type="email" id="profile-input-email" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="e.g. user@domain.com">
</div>
<div class="form-group">
<label>Avatar Emoji / URL / Image Data:</label>
<input type="text" id="profile-input-avatar" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="e.g. 🐕 or https://example.com/avatar.png" oninput="renderAvatarElement(document.getElementById('profile-edit-avatar'), this.value)">
</div>
<div class="form-group" id="profile-password-section">
<label>Change Password (leave empty to keep current):</label>
<input type="password" id="profile-input-password" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="New password">
</div>
<div id="profile-status-msg" style="font-size: 12px; margin-top: 8px; display: none;"></div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('profile-modal')">Cancel</button>
<button class="btn btn-accent" onclick="saveUserProfile()"><i data-lucide="save"></i> Save Profile</button>
</div>
</div>
</div>
<div class="modal-overlay" id="confd-assembler-modal">
<div class="modal-box" style="width: 520px;">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent);"><img src="assets/conf.webp" alt="Config" style="width: 16px; height: 16px; object-fit: contain;"> Modular Config Directory Detected</span>
<button class="btn" onclick="closeModal('confd-assembler-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div style="margin-bottom: 12px; font-size: 13px; line-height: 1.5;">
You are opening a modular configuration folder (<b id="confd-modal-dirname">conf.d</b>) containing multiple snippet files.
</div>
<div style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 11px; max-height: 140px; overflow-y: auto;" id="confd-modal-filelist">
</div>
<div style="font-size: 12px; color: var(--text-muted); margin-bottom: 16px;">
How would you like Brum to open these configuration files?
</div>
<div style="display: flex; gap: 8px; justify-content: flex-end;">
<button class="btn" onclick="executeOpenConfdSeparateTabs()"><i data-lucide="folder-tree"></i> Open as Separate Tabs</button>
<button class="btn btn-accent" onclick="executeOpenConfdAssembled()"><i data-lucide="layers"></i> Assemble Ordered Config View</button>
</div>
</div>
</div>
</div>
<div class="floating-editor-window" id="floating-editor-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="editor-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="editor-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="editor-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="editor-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="editor-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header editor-header" id="editor-header">
<div class="editor-header-left">
<span class="editor-header-drag-handle" style="font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: grab;">
<img src="assets/edit.webp" alt="Edit" style="width: 16px; height: 16px; object-fit: contain;">
<span class="chewtoy-brand-text">Edit</span>
</span>
<select id="editor-confd-jump" class="btn btn-sm" style="display: none; max-width: 170px;" onchange="jumpToConfdSection(this.value)" title="Jump to Config Section">
<option value="">Jump to Section...</option>
</select>
</div>
<div class="editor-header-right" style="display: flex; align-items: center; gap: 4px;">
<div class="layout-btn-group desktop-only" id="editor-layout-btn-group">
<button type="button" class="btn btn-icon editor-view-mode-btn active" id="btn-view-single" onclick="handleEditorViewModeChange('single-editor')" title="Single Editor View"><i data-lucide="square"></i></button>
<button type="button" class="btn btn-icon editor-view-mode-btn" id="btn-view-dual-v" onclick="handleEditorViewModeChange('dual-vertical')" title="Dual Side-by-Side View"><i data-lucide="columns-2"></i></button>
<button type="button" class="btn btn-icon editor-view-mode-btn" id="btn-view-dual-h" onclick="handleEditorViewModeChange('dual-horizontal')" title="Dual Stacked View"><i data-lucide="rows-2"></i></button>
<button type="button" class="btn btn-icon editor-view-mode-btn" id="btn-view-preview" onclick="handleEditorViewModeChange('split-markdown')" title="Markdown & Live Preview"><i data-lucide="book-open"></i></button>
</div>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon btn-accent" id="btn-save-editor" onclick="saveActiveEditorTab()" title="Save Current Tab (Ctrl+S)"><i data-lucide="save"></i></button>
<button class="btn btn-icon desktop-only" id="btn-save-all-editor" onclick="saveAllEditorTabs()" title="Save All Open Tabs (Ctrl+Shift+S)"><i data-lucide="save-all"></i></button>
<button class="btn btn-icon" id="btn-new-tab-editor" onclick="createNewEditorTab()" title="New Tab (Ctrl+N)"><i data-lucide="plus"></i></button>
<button class="btn btn-icon" id="btn-find-editor" onclick="toggleFindBar()" title="Find & Replace (Ctrl+F / Ctrl+H)"><i data-lucide="search"></i></button>
<div class="header-sep desktop-only"></div>
<div class="dropdown-container mobile-foldable-tool" id="editor-actions-dropdown-container" style="position: relative;">
<button class="btn btn-icon" id="btn-editor-touch-tools" onclick="toggleEditorActionsDropdown(event)" title="Editor Tools, Layout & Languages">
<i data-lucide="sliders-horizontal"></i>
</button>
<div class="dropdown-menu editor-touch-menu" id="editor-actions-dropdown-menu" style="display: none; right: 0; min-width: 230px; z-index: 1700;">
<div class="dropdown-item" onclick="saveActiveEditorTab(); closeEditorActionsDropdown();"><i data-lucide="save"></i> 💾 Save Active File (Ctrl+S)</div>
<div class="dropdown-item" onclick="saveAllEditorTabs(); closeEditorActionsDropdown();"><i data-lucide="save-all"></i> 💾 Save All Open Tabs</div>
<div class="dropdown-item" onclick="createNewEditorTab(); closeEditorActionsDropdown();"><i data-lucide="plus"></i> ➕ New File (Ctrl+N)</div>
<div class="dropdown-item" onclick="toggleFindBar(); closeEditorActionsDropdown();"><i data-lucide="search"></i> 🔍 Find & Replace (Ctrl+F)</div>
<div class="dropdown-item" onclick="dockEditorToActivePane(); closeEditorActionsDropdown();"><i data-lucide="panel-left-close"></i> 🪟 Dock Editor into Pane</div>
<div class="context-sep"></div>
<div style="padding: 6px 12px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; font-weight: 700;">Layout & View</div>
<div class="dropdown-item" onclick="handleEditorViewModeChange('single-editor'); closeEditorActionsDropdown();"><i data-lucide="square"></i> Single View</div>
<div class="dropdown-item" onclick="handleEditorViewModeChange('dual-vertical'); closeEditorActionsDropdown();"><i data-lucide="columns-2"></i> Dual Side-by-Side View</div>
<div class="dropdown-item" onclick="handleEditorViewModeChange('dual-horizontal'); closeEditorActionsDropdown();"><i data-lucide="rows-2"></i> Dual Stacked View</div>
<div class="dropdown-item" onclick="handleEditorViewModeChange('split-markdown'); closeEditorActionsDropdown();"><i data-lucide="book-open"></i> Markdown & Live Preview</div>
<div class="context-sep"></div>
<div style="padding: 6px 12px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; font-weight: 700;">Syntax Language</div>
<div style="padding: 6px 12px;">
<select id="editor-language-select-mobile" class="pane-quick-filter" style="width: 100%; font-size: 12px; padding: 6px;" onchange="handleEditorLanguageChange(this.value); closeEditorActionsDropdown();">
<option value="auto">Auto Detect</option>
<option value="rust">Rust</option>
<option value="python">Python</option>
<option value="javascript">JavaScript / TypeScript</option>
<option value="html">HTML / Web</option>
<option value="css">CSS / SCSS</option>
<option value="json">JSON</option>
<option value="yaml">YAML</option>
<option value="toml">TOML</option>
<option value="bash">Bash Script</option>
<option value="sql">SQL</option>
<option value="markdown">Markdown</option>
<option value="clike">C / C++</option>
<option value="docker">Dockerfile</option>
<option value="ini">INI / Conf</option>
</select>
</div>
<div class="context-sep"></div>
<div class="dropdown-item" onclick="cycleEditorTabSize(); closeEditorActionsDropdown();"><i data-lucide="indent"></i> Toggle Tab Size (2 / 4 spaces)</div>
</div>
</div>
<button class="btn btn-icon desktop-only" onclick="dockEditorToActivePane()" title="Dock Editor into Active Pane (Keep browsing on other pane)"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingEditor()" title="Minimize to Pill"><i data-lucide="minus"></i></button>
<button class="btn btn-icon desktop-only" onclick="maximizeFloatingEditor()" title="Maximize / Restore Window"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeEditorModal()" title="Close Editor"><i data-lucide="x"></i></button>
</div>
</div>
<div class="editor-tab-strip" id="editor-tab-strip">
<div class="editor-tabs-scroll" id="editor-tabs-container">
</div>
<button class="editor-add-tab-btn" onclick="createNewEditorTab()" title="New Untitled Document (Ctrl+N)">
<i data-lucide="plus" style="width: 14px;"></i>
</button>
</div>
<div class="editor-find-bar" id="editor-find-bar" style="display: none;">
<div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
<div style="display: flex; align-items: center; gap: 4px;">
<i data-lucide="search" style="width: 14px; color: var(--accent);"></i>
<input type="text" id="editor-find-input" class="pane-quick-filter" placeholder="Find..." style="width: 180px; padding: 3px 6px;" oninput="executeFind()" onkeydown="handleFindKeyDown(event)">
<span id="editor-match-count" style="font-size: 11px; color: var(--text-dim); min-width: 50px;">0 of 0</span>
<button class="btn btn-icon" onclick="findNextMatch()" title="Next Match (Enter / F3)"><i data-lucide="chevron-down" style="width:13px;"></i></button>
<button class="btn btn-icon" onclick="findPrevMatch()" title="Previous Match (Shift+Enter / Shift+F3)"><i data-lucide="chevron-up" style="width:13px;"></i></button>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-sm filter-opt-btn" id="find-opt-case" onclick="toggleFindOption('matchCase')" title="Match Case (Alt+C)">Aa</button>
<button class="btn btn-sm filter-opt-btn" id="find-opt-word" onclick="toggleFindOption('matchWord')" title="Match Whole Word (Alt+W)">\b</button>
<button class="btn btn-sm filter-opt-btn" id="find-opt-regex" onclick="toggleFindOption('useRegex')" title="Use Regular Expression (Alt+R)">.*</button>
</div>
<div style="display: flex; align-items: center; gap: 4px; margin-left: 8px;">
<i data-lucide="repeat" style="width: 14px; color: var(--accent);"></i>
<input type="text" id="editor-replace-input" class="pane-quick-filter" placeholder="Replace with..." style="width: 180px; padding: 3px 6px;">
<button class="btn btn-sm" onclick="replaceCurrentMatch()">Replace</button>
<button class="btn btn-sm btn-accent" onclick="replaceAllMatches()">Replace All</button>
</div>
<button class="btn btn-icon" onclick="toggleFindBar(false)" style="margin-left: auto;" title="Close Find Bar"><i data-lucide="x" style="width:13px;"></i></button>
</div>
</div>
<div class="editor-grid single-mode" id="editor-grid-container">
<div class="editor-pane" id="editor-left-pane">
<div class="editor-body-wrapper">
<div class="editor-gutter" id="editor-gutter-left">1</div>
<textarea class="editor-textarea" id="editor-text-left" spellcheck="false" placeholder="Write code, text or markdown..." oninput="handleEditorInput('left')" onscroll="syncGutterScroll('left')" onkeydown="handleEditorKeyDown(event, 'left')" onclick="handleEditorClick('left')" onkeyup="handleEditorClick('left')"></textarea>
</div>
</div>
<div class="editor-pane" id="editor-right-pane" style="display: none;">
<div class="markdown-preview-pane" id="editor-preview-container"></div>
<div class="editor-body-wrapper" id="editor-body-wrapper-right" style="display: none;">
<div class="editor-gutter" id="editor-gutter-right">1</div>
<textarea class="editor-textarea" id="editor-text-right" spellcheck="false" placeholder="Second file content..." oninput="handleEditorInput('right')" onscroll="syncGutterScroll('right')" onkeydown="handleEditorKeyDown(event, 'right')" onclick="handleEditorClick('right')" onkeyup="handleEditorClick('right')"></textarea>
</div>
</div>
</div>
<div class="editor-status-bar" id="editor-status-bar">
<div class="editor-status-left">
<span id="editor-cursor-pos">Ln 1, Col 1</span>
<span class="status-sep">|</span>
<span id="editor-doc-stats">0 lines | 0 chars | 0 words</span>
</div>
<div class="editor-status-right">
<span id="editor-confd-status" style="display: none; color: var(--accent); font-weight: 600;">🧩 conf.d Assembled View</span>
<span class="status-sep" id="editor-confd-sep" style="display: none;">|</span>
<div class="editor-status-lang-picker" title="Click to Change Language Syntax Mode">
<select id="editor-language-select" class="editor-status-lang-select" onchange="handleEditorLanguageChange(this.value)" title="Change Syntax Highlighting Mode">
<option value="auto">Auto Detect</option>
<option value="rust">Rust</option>
<option value="python">Python</option>
<option value="javascript">JavaScript / TypeScript</option>
<option value="html">HTML / XML</option>
<option value="css">CSS / SCSS</option>
<option value="json">JSON</option>
<option value="yaml">YAML</option>
<option value="toml">TOML</option>
<option value="bash">Bash / Shell</option>
<option value="sql">SQL</option>
<option value="markdown">Markdown</option>
<option value="clike">C / C++</option>
<option value="docker">Dockerfile</option>
<option value="ini">INI / Conf</option>
</select>
<span id="editor-language-badge" class="editor-status-lang-badge">AUTO ▾</span>
</div>
<span class="status-sep">|</span>
<span id="editor-indent-info" onclick="cycleEditorTabSize()" style="cursor: pointer;" title="Click to toggle tab width">Spaces: 2</span>
<span class="status-sep">|</span>
<span id="editor-encoding-info">UTF-8</span>
<span class="status-sep">|</span>
<span id="editor-eol-info">LF</span>
</div>
</div>
</div>
<div class="editor-pill" id="editor-pill" style="display: none;" onclick="restoreFloatingEditor()" title="Click to restore Edit (F4)">
<img src="assets/edit.webp" alt="Edit" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle;">
<span id="editor-pill-text">Edit (1 file)</span>
<span class="editor-pill-dirty" id="editor-pill-dirty" style="display: none;"></span>
</div>
<div class="floating-calculator-window" id="floating-calculator-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="modal-header calc-header" id="calc-header">
<div class="calc-header-left" style="display: flex; align-items: center; gap: 6px;">
<span class="calc-header-drag-handle" style="font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: grab;">
<img src="assets/calc.webp" alt="Calculator" style="width: 16px; height: 16px; object-fit: contain;">
<span class="chewtoy-brand-text">Calculator</span>
</span>
</div>
<div class="calc-header-actions" style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon" onclick="toggleCalcHistory()" id="btn-calc-history-toggle" title="Calculation History"><i data-lucide="history"></i></button>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon desktop-only" onclick="dockCalculatorToActivePane()" title="Dock Calculator into Active Pane"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingCalculator()" title="Minimize to Taskbar"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingCalculator()" title="Close Calculator"><i data-lucide="x"></i></button>
</div>
</div>
<div class="calc-body">
<div class="calc-display-panel">
<div class="calc-expression-line" id="calc-expr-display"> </div>
<div class="calc-result-row">
<input type="text" class="calc-result-input" id="calc-display-input" value="0" autocomplete="off" spellcheck="false" readonly />
<button class="btn btn-icon btn-xs calc-copy-btn" onclick="copyCalcResult()" title="Copy Result to Clipboard"><i data-lucide="copy" style="width: 13px;"></i></button>
</div>
</div>
<div class="calc-converters-bar" id="calc-converters-bar">
<div class="calc-conv-item" title="Human-readable File Size"><span class="calc-conv-lbl">SIZE:</span> <span class="calc-conv-val" id="calc-conv-size">0 B</span></div>
<div class="calc-conv-item" title="Hexadecimal"><span class="calc-conv-lbl">HEX:</span> <span class="calc-conv-val" id="calc-conv-hex">0x0</span></div>
<div class="calc-conv-item" title="Octal (chmod mode)"><span class="calc-conv-lbl">OCT:</span> <span class="calc-conv-val" id="calc-conv-oct">0</span></div>
<div class="calc-conv-item" title="Binary"><span class="calc-conv-lbl">BIN:</span> <span class="calc-conv-val" id="calc-conv-bin">0b0</span></div>
</div>
<div class="calc-units-row">
<button class="btn btn-xs calc-unit-btn" onclick="calcAppendUnit('KB')" title="Multiply by 1024 (KB)">KB</button>
<button class="btn btn-xs calc-unit-btn" onclick="calcAppendUnit('MB')" title="Multiply by 1024² (MB)">MB</button>
<button class="btn btn-xs calc-unit-btn" onclick="calcAppendUnit('GB')" title="Multiply by 1024³ (GB)">GB</button>
<button class="btn btn-xs calc-unit-btn" onclick="calcAppendUnit('TB')" title="Multiply by 1024⁴ (TB)">TB</button>
<button class="btn btn-xs calc-unit-btn" onclick="calcAppendFunc('sqrt(')" title="Square Root">√</button>
<button class="btn btn-xs calc-unit-btn" onclick="calcAppendOp('^')" title="Exponent / Power">xʸ</button>
</div>
<div class="calc-keypad-grid">
<button class="btn calc-btn calc-btn-fn" onclick="calcClearAll()">C</button>
<button class="btn calc-btn calc-btn-fn" onclick="calcClearEntry()">CE</button>
<button class="btn calc-btn calc-btn-fn" onclick="calcBackspace()" title="Backspace"><i data-lucide="delete" style="width: 14px;"></i></button>
<button class="btn calc-btn calc-btn-op" onclick="calcAppendOp('/')">÷</button>
<button class="btn calc-btn calc-btn-fn" onclick="calcAppendChar('(')">(</button>
<button class="btn calc-btn calc-btn-fn" onclick="calcAppendChar(')')">)</button>
<button class="btn calc-btn calc-btn-fn" onclick="calcAppendOp('%')">%</button>
<button class="btn calc-btn calc-btn-op" onclick="calcAppendOp('*')">×</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('7')">7</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('8')">8</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('9')">9</button>
<button class="btn calc-btn calc-btn-op" onclick="calcAppendOp('-')">−</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('4')">4</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('5')">5</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('6')">6</button>
<button class="btn calc-btn calc-btn-op" onclick="calcAppendOp('+')">+</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('1')">1</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('2')">2</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('3')">3</button>
<button class="btn calc-btn calc-btn-equals" onclick="calcEvaluate()">=</button>
<button class="btn calc-btn calc-btn-fn" onclick="calcToggleSign()">±</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendNum('0')">0</button>
<button class="btn calc-btn calc-btn-num" onclick="calcAppendDot()">.</button>
<button class="btn calc-btn calc-btn-fn" onclick="calcAppendPi()" title="Pi (3.14159...)">π</button>
</div>
<div class="calc-history-panel" id="calc-history-panel" style="display: none;">
<div class="calc-history-header">
<span>Calculation History</span>
<button class="btn btn-xs" onclick="calcClearHistory()">Clear</button>
</div>
<div class="calc-history-list" id="calc-history-list">
<div class="calc-history-empty" style="font-size: 10px; color: var(--text-dim); text-align: center; padding: 6px;">No calculations yet</div>
</div>
</div>
</div>
</div>
<div class="calc-pill" id="calc-pill" style="display: none;" onclick="restoreFloatingCalculator()" title="Click to restore Calculator">
<img src="assets/calc.webp" alt="Calculator" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle;">
<span id="calc-pill-text">Calculator</span>
</div>
<div class="floating-notedog-window" id="floating-notedog-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="notedog-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="notedog-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="notedog-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="notedog-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="notedog-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header notedog-header" id="notedog-header">
<div class="notedog-header-left" style="display: flex; align-items: center; gap: 6px;">
<span class="notedog-header-drag-handle" style="font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: grab;">
<img src="assets/note.webp" alt="Notes" style="width: 16px; height: 16px; object-fit: contain; vertical-align: middle;">
<span class="chewtoy-brand-text">Notes</span>
</span>
</div>
<div class="notedog-header-center" style="flex: 1; max-width: 260px; margin: 0 8px; position: relative;">
<i data-lucide="search" style="position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--text-dim);"></i>
<input type="text" id="notedog-search-input" class="pane-quick-filter" placeholder="Search notes..." style="width: 100%; padding-left: 26px; font-size: 11px; height: 28px; box-sizing: border-box;" oninput="handleNoteDogSearch(this.value)">
</div>
<div class="notedog-header-actions" style="display: flex; align-items: center; gap: 4px;">
<button type="button" class="btn btn-icon notedog-drawer-btn" id="btn-notedog-drawer-toggle" onclick="toggleNoteDogDrawer()" title="Toggle Notes Explorer (Sidebar)"><i data-lucide="panel-left"></i></button>
<div class="layout-btn-group desktop-only" id="notedog-layout-btn-group">
<button type="button" class="btn btn-icon notedog-mode-btn" id="notedog-mode-edit" onclick="setNoteDogViewMode('edit')" title="Editor Only View (1)"><i data-lucide="square"></i></button>
<button type="button" class="btn btn-icon notedog-mode-btn active" id="notedog-mode-split" onclick="setNoteDogViewMode('split')" title="Side-by-Side Split View (2V)"><i data-lucide="columns-2"></i></button>
<button type="button" class="btn btn-icon notedog-mode-btn" id="notedog-mode-preview" onclick="setNoteDogViewMode('preview')" title="Live Markdown Preview (Preview)"><i data-lucide="book-open"></i></button>
</div>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon btn-accent" onclick="openNoteDogNewMenu(event)" title="New Notebook, Section or Note (Ctrl+N)"><i data-lucide="plus"></i></button>
<button class="btn btn-icon desktop-only" onclick="openNoteDogVersionsModal()" title="Revision History & Live Diffs"><i data-lucide="history"></i></button>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon desktop-only" onclick="dockNoteDogToActivePane()" title="Dock NoteDog into Active Pane"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingNoteDog()" title="Minimize to Pill"><i data-lucide="minus"></i></button>
<button class="btn btn-icon desktop-only" onclick="maximizeFloatingNoteDog()" title="Maximize / Restore Window"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingNoteDog()" title="Close NoteDog"><i data-lucide="x"></i></button>
</div>
</div>
<div class="notedog-body" id="notedog-body">
<div class="notedog-drawer-backdrop" id="notedog-drawer-backdrop" onclick="closeNoteDogDrawer()"></div>
<div class="notedog-sidebar" id="notedog-sidebar">
<div class="notedog-storage-mode-bar" id="notedog-storage-mode-bar">
<div class="notedog-storage-toggle-group">
<button type="button" class="notedog-storage-btn active" id="btn-notedog-mode-db" onclick="setNoteDogStorageMode('database')" title="Persistent SQLite Database (Rich Attachments, Tags, Color Labels, Fast Search)">
<i data-lucide="database" style="width: 11px; height: 11px;"></i> <span>Database</span>
</button>
<button type="button" class="notedog-storage-btn" id="btn-notedog-mode-fs" onclick="setNoteDogStorageMode('filesystem')" title="Filesystem Markdown Files (~/Notes)">
<i data-lucide="folder" style="width: 11px; height: 11px;"></i> <span>Filesystem</span>
</button>
</div>
<button type="button" class="btn btn-icon btn-xs" id="btn-notedog-migration" onclick="openNoteDogMigrationMenu(event)" title="Migration: Export DB Notes to ~/Notes or Import from ~/Notes">
<i data-lucide="arrow-left-right" style="width: 12px; height: 12px;"></i>
</button>
</div>
<div class="notedog-tier notedog-tier-notebooks">
<div class="notedog-tier-header">
<span style="font-weight: 700; font-size: 10px; color: var(--accent); letter-spacing: 0.5px; text-transform: uppercase;" id="notedog-tier1-title">📚 Categories</span>
<div style="display: flex; gap: 2px;">
<button class="btn btn-icon btn-xs fs-only" onclick="promptChangeNoteDogFolder()" title="Change Notes Folder Location"><i data-lucide="folder-cog" style="width: 11px;"></i></button>
<button class="btn btn-icon btn-xs fs-only" id="btn-toggle-encrypt-nb" onclick="promptToggleEncryptNotebook()" title="Encrypt / Decrypt Active Notebook"><i data-lucide="shield" style="width: 11px;"></i></button>
<button class="btn btn-icon btn-xs" onclick="promptCreateNotebookOrCategory()" title="Create Notebook / Category"><i data-lucide="folder-plus" style="width: 11px;"></i></button>
<button class="btn btn-icon btn-xs mobile-or-tablet-only" onclick="closeNoteDogDrawer()" title="Close Drawer"><i data-lucide="x" style="width: 11px;"></i></button>
</div>
</div>
<div class="notedog-tier-list" id="notedog-notebooks-list"></div>
</div>
<div class="notedog-tier notedog-tier-sections">
<div class="notedog-tier-header">
<span style="font-weight: 700; font-size: 10px; color: var(--text-dim); letter-spacing: 0.5px; text-transform: uppercase;">📂 Sections</span>
<div style="display: flex; gap: 2px;">
<button class="btn btn-icon btn-xs fs-only" id="btn-toggle-encrypt-sec" onclick="promptToggleEncryptSection()" title="Encrypt / Decrypt Active Section"><i data-lucide="shield" style="width: 11px;"></i></button>
<button class="btn btn-icon btn-xs" onclick="promptCreateSection()" title="Create Section in Selected Category / Notebook"><i data-lucide="plus" style="width: 11px;"></i></button>
</div>
</div>
<div class="notedog-tier-list" id="notedog-sections-list"></div>
</div>
<div class="notedog-tier notedog-tier-notes">
<div class="notedog-tier-header">
<span style="font-weight: 700; font-size: 10px; color: var(--text-dim); letter-spacing: 0.5px; text-transform: uppercase;">📄 Notes</span>
<div style="display: flex; gap: 2px;">
<button class="btn btn-icon btn-xs fs-only" onclick="promptCreateNote(true)" title="Create Encrypted Note (.md.enc)"><i data-lucide="lock" style="width: 11px;"></i></button>
<button class="btn btn-icon btn-xs" onclick="promptCreateNote(false)" title="Create Plain Note (.md)"><i data-lucide="plus" style="width: 11px;"></i></button>
<button class="btn btn-icon btn-xs" onclick="openNoteDogTemplatePicker(event)" title="New Note from Template"><i data-lucide="file-plus" style="width: 11px;"></i></button>
</div>
</div>
<div class="notedog-tier-list" id="notedog-notes-list"></div>
</div>
</div>
<div class="notedog-workspace" id="notedog-workspace">
<div class="notedog-workspace-header">
<div style="display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;">
<button type="button" class="btn btn-icon notedog-drawer-btn" id="btn-notedog-workspace-drawer" onclick="toggleNoteDogDrawer()" title="Toggle Notes Explorer (Sidebar)" style="width: 26px; height: 26px; min-width: 26px; padding: 0;"><i data-lucide="panel-left"></i></button>
<button type="button" class="btn btn-icon db-only" id="btn-pin-note" onclick="toggleActiveNotePin()" title="Pin / Unpin Note" style="width: 26px; height: 26px; min-width: 26px; padding: 0;"><i data-lucide="pin" style="width: 13px; height: 13px;"></i></button>
<div class="notedog-color-indicator db-only" id="notedog-color-indicator" onclick="openNoteDogColorPicker(event)" title="Set Note Color Tag"></div>
<input type="text" class="notedog-note-title-input" id="notedog-active-title" placeholder="Untitled Note" onchange="handleNoteDogTitleChange(this.value)" onkeydown="if(event.key==='Enter') this.blur();">
<span class="notedog-save-status" id="notedog-save-status">Saved</span>
</div>
<div class="notedog-workspace-actions" style="display: flex; align-items: center; gap: 3px;">
<button class="btn btn-icon fs-only" id="btn-toggle-encrypt-note" onclick="toggleCurrentNoteEncryption()" title="Encrypt / Decrypt Note (Ctrl+E)"><i data-lucide="lock" id="icon-encrypt-note"></i></button>
<button class="btn btn-icon btn-accent" id="btn-save-notedog" onclick="saveActiveNoteDogNote()" title="Save Note (Ctrl+S)"><i data-lucide="save"></i></button>
<button class="btn btn-icon" id="btn-template-notedog" onclick="openNoteDogTemplatePicker(event)" title="Insert Template"><i data-lucide="layout-template"></i></button>
<button class="btn btn-icon btn-danger-hover" id="btn-delete-notedog" onclick="promptDeleteCurrentNote()" title="Delete Current Note"><i data-lucide="trash-2"></i></button>
</div>
</div>
<div class="notedog-meta-bar db-only" id="notedog-meta-bar" style="display: flex; align-items: center; justify-content: space-between; padding: 3px 8px; background: rgba(0,0,0,0.18); border-bottom: 1px solid var(--border); font-size: 11px;">
<div style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0;">
<span class="notedog-cat-chip" id="notedog-active-cat-chip" onclick="promptChangeNoteCategory()" title="Click to change category">General</span>
<span style="color: var(--text-dim); font-size: 10px;">/</span>
<span class="notedog-sec-chip" id="notedog-active-sec-chip" onclick="promptChangeNoteSection()" title="Click to change section">Default</span>
<div class="notedog-tags-list" id="notedog-tags-list"></div>
<button class="btn btn-xs btn-outline" onclick="promptAddNoteTag()" title="Add Tag" style="height: 18px; font-size: 9px; padding: 0 4px; display: inline-flex; align-items: center; gap: 2px;">
<i data-lucide="tag" style="width: 9px; height: 9px;"></i> + Tag
</button>
</div>
<div style="display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-dim);">
<span id="notedog-updated-time" style="font-family: var(--font-mono);"></span>
</div>
</div>
<div class="notedog-formatting-bar">
<button class="btn btn-xs btn-icon" onclick="insertNoteDogMarkdown('**', '**', 'bold text')" title="Bold (Ctrl+B)"><i data-lucide="bold" style="width: 12px;"></i></button>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogMarkdown('*', '*', 'italic text')" title="Italic (Ctrl+I)"><i data-lucide="italic" style="width: 12px;"></i></button>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogMarkdown('~~', '~~', 'strikethrough')" title="Strikethrough"><i data-lucide="strikethrough" style="width: 12px;"></i></button>
<div class="notedog-fmt-sep"></div>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogMarkdown('## ', '', 'Heading')" title="Heading 2"><i data-lucide="heading-2" style="width: 12px;"></i></button>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogMarkdown('- [ ] ', '', 'Task item')" title="Interactive Task Tickbox"><i data-lucide="check-square" style="width: 12px;"></i></button>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogMarkdown('- ', '', 'List item')" title="Bullet List"><i data-lucide="list" style="width: 12px;"></i></button>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogMarkdown('> ', '', 'Quote text')" title="Blockquote"><i data-lucide="quote" style="width: 12px;"></i></button>
<div class="notedog-fmt-sep"></div>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogMarkdown('`', '`', 'code')" title="Inline Code"><i data-lucide="code" style="width: 12px;"></i></button>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogMermaid()" title="Insert Mermaid Flowchart Block"><i data-lucide="git-fork" style="width: 12px;"></i></button>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogColorTag()" title="Insert Universal Color Span"><i data-lucide="palette" style="width: 12px; color: var(--accent);"></i></button>
<button class="btn btn-xs btn-icon" onclick="insertNoteDogTimestamp()" title="Insert Current Timestamp"><i data-lucide="clock" style="width: 12px;"></i></button>
<div class="notedog-fmt-sep"></div>
<button class="btn btn-xs btn-icon" id="btn-notedog-attach" onclick="triggerNoteAttachmentUpload()" title="Attach Images, Audio, PDF or Files (Ctrl+V / Drag & Drop)"><i data-lucide="paperclip" style="width: 12px;"></i></button>
<button class="btn btn-xs btn-icon" id="btn-notedog-attachments-toggle" onclick="toggleNoteAttachmentsTray()" title="Toggle Note Attachments Gallery"><i data-lucide="image" style="width: 12px;"></i><span id="notedog-attachments-count-badge" class="notedog-att-badge" style="display: none;">0</span></button>
<input type="file" id="notedog-attachment-file-input" style="display: none;" multiple onchange="handleNoteAttachmentFileSelected(this.files)">
</div>
<div class="notedog-attachments-tray" id="notedog-attachments-tray" style="display: none;">
<div class="notedog-att-tray-header">
<div style="display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11px;">
<i data-lucide="paperclip" style="width: 12px; height: 12px; color: var(--accent);"></i>
<span>Note Attachments & Media</span>
<span class="badge" id="notedog-att-tray-count">0 files</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-xs btn-outline" onclick="triggerNoteAttachmentUpload()" style="height: 22px; font-size: 10px; display: flex; align-items: center; gap: 4px;">
<i data-lucide="upload" style="width: 10px; height: 10px;"></i> Upload Files
</button>
<button class="btn btn-icon btn-xs" onclick="toggleNoteAttachmentsTray()" title="Close Gallery">
<i data-lucide="x" style="width: 11px; height: 11px;"></i>
</button>
</div>
</div>
<div class="notedog-att-tray-body" id="notedog-att-tray-list">
</div>
<div class="notedog-att-dropzone" id="notedog-att-dropzone" onclick="triggerNoteAttachmentUpload()">
<i data-lucide="upload-cloud" style="width: 16px; height: 16px; color: var(--accent);"></i>
<span>Drag & drop media files here or paste screenshots directly into editor (<kbd>Ctrl+V</kbd>)</span>
</div>
</div>
<div class="notedog-panes-wrapper split-mode" id="notedog-panes-wrapper">
<div class="notedog-pane notedog-editor-pane" id="notedog-editor-pane">
<div class="notedog-editor-gutter" id="notedog-editor-gutter">1</div>
<textarea class="notedog-textarea" id="notedog-editor-textarea" spellcheck="false" placeholder="Write markdown notes..." oninput="handleNoteDogInput()" onscroll="syncNoteDogGutter()" onkeydown="handleNoteDogKeyDown(event)"></textarea>
</div>
<div class="notedog-pane notedog-preview-pane" id="notedog-preview-pane">
<div class="notedog-preview-content" id="notedog-preview-content"></div>
</div>
</div>
<div class="notedog-unlock-card" id="notedog-unlock-card" style="display: none;">
<div class="notedog-unlock-box">
<div style="font-size: 32px; margin-bottom: 8px;">🔒</div>
<div style="font-weight: 700; font-size: 15px; color: var(--accent); margin-bottom: 4px;" id="notedog-unlock-title">Encrypted NoteDog Note</div>
<div style="font-size: 11px; color: var(--text-dim); margin-bottom: 16px; text-align: center; max-width: 340px;" id="notedog-unlock-sub">
Protected with ChaCha20-Poly1305 + Argon2id authenticated encryption. Compatible with NoteDog TUI.
</div>
<div style="width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px;">
<input type="password" id="notedog-unlock-pass" class="pane-quick-filter" placeholder="Enter passphrase..." style="width: 100%; padding: 8px 10px; font-size: 13px;" onkeydown="if(event.key==='Enter') executeUnlockNoteDogNote();">
<label style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); cursor: pointer;">
<input type="checkbox" id="notedog-unlock-remember" checked>
<span>Remember passphrase for this session</span>
</label>
<div id="notedog-unlock-error" style="display: none; color: var(--danger); font-size: 11px; text-align: center;"></div>
<button class="btn btn-accent" onclick="executeUnlockNoteDogNote()" style="width: 100%; height: 32px; font-weight: 600;">
<i data-lucide="unlock" style="width: 14px;"></i> Unlock Note
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="notedog-pill" id="notedog-pill" style="display: none;" onclick="restoreFloatingNoteDog()" title="Click to restore NoteDog">
<img src="assets/note.webp" alt="NoteDog" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle;">
<span id="notedog-pill-text">NoteDog</span>
<span class="notedog-pill-dirty" id="notedog-pill-dirty" style="display: none;"></span>
</div>
<div class="modal-overlay" id="notedog-versions-modal" style="z-index: 2860;">
<div class="modal-box" style="width: 720px; max-width: 95vw; height: 560px; max-height: 90vh; display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;">
<div class="modal-header" style="padding: 10px 14px; background: var(--bg-dark); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 8px;">
<img src="assets/note.webp" alt="NoteDog" style="width: 16px; height: 16px; object-fit: contain;">
<span style="font-weight: 700; font-size: 13px;">Note Revision History</span>
<span class="notedog-badge-tag" id="notedog-version-note-name">Note.md</span>
</div>
<button class="btn btn-icon btn-xs modal-close-btn" onclick="closeModal('notedog-versions-modal')"><i data-lucide="x" style="width: 13px;"></i></button>
</div>
<div class="modal-body" style="flex: 1; display: flex; overflow: hidden; padding: 0;">
<div style="width: 220px; border-right: 1px solid var(--border); background: var(--bg-dark); display: flex; flex-direction: column; overflow-y: auto;" id="notedog-versions-list">
</div>
<div style="flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #090a0d;">
<div style="padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--bg-panel); display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 11px; color: var(--text-dim);" id="notedog-version-meta-label">Select a revision to preview changes</span>
<button class="btn btn-xs btn-accent" id="btn-notedog-restore-version" style="display: none;" onclick="restoreSelectedNoteDogVersion()"><i data-lucide="rotate-ccw" style="width: 11px;"></i> Restore this Version</button>
</div>
<div style="flex: 1; overflow-y: auto; padding: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: #f1f5f9; white-space: pre-wrap;" id="notedog-version-preview-content"></div>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="notedog-crypto-modal" style="z-index: 2870;">
<div class="modal-box" style="width: 440px; max-width: 95vw;">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent);">
<i data-lucide="shield" style="width: 16px; height: 16px;"></i>
<span id="notedog-crypto-modal-title">Encrypt Section</span>
</span>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('notedog-crypto-modal')" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="display: flex; flex-direction: column; gap: 10px;">
<div style="font-size: 12px; color: var(--text-dim);" id="notedog-crypto-modal-desc">
Set a passphrase to encrypt all notes in this section. NoteDog TUI cross-compatible.
</div>
<div style="display: flex; flex-direction: column; gap: 4px;">
<label for="notedog-crypto-pass" style="font-size: 11px; font-weight: 600;">Passphrase:</label>
<input type="password" id="notedog-crypto-pass" class="pane-quick-filter" placeholder="Enter passphrase..." style="width: 100%; padding: 8px 10px; font-size: 13px;">
</div>
<div style="display: flex; flex-direction: column; gap: 4px;" id="notedog-crypto-confirm-group">
<label for="notedog-crypto-pass-confirm" style="font-size: 11px; font-weight: 600;">Confirm Passphrase:</label>
<input type="password" id="notedog-crypto-pass-confirm" class="pane-quick-filter" placeholder="Re-enter passphrase..." style="width: 100%; padding: 8px 10px; font-size: 13px;">
</div>
<div id="notedog-crypto-error" style="display: none; color: var(--danger); font-size: 11px;"></div>
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 8px;">
<button class="btn" onclick="closeModal('notedog-crypto-modal')">Cancel</button>
<button class="btn btn-accent" id="btn-notedog-crypto-confirm"><i data-lucide="check" style="width: 14px;"></i> Proceed</button>
</div>
</div>
</div>
<div class="modal-overlay" id="notedog-create-note-modal" style="z-index: 2870;">
<div class="modal-box" style="width: 440px; max-width: 95vw;">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent);">
<img src="assets/note.webp" alt="NoteDog" style="width: 16px; height: 16px; object-fit: contain;" id="notedog-create-modal-icon">
<span id="notedog-create-modal-title">Create New Note</span>
</span>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('notedog-create-note-modal')" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="display: flex; flex-direction: column; gap: 10px;">
<div style="display: flex; flex-direction: column; gap: 4px;">
<label for="notedog-create-title-input" style="font-size: 11px; font-weight: 600;">Note Title:</label>
<input type="text" id="notedog-create-title-input" class="pane-quick-filter" placeholder="e.g. Project Architecture" style="width: 100%; padding: 8px 10px; font-size: 13px;">
</div>
<label id="notedog-create-is-encrypted-label" style="display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer;">
<input type="checkbox" id="notedog-create-is-encrypted" onchange="toggleNoteDogCreateEncryptedFields()">
<span>🔒 Encrypted Note (ChaCha20-Poly1305 / .md.enc)</span>
</label>
<div id="notedog-create-pass-group" style="display: none; flex-direction: column; gap: 6px;">
<label for="notedog-create-pass" style="font-size: 11px; font-weight: 600;">Passphrase:</label>
<input type="password" id="notedog-create-pass" class="pane-quick-filter" placeholder="Enter passphrase..." style="width: 100%; padding: 8px 10px; font-size: 13px;">
</div>
<div id="notedog-create-error" style="display: none; color: var(--danger); font-size: 11px;"></div>
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 8px;">
<button class="btn" onclick="closeModal('notedog-create-note-modal')">Cancel</button>
<button class="btn btn-accent" id="btn-notedog-create-confirm"><i data-lucide="plus" style="width: 14px;"></i> Create Note</button>
</div>
</div>
</div>
<div class="floating-tetradog-window" id="floating-tetradog-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="tetradog-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="tetradog-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="tetradog-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="tetradog-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="tetradog-resize-corner"></div>
<div class="modal-header tetradog-header" id="tetradog-header">
<div class="tetradog-header-left" style="display: flex; align-items: center; gap: 8px;">
<span class="tetradog-header-drag-handle" style="font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: grab;">
<img src="assets/amber-tetris.webp" alt="Tetra" style="width: 16px; height: 16px; object-fit: contain; vertical-align: middle;">
<span class="chewtoy-brand-text">Tetra</span>
</span>
</div>
<div class="tetradog-header-actions" style="display: flex; align-items: center; gap: 4px;">
<div class="layout-btn-group" id="tetradog-view-toggle-group">
<button type="button" class="btn btn-icon tetradog-view-btn active" id="btn-tetradog-view-game" onclick="setTetraDogView('game')" title="Arcade Game View"><i data-lucide="gamepad-2"></i></button>
<button type="button" class="btn btn-icon tetradog-view-btn" id="btn-tetradog-view-leaderboard" onclick="setTetraDogView('leaderboard')" title="High Scores & Leaderboard (All Users)"><i data-lucide="trophy"></i></button>
<button type="button" class="btn btn-icon tetradog-view-btn" id="btn-tetradog-view-settings" onclick="setTetraDogView('settings')" title="TetraDog Settings & Controls"><i data-lucide="sliders"></i></button>
</div>
<button class="btn btn-icon desktop-only" onclick="dockTetraDogToActivePane()" title="Dock TetraDog into Active Pane"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeTetraDog()" title="Minimize to Pill"><i data-lucide="minus"></i></button>
<button class="btn btn-icon desktop-only" onclick="maximizeTetraDog()" title="Maximize / Restore Window"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeTetraDog()" title="Close TetraDog"><i data-lucide="x"></i></button>
</div>
</div>
<div class="tetradog-body" id="tetradog-body">
<div class="tetradog-view tetradog-game-view" id="tetradog-view-game">
<div class="tetradog-arena">
<div class="tetradog-side-col tetradog-left-col">
<div class="tetradog-panel-card tetradog-hold-card">
<div class="tetradog-card-title">HOLD <span class="tetradog-key-hint desktop-only">C / Shift</span></div>
<div class="tetradog-canvas-wrap">
<canvas id="tetradog-hold-canvas" width="90" height="90"></canvas>
</div>
</div>
<div class="tetradog-panel-card tetradog-stats-card desktop-only-card">
<div class="tetradog-mode-banner">
<span class="tetradog-mode-badge" id="tetradog-arena-mode-badge">MARATHON</span>
</div>
<div class="tetradog-stat-row">
<span class="tetradog-stat-label">TOP SCORE</span>
<span class="tetradog-stat-number tetradog-glow-gold" id="tetradog-stat-hiscore">0</span>
</div>
<div class="tetradog-stat-row">
<span class="tetradog-stat-label">MODE</span>
<select id="tetradog-mode-select" class="tetradog-select" onchange="changeTetraDogMode(this.value)">
<option value="marathon">Marathon</option>
<option value="sprint">Sprint (40L)</option>
<option value="ultra">Ultra (3 Min)</option>
</select>
</div>
<div class="tetradog-stat-row" id="tetradog-timer-row" style="display: none;">
<span class="tetradog-stat-label">TIME</span>
<span class="tetradog-stat-number" id="tetradog-stat-timer">00:00.0</span>
</div>
</div>
<div class="tetradog-b2b-badge" id="tetradog-b2b-badge" style="display: none;">
⚡ BACK-TO-BACK
</div>
<div class="tetradog-combo-badge" id="tetradog-combo-badge" style="display: none;">
COMBO ×<span id="tetradog-combo-count">0</span>
</div>
</div>
<div class="tetradog-center-col">
<div class="tetradog-mobile-center-hud mobile-only-flex">
<span class="tetradog-mode-badge" id="tetradog-mobile-mode-badge">MARATHON</span>
<div class="tetradog-mob-stat-row">
<span class="tetradog-mob-stat-lbl">TOP:</span>
<span class="tetradog-mob-stat-val tetradog-glow-gold" id="tetradog-mob-hiscore">0</span>
</div>
</div>
<div class="tetradog-canvas-container" id="tetradog-canvas-container">
<canvas id="tetradog-board-canvas" width="240" height="480" class="tetradog-main-canvas"></canvas>
<div class="tetradog-scanlines" id="tetradog-scanlines"></div>
<div class="tetradog-overlay" id="tetradog-ready-overlay">
<div class="tetradog-overlay-box">
<div class="tetradog-arcade-logo">TETRADOG</div>
<div class="tetradog-arcade-sub">AUTHENTIC 60 FPS ARCADE CHEWTOY</div>
<div class="tetradog-ready-action">
<button class="btn btn-accent tetradog-btn-lg" onclick="startTetraDogGame()">
<i data-lucide="play"></i> START GAME
</button>
</div>
<div class="tetradog-key-legend desktop-only">
<div><kbd>←</kbd> <kbd>→</kbd> Move</div>
<div><kbd>↑</kbd> / <kbd>X</kbd> Rotate CW</div>
<div><kbd>Z</kbd> / <kbd>Ctrl</kbd> Rotate CCW</div>
<div><kbd>↓</kbd> Soft Drop</div>
<div><kbd>Space</kbd> Hard Drop</div>
<div><kbd>C</kbd> / <kbd>Shift</kbd> Hold</div>
<div><kbd>P</kbd> / <kbd>Esc</kbd> Pause</div>
</div>
</div>
</div>
<div class="tetradog-overlay" id="tetradog-pause-overlay" style="display: none;">
<div class="tetradog-overlay-box">
<div class="tetradog-overlay-title">PAUSED</div>
<div style="font-size: 11px; color: var(--text-dim); margin-bottom: 12px;">Press <kbd>P</kbd> or <kbd>Esc</kbd> to resume</div>
<div style="display: flex; gap: 8px;">
<button class="btn btn-accent" onclick="resumeTetraDogGame()"><i data-lucide="play"></i> Resume</button>
<button class="btn" onclick="restartTetraDogGame()"><i data-lucide="rotate-ccw"></i> Restart</button>
</div>
</div>
</div>
<div class="tetradog-overlay" id="tetradog-gameover-overlay" style="display: none;">
<div class="tetradog-overlay-box">
<div class="tetradog-overlay-title tetradog-danger-glow" id="tetradog-gameover-title">GAME OVER</div>
<div class="tetradog-go-stats">
<div class="tetradog-go-stat-item">
<div class="tetradog-go-label">FINAL SCORE</div>
<div class="tetradog-go-val tetradog-accent-glow" id="tetradog-go-score">0</div>
</div>
<div class="tetradog-go-stat-item">
<div class="tetradog-go-label">LEVEL</div>
<div class="tetradog-go-val" id="tetradog-go-level">1</div>
</div>
<div class="tetradog-go-stat-item">
<div class="tetradog-go-label">LINES</div>
<div class="tetradog-go-val" id="tetradog-go-lines">0</div>
</div>
<div class="tetradog-go-stat-item">
<div class="tetradog-go-label">TIME</div>
<div class="tetradog-go-val" id="tetradog-go-time">00:00</div>
</div>
</div>
<div class="tetradog-rank-banner" id="tetradog-rank-banner" style="display: none;">
🏆 <span id="tetradog-rank-text">Achieved Rank #1!</span>
</div>
<div style="display: flex; gap: 8px; margin-top: 12px; width: 100%;">
<button class="btn btn-accent" style="flex: 1;" onclick="restartTetraDogGame()"><i data-lucide="rotate-ccw"></i> Play Again</button>
<button class="btn" onclick="setTetraDogView('leaderboard')"><i data-lucide="trophy"></i> High Scores</button>
</div>
</div>
</div>
</div>
</div>
<div class="tetradog-side-col tetradog-right-col">
<div class="tetradog-panel-card tetradog-next-card">
<div class="tetradog-card-title">NEXT</div>
<div class="tetradog-canvas-wrap">
<canvas id="tetradog-next-canvas" width="90" height="220"></canvas>
</div>
</div>
<div class="tetradog-panel-card tetradog-actions-card desktop-only-card">
<button class="btn btn-accent btn-sm" id="btn-tetradog-start-pause" onclick="toggleTetraDogPlayPause()" style="width: 100%;">
<i data-lucide="play" id="icon-tetradog-play-pause"></i> <span id="label-tetradog-play-pause">Play</span>
</button>
<button class="btn btn-sm" onclick="restartTetraDogGame()" style="width: 100%;">
<i data-lucide="rotate-ccw"></i> Restart
</button>
</div>
</div>
</div>
<div class="tetradog-nes-controller" id="tetradog-nes-controller">
<div class="tetradog-dpad-cross">
<button class="dpad-btn dpad-up" id="tbtn-up" data-action="hardDrop" title="Hard Drop (Slam Piece)">
<i data-lucide="chevrons-up"></i>
</button>
<button class="dpad-btn dpad-left" id="tbtn-left" data-action="left" title="Move Left">
<i data-lucide="arrow-left"></i>
</button>
<div class="dpad-center"></div>
<button class="dpad-btn dpad-right" id="tbtn-right" data-action="right" title="Move Right">
<i data-lucide="arrow-right"></i>
</button>
<button class="dpad-btn dpad-down" id="tbtn-down" data-action="down" title="Soft Drop (Drop Faster)">
<i data-lucide="arrow-down"></i>
</button>
</div>
<div class="tetradog-nes-center-btns">
<button class="nes-pill-btn" id="tbtn-hold" data-action="hold" title="Hold Piece">
<span class="nes-pill-label">HOLD</span>
</button>
<button class="nes-pill-btn" id="tbtn-pause" onclick="toggleTetraDogPlayPause()" title="Play / Pause">
<span class="nes-pill-label" id="tbtn-pause-label">PAUSE</span>
</button>
</div>
<div class="tetradog-nes-actions">
<button class="nes-round-btn nes-btn-b" id="tbtn-rot-ccw" data-action="rotateCCW" title="Rotate CCW (B Button)">
<span class="nes-btn-name">B</span>
<span class="nes-btn-sub">↺</span>
</button>
<button class="nes-round-btn nes-btn-a" id="tbtn-rot-cw" data-action="rotateCW" title="Rotate CW (A Button)">
<span class="nes-btn-name">A</span>
<span class="nes-btn-sub">↻</span>
</button>
</div>
</div>
</div>
<div class="tetradog-view tetradog-leaderboard-view" id="tetradog-view-leaderboard" style="display: none;">
<div class="tetradog-lb-header-bar">
<div class="tetradog-lb-mode-pills">
<button class="btn btn-xs tetradog-lb-tab active" data-mode="marathon" onclick="loadTetraDogLeaderboard('marathon')">Marathon</button>
<button class="btn btn-xs tetradog-lb-tab" data-mode="sprint" onclick="loadTetraDogLeaderboard('sprint')">Sprint (40L)</button>
<button class="btn btn-xs tetradog-lb-tab" data-mode="ultra" onclick="loadTetraDogLeaderboard('ultra')">Ultra (3 Min)</button>
</div>
<div class="tetradog-lb-scope-toggle">
<label class="tetradog-scope-btn"><input type="radio" name="tetradog-scope" value="all" checked onchange="handleTetraDogScopeChange(this.value)"> 🌐 All Users</label>
<label class="tetradog-scope-btn"><input type="radio" name="tetradog-scope" value="mine" onchange="handleTetraDogScopeChange(this.value)"> 👤 My Best</label>
<button class="btn btn-icon btn-xs" onclick="refreshTetraDogLeaderboard()" title="Refresh Scores"><i data-lucide="refresh-cw"></i></button>
</div>
</div>
<div class="tetradog-user-summary" id="tetradog-user-summary">
<div class="tetradog-summary-item">
<span class="tetradog-summary-lbl">PERSONAL BEST</span>
<span class="tetradog-summary-val tetradog-glow-gold" id="tetradog-sum-best">0</span>
</div>
<div class="tetradog-summary-item">
<span class="tetradog-summary-lbl">GLOBAL RANK</span>
<span class="tetradog-summary-val" id="tetradog-sum-rank">-</span>
</div>
<div class="tetradog-summary-item">
<span class="tetradog-summary-lbl">MAX LEVEL</span>
<span class="tetradog-summary-val" id="tetradog-sum-level">1</span>
</div>
<div class="tetradog-summary-item">
<span class="tetradog-summary-lbl">TOTAL LINES</span>
<span class="tetradog-summary-val" id="tetradog-sum-lines">0</span>
</div>
<div class="tetradog-summary-item">
<span class="tetradog-summary-lbl">GAMES PLAYED</span>
<span class="tetradog-summary-val" id="tetradog-sum-games">0</span>
</div>
</div>
<div class="tetradog-lb-table-wrap">
<table class="tetradog-table">
<thead>
<tr>
<th style="width: 50px;">Rank</th>
<th>Player</th>
<th style="text-align: right;">Score</th>
<th style="text-align: right;">Level</th>
<th style="text-align: right;">Lines</th>
<th style="text-align: right;">Time</th>
<th style="text-align: right;">Date</th>
</tr>
</thead>
<tbody id="tetradog-leaderboard-tbody">
<tr><td colspan="7" style="text-align: center; color: var(--text-dim); padding: 24px;">Loading top scores from database...</td></tr>
</tbody>
</table>
</div>
<div class="tetradog-lb-footer">
<div style="display: flex; align-items: center; gap: 8px;">
<label for="tetradog-player-alias" style="font-size: 11px; color: var(--text-dim);">Player Alias:</label>
<input type="text" id="tetradog-player-alias" class="pane-quick-filter" placeholder="Your Name" style="width: 140px; height: 26px; font-size: 11px;" onchange="saveTetraDogPlayerAlias(this.value)">
<button class="btn btn-xs btn-outline" onclick="saveTetraDogPlayerAlias(document.getElementById('tetradog-player-alias').value)">Save</button>
</div>
<div>
<button class="btn btn-xs btn-danger-action" onclick="promptClearTetraDogScores()" title="Reset high scores"><i data-lucide="trash-2" style="width: 11px;"></i> Clear Scores</button>
</div>
</div>
</div>
<div class="tetradog-view tetradog-settings-view" id="tetradog-view-settings" style="display: none;">
<div class="tetradog-settings-scroll">
<div class="tetradog-settings-section">
<div class="tetradog-section-title">🕹️ Gameplay & Controls</div>
<div class="tetradog-setting-row">
<div>
<div class="tetradog-setting-title">Starting Level</div>
<div class="tetradog-setting-sub">Select starting gravity level (1 = standard, 10 = master speed)</div>
</div>
<select id="tetradog-cfg-start-level" class="tetradog-select" onchange="updateTetraDogConfig('startLevel', parseInt(this.value, 10))">
<option value="1">Level 1 (Relaxed)</option>
<option value="3">Level 3 (Brisk)</option>
<option value="5">Level 5 (Fast)</option>
<option value="8">Level 8 (Intense)</option>
<option value="10">Level 10 (Master)</option>
</select>
</div>
<div class="tetradog-setting-row">
<div>
<div class="tetradog-setting-title">Rotation System</div>
<div class="tetradog-setting-sub">SRS (Super Rotation System with wall kicks) or NES Classic</div>
</div>
<select id="tetradog-cfg-rotation" class="tetradog-select" onchange="updateTetraDogConfig('rotationSystem', this.value)">
<option value="srs">Super Rotation System (SRS)</option>
<option value="nes">Classic NES (Single Rotation)</option>
</select>
</div>
<div class="tetradog-setting-row">
<div>
<div class="tetradog-setting-title">Ghost Piece Projection</div>
<div class="tetradog-setting-sub">Project translucent landing shadow on the board</div>
</div>
<input type="checkbox" id="tetradog-cfg-ghost" checked onchange="updateTetraDogConfig('ghostPiece', this.checked)">
</div>
<div class="tetradog-setting-row">
<div>
<div class="tetradog-setting-title">Delayed Auto Shift (DAS)</div>
<div class="tetradog-setting-sub">Initial delay before rapid piece shifting (<span id="tetradog-das-val">133</span>ms)</div>
</div>
<input type="range" min="60" max="250" step="5" value="133" id="tetradog-cfg-das" oninput="document.getElementById('tetradog-das-val').textContent=this.value; updateTetraDogConfig('das', parseInt(this.value, 10))">
</div>
<div class="tetradog-setting-row">
<div>
<div class="tetradog-setting-title">Auto Repeat Rate (ARR)</div>
<div class="tetradog-setting-sub">Continuous shift speed (<span id="tetradog-arr-val">16</span>ms)</div>
</div>
<input type="range" min="0" max="50" step="2" value="16" id="tetradog-cfg-arr" oninput="document.getElementById('tetradog-arr-val').textContent=this.value; updateTetraDogConfig('arr', parseInt(this.value, 10))">
</div>
</div>
<div class="tetradog-settings-section">
<div class="tetradog-section-title">🎨 Audio & Visual Style</div>
<div class="tetradog-setting-row">
<div>
<div class="tetradog-setting-title">Retro Theme Palette</div>
<div class="tetradog-setting-sub">Color palette for board canvas and tetrominoes</div>
</div>
<select id="tetradog-cfg-theme" class="tetradog-select" onchange="setTetraDogTheme(this.value)">
<option value="amber">Woofsons Amber Charcoal</option>
<option value="gameboy">Game Boy Monochrome Green</option>
<option value="nes">NES 8-Bit Vibrant</option>
<option value="cyberpunk">Arcade Cyberpunk</option>
</select>
</div>
<div class="tetradog-setting-row">
<div>
<div class="tetradog-setting-title">CRT Scanlines & Glow</div>
<div class="tetradog-setting-sub">Subtle retro CRT screen scanline overlay</div>
</div>
<input type="checkbox" id="tetradog-cfg-scanlines" checked onchange="updateTetraDogConfig('scanlines', this.checked)">
</div>
<div class="tetradog-setting-row">
<div>
<div class="tetradog-setting-title">8-Bit Sound Effects</div>
<div class="tetradog-setting-sub">Synthesized Web Audio sound effects</div>
</div>
<input type="checkbox" id="tetradog-cfg-sound" checked onchange="updateTetraDogConfig('soundEnabled', this.checked)">
</div>
<div class="tetradog-setting-row">
<div>
<div class="tetradog-setting-title">Audio Volume (<span id="tetradog-vol-val">60</span>%)</div>
<div class="tetradog-setting-sub">Master volume level for synthesized audio</div>
</div>
<input type="range" min="0" max="100" step="5" value="60" id="tetradog-cfg-volume" oninput="document.getElementById('tetradog-vol-val').textContent=this.value; updateTetraDogConfig('volume', parseInt(this.value, 10))">
</div>
</div>
</div>
</div>
</div>
<div class="tetradog-statusbar" id="tetradog-statusbar">
<div class="tetradog-sb-left">
<button class="tetradog-statusbar-sound-btn" id="btn-tetradog-audio" onclick="toggleTetraDogAudio()" title="Sound Effects (Click to Mute/Unmute)">
<i data-lucide="volume-2" id="icon-tetradog-audio"></i>
</button>
<span class="tetradog-sb-hint desktop-only">P / Esc: Pause</span>
</div>
<div class="tetradog-sb-center">
<div class="tetradog-sb-pill">
<span class="tetradog-sb-label">SCORE</span>
<span class="tetradog-sb-val" id="tetradog-sb-score-val">0</span>
</div>
<div class="tetradog-sb-pill">
<span class="tetradog-sb-label">LEVEL</span>
<span class="tetradog-sb-val" id="tetradog-sb-lvl-val">1</span>
</div>
<div class="tetradog-sb-pill">
<span class="tetradog-sb-label">LINES</span>
<span class="tetradog-sb-val" id="tetradog-sb-lines-val">0</span>
</div>
</div>
<div class="tetradog-sb-right">
<span class="tetradog-sb-engine">60 FPS • SRS</span>
</div>
</div>
</div>
<div class="tetradog-pill" id="tetradog-pill" style="display: none;" onclick="restoreTetraDog()" title="Click to restore TetraDog">
<img src="assets/amber-tetris.webp" alt="TetraDog" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle;">
<span id="tetradog-pill-text">TetraDog</span>
<span class="tetradog-pill-score" id="tetradog-pill-score">0</span>
</div>
<audio id="sounddog-audio-element" preload="auto" crossorigin="anonymous" style="display: none;"></audio>
<input type="file" id="sounddog-file-input" multiple accept="audio/*,.mp3,.flac,.wav,.ogg,.m4a,.aac,.opus,.wma" style="display: none;" onchange="handleSoundDogFilePicker(event)">
<div class="floating-sounddog-window floating-audioplayer-window" id="floating-sounddog-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="sounddog-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="sounddog-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="sounddog-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="sounddog-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="sounddog-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header audioplayer-header" id="sounddog-header">
<div class="audioplayer-header-left" style="display: flex; align-items: center; gap: 6px; overflow: hidden;">
<span class="audioplayer-header-drag-handle" style="font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: grab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<img src="assets/amber-media.webp" alt="Audio Player" style="width: 16px; height: 16px; object-fit: contain; flex-shrink: 0;">
<span class="chewtoy-brand-text">Audio Player</span>
<span class="badge" id="sounddog-format-badge" style="font-size: 9px; text-transform: uppercase;">MP3</span>
</span>
</div>
<div class="audioplayer-header-center" style="flex: 1; max-width: 320px; margin: 0 8px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span id="sounddog-header-title" style="font-size: 11px; font-weight: 600; color: var(--text-main);">No audio loaded</span>
</div>
<div class="audioplayer-header-actions" style="display: flex; align-items: center; gap: 4px;">
<button type="button" class="btn btn-icon audioplayer-drawer-btn" id="btn-sounddog-playlist-toggle" onclick="toggleSoundDogPlaylistDrawer()" title="Toggle Playlist Drawer (Alt+P)"><i data-lucide="list-music"></i></button>
<button class="btn btn-icon" id="btn-sounddog-eq-toggle" onclick="toggleSoundDogEqDrawer()" title="Toggle 10-Band Studio Equalizer (E)"><i data-lucide="sliders"></i></button>
<button class="btn btn-icon" id="btn-sounddog-repeat" onclick="cycleSoundDogRepeat()" title="Repeat (Off / All / One)"><i data-lucide="repeat"></i></button>
<button class="btn btn-icon" id="btn-sounddog-shuffle" onclick="toggleSoundDogShuffle()" title="Toggle Shuffle (S)"><i data-lucide="shuffle"></i></button>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon desktop-only" onclick="dockSoundDogToActivePane()" title="Dock Audioplayer into Active Pane"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingSoundDog()" title="Minimize to Pill"><i data-lucide="minus"></i></button>
<button class="btn btn-icon desktop-only" onclick="maximizeFloatingSoundDog()" title="Maximize Window"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeSoundDog()" title="Close Audioplayer (Esc)"><i data-lucide="x"></i></button>
</div>
</div>
<div class="audioplayer-body" id="sounddog-body">
<div class="audioplayer-stage" id="sounddog-stage">
<div class="audioplayer-display-panel">
<div class="audioplayer-vis-wrap">
<canvas id="sounddog-visualizer-canvas" width="220" height="48" class="audioplayer-vis-canvas"></canvas>
</div>
<div class="audioplayer-meta-wrap">
<div class="audioplayer-title-row">
<span id="sounddog-track-title" class="audioplayer-title-text">Audioplayer</span>
<span id="sounddog-track-time-badge" class="audioplayer-time-badge">00:00</span>
</div>
<div id="sounddog-track-artist" class="audioplayer-artist-text">Woofsons Lab Jukebox</div>
<div class="audioplayer-tech-pills">
<span class="audioplayer-tech-pill" id="sounddog-tech-bitrate">320 KBPS</span>
<span class="audioplayer-tech-pill" id="sounddog-tech-samplerate">44.1 KHZ</span>
<span class="audioplayer-tech-pill" id="sounddog-tech-channels">STEREO</span>
</div>
</div>
</div>
<div class="audioplayer-eq-drawer" id="sounddog-eq-drawer" style="display: none;">
<div class="audioplayer-eq-header">
<div style="display: flex; align-items: center; gap: 6px;">
<span style="font-weight: 700; font-size: 10px; color: var(--accent); text-transform: uppercase;">10-Band Studio EQ</span>
<button type="button" class="btn btn-xs btn-outline" id="btn-sounddog-eq-power" onclick="toggleSoundDogEqEnabled()" style="font-size: 9px; padding: 1px 5px;">ON</button>
</div>
<div class="audioplayer-eq-presets">
<select id="sounddog-eq-preset-select" class="pane-quick-filter" style="font-size: 10px; height: 22px; padding: 1px 4px;" onchange="applySoundDogEqPreset(this.value)">
<option value="flat">Flat</option>
<option value="bass_boost">Bass Boost 🔥</option>
<option value="rock">Rock / Metal 🎸</option>
<option value="synthwave">Synthwave / Techno 🌆</option>
<option value="vocal">Vocal / Acoustic 🎙️</option>
<option value="jazz">Jazz & Warm 🎷</option>
<option value="classical">Classical 🎻</option>
<option value="pop">Pop & Dance ✨</option>
<option value="custom">Custom</option>
</select>
</div>
</div>
<div class="audioplayer-eq-sliders-row">
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-0">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-0" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(0, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">60</span>
</div>
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-1">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-1" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(1, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">170</span>
</div>
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-2">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-2" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(2, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">310</span>
</div>
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-3">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-3" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(3, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">600</span>
</div>
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-4">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-4" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(4, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">1K</span>
</div>
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-5">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-5" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(5, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">3K</span>
</div>
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-6">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-6" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(6, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">6K</span>
</div>
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-7">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-7" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(7, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">12K</span>
</div>
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-8">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-8" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(8, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">14K</span>
</div>
<div class="audioplayer-eq-slider-col">
<span class="audioplayer-eq-db" id="sounddog-eq-db-9">0</span>
<input type="range" class="audioplayer-eq-vslider" id="sounddog-eq-band-9" min="-12" max="12" step="0.5" value="0" oninput="setSoundDogEqBand(9, this.value)" orient="vertical">
<span class="audioplayer-eq-freq">16K</span>
</div>
</div>
</div>
<div class="audioplayer-scrubber-wrapper" onmousemove="handleSoundDogScrubberHover(event)" onmouseleave="hideSoundDogScrubberTooltip()">
<div class="audioplayer-scrubber-track" id="sounddog-scrubber-track" onclick="seekSoundDogFromEvent(event)">
<div class="audioplayer-scrubber-progress" id="sounddog-scrubber-progress"></div>
<div class="audioplayer-scrubber-thumb" id="sounddog-scrubber-thumb"></div>
</div>
<div class="audioplayer-scrubber-tooltip" id="sounddog-scrubber-tooltip" style="display: none;">00:00</div>
</div>
<div class="audioplayer-controls-row">
<div class="audioplayer-controls-left">
<button class="btn btn-icon btn-sm" onclick="playPrevSoundDogTrack()" title="Previous Track (Z)"><i data-lucide="skip-back"></i></button>
<button class="btn btn-icon btn-sm" onclick="skipSoundDog(-10)" title="Rewind 10s (Left Arrow)"><i data-lucide="rotate-ccw"></i></button>
<button class="btn btn-accent btn-sm audioplayer-play-btn" id="btn-sounddog-play" onclick="toggleSoundDogPlay()" title="Play / Pause (Space / X)"><i data-lucide="play" id="sounddog-play-icon"></i></button>
<button class="btn btn-icon btn-sm" onclick="skipSoundDog(10)" title="Forward 10s (Right Arrow)"><i data-lucide="rotate-cw"></i></button>
<button class="btn btn-icon btn-sm" onclick="playNextSoundDogTrack()" title="Next Track (B)"><i data-lucide="skip-forward"></i></button>
<button class="btn btn-icon btn-sm" onclick="stopSoundDogPlay()" title="Stop (V)"><i data-lucide="square"></i></button>
<div class="audioplayer-time-display">
<span id="sounddog-time-current">00:00</span>
<span style="opacity: 0.4;">/</span>
<span id="sounddog-time-total">00:00</span>
</div>
</div>
<div class="audioplayer-controls-right">
<div class="audioplayer-volume-group">
<button class="btn btn-icon btn-sm" onclick="toggleSoundDogMute()" title="Mute / Unmute (M)"><i data-lucide="volume-2" id="sounddog-volume-icon"></i></button>
<input type="range" class="range-slider audioplayer-volume-slider" id="sounddog-volume-slider" min="0" max="1" step="0.05" value="0.8" oninput="setSoundDogVolume(this.value)">
</div>
</div>
</div>
</div>
<div class="audioplayer-playlist-sidebar" id="sounddog-playlist-sidebar">
<div class="audioplayer-playlist-header">
<div style="display: flex; align-items: center; gap: 6px;">
<span style="font-weight: 700; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px;">Playlist</span>
<span class="badge" id="sounddog-playlist-count" style="font-size: 9px;">0</span>
</div>
<div style="display: flex; align-items: center; gap: 3px;">
<button class="btn btn-icon btn-xs" onclick="addCurrentPaneFolderToSoundDog()" title="Load Audio from Active Panel"><i data-lucide="folder-input" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs" onclick="clearSoundDogQueue()" title="Clear Playlist"><i data-lucide="trash-2" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs mobile-or-tablet-only" onclick="toggleSoundDogPlaylistDrawer()" title="Close Playlist"><i data-lucide="x" style="width: 12px; height: 12px;"></i></button>
</div>
</div>
<div class="audioplayer-playlist-filter-row">
<input type="text" id="sounddog-queue-filter" class="pane-quick-filter" placeholder="Filter playlist..." style="width: 100%; font-size: 10px; height: 24px;" oninput="filterSoundDogQueue(this.value)">
</div>
<div class="audioplayer-playlist-list" id="sounddog-queue-tbody"></div>
</div>
</div>
</div>
<div class="sounddog-pill audioplayer-pill" id="sounddog-pill" style="display: none;" onclick="restoreFloatingSoundDog()" title="Click to restore Audioplayer">
<div class="sounddog-pill-progress" id="sounddog-pill-progress">
<div class="sounddog-pill-progress-fill" id="sounddog-pill-progress-fill"></div>
</div>
<div class="sounddog-pill-wave" id="sounddog-pill-wave">
<span></span><span></span><span></span><span></span>
</div>
<div class="sounddog-pill-info">
<span class="sounddog-pill-title" id="sounddog-pill-title">Audioplayer</span>
<span class="sounddog-pill-time" id="sounddog-pill-time">00:00 / 00:00</span>
</div>
<div class="sounddog-pill-controls">
<button type="button" class="sounddog-pill-btn" onclick="event.stopPropagation(); playPrevSoundDogTrack();" title="Previous Track (Z)"><i data-lucide="skip-back" style="width: 12px; height: 12px;"></i></button>
<button type="button" class="sounddog-pill-btn sounddog-pill-btn-play" onclick="event.stopPropagation(); toggleSoundDogPlay();" title="Play/Pause (Space)"><i data-lucide="play" id="sounddog-pill-play-icon" style="width: 12px; height: 12px;"></i></button>
<button type="button" class="sounddog-pill-btn" onclick="event.stopPropagation(); playNextSoundDogTrack();" title="Next Track (B)"><i data-lucide="skip-forward" style="width: 12px; height: 12px;"></i></button>
<button type="button" class="sounddog-pill-btn sounddog-pill-close" onclick="event.stopPropagation(); dismissSoundDogPill();" title="Stop & Close"><i data-lucide="x" style="width: 12px; height: 12px;"></i></button>
</div>
</div>
<div class="modal-overlay" id="diff-modal" style="z-index: 2840;">
<div class="modal-box diff-modal-box" id="diff-modal-box">
<div class="modal-header diff-modal-header">
<div class="diff-header-title-group" style="display: flex; align-items: center; gap: 8px;">
<img src="assets/diff.webp" alt="Compare" class="diff-header-icon" style="width: 16px; height: 16px; object-fit: contain;">
<span class="diff-header-title chewtoy-brand-text" style="font-weight: 700; font-size: 13px;">Comparison & Diff Engine</span>
</div>
<div class="diff-header-actions" style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon" id="diff-deep-btn" onclick="triggerDiff(true)" title="Deep Recursive SHA-256 Hash Compare"><i data-lucide="shield-check"></i></button>
<div class="header-sep"></div>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('diff-modal')" title="Close Diff Engine (Esc)"><i data-lucide="x"></i></button>
</div>
</div>
<div class="modal-body diff-modal-body" id="diff-modal-body"></div>
</div>
</div>
<div class="floating-converter-window" id="floating-converter-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="modal-header converter-header" id="converter-header">
<div class="converter-header-left" style="display: flex; align-items: center; gap: 8px;">
<span class="converter-header-drag-handle" style="font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: grab;">
<img src="assets/convertx.webp" alt="Format Converter" style="width: 16px; height: 16px; object-fit: contain;">
<span class="chewtoy-brand-text">Format Converter</span>
</span>
</div>
<div class="converter-header-actions" style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon desktop-only" id="btn-convert-minimize" onclick="minimizeConverterModal()" title="Minimize to Taskbar (-)"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeConverterModal()" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
</div>
<div class="converter-window-body" style="padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px;">
<div class="converter-dropzone" id="converter-dropzone" onclick="if(event.target.closest('button')) return; openConverterFilePicker();" title="Drag & Drop a file here or click to browse">
<div id="converter-selected-card" style="display: none; align-items: center; gap: 10px; width: 100%;">
<div id="converter-file-icon-badge" style="width: 42px; height: 42px; border-radius: 8px; background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;">
📄
</div>
<div style="flex: 1; min-width: 0;">
<div style="display: flex; align-items: center; gap: 6px;">
<span style="font-weight: 700; font-size: 13px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" id="convert-source-filename">image.png</span>
<span class="user-role-badge" id="convert-source-ext-badge" style="font-size: 9.5px; padding: 1px 5px; text-transform: uppercase;">PNG</span>
</div>
<div style="font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;" id="convert-source-path">/path/to/file</div>
<div style="font-size: 10.5px; color: var(--accent); margin-top: 1px;" id="convert-source-size">1.2 MB</div>
</div>
<div style="display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;">
<button type="button" class="btn btn-xs" onclick="event.stopPropagation(); openConverterFilePicker();" title="Browse / Select Different File" style="font-size: 10px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px;"><i data-lucide="folder-open" style="width: 11px; height: 11px;"></i> Change</button>
<button type="button" class="btn btn-xs btn-outline" onclick="event.stopPropagation(); clearConverterSourceFile();" title="Clear Selected File" style="font-size: 10px; padding: 3px 8px; color: var(--danger);"><i data-lucide="trash-2" style="width: 11px; height: 11px;"></i> Clear</button>
</div>
</div>
<div id="converter-empty-prompt" style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 8px; width: 100%;">
<div style="width: 40px; height: 40px; border-radius: 50%; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; color: var(--accent);">
<i data-lucide="upload-cloud" style="width: 22px; height: 22px;"></i>
</div>
<div>
<div style="font-weight: 600; font-size: 12.5px; color: var(--text-main);">Drag & drop any file here to convert</div>
<div style="font-size: 11px; color: var(--text-dim); margin-top: 2px;">Supports Images, Video, Audio, Documents & Structured Data</div>
</div>
<div style="display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; justify-content: center;">
<button type="button" class="btn btn-xs btn-accent" onclick="event.stopPropagation(); openConverterFilePicker();" style="font-size: 11px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 4px;"><i data-lucide="folder-open" style="width: 12px; height: 12px;"></i> Browse Files...</button>
<button type="button" class="btn btn-xs" onclick="event.stopPropagation(); useActivePaneItemForConverter();" title="Use file under cursor in active pane" style="font-size: 11px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 4px;"><i data-lucide="layout" style="width: 12px; height: 12px;"></i> From Active Pane</button>
</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 0;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
<label style="font-weight: 700; font-size: 11.5px; color: var(--text-main); margin-bottom: 0;">Target Format:</label>
<div class="converter-quick-formats" style="display: flex; gap: 4px;">
<button type="button" class="ext-preset-btn" onclick="setConverterTargetFormat('webp')">WebP</button>
<button type="button" class="ext-preset-btn" onclick="setConverterTargetFormat('png')">PNG</button>
<button type="button" class="ext-preset-btn" onclick="setConverterTargetFormat('mp4')">MP4</button>
<button type="button" class="ext-preset-btn" onclick="setConverterTargetFormat('mp3')">MP3</button>
<button type="button" class="ext-preset-btn" onclick="setConverterTargetFormat('yaml')">YAML</button>
</div>
</div>
<select id="convert-target-format" class="pane-quick-filter" style="width: 100%; padding: 7px 10px; font-size: 12px;" onchange="handleTargetFormatChange(this.value)">
<optgroup label="Images">
<option value="webp" selected>WebP (Optimized Next-Gen)</option>
<option value="png">PNG (Lossless)</option>
<option value="jpeg">JPEG (Compressed Photo)</option>
<option value="avif">AVIF (Ultra-Compressed)</option>
<option value="gif">GIF (Animated / Graphics)</option>
<option value="bmp">BMP (Raw Bitmap)</option>
<option value="ico">ICO (Favicon / Windows Icon)</option>
<option value="tiff">TIFF (High Dynamic Range)</option>
</optgroup>
<optgroup label="Video (Universal Web)">
<option value="mp4">MP4 (H.264 / AAC - Web Universal)</option>
<option value="webm">WebM (VP9 / Opus)</option>
<option value="mkv">MKV (Matroska Container)</option>
<option value="avi">AVI (Audio Video Interleave)</option>
<option value="mov">MOV (QuickTime Video)</option>
</optgroup>
<optgroup label="Audio">
<option value="mp3">MP3 (Universal Audio)</option>
<option value="wav">WAV (Lossless PCM)</option>
<option value="flac">FLAC (Lossless Studio)</option>
<option value="ogg">OGG (Vorbis)</option>
<option value="m4a">M4A (AAC Audio)</option>
<option value="opus">OPUS (Modern Voice/Audio)</option>
</optgroup>
<optgroup label="Structured Data & Documents">
<option value="json">JSON (Formatted)</option>
<option value="yaml">YAML (Human Readable)</option>
<option value="toml">TOML (Config Format)</option>
<option value="html">HTML (Document / Markup)</option>
<option value="base64">Base64 Data URI</option>
</optgroup>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label for="convert-output-filename" style="font-weight: 700; font-size: 11.5px; color: var(--text-main);">Output Filename & Destination:</label>
<input type="text" id="convert-output-filename" class="pane-quick-filter" placeholder="e.g. video_converted.mp4" style="width: 100%; padding: 7px 10px; font-family: var(--font-mono); font-size: 11px;" oninput="handleConvertOutputNameInput()">
<div style="font-size: 10px; color: var(--text-dim); margin-top: 4px; font-family: var(--font-mono); word-break: break-all;" id="convert-output-preview-path">Destination: ...</div>
</div>
<div id="convert-image-options" style="background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 8px;">
<div class="form-group" style="margin-bottom: 0;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<label style="font-size: 11px; font-weight: 600; margin-bottom: 0;">Quality Compression (1..100):</label>
<span class="slider-val-badge" id="convert-quality-val" style="font-size: 10px; padding: 1px 6px;">85%</span>
</div>
<input type="range" min="10" max="100" value="85" class="range-slider" id="convert-quality-slider" oninput="document.getElementById('convert-quality-val').textContent = this.value + '%'">
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 10.5px; margin-bottom: 2px;">Resize Width (px):</label>
<input type="number" id="convert-resize-w" class="pane-quick-filter" placeholder="Auto" style="width: 100%; padding: 5px 8px; font-size: 11px;">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-size: 10.5px; margin-bottom: 2px;">Resize Height (px):</label>
<input type="number" id="convert-resize-h" class="pane-quick-filter" placeholder="Auto" style="width: 100%; padding: 5px 8px; font-size: 11px;">
</div>
</div>
</div>
<div id="convert-status-msg" style="font-size: 12px; display: none;"></div>
</div>
<div class="modal-footer" id="convert-modal-footer" style="padding: 10px 14px; background: var(--bg-header); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-shrink: 0;">
<button class="btn btn-sm" id="btn-convert-cancel" onclick="closeConverterModal()">Cancel</button>
<button class="btn btn-sm" id="btn-convert-background" style="display: none;" onclick="minimizeConverterModal()"><i data-lucide="minimize-2"></i> Run in Background</button>
<button class="btn btn-sm btn-accent" id="btn-run-convert" onclick="executeFileConversion()"><i data-lucide="play"></i> Convert Now</button>
<button class="btn btn-sm btn-accent" id="btn-convert-ok" style="display: none;" onclick="closeConverterModal()"><i data-lucide="check"></i> OK</button>
</div>
</div>
<div class="modal-overlay" id="converter-file-picker-modal" style="z-index: 2950;">
<div class="modal-box" style="max-width: 620px; width: 92vw; max-height: 80vh; display: flex; flex-direction: column;">
<div class="modal-header" style="padding: 10px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="folder-search" style="width: 16px; height: 16px; color: var(--accent);"></i>
<span style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">Select File to Convert</span>
</div>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('converter-file-picker-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; overflow: hidden;">
<div style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap;">
<span style="font-size: 10.5px; font-weight: 600; color: var(--text-dim);">Jump to:</span>
<div id="converter-picker-panes-list" style="display: flex; gap: 6px; flex-wrap: wrap;"></div>
<button type="button" class="btn btn-xs" onclick="navigateConverterPickerPath(getUserDefaultHomeDir() || '/')">Home (~)</button>
<button type="button" class="btn btn-xs" onclick="navigateConverterPickerPath('/')">Root (/)</button>
</div>
<div style="display: flex; align-items: center; gap: 6px;">
<button class="btn btn-sm" onclick="navigateConverterPickerUp()" title="Go to Parent Folder"><i data-lucide="arrow-up"></i></button>
<input type="text" id="converter-picker-path-input" class="pane-quick-filter" style="flex: 1; font-family: var(--font-mono); font-size: 11px; padding: 6px 10px;" onkeydown="if(event.key==='Enter'){event.preventDefault();navigateConverterPickerPath(this.value);}">
<button class="btn btn-sm" onclick="navigateConverterPickerPath(document.getElementById('converter-picker-path-input').value)">Go</button>
</div>
<div id="converter-picker-file-list" style="flex: 1; min-height: 220px; max-height: 380px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); padding: 4px;">
<div style="padding: 20px; text-align: center; color: var(--text-dim); font-size: 12px;">Loading directory...</div>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="preview-modal">
<div class="modal-box" style="width: 70vw; max-height: 80vh;">
<div class="modal-header">
<span id="preview-title">File Preview</span>
<button class="btn" onclick="closeModal('preview-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" id="preview-body" style="font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow: auto; max-height: 65vh;"></div>
</div>
</div>
<div class="floating-chewtoy-window" id="dynamic-chewtoy-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="dynamic-chewtoy-box" id="dynamic-chewtoy-box">
<div class="modal-header dynamic-chewtoy-header" id="dynamic-chewtoy-header" style="height: 42px; min-height: 42px; cursor: grab; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: var(--bg-dark);">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;">
<img id="dynamic-chewtoy-icon" src="assets/amber-frameless-apps.webp" alt="Icon" style="width: 18px; height: 18px; object-fit: contain;">
<span id="dynamic-chewtoy-title" class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--accent); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">Chewtoy</span>
<span id="dynamic-chewtoy-version" class="badge" style="font-size: 10px; padding: 1px 5px; opacity: 0.8;">v1.0.0</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon desktop-only" id="btn-dynamic-chewtoy-dock" onclick="dockActiveDynamicChewToy()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-dynamic-chewtoy-maximize" onclick="toggleMaximizeDynamicChewToy()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeDynamicChewToy()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="dynamic-chewtoy-body" style="flex: 1; position: relative; overflow: hidden; background: var(--bg-panel);">
<iframe id="dynamic-chewtoy-frame" style="width: 100%; height: 100%; border: none; display: block; outline: none;" sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-modals"></iframe>
</div>
</div>
</div>
<div class="floating-renamer-window" id="floating-renamer-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="renamer-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="renamer-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="renamer-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="renamer-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="renamer-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header renamer-header" id="renamer-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="renamer-drag-handle">
<i data-lucide="file-signature" style="width: 17px; height: 17px; color: var(--accent); flex-shrink: 0;"></i>
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">Batch Renamer</span>
<span class="badge" style="font-size: 10px; padding: 1px 5px; opacity: 0.8;">Ctrl+M</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon desktop-only" id="btn-renamer-dock" onclick="dockRenamerToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-renamer-maximize" onclick="toggleMaximizeRenamer()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingRenamer()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingRenamer()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="renamer-body" id="renamer-body">
<div class="renamer-config-panel">
<div class="renamer-source-bar">
<span id="renamer-source-info" style="font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Loading items...</span>
<div style="display: flex; gap: 4px; flex-shrink: 0;">
<button class="btn btn-xs" onclick="reloadRenamerFiles()" title="Reload selection from active pane"><i data-lucide="refresh-cw" style="width: 11px; height: 11px;"></i> Selected</button>
<button class="btn btn-xs" onclick="loadRenamerDirectory()" title="Load all files in active directory"><i data-lucide="folder" style="width: 11px; height: 11px;"></i> All Files</button>
</div>
</div>
<div class="renamer-rules-grid">
<div class="renamer-rule-col">
<label class="renamer-field-label">Find / Search Pattern</label>
<div class="renamer-input-wrap">
<input type="text" id="renamer-find-input" class="pane-quick-filter" placeholder="Find text or regex (e.g. IMG_(\d+))..." oninput="updateRenamerPreview()">
</div>
</div>
<div class="renamer-rule-col">
<label class="renamer-field-label">Replace With</label>
<div class="renamer-input-wrap">
<input type="text" id="renamer-replace-input" class="pane-quick-filter" placeholder="Replace string or $1, [001]..." oninput="updateRenamerPreview()">
</div>
</div>
</div>
<div class="renamer-options-row">
<label class="renamer-checkbox-label" title="Use Regular Expressions in Find/Replace">
<input type="checkbox" id="renamer-regex-check" onchange="updateRenamerPreview()"> Regex
</label>
<label class="renamer-checkbox-label" title="Case Sensitive Matching">
<input type="checkbox" id="renamer-case-check" onchange="updateRenamerPreview()"> Match Case
</label>
<div style="display: flex; align-items: center; gap: 4px; margin-left: auto;">
<span style="font-size: 10.5px; color: var(--text-muted);">Case:</span>
<select id="renamer-casing-select" class="pane-quick-filter renamer-select" onchange="updateRenamerPreview()">
<option value="none">Preserve</option>
<option value="lower">lowercase</option>
<option value="upper">UPPERCASE</option>
<option value="title">Title Case</option>
<option value="camel">camelCase</option>
<option value="snake">snake_case</option>
<option value="kebab">kebab-case</option>
<option value="sentence">Sentence case</option>
</select>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<span style="font-size: 10.5px; color: var(--text-muted);">Ext:</span>
<select id="renamer-ext-select" class="pane-quick-filter renamer-select" onchange="updateRenamerPreview()">
<option value="none">Preserve</option>
<option value="lower">lowercase (.jpg)</option>
<option value="upper">UPPERCASE (.JPG)</option>
<option value="strip">Strip extension</option>
</select>
</div>
</div>
<div class="renamer-tokens-bar">
<span style="font-size: 10.5px; font-weight: 600; color: var(--text-muted); flex-shrink: 0;">Tokens:</span>
<div class="renamer-tokens-chips">
<button type="button" class="btn btn-xs renamer-token-chip" onclick="insertRenamerToken('[N]')">[N] Counter</button>
<button type="button" class="btn btn-xs renamer-token-chip" onclick="insertRenamerToken('[01]')">[01]</button>
<button type="button" class="btn btn-xs renamer-token-chip" onclick="insertRenamerToken('[001]')">[001]</button>
<button type="button" class="btn btn-xs renamer-token-chip" onclick="insertRenamerToken('[0001]')">[0001]</button>
<button type="button" class="btn btn-xs renamer-token-chip" onclick="insertRenamerToken('[NAME]')">[NAME]</button>
<button type="button" class="btn btn-xs renamer-token-chip" onclick="insertRenamerToken('[EXT]')">[EXT]</button>
<button type="button" class="btn btn-xs renamer-token-chip" onclick="insertRenamerToken('[YYYY]')">[YYYY]</button>
<button type="button" class="btn btn-xs renamer-token-chip" onclick="insertRenamerToken('[MM]')">[MM]</button>
<button type="button" class="btn btn-xs renamer-token-chip" onclick="insertRenamerToken('[DD]')">[DD]</button>
</div>
<div style="display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0;">
<span style="font-size: 10px; color: var(--text-dim);">Start:</span>
<input type="number" id="renamer-counter-start" class="pane-quick-filter" value="1" min="0" style="width: 48px; height: 22px; padding: 0 4px; font-size: 11px;" oninput="updateRenamerPreview()">
<span style="font-size: 10px; color: var(--text-dim);">Step:</span>
<input type="number" id="renamer-counter-step" class="pane-quick-filter" value="1" min="1" style="width: 42px; height: 22px; padding: 0 4px; font-size: 11px;" oninput="updateRenamerPreview()">
</div>
</div>
</div>
<div class="renamer-preview-container" id="renamer-preview-container">
<table class="renamer-table" id="renamer-table">
<thead>
<tr>
<th style="width: 32px; text-align: center;"><input type="checkbox" id="renamer-select-all" checked onchange="toggleAllRenamerItems(this.checked)"></th>
<th>Original Filename</th>
<th style="width: 24px; text-align: center;">➔</th>
<th>New Filename</th>
<th style="width: 80px; text-align: center;">Status</th>
</tr>
</thead>
<tbody id="renamer-table-body">
</tbody>
</table>
</div>
<div class="renamer-footer-bar">
<div id="renamer-status-summary" style="font-size: 11px; font-weight: 600; color: var(--text-main);">0 items</div>
<div style="display: flex; align-items: center; gap: 6px;">
<button class="btn btn-sm btn-outline" onclick="resetRenamerRules()" title="Reset All Rules"><i data-lucide="rotate-ccw" style="width: 12px; height: 12px;"></i> Reset</button>
<button class="btn btn-sm btn-outline" id="renamer-undo-btn" onclick="undoBatchRename()" disabled title="Undo Last Batch Rename"><i data-lucide="undo" style="width: 12px; height: 12px;"></i> Undo (<span id="renamer-undo-count">0</span>)</button>
<button class="btn btn-sm btn-outline" id="renamer-dryrun-btn" onclick="executeRenamerDryRun()" title="Simulate batch rename operations without modifying files on disk"><i data-lucide="play-circle" style="width: 12px; height: 12px;"></i> Dry Run</button>
<button class="btn btn-sm btn-accent" id="renamer-execute-btn" onclick="executeBatchRename()"><i data-lucide="check" style="width: 12px; height: 12px;"></i> Rename</button>
</div>
</div>
</div>
</div>
<div class="floating-hexeditor-window" id="floating-hexeditor-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="hexeditor-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="hexeditor-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="hexeditor-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="hexeditor-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="hexeditor-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header hexeditor-header" id="hexeditor-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="hexeditor-drag-handle">
<i data-lucide="binary" style="width: 17px; height: 17px; color: var(--accent); flex-shrink: 0;"></i>
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">Hex Editor</span>
<span id="hexeditor-file-badge" class="badge" style="font-size: 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">No file</span>
<span id="hexeditor-dirty-badge" class="badge badge-accent" style="display: none; font-size: 9px; padding: 1px 4px;">MODIFIED</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-xs btn-accent" id="hexeditor-save-btn" onclick="saveHexEditorChanges()" title="Save / Patch File (Ctrl+S)" style="height: 28px; padding: 0 8px;"><i data-lucide="save" style="width: 12px; height: 12px;"></i> Save</button>
<button class="btn btn-icon" id="hexeditor-inspector-toggle" onclick="toggleHexInspector()" title="Toggle Data Inspector" style="width: 28px; height: 28px;"><i data-lucide="sidebar"></i></button>
<button class="btn btn-icon desktop-only" id="btn-hexeditor-dock" onclick="dockHexEditorToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-hexeditor-maximize" onclick="toggleMaximizeHexEditor()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingHexEditor()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingHexEditor()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="hexeditor-toolbar">
<div style="display: flex; align-items: center; gap: 4px;">
<span style="font-size: 10.5px; color: var(--text-muted);">Bytes/Row:</span>
<select id="hexeditor-bytes-per-row" class="pane-quick-filter renamer-select" onchange="renderHexEditorView()" style="height: 26px;">
<option value="8">8</option>
<option value="16" selected>16</option>
<option value="32">32</option>
</select>
<span style="font-size: 10.5px; color: var(--text-muted); margin-left: 4px;">Endian:</span>
<select id="hexeditor-endian-select" class="pane-quick-filter renamer-select" onchange="updateHexInspector()" style="height: 26px;">
<option value="le" selected>Little Endian (LE)</option>
<option value="be">Big Endian (BE)</option>
</select>
</div>
<div style="display: flex; align-items: center; gap: 4px; margin-left: auto;">
<input type="text" id="hexeditor-goto-input" class="pane-quick-filter" placeholder="Goto 0x00..." style="width: 75px; height: 26px; font-size: 11px;" onkeydown="if(event.key==='Enter') jumpHexOffset()">
<button class="btn btn-xs" onclick="jumpHexOffset()" style="height: 26px;">Go</button>
<div class="header-sep"></div>
<input type="text" id="hexeditor-search-input" class="pane-quick-filter" placeholder="Search hex/text..." style="width: 110px; height: 26px; font-size: 11px;" onkeydown="if(event.key==='Enter') searchHexBytes()">
<button class="btn btn-xs" onclick="searchHexBytes()" style="height: 26px;"><i data-lucide="search" style="width: 11px; height: 11px;"></i></button>
</div>
</div>
<div class="hexeditor-body">
<div class="hexeditor-grid-container" id="hexeditor-grid-container" tabindex="0" onkeydown="handleHexGridKey(event)">
</div>
<div class="hexeditor-inspector-panel" id="hexeditor-inspector-panel">
<div class="hex-inspector-section-title">Byte Inspector</div>
<div class="hex-inspector-grid">
<div class="hex-insp-label">Offset:</div><div class="hex-insp-val" id="hex-insp-offset">0x0 (0)</div>
<div class="hex-insp-label">Int8:</div><div class="hex-insp-val" id="hex-insp-int8">0</div>
<div class="hex-insp-label">UInt8:</div><div class="hex-insp-val" id="hex-insp-uint8">0</div>
<div class="hex-insp-label">Int16:</div><div class="hex-insp-val" id="hex-insp-int16">0</div>
<div class="hex-insp-label">UInt16:</div><div class="hex-insp-val" id="hex-insp-uint16">0</div>
<div class="hex-insp-label">Int32:</div><div class="hex-insp-val" id="hex-insp-int32">0</div>
<div class="hex-insp-label">UInt32:</div><div class="hex-insp-val" id="hex-insp-uint32">0</div>
<div class="hex-insp-label">Float32:</div><div class="hex-insp-val" id="hex-insp-float32">0.0</div>
<div class="hex-insp-label">Float64:</div><div class="hex-insp-val" id="hex-insp-float64">0.0</div>
<div class="hex-insp-label">Binary:</div><div class="hex-insp-val font-mono" id="hex-insp-binary" style="font-size: 10px;">00000000</div>
</div>
<div class="hex-inspector-section-title" style="margin-top: 10px;">File Checksums</div>
<div class="hex-inspector-grid">
<div class="hex-insp-label">SHA-256:</div><div class="hex-insp-val font-mono text-truncate" id="hex-hash-sha256" title="Click to copy" onclick="copyTextToClipboard(this.textContent)">-</div>
<div class="hex-insp-label">CRC32:</div><div class="hex-insp-val font-mono" id="hex-hash-crc32" title="Click to copy" onclick="copyTextToClipboard(this.textContent)">-</div>
<div class="hex-insp-label">Size:</div><div class="hex-insp-val" id="hex-file-size">0 B</div>
</div>
</div>
</div>
<div class="hexeditor-statusbar">
<div id="hex-status-offset" style="font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);">Offset: 0x00000000 (0)</div>
<div id="hex-status-mode" style="font-size: 10px; color: var(--text-dim); text-transform: uppercase;">Direct Hex Edit Mode</div>
<div id="hex-status-modified" style="font-size: 10.5px; font-weight: 600; color: var(--accent);">0 bytes patched</div>
</div>
</div>
<div class="floating-duplicates-window" id="floating-duplicates-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="duplicates-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="duplicates-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="duplicates-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="duplicates-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="duplicates-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header duplicates-header" id="duplicates-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="duplicates-drag-handle">
<i data-lucide="copy-check" style="width: 17px; height: 17px; color: var(--accent); flex-shrink: 0;"></i>
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">Duplicate Finder</span>
<span class="badge" style="font-size: 10px; padding: 1px 5px; opacity: 0.8;">SHA-256</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon desktop-only" id="btn-duplicates-dock" onclick="dockDuplicateFinderToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-duplicates-maximize" onclick="toggleMaximizeDuplicateFinder()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingDuplicateFinder()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingDuplicateFinder()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="duplicates-body" id="duplicates-body">
<div class="dup-controls-bar">
<div class="dup-path-row">
<div class="dup-path-input-wrap">
<i data-lucide="folder" class="dup-path-icon"></i>
<input type="text" id="dup-path-input" class="dup-path-input" placeholder="Directory path to scan (e.g. /home/user/downloads)..." spellcheck="false" autocomplete="off" onkeydown="if(event.key==='Enter') startDuplicateScan()">
</div>
<button class="btn btn-xs" id="btn-dup-use-pane" onclick="setDuplicateFinderPathToActivePane()" title="Use directory of active pane"><i data-lucide="folder-symlink" style="width: 12px; height: 12px;"></i> Active Pane</button>
</div>
<div class="dup-criteria-row">
<div class="dup-criterion-item">
<label class="dup-label" for="dup-min-size-select">Min Size:</label>
<select id="dup-min-size-select" class="dup-select">
<option value="0">All Sizes (≥ 1 B)</option>
<option value="1024">≥ 1 KB</option>
<option value="102400">≥ 100 KB</option>
<option value="1048576" selected>≥ 1 MB</option>
<option value="10485760">≥ 10 MB</option>
<option value="104857600">≥ 100 MB</option>
<option value="1073741824">≥ 1 GB</option>
</select>
</div>
<div class="dup-criterion-item">
<label class="dup-label" for="dup-file-type-select">File Type:</label>
<select id="dup-file-type-select" class="dup-select">
<option value="all" selected>All Files</option>
<option value="images">Images (.jpg, .png, .webp...)</option>
<option value="videos">Videos (.mp4, .mkv, .mov...)</option>
<option value="audio">Audio (.mp3, .flac, .wav...)</option>
<option value="documents">Documents (.pdf, .docx, .txt...)</option>
<option value="archives">Archives (.zip, .tar, .7z...)</option>
</select>
</div>
<label class="renamer-checkbox-label" style="font-size: 11px; margin-left: 2px;" title="Include dotfiles and hidden folders"><input type="checkbox" id="dup-include-hidden"> Hidden Files</label>
<button class="btn btn-sm btn-accent" id="btn-start-dup-scan" onclick="startDuplicateScan()" style="margin-left: auto; height: 26px; padding: 0 12px; font-weight: 600;"><i data-lucide="search" style="width: 13px; height: 13px;"></i> Find Duplicates</button>
</div>
<div class="dup-presets-bar">
<span style="font-size: 10.5px; font-weight: 600; color: var(--text-dim); margin-right: 4px;">Auto-Select:</span>
<button class="btn btn-xs" onclick="autoSelectDuplicates('keep_newest')">Keep Newest</button>
<button class="btn btn-xs" onclick="autoSelectDuplicates('keep_oldest')">Keep Oldest</button>
<button class="btn btn-xs" onclick="autoSelectDuplicates('keep_shortest')">Keep Shortest Path</button>
<button class="btn btn-xs" onclick="autoSelectDuplicates('all_duplicates')">Select All Duplicates</button>
<button class="btn btn-xs btn-outline" onclick="autoSelectDuplicates('deselect_all')">Deselect All</button>
</div>
</div>
<div style="flex: 1; overflow-y: auto; padding: 6px 0;" id="duplicates-groups-container">
<div class="dup-empty-state">
<i data-lucide="copy-check" style="width: 38px; height: 38px; opacity: 0.35; color: var(--accent);"></i>
<div style="font-size: 13px; font-weight: 600; color: var(--text-main);">Configure Scan Path & Filters</div>
<div style="font-size: 11.5px; color: var(--text-muted); max-width: 340px; text-align: center; line-height: 1.4;">
Specify the directory path and criteria filters above, then click <strong>Find Duplicates</strong> to scan.
</div>
</div>
</div>
<div class="dup-footer-bar">
<div id="dup-status-summary" style="font-size: 11.5px; font-weight: 600; color: var(--text-main);">0 files selected</div>
<div style="display: flex; align-items: center; gap: 8px;">
<select id="dup-action-select" class="pane-quick-filter renamer-select" style="height: 28px;">
<option value="trash" id="dup-action-trash-option" selected>Move to Trash (.local/share/Trash)</option>
<option value="delete">Delete Permanently</option>
</select>
<button class="btn btn-sm btn-danger" id="btn-execute-dup-clean" onclick="executeDuplicateClean()" disabled><i data-lucide="trash-2" style="width: 12px; height: 12px;"></i> Clean Selected</button>
</div>
</div>
</div>
</div>
<div class="floating-tageditor-window" id="floating-tageditor-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="tageditor-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="tageditor-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="tageditor-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="tageditor-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="tageditor-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header tageditor-header" id="tageditor-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="tageditor-drag-handle">
<i data-lucide="tag" style="width: 17px; height: 17px; color: var(--accent); flex-shrink: 0;"></i>
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">Tag Editor</span>
<span id="tageditor-active-file-badge" class="badge" style="font-size: 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">No file</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-xs btn-accent" onclick="saveTagEditorChanges()" title="Save Tags (Ctrl+S)" style="height: 28px; padding: 0 8px;"><i data-lucide="save" style="width: 12px; height: 12px;"></i> Save</button>
<button class="btn btn-icon desktop-only" id="btn-tageditor-dock" onclick="dockTagEditorToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-tageditor-maximize" onclick="toggleMaximizeTagEditor()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingTagEditor()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingTagEditor()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="tageditor-body" id="tageditor-body">
<div class="tageditor-file-list-col">
<div style="padding: 6px 8px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 10.5px; font-weight: 600; color: var(--text-muted);">Files (<span id="tageditor-file-count">0</span>)</span>
<button class="btn btn-xs" onclick="reloadTagEditorFiles()" title="Reload"><i data-lucide="refresh-cw" style="width: 11px; height: 11px;"></i></button>
</div>
<div style="flex: 1; overflow-y: auto;" id="tageditor-file-list"></div>
</div>
<div class="tageditor-main-col">
<div style="display: flex; gap: 14px; align-items: flex-start;">
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
<div class="tageditor-art-box" id="tageditor-art-box" onclick="document.getElementById('tageditor-art-file').click()" title="Click to upload album artwork">
<img id="tageditor-art-preview" class="tageditor-art-img" style="display: none;" src="" alt="Album Art">
<div id="tageditor-art-placeholder" style="display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-dim); font-size: 10px;">
<i data-lucide="image" style="width: 24px; height: 24px;"></i>
<span>Cover Art</span>
</div>
</div>
<input type="file" id="tageditor-art-file" accept="image/jpeg,image/png,image/webp" style="display: none;" onchange="handleTagCoverArtSelected(event)">
<button class="btn btn-xs" id="btn-remove-cover-art" onclick="removeTagCoverArt()" style="display: none; font-size: 10px; height: 20px;">Remove</button>
</div>
<div style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
<div class="renamer-rule-col">
<label class="renamer-field-label">Track Title</label>
<input type="text" id="tag-title-input" class="pane-quick-filter" placeholder="Title...">
</div>
<div class="renamer-rule-col">
<label class="renamer-field-label">Artist / Performer</label>
<input type="text" id="tag-artist-input" class="pane-quick-filter" placeholder="Artist...">
</div>
<div class="renamer-rule-col">
<label class="renamer-field-label">Album</label>
<input type="text" id="tag-album-input" class="pane-quick-filter" placeholder="Album...">
</div>
</div>
</div>
<div class="tageditor-form-grid">
<div class="renamer-rule-col">
<label class="renamer-field-label">Album Artist</label>
<input type="text" id="tag-album-artist-input" class="pane-quick-filter" placeholder="Album Artist...">
</div>
<div class="renamer-rule-col">
<label class="renamer-field-label">Year / Date</label>
<input type="text" id="tag-year-input" class="pane-quick-filter" placeholder="e.g. 2024...">
</div>
<div class="renamer-rule-col">
<label class="renamer-field-label">Track # / Total</label>
<div style="display: flex; gap: 4px;">
<input type="number" id="tag-track-num-input" class="pane-quick-filter" placeholder="1" min="1" style="width: 60px;">
<span style="display: flex; align-items: center; color: var(--text-dim);">/</span>
<input type="number" id="tag-track-tot-input" class="pane-quick-filter" placeholder="12" min="1" style="width: 60px;">
</div>
</div>
<div class="renamer-rule-col">
<label class="renamer-field-label">Genre</label>
<input type="text" id="tag-genre-input" class="pane-quick-filter" placeholder="e.g. Rock, Electronic...">
</div>
</div>
<div class="renamer-rule-col">
<label class="renamer-field-label">Comment / Notes</label>
<input type="text" id="tag-comment-input" class="pane-quick-filter" placeholder="Comment...">
</div>
<div style="padding: 8px 10px; background: var(--bg-header); border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; margin-top: 4px;">
<span style="font-size: 11px; font-weight: 600; color: var(--text-main);">Batch Actions across all loaded files:</span>
<div style="display: flex; gap: 6px;">
<button class="btn btn-xs" onclick="applyBatchAutoTrackNumbers()"><i data-lucide="hash" style="width: 11px; height: 11px;"></i> Auto-Number (1..N)</button>
<button class="btn btn-xs" onclick="applyBatchTagField('artist')">Apply Artist to All</button>
<button class="btn btn-xs" onclick="applyBatchTagField('album')">Apply Album to All</button>
</div>
</div>
</div>
</div>
</div>
<div class="floating-logviewer-window" id="floating-logviewer-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="logviewer-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="logviewer-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="logviewer-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="logviewer-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="logviewer-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header logviewer-header" id="logviewer-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="logviewer-drag-handle">
<i data-lucide="scroll-text" style="width: 17px; height: 17px; color: var(--accent); flex-shrink: 0;"></i>
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">Log Viewer</span>
<span id="logviewer-file-badge" class="badge" style="font-size: 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">No file</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon desktop-only" id="btn-logviewer-dock" onclick="dockLogViewerToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-logviewer-maximize" onclick="toggleMaximizeLogViewer()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingLogViewer()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingLogViewer()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="logviewer-toolbar">
<div style="display: flex; align-items: center; gap: 4px;">
<span style="font-size: 10.5px; color: var(--text-muted);">Lines:</span>
<select id="logviewer-lines-select" class="pane-quick-filter renamer-select" onchange="fetchLogViewerTail()" style="height: 26px;">
<option value="100">100</option>
<option value="250">250</option>
<option value="500" selected>500</option>
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="5000">5000</option>
</select>
</div>
<div style="display: flex; align-items: center; gap: 4px; flex: 1; min-width: 140px;">
<input type="text" id="logviewer-filter-input" class="pane-quick-filter" placeholder="Filter regex / text..." style="height: 26px; font-size: 11px; flex: 1;" oninput="handleLogViewerFilterInput()">
<button class="btn btn-xs" id="btn-logviewer-invert" onclick="toggleLogViewerInvert()" title="Invert Filter Match" style="height: 26px;">!</button>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-xs log-level-btn active" id="btn-log-lvl-all" onclick="setLogLevelFilter('ALL')" style="height: 26px;">All</button>
<button class="btn btn-xs log-level-btn" id="btn-log-lvl-err" onclick="setLogLevelFilter('ERROR')" style="height: 26px; color: #ef4444;">Errors (<span id="log-count-err">0</span>)</button>
<button class="btn btn-xs log-level-btn" id="btn-log-lvl-warn" onclick="setLogLevelFilter('WARN')" style="height: 26px; color: #f59e0b;">Warn (<span id="log-count-warn">0</span>)</button>
</div>
<div style="display: flex; align-items: center; gap: 4px; margin-left: auto;">
<button class="btn btn-xs" id="btn-log-follow" onclick="toggleLogFollow()" style="height: 26px;" title="Follow log stream in real time"><i data-lucide="play" style="width: 11px; height: 11px;"></i> Follow</button>
<button class="btn btn-xs" onclick="fetchLogViewerTail()" style="height: 26px;" title="Refresh (R)"><i data-lucide="rotate-cw" style="width: 11px; height: 11px;"></i></button>
</div>
</div>
<div class="logviewer-console" id="logviewer-console">
</div>
</div>
<div class="floating-cad-window" id="floating-cad-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="cad-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="cad-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="cad-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="cad-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="cad-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header cad-header" id="cad-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="cad-drag-handle">
<i data-lucide="box" style="width: 17px; height: 17px; color: var(--accent); flex-shrink: 0;"></i>
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">3D CAD Studio</span>
<span id="cad-file-badge" class="badge" style="font-size: 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">No model</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon desktop-only" id="btn-cad-dock" onclick="dockCadStudioToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-cad-maximize" onclick="toggleMaximizeCadStudio()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingCadStudio()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingCadStudio()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="cad-toolbar" id="cad-toolbar">
<div class="cad-toolbar-group" style="display: flex; align-items: center; gap: 3px;">
<button class="btn btn-xs" id="btn-cad-view-iso" onclick="setCadCameraView('iso')" style="height: 26px; font-weight: 600;" title="Isometric View">ISO</button>
<button class="btn btn-xs" id="btn-cad-view-top" onclick="setCadCameraView('top')" style="height: 26px; font-weight: 600;" title="Top View (Z+)">TOP</button>
<button class="btn btn-xs" id="btn-cad-view-front" onclick="setCadCameraView('front')" style="height: 26px; font-weight: 600;" title="Front View (Y-)">FRONT</button>
<button class="btn btn-xs" id="btn-cad-view-right" onclick="setCadCameraView('right')" style="height: 26px; font-weight: 600;" title="Right View (X+)">RIGHT</button>
</div>
<div class="cad-toolbar-divider"></div>
<div class="cad-toolbar-group" style="display: flex; align-items: center; gap: 4px;">
<span style="font-size: 10.5px; color: var(--text-muted);">Shading:</span>
<select id="cad-shading-select" class="pane-quick-filter" onchange="setCadShadingMode(this.value)" style="height: 26px; font-size: 11px;">
<option value="solid" selected>Solid (Studio)</option>
<option value="smooth">Smooth</option>
<option value="wireframe">Wireframe</option>
<option value="normals">Normal Map</option>
<option value="matcap">Matcap Clay</option>
</select>
</div>
<div class="cad-toolbar-group" style="display: flex; align-items: center; gap: 4px;">
<span style="font-size: 10.5px; color: var(--text-muted);">Material:</span>
<select id="cad-material-select" class="pane-quick-filter" onchange="setCadMaterialTheme(this.value)" style="height: 26px; font-size: 11px;">
<option value="amber-charcoal" selected>Amber Charcoal</option>
<option value="amber-gold">Amber Gold</option>
<option value="steel">Polished Steel</option>
<option value="bronze">Industrial Bronze</option>
<option value="cyan">Cyber Cyan</option>
<option value="clay">Studio White Clay</option>
</select>
</div>
<div class="cad-toolbar-divider"></div>
<div class="cad-toolbar-group" style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-xs" id="btn-cad-slice-toggle" onclick="toggleCadSlicer()" style="height: 26px;" title="Cross-Section Slicing Plane"><i data-lucide="scissors" style="width: 11px; height: 11px;"></i> Slice</button>
<div id="cad-slice-controls" style="display: none; align-items: center; gap: 4px;">
<select id="cad-slice-axis" class="pane-quick-filter" onchange="setCadSliceAxis(this.value)" style="height: 24px; font-size: 10.5px;">
<option value="z" selected>Z (Height)</option>
<option value="y">Y (Depth)</option>
<option value="x">X (Width)</option>
</select>
<input type="range" id="cad-slice-slider" min="0" max="100" value="100" oninput="updateCadSlicePlane(this.value)" style="width: 80px; height: 16px; accent-color: var(--accent); cursor: pointer;">
</div>
</div>
<div class="cad-toolbar-divider"></div>
<div class="cad-toolbar-group" style="display: flex; align-items: center; gap: 3px; margin-left: auto;">
<button class="btn btn-icon btn-xs active" id="btn-cad-grid" onclick="toggleCadGrid()" title="Toggle Build Plate Grid" style="width: 26px; height: 26px;"><i data-lucide="grid" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs active" id="btn-cad-axes" onclick="toggleCadAxes()" title="Toggle Coordinate Axes" style="width: 26px; height: 26px;"><i data-lucide="compass" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs" id="btn-cad-edges" onclick="toggleCadEdges()" title="Toggle Geometric Edges Overlay" style="width: 26px; height: 26px;"><i data-lucide="box-select" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs" id="btn-cad-turntable" onclick="toggleCadTurntable()" title="Auto-Rotate / Turntable" style="width: 26px; height: 26px;"><i data-lucide="rotate-cw" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs" id="btn-cad-recenter" onclick="resetCadCamera()" title="Fit Model to View (F)" style="width: 26px; height: 26px;"><i data-lucide="focus" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs" id="btn-cad-snapshot" onclick="takeCadSnapshot()" title="Export PNG Snapshot" style="width: 26px; height: 26px;"><i data-lucide="camera" style="width: 12px; height: 12px;"></i></button>
</div>
</div>
<div class="cad-viewport-container" id="cad-viewport-container">
<canvas id="cad-webgl-canvas" class="cad-webgl-canvas"></canvas>
<div class="cad-hud-top-left" id="cad-hud-top-left">
<div class="cad-hud-badge" id="cad-hud-dimensions">
<span style="color: var(--accent); font-weight: 700;">Size:</span> <span id="cad-dim-val">-- × -- × -- mm</span>
</div>
</div>
<div class="cad-hud-bottom-right" id="cad-hud-bottom-right">
<div class="cad-hud-telemetry">
<div><span class="cad-stat-label">Triangles:</span> <span id="cad-stat-triangles" class="cad-stat-val">0</span></div>
<div><span class="cad-stat-label">Vertices:</span> <span id="cad-stat-vertices" class="cad-stat-val">0</span></div>
<div><span class="cad-stat-label">Volume:</span> <span id="cad-stat-volume" class="cad-stat-val">0.0 cm³</span></div>
<div><span class="cad-stat-label">Print Wt (PLA):</span> <span id="cad-stat-weight" class="cad-stat-val">0.0 g</span></div>
</div>
</div>
<div class="cad-loading-overlay" id="cad-loading-overlay" style="display: none;">
<i data-lucide="loader-2" class="cad-spin" style="width: 28px; height: 28px; color: var(--accent);"></i>
<div id="cad-loading-text" style="font-size: 12px; font-weight: 600; color: var(--text-main); margin-top: 8px;">Loading 3D model...</div>
</div>
</div>
</div>
<div class="modal-overlay" id="image-viewer-modal">
<div class="modal-box image-viewer-box" id="image-viewer-box">
<div class="win-resize-handle win-resize-top" id="img-viewer-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="img-viewer-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="img-viewer-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="img-viewer-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="img-viewer-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="image-viewer-toolbar" id="image-viewer-toolbar">
<div class="image-viewer-title-group" id="image-viewer-drag-handle" style="cursor: grab;">
<span style="color: var(--accent); font-weight: 700; flex-shrink: 0;">🖼️</span>
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1;">
<span id="img-viewer-title" style="font-weight: 600; font-size: 13px;">image.png</span>
<span id="img-viewer-meta" style="color: var(--text-muted); font-size: 10.5px; font-family: var(--font-mono); margin-left: 6px;">(1920x1080 - 1.2 MB)</span>
</div>
</div>
<div class="image-viewer-nav-pill">
<button class="btn btn-icon btn-sm" onclick="navImageViewer(-1)" title="Previous Image (Left Arrow)"><i data-lucide="chevron-left"></i></button>
<span id="img-viewer-counter" style="font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); min-width: 42px; text-align: center;">1 / 1</span>
<button class="btn btn-icon btn-sm" onclick="navImageViewer(1)" title="Next Image (Right Arrow)"><i data-lucide="chevron-right"></i></button>
</div>
<div class="image-viewer-actions-group">
<div class="layout-btn-group desktop-only" id="img-transform-btn-group">
<button class="btn btn-icon" onclick="zoomImage(0.2)" title="Zoom In (+)"><i data-lucide="zoom-in"></i></button>
<button class="btn btn-icon" onclick="zoomImage(-0.2)" title="Zoom Out (-)"><i data-lucide="zoom-out"></i></button>
<button class="btn btn-icon" onclick="resetImageTransform()" title="Reset 1:1 View (0)"><i data-lucide="refresh-cw"></i></button>
<button class="btn btn-icon" onclick="rotateImage(90)" title="Rotate Clockwise 90° (R)"><i data-lucide="rotate-cw"></i></button>
<button class="btn btn-icon" onclick="flipImage('h')" title="Flip Horizontal"><i data-lucide="flip-horizontal"></i></button>
<button class="btn btn-icon" onclick="flipImage('v')" title="Flip Vertical"><i data-lucide="flip-vertical"></i></button>
</div>
<div class="layout-btn-group desktop-only" id="img-file-actions-group">
<button class="btn btn-icon" onclick="imageViewerRenameCurrent()" title="Rename Image (F2)"><i data-lucide="edit-3"></i></button>
<button class="btn btn-icon" onclick="imageViewerCopyCurrent()" title="Copy to Opposite Panel (F5)"><i data-lucide="copy"></i></button>
<button class="btn btn-icon" onclick="imageViewerMoveCurrent()" title="Move to Opposite Panel (F6)"><i data-lucide="folder-input"></i></button>
<button class="btn btn-icon" onclick="imageViewerDeleteCurrent()" title="Delete / Move to Trash (F8 / Del)" style="color: var(--danger);"><i data-lucide="trash-2"></i></button>
</div>
<div class="dropdown-container mobile-only" id="img-transform-dropdown-container" style="position: relative;">
<button class="btn btn-icon" onclick="toggleImgTransformDropdown(event)" title="Transform & Actions"><i data-lucide="sliders-horizontal"></i></button>
<div class="dropdown-menu" id="img-transform-dropdown-menu" style="display: none; right: 0; min-width: 180px;">
<div class="dropdown-item" onclick="imageViewerRenameCurrent(); closeImgTransformDropdown();"><i data-lucide="edit-3"></i> Rename (F2)</div>
<div class="dropdown-item" onclick="imageViewerCopyCurrent(); closeImgTransformDropdown();"><i data-lucide="copy"></i> Copy to Panel (F5)</div>
<div class="dropdown-item" onclick="imageViewerMoveCurrent(); closeImgTransformDropdown();"><i data-lucide="folder-input"></i> Move to Panel (F6)</div>
<div class="dropdown-item" onclick="imageViewerDeleteCurrent(); closeImgTransformDropdown();" style="color: var(--danger);"><i data-lucide="trash-2"></i> Delete / Trash (F8)</div>
<div class="dropdown-divider"></div>
<div class="dropdown-item" onclick="zoomImage(0.2); closeImgTransformDropdown();"><i data-lucide="zoom-in"></i> Zoom In (+)</div>
<div class="dropdown-item" onclick="zoomImage(-0.2); closeImgTransformDropdown();"><i data-lucide="zoom-out"></i> Zoom Out (-)</div>
<div class="dropdown-item" onclick="resetImageTransform(); closeImgTransformDropdown();"><i data-lucide="refresh-cw"></i> Reset (1:1)</div>
<div class="dropdown-item" onclick="rotateImage(90); closeImgTransformDropdown();"><i data-lucide="rotate-cw"></i> Rotate 90°</div>
<div class="dropdown-item" onclick="flipImage('h'); closeImgTransformDropdown();"><i data-lucide="flip-horizontal"></i> Flip Horizontal</div>
<div class="dropdown-item" onclick="flipImage('v'); closeImgTransformDropdown();"><i data-lucide="flip-vertical"></i> Flip Vertical</div>
</div>
</div>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon" id="btn-img-wheel-mode" onclick="toggleImgWheelMode()" title="Toggle Wheel Mode: Browse Images vs Direct Zoom"><i data-lucide="mouse"></i></button>
<button class="btn btn-icon" onclick="inspectCurrentImage()" title="Inspect EXIF & GPS Metadata"><i data-lucide="info"></i></button>
<a id="img-viewer-download-link" class="btn btn-icon" href="#" download title="Download Image"><i data-lucide="download"></i></a>
<button class="btn btn-icon desktop-only" id="btn-img-viewer-float" onclick="toggleImageViewerFloating()" title="Toggle Floating Window / Overlay (⇱ / ⇲)"><i data-lucide="picture-in-picture"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('image-viewer-modal')" title="Close Viewer (Esc)"><i data-lucide="x"></i></button>
</div>
</div>
<div class="image-viewer-viewport" id="img-viewer-viewport">
<img id="img-viewer-element" class="image-viewer-img" src="" alt="Viewer">
</div>
</div>
</div>
<div class="modal-overlay" id="bulk-rename-modal">
<div class="modal-box bulk-renamer-box">
<div class="modal-header">
<span style="color: var(--accent); font-weight: 700;">🏷️ Advanced Multi-File Batch Renamer</span>
<button class="btn" onclick="closeModal('bulk-rename-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 14px; display: flex; flex-direction: column; gap: 10px;">
<div class="rename-rule-panel">
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
<select id="bulk-rename-mode" class="pane-quick-filter" style="width: 220px; font-weight: 600;" onchange="updateBulkRenameUI()">
<option value="replace" selected>🔍 Find & Replace</option>
<option value="sequence">🔢 Sequential Numbering</option>
<option value="prefix-suffix">➕ Add Prefix / Suffix</option>
<option value="case">🔤 Change Letter Case</option>
<option value="extension">📄 Change Extension</option>
</select>
</div>
<div id="rule-mode-replace" style="display: flex; flex-direction: column; gap: 8px;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div>
<label style="font-size: 11px;">Find Text / Regex Pattern:</label>
<input type="text" id="rename-find" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. img_ or (\d{4})" oninput="updateBulkRenamePreview()">
</div>
<div>
<label style="font-size: 11px;">Replace With:</label>
<input type="text" id="rename-replace" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. photo_ or $1" oninput="updateBulkRenamePreview()">
</div>
</div>
<div style="display: flex; gap: 14px; font-size: 11px;">
<label style="cursor: pointer;"><input type="checkbox" id="rename-match-case" onchange="updateBulkRenamePreview()"> Match Case</label>
<label style="cursor: pointer;"><input type="checkbox" id="rename-use-regex" onchange="updateBulkRenamePreview()"> Use Regular Expressions (Regex)</label>
</div>
</div>
<div id="rule-mode-sequence" style="display: none; flex-direction: column; gap: 8px;">
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px;">
<div>
<label style="font-size: 11px;">Base Name:</label>
<input type="text" id="rename-seq-base" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. Vacation_" oninput="updateBulkRenamePreview()">
</div>
<div>
<label style="font-size: 11px;">Start Number:</label>
<input type="number" id="rename-seq-start" class="pane-quick-filter" style="width: 100%;" value="1" oninput="updateBulkRenamePreview()">
</div>
<div>
<label style="font-size: 11px;">Step (+):</label>
<input type="number" id="rename-seq-step" class="pane-quick-filter" style="width: 100%;" value="1" oninput="updateBulkRenamePreview()">
</div>
<div>
<label style="font-size: 11px;">Padding Digits:</label>
<input type="number" id="rename-seq-pad" class="pane-quick-filter" style="width: 100%;" value="3" min="1" max="6" oninput="updateBulkRenamePreview()">
</div>
</div>
</div>
<div id="rule-mode-prefix-suffix" style="display: none; flex-direction: column; gap: 8px;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div>
<label style="font-size: 11px;">Prepend Prefix:</label>
<input type="text" id="rename-prefix" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. 2026_08_" oninput="updateBulkRenamePreview()">
</div>
<div>
<label style="font-size: 11px;">Append Suffix (Before Ext):</label>
<input type="text" id="rename-suffix" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. _final" oninput="updateBulkRenamePreview()">
</div>
</div>
</div>
<div id="rule-mode-case" style="display: none; gap: 8px; align-items: center;">
<label style="font-size: 11px;">Case Style:</label>
<select id="rename-case-style" class="pane-quick-filter" style="width: 200px;" onchange="updateBulkRenamePreview()">
<option value="lower">lowercase.ext</option>
<option value="upper">UPPERCASE.EXT</option>
<option value="title">Title Case.ext</option>
<option value="kebab">kebab-case.ext</option>
<option value="snake">snake_case.ext</option>
</select>
</div>
<div id="rule-mode-extension" style="display: none; gap: 8px; align-items: center;">
<label style="font-size: 11px;">New Extension (without dot):</label>
<input type="text" id="rename-new-ext" class="pane-quick-filter" style="width: 150px;" placeholder="e.g. jpg or txt" oninput="updateBulkRenamePreview()">
<label style="font-size: 11px; cursor: pointer;"><input type="checkbox" id="rename-ext-lower" checked onchange="updateBulkRenamePreview()"> Always lowercase extension</label>
</div>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="font-weight: 600; font-size: 12px;">Live Rename Preview:</span>
<span id="bulk-rename-stats" style="font-size: 11px; color: var(--text-muted);">0 items ready</span>
</div>
<div class="rename-preview-table-wrap">
<table class="file-table">
<thead>
<tr>
<th style="width: 60px;">Status</th>
<th>Original Name</th>
<th>➔ New Name</th>
</tr>
</thead>
<tbody id="bulk-rename-tbody"></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('bulk-rename-modal')">Cancel</button>
<button class="btn btn-accent" id="btn-execute-bulk-rename" onclick="executeBulkRename()">⚡ Apply Batch Rename</button>
</div>
</div>
</div>
<div class="modal-overlay" id="sync-modal" style="z-index: 2850;">
<div class="modal-box sync-modal-box" id="sync-modal-box">
<div class="modal-header" style="padding: 10px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 8px;">
<img src="assets/sync.webp" alt="Backup" style="width: 18px; height: 18px; object-fit: contain;">
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 14px; color: var(--text-main);">Backup & Sync</span>
</div>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('sync-modal')" title="Close Backup & Sync (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="settings-tabs sync-tabs">
<button class="settings-tab-btn sync-tab-btn active" id="sync-tab-btn-diff" onclick="switchSyncTab('diff')"><i data-lucide="split"></i> Live Diff</button>
<button class="settings-tab-btn sync-tab-btn" id="sync-tab-btn-profiles" onclick="switchSyncTab('profiles')"><i data-lucide="layers"></i> Backup Jobs</button>
<button class="settings-tab-btn sync-tab-btn" id="sync-tab-btn-history" onclick="switchSyncTab('history')"><i data-lucide="history"></i> Run Logs</button>
</div>
<div id="sync-tab-content-diff" class="sync-tab-pane" style="display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;">
<div class="sync-top-bar" style="padding: 12px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px;">
<div class="sync-path-selector-row" style="display: flex; align-items: center; gap: 8px;">
<div class="sync-path-input-group" style="flex: 1; display: flex; align-items: center; gap: 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;">
<span class="sync-pane-badge" style="font-size: 10px; font-weight: 700; background: rgba(59, 130, 246, 0.2); color: #60a5fa; padding: 2px 6px; border-radius: 4px;">Source (Left)</span>
<input type="text" id="sync-src-input" class="pane-quick-filter" style="flex: 1; border: none; background: transparent; outline: none; font-size: 12px; font-family: var(--font-mono);" placeholder="/path/to/source">
<button class="btn btn-xs" onclick="useActivePanePath('sync-src-input')" title="Use Active Pane Path" style="font-size: 10px; padding: 2px 6px;">Current</button>
<button class="btn btn-xs btn-outline" onclick="openSyncFolderPicker('sync-src-input')" title="Browse Source Folder" style="font-size: 10px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 3px;"><i data-lucide="folder-open" style="width: 11px; height: 11px;"></i> Browse</button>
</div>
<button class="btn btn-icon" onclick="swapSyncPaths()" title="Swap Left & Right Directories" style="padding: 6px;"><i data-lucide="arrow-left-right"></i></button>
<div class="sync-path-input-group" style="flex: 1; display: flex; align-items: center; gap: 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;">
<span class="sync-pane-badge" style="font-size: 10px; font-weight: 700; background: rgba(168, 85, 247, 0.2); color: #c084fc; padding: 2px 6px; border-radius: 4px;">Destination (Right)</span>
<input type="text" id="sync-dest-input" class="pane-quick-filter" style="flex: 1; border: none; background: transparent; outline: none; font-size: 12px; font-family: var(--font-mono);" placeholder="/path/to/destination">
<button class="btn btn-xs" onclick="useInactivePanePath('sync-dest-input')" title="Use Inactive Pane Path" style="font-size: 10px; padding: 2px 6px;">Target</button>
<button class="btn btn-xs btn-outline" onclick="openSyncFolderPicker('sync-dest-input')" title="Browse Destination Folder" style="font-size: 10px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 3px;"><i data-lucide="folder-open" style="width: 11px; height: 11px;"></i> Browse</button>
</div>
</div>
<div class="sync-template-row" style="display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;">
<div style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap;">
<span style="font-weight: 700; font-size: 11px; color: var(--accent); display: inline-flex; align-items: center; gap: 4px;"><i data-lucide="sparkles" style="width: 13px; height: 13px;"></i> Presets:</span>
<button class="btn sync-template-btn" onclick="applySyncTemplate('nas_mirror')" title="NAS Mirror: One-way exact replica with checksum verification, deleting orphan files on destination">🪞 NAS Mirror</button>
<button class="btn sync-template-btn" onclick="applySyncTemplate('code_sync')" title="Codebase Sync: Two-way developer sync excluding node_modules, .git, target, .cache, and dist">💻 Codebase Sync</button>
<button class="btn sync-template-btn" onclick="applySyncTemplate('snapshot_archive')" title="Snapshot Vault: Versioned backup keeping 30-day historical file snapshots in _archive/">📦 Snapshot Vault</button>
<button class="btn sync-template-btn" onclick="applySyncTemplate('media_vault')" title="Media Backup: Additive one-way backup that never deletes pictures/videos from destination">📸 Media Backup</button>
</div>
<button class="btn btn-xs" id="btn-toggle-sync-exclusions" onclick="toggleSyncExclusionsPanel()" title="Toggle Visual File & Folder Exclusion Filters" style="display: inline-flex; align-items: center; gap: 5px; font-weight: 600;">
<i data-lucide="filter" style="width: 12px; height: 12px;"></i>
<span>Exclusions (<span id="sync-exclusions-badge">0</span>)</span>
</button>
</div>
<div id="sync-exclusions-panel" style="display: none; flex-direction: column; gap: 6px; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; font-size: 11px;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="font-weight: 700; color: var(--text-main); display: inline-flex; align-items: center; gap: 5px;">
<i data-lucide="shield-alert" style="width: 13px; height: 13px; color: var(--accent);"></i>
Excluded Folders & Patterns:
</span>
<span style="font-size: 10.5px; color: var(--text-dim);">Files matching active chips will be skipped during analysis and replication</span>
</div>
<div class="sync-exclusion-preset-chips" style="display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px;">
<span class="sync-chip" data-pattern="node_modules" onclick="toggleExclusionChip(this)">node_modules</span>
<span class="sync-chip" data-pattern=".git" onclick="toggleExclusionChip(this)">.git</span>
<span class="sync-chip" data-pattern="target" onclick="toggleExclusionChip(this)">target/</span>
<span class="sync-chip" data-pattern=".cache" onclick="toggleExclusionChip(this)">.cache/</span>
<span class="sync-chip" data-pattern="tmp" onclick="toggleExclusionChip(this)">tmp/</span>
<span class="sync-chip" data-pattern="*.tmp" onclick="toggleExclusionChip(this)">*.tmp</span>
<span class="sync-chip" data-pattern=".DS_Store" onclick="toggleExclusionChip(this)">.DS_Store</span>
<span class="sync-chip" data-pattern="Thumbs.db" onclick="toggleExclusionChip(this)">Thumbs.db</span>
<span class="sync-chip" data-pattern="*.log" onclick="toggleExclusionChip(this)">*.log</span>
<span class="sync-chip" data-pattern="dist" onclick="toggleExclusionChip(this)">dist/</span>
<span class="sync-chip" data-pattern="*.bak" onclick="toggleExclusionChip(this)">*.bak</span>
</div>
<div style="display: flex; align-items: center; gap: 6px; margin-top: 2px;">
<input type="text" id="sync-custom-exclusion-input" class="pane-quick-filter" style="flex: 1; padding: 4px 8px; font-size: 11px; font-family: var(--font-mono);" placeholder="Add custom pattern (e.g. *.iso, build/, secret.key) and press Enter" onkeydown="if(event.key==='Enter'){event.preventDefault();addCustomExclusionPattern();}">
<button class="btn btn-xs" onclick="addCustomExclusionPattern()"><i data-lucide="plus" style="width: 12px; height: 12px;"></i> Add</button>
<button class="btn btn-xs btn-outline" onclick="clearAllSyncExclusions()"><i data-lucide="trash-2" style="width: 12px; height: 12px;"></i> Clear All</button>
</div>
<div id="sync-active-custom-tags" style="display: flex; flex-wrap: wrap; gap: 4px;"></div>
</div>
<div class="sync-mode-cards" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">
<label class="sync-profile-card active" id="card-mode-sync">
<input type="radio" name="sync-mode" value="synchronize" checked onchange="handleSyncModeChange()">
<div class="sync-card-body">
<div class="sync-card-title">🔄 Two-Way Sync</div>
<div class="sync-card-desc">Reconciles additions, edits, and deletions bidirectionally between both folders.</div>
</div>
</label>
<label class="sync-profile-card" id="card-mode-echo">
<input type="radio" name="sync-mode" value="echo" onchange="handleSyncModeChange()">
<div class="sync-card-body">
<div class="sync-card-title">🪞 Mirror / Echo</div>
<div class="sync-card-desc">One-way exact replica. Replaces changed files and deletes orphan files on destination.</div>
</div>
</label>
<label class="sync-profile-card" id="card-mode-contribute">
<input type="radio" name="sync-mode" value="contribute" onchange="handleSyncModeChange()">
<div class="sync-card-body">
<div class="sync-card-title">➕ Contribute</div>
<div class="sync-card-desc">One-way additive backup. Copies new and modified files, never deleting destination files.</div>
</div>
</label>
<label class="sync-profile-card" id="card-mode-subscribe">
<input type="radio" name="sync-mode" value="subscribe" onchange="handleSyncModeChange()">
<div class="sync-card-body">
<div class="sync-card-title">📦 Snapshot Archive</div>
<div class="sync-card-desc">Historical versioning. Archives modified and deleted files into timestamped snapshot vaults.</div>
</div>
</label>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px;">
<div style="display: flex; align-items: center; gap: 14px; flex-wrap: wrap;">
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; color: var(--accent);">
<input type="checkbox" id="sync-opt-delta" checked> <span>⚡ Block-Level Delta Copy</span>
</label>
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer;">
<input type="checkbox" id="sync-opt-verify" checked> <span>🔒 Verify File Integrity (Checksums)</span>
</label>
<div id="sync-archive-settings" style="display: none; align-items: center; gap: 6px;">
<span style="color: var(--text-dim);">Archive:</span>
<input type="text" id="sync-opt-archive-dir" value="_archive" style="width: 75px; padding: 2px 6px; font-size: 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px;">
<span style="color: var(--text-dim);">Retention:</span>
<input type="number" id="sync-opt-retention" value="30" style="width: 48px; padding: 2px 4px; font-size: 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px;"> <span style="color: var(--text-dim);">days</span>
</div>
</div>
<div class="sync-filter-toggles" style="display: flex; gap: 4px;">
<button class="btn btn-xs sync-filter-btn active" id="btn-sync-filter-all" onclick="filterSyncGrid('all')">All (<span id="sync-cnt-all">0</span>)</button>
<button class="btn btn-xs sync-filter-btn" id="btn-sync-filter-left" onclick="filterSyncGrid('left')">➔ Right (<span id="sync-cnt-left">0</span>)</button>
<button class="btn btn-xs sync-filter-btn" id="btn-sync-filter-right" onclick="filterSyncGrid('right')">⬅ Left (<span id="sync-cnt-right">0</span>)</button>
<button class="btn btn-xs sync-filter-btn" id="btn-sync-filter-mod" onclick="filterSyncGrid('modified')">⚡ Diff (<span id="sync-cnt-mod">0</span>)</button>
<button class="btn btn-xs sync-filter-btn" id="btn-sync-filter-archive" onclick="filterSyncGrid('archive')">📦 Archive (<span id="sync-cnt-archive">0</span>)</button>
<button class="btn btn-xs sync-filter-btn" id="btn-sync-filter-eq" onclick="filterSyncGrid('identical')">✔ Equal (<span id="sync-cnt-eq">0</span>)</button>
</div>
</div>
</div>
<div class="sync-grid-container" style="flex: 1; overflow-y: auto; background: var(--bg-main);">
<table class="sync-diff-table" id="sync-diff-table" style="width: 100%; border-collapse: collapse; font-size: 12px;">
<thead>
<tr style="position: sticky; top: 0; background: var(--bg-header); border-bottom: 1px solid var(--border); z-index: 10;">
<th style="width: 90px; text-align: right; padding: 6px 10px;">Left Size</th>
<th style="width: 38%; padding: 6px 10px; text-align: left;">Source File</th>
<th style="width: 60px; text-align: center; padding: 6px 4px;">Action</th>
<th style="width: 38%; padding: 6px 10px; text-align: left;">Destination File</th>
<th style="width: 90px; text-align: left; padding: 6px 10px;">Right Size</th>
</tr>
</thead>
<tbody id="sync-diff-body">
<tr><td colspan="5" style="text-align: center; padding: 40px; color: var(--text-dim);">Click <b>Compare & Analyze</b> or <b>Dry Run</b> to inspect directory differences.</td></tr>
</tbody>
</table>
</div>
<div class="modal-footer" style="padding: 10px 16px; background: var(--bg-header); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
<div id="sync-footer-stats" style="font-size: 11px; font-family: var(--font-mono); color: var(--text-muted);">
Ready to compare directories.
</div>
<div style="display: flex; gap: 8px; align-items: center;">
<button class="btn btn-sm" onclick="openSaveCurrentSyncAsProfile()"><i data-lucide="bookmark"></i> Save Job</button>
<button class="btn btn-sm" onclick="analyzeSync(false)"><i data-lucide="search"></i> Compare & Analyze</button>
<button class="btn btn-sm btn-outline" onclick="executeDryRun()" title="Simulate file operations without making any changes"><i data-lucide="play-circle"></i> Dry Run (Simulate)</button>
<button class="btn btn-sm btn-accent" id="btn-run-sync" onclick="executeSync(false)"><i data-lucide="refresh-cw"></i> Synchronize Now</button>
</div>
</div>
</div>
<div id="sync-tab-content-profiles" class="sync-tab-pane" style="display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 16px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-shrink: 0;">
<div>
<span style="font-weight: 700; font-size: 14px;">Automated Backup Jobs & Schedules</span>
<div style="font-size: 11px; color: var(--text-dim);">Define continuous background replication profiles with cron, intervals, real-time watchers & webhooks.</div>
</div>
<div style="display: flex; gap: 8px;">
<button class="btn btn-sm" onclick="loadBackupProfiles()"><i data-lucide="rotate-cw"></i> Refresh</button>
<button class="btn btn-sm btn-accent" onclick="openCreateBackupProfileModal()"><i data-lucide="plus"></i> New Backup Job</button>
</div>
</div>
<div style="flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-main);">
<table style="width: 100%; border-collapse: collapse; font-size: 12px;" id="backup-profiles-table">
<thead>
<tr style="position: sticky; top: 0; background: var(--bg-header); border-bottom: 1px solid var(--border);">
<th style="padding: 8px 12px; text-align: left;">Job Name</th>
<th style="padding: 8px 12px; text-align: left;">Source ➔ Destination</th>
<th style="padding: 8px 10px; text-align: center;">Mode</th>
<th style="padding: 8px 10px; text-align: center;">Trigger / Schedule</th>
<th style="padding: 8px 10px; text-align: center;">Active</th>
<th style="padding: 8px 12px; text-align: left;">Last Run</th>
<th style="padding: 8px 12px; text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="backup-profiles-body">
<tr><td colspan="7" style="text-align: center; padding: 30px; color: var(--text-dim);">Loading saved backup profiles...</td></tr>
</tbody>
</table>
</div>
</div>
<div id="sync-tab-content-history" class="sync-tab-pane" style="display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 16px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-shrink: 0;">
<div>
<span style="font-weight: 700; font-size: 14px;">Backup & Synchronization Run History</span>
<div style="font-size: 11px; color: var(--text-dim);">Audit log of all manual and scheduled replication executions.</div>
</div>
<button class="btn btn-sm" onclick="loadBackupHistory()"><i data-lucide="rotate-cw"></i> Refresh</button>
</div>
<div style="flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-main);">
<table style="width: 100%; border-collapse: collapse; font-size: 12px;" id="backup-history-table">
<thead>
<tr style="position: sticky; top: 0; background: var(--bg-header); border-bottom: 1px solid var(--border);">
<th style="padding: 8px 12px; text-align: left;">Timestamp</th>
<th style="padding: 8px 12px; text-align: left;">Job / Profile</th>
<th style="padding: 8px 10px; text-align: center;">Status</th>
<th style="padding: 8px 10px; text-align: right;">Copied</th>
<th style="padding: 8px 10px; text-align: right;">Archived</th>
<th style="padding: 8px 10px; text-align: right;">Deleted</th>
<th style="padding: 8px 10px; text-align: right;">Duration</th>
<th style="padding: 8px 12px; text-align: left;">Details</th>
</tr>
</thead>
<tbody id="backup-history-body">
<tr><td colspan="8" style="text-align: center; padding: 30px; color: var(--text-dim);">Loading execution history...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="backup-profile-modal" style="z-index: 2870;">
<div class="modal-box" style="max-width: 520px; width: 90vw;">
<div class="modal-header" style="padding: 10px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<span style="font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px;"><img src="assets/sync.webp" alt="Backup" style="width: 16px; height: 16px; object-fit: contain;"> <span id="backup-profile-modal-title">Create Backup Profile</span></span>
<button class="btn btn-icon" onclick="closeModal('backup-profile-modal')"><i data-lucide="x"></i></button>
</div>
<div style="padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 12px;">
<input type="hidden" id="bp-id" value="">
<div style="display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;">
<div style="flex: 1;">
<label style="font-weight: 600; display: block; margin-bottom: 4px;">Job / Profile Name</label>
<input type="text" id="bp-name" class="pane-quick-filter" style="width: 100%; padding: 6px 8px;" placeholder="e.g. Daily Project Mirror">
</div>
<div>
<select id="bp-template-select" class="pane-quick-filter" style="font-size: 11px; padding: 6px 8px; font-weight: 600; background: var(--bg-panel);" onchange="applyJobModalTemplate(this.value)">
<option value="">⚡ Load Template...</option>
<option value="nas_mirror">🪞 NAS Mirror</option>
<option value="code_sync">💻 Codebase Sync</option>
<option value="snapshot_archive">📦 Snapshot Vault</option>
<option value="media_vault">📸 Media Backup</option>
</select>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div>
<label style="font-weight: 600; display: block; margin-bottom: 4px;">Source Directory</label>
<input type="text" id="bp-source" class="pane-quick-filter" style="width: 100%; padding: 6px 8px; font-family: var(--font-mono);" placeholder="/path/to/source">
</div>
<div>
<label style="font-weight: 600; display: block; margin-bottom: 4px;">Destination Directory</label>
<input type="text" id="bp-dest" class="pane-quick-filter" style="width: 100%; padding: 6px 8px; font-family: var(--font-mono);" placeholder="/path/to/destination">
</div>
</div>
<div>
<label style="font-weight: 600; display: block; margin-bottom: 4px;">Exclusions & Ignored Patterns (Comma-separated)</label>
<input type="text" id="bp-exclusions" class="pane-quick-filter" style="width: 100%; padding: 6px 8px; font-family: var(--font-mono); font-size: 11px;" placeholder="e.g. node_modules, .git, target, *.tmp, .DS_Store">
<div class="sync-exclusion-preset-chips" style="display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;">
<span class="sync-chip sync-chip-sm" onclick="appendBpExclusion('node_modules')">+ node_modules</span>
<span class="sync-chip sync-chip-sm" onclick="appendBpExclusion('.git')">+ .git</span>
<span class="sync-chip sync-chip-sm" onclick="appendBpExclusion('target')">+ target/</span>
<span class="sync-chip sync-chip-sm" onclick="appendBpExclusion('.cache')">+ .cache/</span>
<span class="sync-chip sync-chip-sm" onclick="appendBpExclusion('*.tmp')">+ *.tmp</span>
<span class="sync-chip sync-chip-sm" onclick="appendBpExclusion('.DS_Store')">+ .DS_Store</span>
<span class="sync-chip sync-chip-sm" onclick="appendBpExclusion('Thumbs.db')">+ Thumbs.db</span>
<span class="sync-chip sync-chip-sm" onclick="appendBpExclusion('*.log')">+ *.log</span>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div>
<label style="font-weight: 600; display: block; margin-bottom: 4px;">Replication Mode</label>
<select id="bp-mode" class="pane-quick-filter" style="width: 100%; padding: 6px 8px;">
<option value="synchronize">🔄 Synchronize (Two-Way)</option>
<option value="echo">🪞 Echo / Mirror (One-Way)</option>
<option value="contribute">➕ Contribute (Additive)</option>
<option value="subscribe" selected>🕰️ Subscribe (Versioning Archive)</option>
</select>
</div>
<div>
<label style="font-weight: 600; display: block; margin-bottom: 4px;">Automation Trigger</label>
<select id="bp-schedule-type" class="pane-quick-filter" style="width: 100%; padding: 6px 8px;" onchange="handleScheduleTypeChange()">
<option value="manual">Manual Only</option>
<option value="interval">⏰ Periodic Interval</option>
<option value="daily">📅 Daily at Specific Time</option>
<option value="realtime">⚡ Real-Time Watcher (Continuous)</option>
</select>
</div>
</div>
<div id="bp-interval-row" style="display: none; grid-template-columns: 1fr 1fr; gap: 8px;">
<div>
<label style="font-weight: 600; display: block; margin-bottom: 4px;">Interval (Minutes)</label>
<input type="number" id="bp-interval-mins" class="pane-quick-filter" style="width: 100%; padding: 6px 8px;" value="60" min="1">
</div>
<div>
<label style="font-weight: 600; display: block; margin-bottom: 4px;">Daily Run Time (HH:MM)</label>
<input type="text" id="bp-daily-time" class="pane-quick-filter" style="width: 100%; padding: 6px 8px;" value="02:00" placeholder="02:00">
</div>
</div>
<div style="display: flex; gap: 14px;">
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer;">
<input type="checkbox" id="bp-block-delta" checked> ⚡ Block-Level Delta
</label>
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer;">
<input type="checkbox" id="bp-verify" checked> 🔒 Verify Checksums
</label>
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer;">
<input type="checkbox" id="bp-enabled" checked> Enable Automation
</label>
</div>
<div>
<label style="font-weight: 600; display: block; margin-bottom: 4px;">Webhook Alert URL (Optional: Discord/Slack/Telegram)</label>
<input type="text" id="bp-webhook" class="pane-quick-filter" style="width: 100%; padding: 6px 8px;" placeholder="https://discord.com/api/webhooks/...">
</div>
</div>
<div class="modal-footer" style="padding: 10px 16px; background: var(--bg-header); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px;">
<button class="btn" onclick="closeModal('backup-profile-modal')">Cancel</button>
<button class="btn btn-accent" onclick="saveBackupProfileForm()"><i data-lucide="check"></i> Save Backup Job</button>
</div>
</div>
</div>
<div class="modal-overlay" id="sync-folder-picker-modal" style="z-index: 2900;">
<div class="modal-box" style="max-width: 580px; width: 92vw; max-height: 80vh; display: flex; flex-direction: column;">
<div class="modal-header" style="padding: 10px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<span style="font-weight: 700; font-size: 13px; color: var(--text-main); display: inline-flex; align-items: center; gap: 6px;"><i data-lucide="folder" style="width: 14px; height: 14px; color: var(--accent);"></i> Select Folder</span>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('sync-folder-picker-modal')"><i data-lucide="x"></i></button>
</div>
<div style="padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto;">
<div style="font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">Active Panes & Locations</div>
<div id="sync-picker-panes-list" style="display: flex; flex-direction: column; gap: 5px;"></div>
<div style="font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-top: 6px;">Browse Folders</div>
<div style="display: flex; gap: 6px; align-items: center;">
<input type="text" id="sync-picker-path-input" class="pane-quick-filter" style="flex: 1; height: 28px; padding: 0 8px; font-family: var(--font-mono); font-size: 11px;" placeholder="/" onkeydown="if(event.key==='Enter'){ navigateSyncPickerPath(this.value); }">
<button class="btn btn-sm btn-outline" style="height: 28px; padding: 0 8px;" onclick="navigateSyncPickerUp()"><i data-lucide="arrow-up"></i> Up</button>
<button class="btn btn-sm" style="height: 28px; padding: 0 8px;" onclick="navigateSyncPickerPath(document.getElementById('sync-picker-path-input').value)">Go</button>
</div>
<div id="sync-picker-subfolders" style="max-height: 240px; min-height: 120px; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-dark); padding: 4px;"></div>
</div>
<div class="modal-footer" style="padding: 10px 16px; background: var(--bg-header); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<span id="sync-picker-selected-label" style="font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;"></span>
<div style="display: flex; gap: 6px;">
<button class="btn btn-sm" onclick="closeModal('sync-folder-picker-modal')">Cancel</button>
<button class="btn btn-sm btn-accent" onclick="confirmSyncFolderSelection()">Select This Folder</button>
</div>
</div>
</div>
</div>
<div class="floating-diskusage-window" id="floating-diskusage-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="diskusage-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="diskusage-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="diskusage-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="diskusage-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="diskusage-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header du-modal-header" id="disk-usage-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="du-drag-handle">
<img src="assets/amber-piechart.webp" alt="Stats" style="width: 17px; height: 17px; object-fit: contain; flex-shrink: 0;">
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px;">Disk Usage</span>
<span id="du-scan-duration-badge" class="badge" style="display: none; background: rgba(245, 158, 11, 0.15); color: var(--accent); font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 4px;">0ms</span>
</div>
<div style="display: flex; align-items: center; gap: 6px;">
<div class="layout-btn-group" id="du-view-switcher" style="display: flex; gap: 2px; background: rgba(0,0,0,0.25); padding: 2px; border-radius: 6px; border: 1px solid var(--border);">
<button class="btn btn-icon btn-sm active" id="du-view-btn-mounts" onclick="setDiskUsageViewMode('mounts')" title="Drives & Mounted Storage Overview" style="width: 28px; height: 28px;"><i data-lucide="hard-drive" style="width: 14px; height: 14px;"></i></button>
<button class="btn btn-icon btn-sm" id="du-view-btn-split" onclick="setDiskUsageViewMode('split')" title="Split View: Treemap & Item List" style="width: 28px; height: 28px;"><i data-lucide="columns-2" style="width: 14px; height: 14px;"></i></button>
<button class="btn btn-icon btn-sm" id="du-view-btn-treemap" onclick="setDiskUsageViewMode('treemap')" title="Treemap Tiles View" style="width: 28px; height: 28px;"><i data-lucide="layout-grid" style="width: 14px; height: 14px;"></i></button>
<button class="btn btn-icon btn-sm" id="du-view-btn-list" onclick="setDiskUsageViewMode('list')" title="Detailed List View" style="width: 28px; height: 28px;"><i data-lucide="list" style="width: 14px; height: 14px;"></i></button>
</div>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon btn-sm" id="du-rescan-btn" onclick="if(duViewMode==='mounts'){ loadSystemDisksOverview(true); } else { runDiskUsageScan(document.getElementById('du-path-input').value); }" title="Refresh / Rescan" style="width: 28px; height: 28px;"><i data-lucide="rotate-cw" style="width: 14px; height: 14px;"></i></button>
<button class="btn btn-icon btn-sm desktop-only" id="btn-du-dock" onclick="dockDiskUsageToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon btn-sm" id="du-maximize-btn" onclick="toggleDiskUsageMaximize()" title="Toggle Maximize Window" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon btn-sm desktop-only" onclick="minimizeFloatingDiskUsage()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon btn-sm modal-close-btn" onclick="closeFloatingDiskUsage()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="diskusage-body" id="diskusage-body" style="display: flex; flex-direction: column; flex: 1; overflow: hidden; height: calc(100% - 42px);">
<div class="du-top-bar" id="du-top-bar">
<div style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap;">
<button class="btn btn-xs" onclick="navigateDiskUsageParent()" title="Go to Parent Directory (Backspace / Alt+Up)" style="height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600;">
<i data-lucide="arrow-up" style="width: 13px; height: 13px;"></i> Up (..)
</button>
<button class="btn btn-xs" onclick="navigateDiskUsageActivePane()" title="Scan Active File Panel Path" style="height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px;">
<i data-lucide="columns-2" style="width: 13px; height: 13px;"></i> Current Pane
</button>
<button class="btn btn-xs" onclick="runDiskUsageScan('~')" title="Scan Home Directory" style="height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px;">
<i data-lucide="home" style="width: 13px; height: 13px;"></i> Home
</button>
<button class="btn btn-xs" onclick="runDiskUsageScan('/')" title="Scan Root Directory (/)" style="height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px;">
<i data-lucide="hard-drive" style="width: 13px; height: 13px;"></i> /
</button>
<div style="margin-left: auto; display: flex; align-items: center; gap: 6px;">
<div style="position: relative; display: flex; align-items: center;">
<i data-lucide="filter" style="position: absolute; left: 7px; width: 12px; height: 12px; color: var(--text-muted); pointer-events: none;"></i>
<input type="text" id="du-filter-input" class="pane-quick-filter" style="width: 160px; height: 26px; padding-left: 24px; font-size: 11px;" placeholder="Filter items..." oninput="filterDiskUsageItems(this.value)">
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 6px;">
<div class="du-breadcrumbs" id="du-breadcrumbs" style="flex: 1;"></div>
<div style="display: flex; align-items: center; gap: 4px;">
<input type="text" id="du-path-input" class="pane-quick-filter" style="width: 220px; font-family: var(--font-mono); height: 26px; font-size: 11px;" placeholder="/path/to/folder" onkeydown="if(event.key==='Enter') runDiskUsageScan(this.value)">
<button class="btn btn-xs btn-accent" onclick="runDiskUsageScan(document.getElementById('du-path-input').value)" style="height: 26px; padding: 0 10px; font-weight: 600;"><i data-lucide="search" style="width: 12px; margin-right: 4px;"></i> Scan</button>
</div>
</div>
</div>
<div class="du-stats-summary" id="du-stats-summary">
<div class="du-stat-card">
<span class="du-stat-label">Total Space</span>
<span class="du-stat-val" id="du-total-space">0 B</span>
</div>
<div class="du-stat-card">
<span class="du-stat-label">Files / Drives</span>
<span class="du-stat-val" id="du-total-files">0</span>
</div>
<div class="du-stat-card">
<span class="du-stat-label">Directories / Free</span>
<span class="du-stat-val" id="du-total-dirs">0</span>
</div>
<div class="du-stat-card">
<span class="du-stat-label">Largest / Highest</span>
<span class="du-stat-val" id="du-largest-stat" style="font-size: 12px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">-</span>
</div>
</div>
<div id="du-multi-bar" class="du-multi-bar"></div>
<div class="du-content-body" id="du-content-body" style="flex: 1; overflow-y: auto;">
<div id="du-mounts-section" style="display: block;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px;">
<div style="font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; display: flex; align-items: center; gap: 6px;">
<i data-lucide="hard-drive" style="width: 14px; height: 14px;"></i> Mounted Storage & Filesystems Overview (<span id="du-mounts-count">0</span> volumes)
</div>
<div style="display: flex; gap: 6px; align-items: center;">
<button class="btn btn-xs btn-outline" onclick="loadSystemDisksOverview(true)" style="height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px;" title="Refresh Mounts">
<i data-lucide="rotate-cw" style="width: 12px; height: 12px;"></i> Refresh
</button>
</div>
</div>
<div id="du-mounts-cards" class="du-mounts-grid">
</div>
</div>
<div id="du-treemap-section" style="display: none;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
<div style="font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; display: flex; align-items: center; gap: 6px;">
<i data-lucide="layout-grid" style="width: 13px; height: 13px;"></i> Proportional Storage Treemap (Click to Drill Down)
</div>
<span style="font-size: 10.5px; color: var(--text-dim);">Proportionally sized by disk footprint</span>
</div>
<div id="du-treemap-container" class="du-treemap-container"></div>
</div>
<div id="du-list-section" style="display: none;">
<div style="font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;">
<i data-lucide="folder-tree" style="width: 13px; height: 13px;"></i> Direct Subdirectories & Items (<span id="du-items-count">0</span>)
</div>
<div id="du-items-list" class="du-items-list">
</div>
</div>
<div id="du-largest-section" style="display: none;">
<div style="font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; margin-top: 6px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;">
<i data-lucide="file-warning" style="width: 13px; height: 13px;"></i> Top 20 Heaviest Files Across Subtrees
</div>
<div id="du-largest-files" class="du-items-list">
</div>
</div>
</div>
<div class="modal-footer" style="padding: 8px 16px; background: var(--bg-header); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 11px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px;">
<i data-lucide="info" style="width: 13px; height: 13px;"></i> Click any folder to drill down • Click "Open in Pane" to jump in Brum
</span>
<button class="btn btn-accent btn-sm" onclick="closeFloatingDiskUsage()">Close</button>
</div>
</div>
</div>
<div class="diskusage-pill" id="diskusage-pill" style="display: none;" onclick="restoreFloatingDiskUsage()" title="Click to restore Disk Usage">
<img src="assets/amber-piechart.webp" alt="Disk Usage" style="width: 14px; height: 14px; object-fit: contain;">
<span>Disk Usage</span>
</div>
<div class="modal-overlay" id="fleet-manager-modal" style="z-index: 2870;">
<div class="modal-box" style="width: 840px; max-width: 95vw; max-height: 88vh; display: flex; flex-direction: column;">
<div class="modal-header" style="min-height: 42px; padding: 0 14px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: grab;">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="network" style="width: 16px; height: 16px; color: var(--accent);"></i>
<span style="font-weight: 700; font-size: 13.5px; letter-spacing: 0.2px;">Fleet Control</span>
<span class="user-role-badge" id="fleet-node-count-badge" style="background: rgba(245, 158, 11, 0.15); color: var(--accent); font-size: 10.5px;">1 Node</span>
</div>
<div style="display: flex; align-items: center; gap: 6px;">
<button type="button" class="btn btn-icon btn-sm" onclick="pingAllFleetNodes()" title="Ping All Nodes (Refresh Health)" style="width: 28px; height: 28px; border-radius: var(--radius);"><i data-lucide="rotate-cw" style="width: 14px; height: 14px;"></i></button>
<button type="button" class="btn btn-icon btn-sm" onclick="resetFleetNodeForm()" title="New Node Profile" style="width: 28px; height: 28px; border-radius: var(--radius);"><i data-lucide="plus" style="width: 14px; height: 14px;"></i></button>
<button type="button" class="btn btn-icon btn-sm modal-close-btn" onclick="closeModal('fleet-manager-modal')" title="Close (Esc)" style="width: 28px; height: 28px; border-radius: var(--radius);"><i data-lucide="x" style="width: 14px; height: 14px;"></i></button>
</div>
</div>
<div class="modal-body" style="padding: 14px; overflow-y: auto;">
<div class="fleet-manager-grid">
<div class="fleet-nodes-sidebar">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase;">Registered Nodes</span>
<button type="button" class="btn btn-xs btn-outline" onclick="pingAllFleetNodes()" style="height: 22px; font-size: 10.5px; padding: 0 6px;"><i data-lucide="activity" style="width: 11px; height: 11px;"></i> Ping All</button>
</div>
<div class="fleet-nodes-list" id="fleet-manager-nodes-list">
</div>
</div>
<div class="fleet-node-editor" style="display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h4 style="margin: 0; font-size: 13px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 6px;">
<i data-lucide="server-cog" style="width: 15px; height: 15px; color: var(--accent);"></i>
<span id="fleet-editor-title">Add New Fleet Node</span>
</h4>
<span id="fleet-editor-badge" class="fleet-tag-pill">New Node</span>
</div>
<input type="hidden" id="fleet-input-id" value="">
<div class="settings-grid-2col" style="gap: 10px;">
<div class="settings-field">
<label class="settings-field-label" for="fleet-input-name">Node Friendly Name:</label>
<input type="text" id="fleet-input-name" class="settings-input" placeholder="e.g. Proxmox Goshawk (LXC 104)">
</div>
<div class="settings-field">
<label class="settings-field-label" for="fleet-input-url">Endpoint URL (HTTP/HTTPS):</label>
<input type="text" id="fleet-input-url" class="settings-input" placeholder="e.g. https://goshawk.vpn:3140 or http://100.64.0.5:3140">
</div>
</div>
<div class="settings-field">
<label class="settings-field-label" for="fleet-input-token">Auth Token / API Secret:</label>
<div style="display: flex; gap: 6px; align-items: center;">
<input type="password" id="fleet-input-token" class="settings-input" placeholder="Bearer JWT token or service secret for remote node" style="flex: 1; font-family: var(--font-mono); height: 28px;">
<button type="button" class="btn btn-icon btn-sm btn-outline" id="btn-toggle-fleet-token" onclick="toggleFleetTokenVisibility()" title="Toggle Token Visibility" style="width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;"><i data-lucide="eye" id="fleet-token-eye-icon" style="width: 14px; height: 14px; margin: 0;"></i></button>
</div>
<div class="settings-field-hint">Leave blank for unauthenticated or local node profiles.</div>
</div>
<div class="settings-grid-2col" style="gap: 10px;">
<div class="settings-field">
<label class="settings-field-label">Node Accent Color:</label>
<div class="fleet-color-radio-group" id="fleet-color-swatches">
<div class="fleet-color-swatch active" data-color="amber" style="background: #f59e0b;" onclick="selectFleetColor('amber')" title="Amber"></div>
<div class="fleet-color-swatch" data-color="emerald" style="background: #10b981;" onclick="selectFleetColor('emerald')" title="Emerald"></div>
<div class="fleet-color-swatch" data-color="sky" style="background: #0284c7;" onclick="selectFleetColor('sky')" title="Sky Blue"></div>
<div class="fleet-color-swatch" data-color="purple" style="background: #a855f7;" onclick="selectFleetColor('purple')" title="Purple"></div>
<div class="fleet-color-swatch" data-color="rose" style="background: #f43f5e;" onclick="selectFleetColor('rose')" title="Rose"></div>
<div class="fleet-color-swatch" data-color="cyan" style="background: #06b6d4;" onclick="selectFleetColor('cyan')" title="Cyan"></div>
<div class="fleet-color-swatch" data-color="slate" style="background: #64748b;" onclick="selectFleetColor('slate')" title="Slate"></div>
</div>
<input type="hidden" id="fleet-input-color" value="amber">
</div>
<div class="settings-field">
<label class="settings-field-label" for="fleet-input-tags">Tags (comma-separated):</label>
<input type="text" id="fleet-input-tags" class="settings-input" placeholder="e.g. nas, proxmox, cloud, prod">
</div>
</div>
<div class="fleet-test-box" id="fleet-test-container">
<div class="fleet-test-header">
<span style="font-size: 11.5px; font-weight: 600; color: var(--text-main); display: inline-flex; align-items: center; gap: 5px;">
<i data-lucide="activity" style="width: 13px; height: 13px; color: var(--accent);"></i> Connection Diagnostics
</span>
<button type="button" class="btn btn-xs btn-outline" id="btn-fleet-test" onclick="testFleetNodeConnection()" style="height: 24px; font-size: 11px; padding: 0 8px;">
<i data-lucide="zap" style="width: 11px; height: 11px;"></i> Test Connection
</button>
</div>
<div class="fleet-test-results" id="fleet-test-results">
<span>Click "Test Connection" to query node health, version, and latency.</span>
</div>
</div>
<div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px;">
<button type="button" class="btn btn-sm btn-outline" onclick="resetFleetNodeForm()">Clear Form</button>
<button type="button" class="btn btn-sm btn-accent" onclick="saveFleetNodeProfile()" style="display: inline-flex; align-items: center; gap: 5px;">
<i data-lucide="check" style="width: 13px; height: 13px;"></i> Save Node Profile
</button>
</div>
</div>
</div>
</div>
<div class="modal-footer fleet-modal-footer">
<span class="fleet-footer-note">
<i data-lucide="shield-check" style="width: 13px; height: 13px; color: #10b981; flex-shrink: 0;"></i> Zero-Trust Fleet Control • HTTPS/WSS & Mesh Overlays (Tailscale, NetBird, WireGuard)
</span>
<div class="fleet-footer-actions">
<button class="btn btn-sm btn-outline" onclick="openCreateApiTokenModal()" title="Generate API / Fleet Token on this local host"><i data-lucide="key-round" style="width: 12px; height: 12px;"></i> Generate Token</button>
<button class="btn btn-sm btn-outline" onclick="exportFleetNodesJson()" title="Export Fleet nodes to JSON">Export JSON</button>
<button class="btn btn-sm btn-outline" onclick="triggerImportFleetNodes()" title="Import Fleet nodes from JSON">Import JSON</button>
<input type="file" id="fleet-import-file" accept=".json" style="display: none;" onchange="handleFleetNodesImport(event)">
<button class="btn btn-accent btn-sm" onclick="closeModal('fleet-manager-modal')">Close</button>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="create-api-token-modal" style="z-index: 2880;">
<div class="modal-box" style="width: 540px; max-width: 95vw; display: flex; flex-direction: column;">
<div class="modal-header" style="min-height: 42px; padding: 0 14px; background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: grab;">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="key-round" style="width: 16px; height: 16px; color: var(--accent);"></i>
<span style="font-weight: 700; font-size: 13.5px;">Generate API & Fleet Token</span>
</div>
<button type="button" class="btn btn-icon btn-sm modal-close-btn" onclick="closeModal('create-api-token-modal')" title="Close (Esc)" style="width: 28px; height: 28px; border-radius: var(--radius);"><i data-lucide="x" style="width: 14px; height: 14px;"></i></button>
</div>
<div class="modal-body" id="token-generator-form-view" style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
<div class="settings-field">
<label class="settings-field-label" for="token-input-name">Token Friendly Name / Description:</label>
<input type="text" id="token-input-name" class="settings-input" placeholder="e.g. Proxmox Goshawk (LXC 104) Fleet Token">
<div class="settings-field-hint">A recognizable name identifying the node, script, or automated service.</div>
</div>
<div class="settings-grid-2col" style="gap: 10px;">
<div class="settings-field">
<label class="settings-field-label" for="token-input-role">Assigned Role & Permissions:</label>
<select id="token-input-role" class="settings-select">
<option value="admin">Administrator (Full Access)</option>
<option value="user" selected>Standard User (Full File Access)</option>
<option value="readonly">Read-Only (Browse & Stream Only)</option>
</select>
</div>
<div class="settings-field">
<label class="settings-field-label" for="token-input-expiry">Token Expiration:</label>
<select id="token-input-expiry" class="settings-select">
<option value="0" selected>Never (Permanent Service Key)</option>
<option value="365">1 Year (365 Days)</option>
<option value="90">90 Days</option>
<option value="30">30 Days</option>
<option value="7">7 Days</option>
</select>
</div>
</div>
<div class="settings-field">
<label class="settings-field-label" for="token-input-roots">Restricted Storage Roots (Optional):</label>
<input type="text" id="token-input-roots" class="settings-input" placeholder="Leave empty for all paths (or e.g. /data, /storage)">
<div class="settings-field-hint">Comma-separated root paths. Leave empty for unrestricted filesystem access.</div>
</div>
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px;">
<button type="button" class="btn btn-sm btn-outline" onclick="closeModal('create-api-token-modal')">Cancel</button>
<button type="button" class="btn btn-sm btn-accent" id="btn-generate-token-submit" onclick="submitCreateApiToken()" style="display: inline-flex; align-items: center; gap: 5px;">
<i data-lucide="sparkles" style="width: 13px; height: 13px;"></i> Generate Token
</button>
</div>
</div>
<div class="modal-body" id="token-generator-reveal-view" style="padding: 16px; display: none; flex-direction: column; gap: 12px;">
<div style="display: flex; align-items: center; gap: 8px; color: #10b981; font-weight: 700; font-size: 13px;">
<i data-lucide="check-circle-2" style="width: 16px; height: 16px;"></i> API Token Generated Successfully!
</div>
<div style="font-size: 11.5px; color: var(--text-dim); line-height: 1.4;">
Make sure to copy your Bearer token now. For your security, you will not be able to view this full secret key again.
</div>
<div class="settings-field">
<label class="settings-field-label">Secret Bearer Token:</label>
<div style="display: flex; gap: 6px;">
<input type="text" id="token-reveal-secret" class="settings-input" readonly style="font-family: var(--font-mono); font-size: 11px; background: var(--bg-dark); color: var(--accent); user-select: all;" onclick="this.select()">
<button type="button" class="btn btn-sm btn-accent" onclick="copyGeneratedApiToken()" title="Copy Token to Clipboard" style="white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;">
<i data-lucide="copy" style="width: 13px; height: 13px;"></i> Copy
</button>
</div>
</div>
<div class="settings-group-card" style="padding: 10px; background: rgba(0,0,0,0.2); border: 1px solid var(--border); border-radius: var(--radius);">
<div style="font-size: 11px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase;">Usage in Scripts & cURL</div>
<code id="token-curl-example" style="display: block; font-size: 10.5px; color: var(--text-main); font-family: var(--font-mono); word-break: break-all; user-select: all; padding: 6px; background: var(--bg-main); border-radius: 4px;">
curl -H "Authorization: Bearer <TOKEN>" http://localhost:3140/api/health
</code>
</div>
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;">
<button type="button" class="btn btn-sm btn-outline" onclick="copyAndUseTokenInFleetForm()" id="btn-use-in-fleet" style="display: none;">
<i data-lucide="network" style="width: 13px; height: 13px;"></i> Paste into Fleet Manager
</button>
<button type="button" class="btn btn-sm btn-accent" onclick="closeModal('create-api-token-modal')">Done</button>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="search-modal">
<div class="modal-box" style="width: 780px; max-height: 85vh; display: flex; flex-direction: column;">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<img src="assets/search.webp" alt="Search" style="width: 18px; height: 18px; object-fit: contain;">
<span style="font-weight: 700; font-size: 14px;">Deep Search: File & Content Search</span>
</div>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('search-modal')" title="Close Search (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 12px; display: flex; flex-direction: column; gap: 10px;">
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 10px;">
<div>
<label style="font-size: 11px;">Search Directory:</label>
<input type="text" id="search-root-input" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono);">
</div>
<div>
<label style="font-size: 11px;">File Type:</label>
<select id="search-file-type" class="pane-quick-filter" style="width: 100%;">
<option value="any" selected>All Types (*.*)</option>
<option value="file">Files only</option>
<option value="dir">Directories only</option>
<option value="code">Code & Scripts (*.rs, *.js, *.py, etc.)</option>
<option value="image">Images (*.png, *.jpg, *.svg, etc.)</option>
<option value="archive">Archives (*.zip, *.tar.gz, etc.)</option>
</select>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div>
<label style="font-size: 11px;">Filename Pattern (Glob / Regex):</label>
<input type="text" id="search-name-pattern" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. *.rs, *test*, report.pdf">
</div>
<div>
<label style="font-size: 11px;">Containing Text (grep):</label>
<input type="text" id="search-content-query" class="pane-quick-filter" style="width: 100%;" placeholder="e.g. fn main, TODO, error_handler">
</div>
</div>
<div style="display: flex; gap: 14px; font-size: 11px; align-items: center;">
<label style="cursor: pointer;"><input type="checkbox" id="search-case-sensitive"> Match Case</label>
<div style="display: flex; align-items: center; gap: 4px;">
<span>Modified:</span>
<select id="search-date-filter" class="pane-quick-filter">
<option value="all" selected>Any Time</option>
<option value="1">Today (Past 24 Hours)</option>
<option value="7">Past 7 Days</option>
<option value="30">Past 30 Days</option>
</select>
</div>
<button class="btn btn-accent" onclick="runGlobalSearch()" style="margin-left: auto;"><i data-lucide="search"></i> Find Results</button>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
<span style="font-weight: 600; font-size: 11px;">Search Results:</span>
<span id="search-results-stats" style="font-size: 11px; color: var(--text-muted);">0 items found</span>
</div>
<div class="rename-preview-table-wrap" style="max-height: 250px;">
<table class="file-table">
<thead>
<tr>
<th>Filename & Match Snippet</th>
<th style="width: 80px;">Size</th>
<th style="width: 120px;">Modified</th>
<th style="width: 80px;">Action</th>
</tr>
</thead>
<tbody id="search-results-tbody">
<tr><td colspan="4" style="text-align: center; color: var(--text-muted); padding: 20px;">No search results yet</td></tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center;">
<button class="btn btn-accent" id="btn-feed-to-pane" style="display: none;" onclick="feedSearchResultsToActivePane()"><i data-lucide="arrow-down-to-dot"></i> Feed to Active Pane</button>
<button class="btn" onclick="closeModal('search-modal')">Close</button>
</div>
</div>
</div>
<div class="modal-overlay" id="syncthing-modal">
<div class="modal-box" style="width: 820px; max-height: 88vh; display: flex; flex-direction: column;">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<img src="assets/syncthing.webp" alt="Syncthing" style="width: 18px; height: 18px; object-fit: contain;">
<span class="chewtoy-brand-text" style="color: var(--accent); font-weight: 700;">Syncthing Real-Time Sync Dashboard</span>
<span id="syncthing-conn-badge" class="badge" style="background: rgba(16, 185, 129, 0.15); color: #34d399; font-size: 10px; padding: 2px 6px; border-radius: 4px;">Connecting...</span>
</div>
<button class="btn" onclick="closeModal('syncthing-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;">
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">
<div style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center;">
<div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase;">📥 Download Speed</div>
<div id="st-down-speed" style="font-size: 15px; font-weight: 700; color: var(--success); font-family: var(--font-mono); margin-top: 2px;">0 B/s</div>
</div>
<div style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center;">
<div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase;">📤 Upload Speed</div>
<div id="st-up-speed" style="font-size: 15px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); margin-top: 2px;">0 B/s</div>
</div>
<div style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center;">
<div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 4px;"><span class="file-icon-custom-glyph icon-sm" style="color: var(--accent);"></span> Synced Folders</div>
<div id="st-folders-count" style="font-size: 15px; font-weight: 700; font-family: var(--font-mono); margin-top: 2px;">0</div>
</div>
<div style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center;">
<div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase;">👥 Connected Peers</div>
<div id="st-peers-count" style="font-size: 15px; font-weight: 700; font-family: var(--font-mono); margin-top: 2px;">0</div>
</div>
</div>
<div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
<span style="font-weight: 600; font-size: 12px; color: var(--accent); display: flex; align-items: center; gap: 6px;"><span class="file-icon-custom-glyph icon-sm" style="color: var(--accent);"></span> Synchronized Folders</span>
<button class="btn btn-sm" onclick="triggerSyncthingScan()"><i data-lucide="rotate-cw"></i> Rescan All</button>
</div>
<div style="max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px;">
<table class="file-table" style="margin: 0;">
<thead>
<tr>
<th>Folder Label / ID</th>
<th>Path</th>
<th>Status</th>
<th>Sync %</th>
<th style="text-align: right;">Action</th>
</tr>
</thead>
<tbody id="syncthing-folders-tbody">
<tr><td colspan="5" style="text-align:center; padding: 12px;">Loading Syncthing folders...</td></tr>
</tbody>
</table>
</div>
</div>
<div>
<div style="font-weight: 600; font-size: 12px; color: var(--accent); margin-bottom: 6px;">👥 Connected Devices / Peers</div>
<div style="max-height: 160px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px;">
<table class="file-table" style="margin: 0;">
<thead>
<tr>
<th>Device Name / ID</th>
<th>Address</th>
<th>Status</th>
<th>Download (In)</th>
<th>Upload (Out)</th>
</tr>
</thead>
<tbody id="syncthing-peers-tbody">
<tr><td colspan="5" style="text-align:center; padding: 12px;">Loading connected devices...</td></tr>
</tbody>
</table>
</div>
</div>
<div id="st-daemon-banner" style="font-size: 11px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 6px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center;">
<span id="st-daemon-url-text">🌐 Syncthing Daemon: http://127.0.0.1:8384</span>
<a id="st-daemon-gui-link" href="http://127.0.0.1:8384" target="_blank" class="btn btn-sm" style="text-decoration: none;">Open Web GUI ↗</a>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('syncthing-modal')">Close</button>
<button class="btn btn-accent" onclick="loadSyncthingDashboard()">🔄 Refresh Status</button>
</div>
</div>
</div>
<div class="modal-overlay" id="action-output-modal">
<div class="modal-box" style="width: 680px; max-height: 80vh;">
<div class="modal-header">
<span id="action-output-title" style="color: var(--accent); font-weight: 700;">⚡ Script Action Output</span>
<button class="btn" onclick="closeModal('action-output-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 12px; display: flex; flex-direction: column; gap: 8px;">
<div style="font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); background: var(--bg-dark); padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border);" id="action-output-cmd"></div>
<div style="display: flex; gap: 12px; font-size: 11px;">
<span>Status: <b id="action-output-status" style="color: var(--success);">SUCCESS (Code 0)</b></span>
<span>Duration: <b id="action-output-duration">42ms</b></span>
</div>
<pre id="action-output-text" style="background: #090a0d; color: #f4f4f5; padding: 10px; font-family: var(--font-mono); font-size: 12px; border-radius: 4px; overflow: auto; max-height: 400px; white-space: pre-wrap; word-break: break-all; border: 1px solid var(--border);"></pre>
</div>
<div class="modal-footer">
<button class="btn" onclick="copyActionOutput()">Copy Output</button>
<button class="btn btn-accent" onclick="closeModal('action-output-modal')">Close</button>
</div>
</div>
</div>
<div class="modal-overlay" id="paranoid-modal">
<div class="modal-box" style="width: 550px;">
<div class="modal-header" style="color: var(--accent);">
<span>🛡️ Paranoid File Operation Confirmation</span>
<button class="btn" onclick="closeModal('paranoid-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" id="paranoid-modal-body"></div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('paranoid-modal')">Cancel</button>
<button class="btn btn-accent" id="btn-paranoid-proceed">Proceed with Verification</button>
</div>
</div>
</div>
<div class="modal-overlay" id="deltacopy-modal" style="z-index: 3200;">
<div class="modal-box" style="width: 540px; max-width: 95vw;">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent);">
<i data-lucide="copy" style="width: 16px; height: 16px;"></i>
<span>Copy (F5)</span>
</span>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('deltacopy-modal')" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px; display: flex; flex-direction: column; gap: 10px;">
<div class="form-group">
<label style="font-size: 11.5px; font-weight: 600;">Source Item(s):</label>
<div id="deltacopy-source-summary" style="font-family: var(--font-mono); font-size: 11px; background: var(--bg-dark); padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); max-height: 80px; overflow-y: auto;"></div>
</div>
<div class="form-group">
<label style="font-size: 11.5px; font-weight: 600;">Destination Directory:</label>
<input type="text" id="deltacopy-dest-input" class="pane-quick-filter" style="width: 100%; padding: 8px 10px; font-family: var(--font-mono); font-size: 12px; border-radius: var(--radius);" autocomplete="off">
</div>
<div style="background: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.22); border-radius: var(--radius); padding: 10px 12px; margin-top: 4px;">
<div style="font-weight: 600; font-size: 11.5px; color: var(--accent); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;">
<i data-lucide="zap" style="width: 13px; height: 13px;"></i>
<span>DeltaCopy Options:</span>
</div>
<div style="display: flex; flex-direction: column; gap: 6px; font-size: 11.5px;">
<label style="cursor: pointer; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="delta-skip-identical" checked> <b>Skip:</b> Skip unchanged files (matching size & modification timestamp)</label>
<label style="cursor: pointer; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="delta-verify-crc32" checked> <b>Verification:</b> Verify bit-for-bit CRC32 checksum post-copy</label>
<label style="cursor: pointer; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="delta-auto-retry" checked> <b>Retry:</b> Auto-retry up to 3 times on temporary lock or I/O busy</label>
<label style="cursor: pointer; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="delta-preserve-meta" checked> <b>Keep Metadata:</b> Retain original timestamps (<code>mtime</code>) and permissions</label>
</div>
</div>
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px;">
<button class="btn modal-action-btn" onclick="closeModal('deltacopy-modal')">Cancel</button>
<button class="btn modal-action-btn" id="btn-copy-standard" onclick="executeStandardCopy()">Standard Copy</button>
<button class="btn btn-accent modal-action-btn" id="btn-copy-delta" onclick="executeDeltaCopy()"><i data-lucide="zap" style="width: 13px; height: 13px;"></i> Run DeltaCopy</button>
</div>
</div>
</div>
<div class="modal-overlay" id="custom-dest-modal" style="z-index: 3200;">
<div class="modal-box" style="width: 460px; max-width: 95vw;">
<div class="modal-header">
<span id="custom-dest-title" style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent);">
<i data-lucide="folder-input" style="width: 16px; height: 16px;"></i>
<span>Transfer / Move to Destination (F6)</span>
</span>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('custom-dest-modal')" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px; display: flex; flex-direction: column; gap: 10px;">
<div class="form-group">
<label style="font-size: 11.5px; font-weight: 600;">Target Directory Path:</label>
<input type="text" id="custom-dest-input" class="pane-quick-filter" style="width: 100%; padding: 8px 10px; font-family: var(--font-mono); font-size: 12px; border-radius: var(--radius);" placeholder="/path/to/destination" autocomplete="off">
</div>
<div>
<label style="font-size: 11.5px; cursor: pointer; display: flex; align-items: center; gap: 6px;"><input type="checkbox" id="custom-dest-save-fav" checked> Save this location to Favorite Quick Destinations</label>
</div>
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px;">
<button class="btn modal-action-btn" onclick="closeModal('custom-dest-modal')">Cancel</button>
<button class="btn btn-accent modal-action-btn" id="btn-custom-dest-exec"><i data-lucide="check" style="width: 14px;"></i> Execute Transfer</button>
</div>
</div>
</div>
<div class="modal-overlay" id="mkdir-modal" style="z-index: 2800;">
<div class="modal-box" style="width: 420px; max-width: 95vw;">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent);">
<i data-lucide="folder-plus" style="width: 16px; height: 16px;"></i>
<span>Create New Folder (F7)</span>
</span>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('mkdir-modal')" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="display: flex; flex-direction: column; gap: 8px;">
<label for="mkdir-input" style="font-size: 12px; color: var(--text-dim);">Folder Name / Relative Path:</label>
<input type="text" id="mkdir-input" class="pane-quick-filter" placeholder="e.g. new-folder or docs/subfolder" style="width: 100%; padding: 8px 10px; font-size: 13px; font-family: var(--font-mono);" autocomplete="off" spellcheck="false">
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px;">
<button class="btn modal-action-btn" onclick="closeModal('mkdir-modal')">Cancel</button>
<button class="btn btn-accent modal-action-btn" id="btn-confirm-mkdir"><i data-lucide="check" style="width: 14px;"></i> Create</button>
</div>
</div>
</div>
<div class="modal-overlay" id="new-from-template-modal">
<div class="modal-box" style="width: 580px; max-width: 95vw;">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="file-code-2" id="template-modal-icon" style="width: 16px; height: 16px; color: var(--accent);"></i>
<span id="template-modal-title" style="font-weight: 700;">New File from Template</span>
</span>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('new-from-template-modal')" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
<div style="font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 4px;">
<i data-lucide="folder" style="width: 12px; height: 12px;"></i> Destination:
<span id="template-modal-dest" style="font-family: var(--font-mono); color: var(--text-main); font-weight: 600;">/</span>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
<div class="form-group">
<label style="font-weight: 700; font-size: 11.5px;">Filename:</label>
<input type="text" id="template-filename-input" class="pane-quick-filter" style="width: 100%; padding: 6px 8px; font-family: var(--font-mono);" placeholder="document.md" oninput="updateTemplateLivePreview()">
</div>
<div class="form-group">
<label style="font-weight: 700; font-size: 11.5px;">Document Title ({{TITLE}}):</label>
<input type="text" id="template-title-input" class="pane-quick-filter" style="width: 100%; padding: 6px 8px;" placeholder="Humanized Title" oninput="updateTemplateLivePreview()">
</div>
</div>
<div class="form-group">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<label style="font-weight: 700; font-size: 11.5px;">Live Content Preview / Edit:</label>
<span style="font-size: 10px; color: var(--text-dim);">Variables expanded in real-time</span>
</div>
<textarea id="template-preview-code" class="pane-quick-filter" style="width: 100%; height: 160px; font-family: var(--font-mono); font-size: 11px; line-height: 1.4; padding: 8px; resize: vertical; white-space: pre; tab-size: 2;"></textarea>
</div>
<div style="display: flex; align-items: center; justify-content: space-between;">
<label style="display: flex; align-items: center; gap: 6px; font-size: 11.5px; cursor: pointer;">
<input type="checkbox" id="template-open-editor-chk" checked>
<span>Open in Editor immediately after creation</span>
</label>
</div>
</div>
<div class="modal-footer" style="padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px;">
<button class="btn" onclick="closeModal('new-from-template-modal')">Cancel</button>
<button class="btn btn-accent" id="btn-confirm-create-template" onclick="executeCreateFromTemplate()"><i data-lucide="check"></i> Create File</button>
</div>
</div>
</div>
<div class="modal-overlay" id="template-edit-modal">
<div class="modal-box" style="width: 600px; max-width: 95vw;">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="file-code" style="width: 16px; height: 16px; color: var(--accent);"></i>
<span id="edit-template-header-title" style="font-weight: 700;">Edit File Template</span>
</span>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('template-edit-modal')" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
<input type="hidden" id="edit-template-id">
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 12px;">
<div class="form-group">
<label style="font-weight: 700; font-size: 11.5px;">Template Display Name:</label>
<input type="text" id="edit-template-name" class="pane-quick-filter" style="width: 100%; padding: 6px 8px;" placeholder="e.g. Meeting Minutes (.md)">
</div>
<div class="form-group">
<label style="font-weight: 700; font-size: 11.5px;">File Extension:</label>
<input type="text" id="edit-template-ext" class="pane-quick-filter" style="width: 100%; padding: 6px 8px; font-family: var(--font-mono);" placeholder="md, py, json, etc.">
</div>
</div>
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 12px;">
<div class="form-group">
<label style="font-weight: 700; font-size: 11.5px;">Default Filename Pattern:</label>
<input type="text" id="edit-template-default-filename" class="pane-quick-filter" style="width: 100%; padding: 6px 8px; font-family: var(--font-mono);" placeholder="e.g. meeting_{{DATE}}.md">
</div>
<div class="form-group">
<label style="font-weight: 700; font-size: 11.5px;">Lucide Icon:</label>
<select id="edit-template-icon" class="pane-quick-filter" style="width: 100%; padding: 6px 8px;">
<option value="file-text">file-text (Document)</option>
<option value="file-code">file-code (Code)</option>
<option value="terminal">terminal (Script)</option>
<option value="terminal-square">terminal-square (Shell)</option>
<option value="globe">globe (Web/HTML)</option>
<option value="palette">palette (CSS/Design)</option>
<option value="cpu">cpu (Rust/C)</option>
<option value="database">database (SQL/Data)</option>
<option value="table">table (CSV/Sheets)</option>
<option value="shield">shield (Security)</option>
</select>
</div>
</div>
<div class="form-group">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<label style="font-weight: 700; font-size: 11.5px;">Template Content Boilerplate:</label>
<div style="display: flex; gap: 4px; font-size: 10px;">
<span class="btn btn-xs" onclick="insertVariableIntoEditTemplate('{{TITLE}}')">+ {{TITLE}}</span>
<span class="btn btn-xs" onclick="insertVariableIntoEditTemplate('{{DATE}}')">+ {{DATE}}</span>
<span class="btn btn-xs" onclick="insertVariableIntoEditTemplate('{{TIME}}')">+ {{TIME}}</span>
<span class="btn btn-xs" onclick="insertVariableIntoEditTemplate('{{USER}}')">+ {{USER}}</span>
<span class="btn btn-xs" onclick="insertVariableIntoEditTemplate('{{ISO_DATE}}')">+ {{ISO_DATE}}</span>
</div>
</div>
<textarea id="edit-template-content" class="pane-quick-filter" style="width: 100%; height: 180px; font-family: var(--font-mono); font-size: 11px; line-height: 1.4; padding: 8px; resize: vertical; white-space: pre; tab-size: 2;" placeholder="# {{TITLE}} Created: {{DATE}} by {{USER}}"></textarea>
</div>
</div>
<div class="modal-footer" style="padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px;">
<button class="btn" onclick="closeModal('template-edit-modal')">Cancel</button>
<button class="btn btn-accent" onclick="saveTemplateFromModal()"><i data-lucide="check"></i> Save Template</button>
</div>
</div>
</div>
<div class="modal-overlay" id="rename-modal" style="z-index: 3200;">
<div class="modal-box" style="width: 420px; max-width: 95vw;">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent);">
<i data-lucide="edit-3" style="width: 16px; height: 16px;"></i>
<span>Rename (F2)</span>
</span>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('rename-modal')" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px; display: flex; flex-direction: column; gap: 8px;">
<input type="text" id="rename-input" class="pane-quick-filter" style="width: 100%; padding: 8px 10px; font-size: 13px; font-family: var(--font-mono); border-radius: var(--radius);" autocomplete="off" spellcheck="false">
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px;">
<button class="btn modal-action-btn" onclick="closeModal('rename-modal')">Cancel</button>
<button class="btn btn-accent modal-action-btn" id="btn-confirm-rename"><i data-lucide="check" style="width: 14px;"></i> Rename</button>
</div>
</div>
</div>
<div class="modal-overlay" id="add-user-modal">
<div class="modal-box" style="width: 420px;">
<div class="modal-header">
<span style="color: var(--accent); font-weight: 700;">👤 Add New User Account</span>
<button class="btn" onclick="closeModal('add-user-modal')"><i data-lucide="x"></i></button>
</div>
<form id="add-user-form" onsubmit="event.preventDefault(); submitAddUser();">
<div class="modal-body" style="display: flex; flex-direction: column; gap: 10px;">
<div class="form-group">
<label style="font-size: 11px;">Username:</label>
<input type="text" id="new-user-username" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="e.g. john" required autocomplete="off">
</div>
<div class="form-group">
<label style="font-size: 11px;">Password:</label>
<div style="position: relative;">
<input type="password" id="new-user-password" class="pane-quick-filter" style="width: 100%; padding: 8px 32px 8px 8px;" placeholder="Enter secure password" required autocomplete="new-password">
<button type="button" class="btn btn-icon" onclick="togglePasswordVisibility('new-user-password')" style="position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent; border: none;" title="Toggle Visibility">
<i data-lucide="eye" style="width: 14px;"></i>
</button>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div class="form-group">
<label style="font-size: 11px;">Role:</label>
<select id="new-user-role" class="pane-quick-filter" style="width: 100%; padding: 7px;">
<option value="user" selected>Standard User</option>
<option value="admin">Administrator</option>
<option value="readonly">Read-Only</option>
</select>
</div>
<div class="form-group">
<label style="font-size: 11px;">Home Directory:</label>
<input type="text" id="new-user-home" class="pane-quick-filter" style="width: 100%; padding: 8px;" value="/" placeholder="/">
</div>
</div>
<div id="add-user-error" style="color: var(--danger); font-size: 11px; display: none;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn" onclick="closeModal('add-user-modal')">Cancel</button>
<button type="submit" class="btn btn-accent" id="btn-save-user">Create User</button>
</div>
</form>
</div>
</div>
<div class="modal-overlay login-screen-overlay" id="login-modal">
<div class="login-corner-brand">
<img src="assets/brum_icon.webp" alt="Brum" class="login-corner-logo">
<span class="login-corner-name">Brum</span>
</div>
<div class="auth-watermark-backdrop" aria-hidden="true">
<img src="assets/brum_logo.webp" alt="" class="auth-watermark-img">
</div>
<div class="login-card">
<div class="login-card-header">
<div class="login-brand-icon">
<img src="assets/brum_icon.webp" alt="Brum" class="login-brand-img">
</div>
<div class="login-header-text">
<h2 class="login-title">
<span id="login-hostname-title">Brum</span>
</h2>
<p class="login-subtitle">
Running <a href="https://github.com/Woofson/brum" target="_blank" rel="noopener noreferrer" class="auth-stealth-link" title="Brum">Brum</a> version <span id="login-app-version" class="login-app-version"></span>.
</p>
</div>
</div>
<form id="login-form" onsubmit="event.preventDefault(); handleLoginSubmit(); return false;">
<div class="login-card-body">
<div class="login-form-group">
<label for="login-username" class="login-label">
<i data-lucide="user" class="login-label-icon"></i> Who are you?
</label>
<div class="login-input-wrapper">
<input type="text" id="login-username" class="login-input" autocomplete="username" autofocus spellcheck="false">
</div>
</div>
<div class="login-form-group">
<label for="login-password" class="login-label">
<i data-lucide="lock" class="login-label-icon"></i> Password
</label>
<div class="login-input-wrapper">
<input type="password" id="login-password" class="login-input" autocomplete="current-password">
</div>
</div>
<div id="login-error" class="login-error-msg" style="display: none;"></div>
</div>
<div class="login-card-footer">
<button type="submit" class="btn btn-accent login-submit-btn" id="btn-submit-login">
<i data-lucide="log-in" style="width: 14px; height: 14px;"></i>
<span>Log In</span>
</button>
</div>
</form>
<div id="login-sso-section" class="login-sso-section" style="display: none;">
<div class="login-divider">
<span>or</span>
</div>
<button type="button" class="btn btn-sso" id="btn-login-sso" onclick="triggerOidcLogin()">
<i data-lucide="shield-check" id="login-sso-icon" style="width: 15px; height: 15px;"></i>
<span id="login-sso-btn-text">Sign in with SSO</span>
</button>
</div>
</div>
</div>
<div class="modal-overlay" id="remote-modal">
<div class="modal-box" style="width: 500px;">
<div class="modal-header">
<span>🌐 Remote Storage</span>
<button class="btn" onclick="closeModal('remote-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Protocol:</label>
<select id="remote-proto-select" class="pane-quick-filter" style="width: 100%; padding: 6px;" onchange="updateRemoteProtoUI()">
<option value="sftp" selected>SSH / SFTP (Secure File Transfer)</option>
<option value="smb">🪟 Samba / Windows Share (SMB / CIFS)</option>
<option value="nfs">🐧 NFS (Network File System)</option>
<option value="webdav">WebDAV (Nextcloud / ownCloud / Synology)</option>
<option value="s3">☁️ S3 / Cloud Storage (AWS, MinIO, Cloudflare R2, Backblaze B2, Hetzner S3)</option>
<option value="hetzner-box">📦 Hetzner Storage Box (SFTP / WebDAV)</option>
<option value="proton">🛡️ Proton Drive (End-to-End Encrypted Cloud)</option>
</select>
</div>
<div id="remote-hetzner-group" style="display: none; background: rgba(225, 29, 72, 0.08); border: 1px solid rgba(225, 29, 72, 0.3); border-radius: 6px; padding: 12px; margin-bottom: 12px;">
<div style="font-weight: 600; font-size: 12px; color: #fb7185; margin-bottom: 6px; display: flex; align-items: center; gap: 6px;">
<span>📦 Hetzner Storage Box Fast Setup</span>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px;">
<div>
<label style="font-size: 11px;">Storage Box User / ID:</label>
<input type="text" id="hetzner-user" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="e.g. u123456" oninput="syncHetznerFields()">
</div>
<div>
<label style="font-size: 11px;">Hetzner Protocol Mode:</label>
<select id="hetzner-mode" class="pane-quick-filter" style="width: 100%; padding: 7px;" onchange="syncHetznerFields()">
<option value="sftp" selected>SFTP (Port 23 - High Speed)</option>
<option value="webdav">WebDAV (HTTPS Port 443)</option>
</select>
</div>
</div>
<div style="font-size: 11px; color: var(--text-muted);">
Resolved Target: <code id="hetzner-preview-host" style="color: var(--accent);">u123456.your-storagebox.de:23</code>
</div>
</div>
<div id="remote-standard-group">
<div class="form-group">
<label id="remote-host-label">Server Host / Endpoint URL:</label>
<input type="text" id="remote-host" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="e.g. 192.168.1.50 or my-nas.local">
</div>
<div id="remote-smb-group" style="display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
<div>
<label style="font-size: 11px;">Share Name (Required):</label>
<input type="text" id="remote-smb-share" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="e.g. public or data">
</div>
<div>
<label style="font-size: 11px;">Workgroup / Domain:</label>
<input type="text" id="remote-smb-domain" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="WORKGROUP" value="WORKGROUP">
</div>
</div>
<div id="remote-nfs-group" style="display: none; margin-bottom: 10px;">
<label style="font-size: 11px;">NFS Export Path (e.g. /volume1/data or /mnt/pool):</label>
<input type="text" id="remote-nfs-export" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="/volume1/data" value="/">
</div>
<div id="remote-s3-group" style="display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
<div>
<label style="font-size: 11px;">Bucket Name:</label>
<input type="text" id="remote-bucket" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="my-bucket-name">
</div>
<div>
<label style="font-size: 11px;">Region:</label>
<input type="text" id="remote-region" class="pane-quick-filter" style="width: 100%; padding: 8px;" value="us-east-1">
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div class="form-group" id="remote-port-group">
<label>Port:</label>
<input type="number" id="remote-port" class="pane-quick-filter" style="width: 100%; padding: 8px;" value="22">
</div>
<div class="form-group">
<label id="remote-user-label">Username / Access Key ID:</label>
<input type="text" id="remote-user" class="pane-quick-filter" style="width: 100%; padding: 8px;" value="root">
</div>
</div>
<div class="form-group" id="remote-pass-group">
<label id="remote-pass-label">Password / Secret Access Key:</label>
<input type="password" id="remote-pass" class="pane-quick-filter" style="width: 100%; padding: 8px;">
</div>
</div>
<div id="remote-proton-group" style="display: none; background: rgba(109, 40, 217, 0.08); border: 1px solid rgba(109, 40, 217, 0.3); border-radius: 6px; padding: 12px; margin-bottom: 12px;">
<div style="font-weight: 600; font-size: 12px; color: #a78bfa; margin-bottom: 6px; display: flex; align-items: center; gap: 6px;">
<span>🛡️ Proton Drive E2EE Cloud Bridge</span>
</div>
<p style="font-size: 11px; color: var(--text-muted); margin: 0 0 8px 0; line-height: 1.4;">
Brum connects to your zero-knowledge Proton Drive storage using the official <code>proton-drive</code> CLI, community <code>proton-drive-cli</code>, or an <code>rclone</code> proton remote.
</p>
<div id="proton-cli-status-badge" style="font-size: 11px; padding: 6px 10px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-mono); margin-bottom: 8px;">
Detecting Proton Drive CLI status...
</div>
</div>
<div class="form-group">
<label>Remote Path / Prefix (Leave empty or ~ for User Home):</label>
<input type="text" id="remote-path" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="~ (Default: Remote User Home) or /path">
</div>
<div id="remote-global-mount-section" style="display: none; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 6px; padding: 12px; margin-top: 12px;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<label style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent); margin: 0; cursor: pointer;">
<input type="checkbox" id="remote-is-global-mount" onchange="toggleRemoteGlobalMountUI(this.checked)">
<span>Save as Global Network Mount for Users</span>
</label>
</div>
<div id="remote-global-mount-options" style="display: none; margin-top: 10px;">
<div class="form-group" style="margin-bottom: 8px;">
<label style="font-size: 11px;">Display Mount Name:</label>
<input type="text" id="remote-global-mount-name" class="pane-quick-filter" style="width: 100%; padding: 6px;" placeholder="e.g. Primary NAS / CIFS, Company NFS, Backup S3">
</div>
<div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<label style="font-size: 11px; font-weight: 600; margin: 0;">Users Allowed Access (via Favorites):</label>
<label style="font-size: 10px; color: var(--accent); cursor: pointer; margin: 0;">
<input type="checkbox" id="remote-mount-all-users" checked onchange="toggleMountAllUsers(this.checked)"> All Users (*)
</label>
</div>
<div id="remote-mount-users-checkboxes" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; max-height: 110px; overflow-y: auto; background: var(--bg-dark); padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px;">
</div>
</div>
</div>
</div>
<div id="remote-test-status" style="font-size: 11px; margin-top: 8px; display: none;"></div>
</div>
<div class="modal-footer">
<button class="btn" id="btn-test-remote" onclick="testRemoteConnection()">Test Connection</button>
<button class="btn" onclick="closeModal('remote-modal')">Cancel</button>
<button class="btn btn-accent" id="btn-save-global-mount" onclick="saveGlobalRemoteMount()" style="display:none;"><i data-lucide="save"></i> Save Global Mount</button>
<button class="btn btn-accent" id="btn-connect-remote" onclick="connectRemoteToActivePane()">Connect to Active Pane</button>
</div>
</div>
</div>
<div class="terminal-drawer" id="terminal-drawer">
<div class="terminal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<img src="assets/term.webp" alt="Terminal" style="height: 18px; width: 18px; object-fit: contain; vertical-align: middle;">
<span style="color: var(--accent); font-weight: 700;">Woofson Terminal Console</span>
<span style="color: var(--text-dim);" id="terminal-cwd-indicator">~</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon" onclick="clearTerminal()" title="Clear Terminal"><i data-lucide="trash-2"></i></button>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon desktop-only" onclick="dockTerminalToActivePane()" title="Dock Terminal into Active Pane"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon desktop-only" onclick="toggleTerminalFullscreen()" title="Toggle Maximize"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="toggleTerminal(false)" title="Close Terminal"><i data-lucide="x"></i></button>
</div>
</div>
<div class="terminal-body" id="terminal-output" tabindex="0"></div>
</div>
<div class="modal-overlay" id="about-modal">
<div class="modal-box" style="width: 580px; max-width: calc(100vw - 32px); max-height: 85vh;">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<img src="assets/amber-frameless-info.webp" alt="Brum" style="height: 18px; width: auto; object-fit: contain; vertical-align: middle;">
<span style="font-weight: 700; font-size: 14px;">About Brum</span>
</div>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('about-modal')" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 20px; overflow-y: auto;">
<div style="text-align: center; margin-bottom: 18px; padding: 16px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius);">
<img src="assets/brum_logo.webp" alt="Brum" style="height: 56px; width: auto; object-fit: contain; margin-bottom: 8px;">
<div style="font-size: 18px; font-weight: 800; color: var(--accent); letter-spacing: 0.5px;">Brum</div>
<div style="font-size: 11px; color: var(--text-muted); margin-bottom: 10px;">Multi-Pane Web Environment (File Commander/Manager) — By Woofson</div>
<div style="display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;">
<span id="about-version-badge" class="badge about-version-badge" style="background: rgba(245, 158, 11, 0.2); color: var(--accent); border: 1px solid rgba(245, 158, 11, 0.4); font-weight: 700;"></span>
<span class="badge" style="background: rgba(56, 189, 248, 0.15); color: var(--info); border: 1px solid rgba(56, 189, 248, 0.3);">Rust 2021 + Axum 0.7</span>
<span class="badge" style="background: rgba(34, 197, 94, 0.15); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.3);">MIT Open Source</span>
</div>
</div>
<p style="font-size: 12px; color: var(--text-main); line-height: 1.6; margin-bottom: 16px;">
<strong>Brum</strong> brings the speed, keyboard ergonomics, and dual/quad-pane productivity of classic orthodox commanders (Midnight Commander, Total Commander, Norton Commander) directly to the web browser and Linux/Hyprland desktop — powered by a lightweight Rust backend, multi-cloud storage drivers, real-time background transfer queues, and paranoid cryptographic data verification.
</p>
<div style="background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;">
<div style="font-weight: 700; font-size: 11px; color: var(--accent); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px;">
<i data-lucide="cpu" style="width: 14px;"></i> System & Runtime Architecture
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; font-size: 11px;">
<div><span style="color: var(--text-muted);">Creator & Lab:</span> <strong style="color: var(--text-main);">Bolt J Woofson @ Woofsons Lab</strong> (<a href="https://www.arf.ac" target="_blank" style="color: var(--accent); text-decoration: none;">www.arf.ac</a>)</div>
<div><span style="color: var(--text-muted);">Contact:</span> <a href="mailto:bolt@boop.no" style="color: var(--accent); text-decoration: none;">bolt@boop.no</a></div>
<div><span style="color: var(--text-muted);">Backend:</span> <span style="font-family: var(--font-mono);">Rust 2021 (Axum 0.7)</span></div>
<div><span style="color: var(--text-muted);">Operating System:</span> <strong class="about-sys-os" style="color: var(--text-main);">Linux</strong></div>
<div><span style="color: var(--text-muted);">Auth Engine:</span> <span>Linux PAM + SQLite RBAC</span></div>
<div><span style="color: var(--text-muted);">Terminal:</span> <span>Native PTY (portable-pty)</span></div>
<div><span style="color: var(--text-muted);">Frontend:</span> <span>Vanilla JS + Prism + Mermaid</span></div>
<div><span style="color: var(--text-muted);">Repository:</span> <a href="https://github.com/Woofson/brum" target="_blank" style="color: var(--accent); text-decoration: none;">github.com/Woofson/brum</a></div>
<div><span style="color: var(--text-muted);">Support / Ko-fi:</span> <a href="https://ko-fi.com/J7P327BXTR" target="_blank" style="color: #ff5e5b; font-weight: 600; text-decoration: none;">ko-fi.com/J7P327BXTR</a></div>
<div><span style="color: var(--text-muted);">License:</span> <span>MIT License</span></div>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; font-size: 11px; margin-bottom: 16px;">
<div style="padding: 8px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 4px;">
<strong style="color: var(--accent);">🗂️ 1-to-4 Dynamic Panes</strong>
<div style="color: var(--text-dim); font-size: 10px;">Single, Dual, Triple & Quad grid layouts</div>
</div>
<div style="padding: 8px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 4px;">
<strong style="color: var(--accent);">🌐 Multi-Cloud & Mounts</strong>
<div style="color: var(--text-dim); font-size: 10px;">SMB/CIFS, NFS, S3, SFTP, WebDAV, Proton</div>
</div>
<div style="padding: 8px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 4px;">
<strong style="color: var(--accent);">⚡ DeltaCopy & TeraCopy</strong>
<div style="color: var(--text-dim); font-size: 10px;">Bit-for-bit CRC32/SHA-256 integrity verify</div>
</div>
<div style="padding: 8px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 4px;">
<strong style="color: var(--accent);">🔄 ConvertX Converter</strong>
<div style="color: var(--text-dim); font-size: 10px;">Universal Image, Audio, Video & Document</div>
</div>
</div>
<div style="text-align: center; margin-bottom: 16px; padding: 12px; background: rgba(255, 94, 91, 0.05); border: 1px solid rgba(255, 94, 91, 0.25); border-radius: var(--radius);">
<div style="font-size: 11px; color: var(--text-muted); margin-bottom: 8px;">Support ongoing development on Ko-fi:</div>
<a href="https://ko-fi.com/J7P327BXTR" target="_blank" rel="noopener noreferrer" style="display: inline-block;">
<img src="https://ko-fi.com/img/githubbutton_sm.svg" alt="Support on Ko-fi" style="height: 30px; border: 0;">
</a>
</div>
</div>
<div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center;">
<button class="btn" onclick="closeModal('about-modal'); openSettingsModal(); switchSettingsTab('tab-keys');">
<i data-lucide="keyboard" style="width: 12px;"></i> View Keybindings
</button>
<button class="btn btn-accent" onclick="closeModal('about-modal')">Close</button>
</div>
</div>
</div>
<div class="modal-overlay" id="doc-viewer-modal" style="z-index: 2800;">
<div class="modal-box doc-viewer-box" id="doc-viewer-box">
<div class="win-resize-handle win-resize-top" id="doc-viewer-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="doc-viewer-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="doc-viewer-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="doc-viewer-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="doc-viewer-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header doc-viewer-header" id="doc-viewer-header">
<div class="doc-viewer-top-row" id="doc-viewer-top-row">
<div class="doc-viewer-title-group" id="doc-viewer-title-group">
<img src="assets/docs.webp" id="doc-viewer-icon" alt="Document" style="width: 18px; height: 18px; object-fit: contain; flex-shrink: 0;">
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
<div id="doc-viewer-title" style="font-weight: 700; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Document.pdf</div>
<div id="doc-viewer-meta" style="font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 1px;">PDF Document</div>
</div>
</div>
<div class="doc-viewer-actions-right">
<button class="btn btn-icon btn-sm desktop-only" onclick="docViewerRenameCurrent()" title="Rename File (F2)"><i data-lucide="edit-3"></i></button>
<button class="btn btn-icon btn-sm desktop-only" onclick="docViewerCopyCurrent()" title="Copy to Opposite Panel (F5)"><i data-lucide="copy"></i></button>
<button class="btn btn-icon btn-sm desktop-only" onclick="docViewerMoveCurrent()" title="Move to Opposite Panel (F6)"><i data-lucide="folder-input"></i></button>
<button class="btn btn-icon btn-sm desktop-only" onclick="docViewerDeleteCurrent()" title="Delete / Move to Trash (F8 / Del)" style="color: var(--danger);"><i data-lucide="trash-2"></i></button>
<div class="header-sep desktop-only" style="width: 1px; height: 18px; background: var(--border); margin: 0 2px;"></div>
<button class="btn btn-icon btn-sm" id="doc-viewer-edit-btn" onclick="docViewerEditFile()" title="Edit in EditorDog (F4)"><i data-lucide="code"></i></button>
<a id="doc-viewer-download" class="btn btn-icon btn-sm" href="#" download title="Download File"><i data-lucide="download"></i></a>
<a id="doc-viewer-external" class="btn btn-icon btn-sm desktop-only" href="#" target="_blank" title="Open in New Tab"><i data-lucide="external-link"></i></a>
<button class="btn btn-icon btn-sm desktop-only" id="btn-doc-viewer-float" onclick="toggleDocViewerFloating()" title="Toggle Floating Window / Overlay (⇱ / ⇲)"><i data-lucide="picture-in-picture"></i></button>
<button class="btn btn-icon btn-sm desktop-only" id="doc-viewer-fullscreen" onclick="toggleDocViewerFullscreen()" title="Toggle Fullscreen"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon btn-sm modal-close-btn" onclick="closeDocViewerModal()" title="Close (Esc)"><i data-lucide="x"></i></button>
</div>
</div>
<div class="doc-viewer-toolbar-center" id="doc-viewer-controls">
</div>
</div>
<div class="doc-viewer-body" id="doc-viewer-body">
<div id="doc-view-pdf" class="doc-view-panel" style="display: none; width: 100%; height: 100%;">
<iframe id="doc-pdf-frame" style="width: 100%; height: 100%; border: none; background: #2a2a2e;"></iframe>
</div>
<div id="doc-view-md" class="doc-view-panel markdown-preview-pane" style="display: none; padding: 24px 32px; overflow-y: auto; height: 100%;">
</div>
<div id="doc-view-csv" class="doc-view-panel" style="display: none; overflow: auto; height: 100%; padding: 0;">
</div>
<div id="doc-view-web" class="doc-view-panel" style="display: none; width: 100%; height: 100%;">
<iframe id="doc-web-frame" sandbox="allow-scripts allow-same-origin" style="width: 100%; height: 100%; border: none; background: #ffffff;"></iframe>
</div>
<div id="doc-view-text" class="doc-view-panel" style="display: none; height: 100%; overflow: auto;">
<pre id="doc-text-content" style="margin: 0; padding: 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-main); white-space: pre-wrap; word-break: break-word;"></pre>
</div>
<div id="doc-view-office" class="doc-view-panel" style="display: none; padding: 32px; text-align: center; height: 100%; overflow-y: auto;">
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="media-inspector-modal" style="z-index: 2900;">
<div class="modal-box media-inspector-box" id="media-inspector-box">
<div class="modal-header" style="padding: 10px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border);">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;">
<img src="assets/media.webp" alt="Media Inspector" style="width: 16px; height: 16px; object-fit: contain; flex-shrink: 0;">
<span id="inspector-file-title" style="font-weight: 700; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Media Inspector</span>
</div>
<div style="display: flex; align-items: center; gap: 6px;">
<a id="inspector-file-download" class="btn btn-icon" href="#" download title="Download Media"><i data-lucide="download"></i></a>
<button class="btn btn-icon" onclick="closeModal('media-inspector-modal')"><i data-lucide="x"></i></button>
</div>
</div>
<div class="media-inspector-body">
<div class="media-inspector-preview-row">
<div class="media-inspector-thumb-wrapper" id="inspector-thumb-container">
<img id="inspector-preview-img" src="" alt="Preview" style="display: none;">
<div id="inspector-preview-icon" style="font-size: 36px; color: var(--accent);">🖼️</div>
</div>
<div class="media-inspector-quick-details">
<div id="inspector-main-name" style="font-size: 14px; font-weight: 700; color: var(--text-main); word-break: break-all;">image.jpg</div>
<div id="inspector-main-sub" style="font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px;">Loading media metadata...</div>
<div style="margin-top: 10px;">
<div style="font-size: 10px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; margin-bottom: 4px;">Dominant Color Palette</div>
<div id="inspector-palette-row" style="display: flex; gap: 6px; flex-wrap: wrap;">
</div>
</div>
</div>
</div>
<div class="media-inspector-section" id="inspector-section-camera" style="display: none;">
<div class="media-inspector-section-title">
<i data-lucide="camera" style="color: var(--accent);"></i> Camera & Exposure EXIF
</div>
<div class="media-inspector-grid" id="inspector-camera-grid">
</div>
</div>
<div class="media-inspector-section" id="inspector-section-gps" style="display: none;">
<div class="media-inspector-section-title">
<i data-lucide="map-pin" style="color: var(--accent);"></i> GPS Location & Geotag Map
</div>
<div class="media-inspector-map-container" id="inspector-map-box">
<div id="inspector-leaflet-map" style="width: 100%; height: 260px; border-radius: 6px; border: 1px solid var(--border);"></div>
</div>
<div class="media-inspector-gps-bar">
<div id="inspector-gps-coords" style="font-size: 11px; font-family: var(--font-mono); color: var(--text-main);">
Coordinates
</div>
<div class="media-inspector-gps-links">
<button class="btn btn-sm" onclick="copyInspectorCoordinates()" title="Copy Coordinates"><i data-lucide="copy"></i> Copy</button>
<a class="btn btn-sm" id="inspector-link-osm" href="#" target="_blank" title="OpenStreetMap"><i data-lucide="map"></i> OSM</a>
<a class="btn btn-sm" id="inspector-link-gmaps" href="#" target="_blank" title="Google Maps"><i data-lucide="globe"></i> Google Maps</a>
<a class="btn btn-sm" id="inspector-link-apple" href="#" target="_blank" title="Apple Maps"><i data-lucide="navigation"></i> Apple Maps</a>
</div>
</div>
</div>
<div class="media-inspector-section" id="inspector-section-stream" style="display: none;">
<div class="media-inspector-section-title">
<i data-lucide="film" style="color: var(--accent);"></i> Audio & Video Stream Details
</div>
<div class="media-inspector-grid" id="inspector-stream-grid">
</div>
</div>
<div class="media-inspector-section">
<div class="media-inspector-section-title">
<i data-lucide="hard-drive" style="color: var(--accent);"></i> File Attributes & Path
</div>
<div class="media-inspector-grid" id="inspector-fs-grid">
</div>
</div>
</div>
</div>
</div>
<div class="floating-mediaplayer-window" id="floating-mediaplayer-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="mediaplayer-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="mediaplayer-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="mediaplayer-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="mediaplayer-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="mediaplayer-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header mediaplayer-header" id="mediaplayer-header">
<div class="mediaplayer-header-left" style="display: flex; align-items: center; gap: 6px; overflow: hidden;">
<span class="mediaplayer-header-drag-handle" style="font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: grab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<img src="assets/media.webp" alt="Media Player" style="width: 16px; height: 16px; object-fit: contain; flex-shrink: 0;">
<span class="chewtoy-brand-text">Media Player</span>
<span class="badge" id="mediaplayer-badge" style="font-size: 9px; text-transform: uppercase;">MP4</span>
</span>
</div>
<div class="mediaplayer-header-center" style="flex: 1; max-width: 320px; margin: 0 8px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span id="mediaplayer-header-title" style="font-size: 11px; font-weight: 600; color: var(--text-main);">No media loaded</span>
</div>
<div class="mediaplayer-header-actions" style="display: flex; align-items: center; gap: 4px;">
<button type="button" class="btn btn-icon mediaplayer-drawer-btn" id="btn-mediaplayer-playlist-toggle" onclick="toggleMediaPlaylistDrawer()" title="Toggle Playlist Drawer (Alt+P)"><i data-lucide="list-video"></i></button>
<button class="btn btn-icon desktop-only" id="btn-mediaplayer-pip" onclick="toggleMediaPiP()" title="Picture-in-Picture (Detached Popout)"><i data-lucide="picture-in-picture-2"></i></button>
<div class="dropdown-container" style="position: relative;">
<button class="btn btn-icon" id="btn-mediaplayer-subs" onclick="toggleMediaSubtitlesDropdown(event)" title="Subtitles & Captions (S)"><i data-lucide="captions"></i></button>
<div class="dropdown-menu mediaplayer-dropdown" id="mediaplayer-subtitles-dropdown" style="display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 2000; min-width: 160px;">
<div class="dropdown-header">Subtitles</div>
<div id="mediaplayer-subtitles-list"></div>
</div>
</div>
<button class="btn btn-icon desktop-only" id="btn-mediaplayer-aspect" onclick="cycleMediaAspectRatio()" title="Aspect Ratio (Fit / Fill / 16:9 / 4:3)"><i data-lucide="ratio"></i></button>
<button class="btn btn-icon desktop-only" id="btn-mediaplayer-speed" onclick="cycleMediaSpeed()" title="Playback Speed"><span id="mediaplayer-speed-badge" style="font-size: 10px; font-weight: 700; font-family: var(--font-mono);">1.0x</span></button>
<button class="btn btn-icon" id="btn-mediaplayer-fullscreen" onclick="toggleMediaFullscreen()" title="Toggle Fullscreen (F)"><i data-lucide="maximize"></i></button>
<button class="btn btn-icon desktop-only" id="btn-mediaplayer-header-convert" onclick="convertCurrentMediaToMp4()" title="Transcode / Convert Media with ConvertX"><i data-lucide="refresh-cw"></i></button>
<button class="btn btn-icon desktop-only" id="btn-mediaplayer-header-open" onclick="openCurrentMediaWithSystemPlayer()" title="Open in System Media Player (VLC/MPV)"><i data-lucide="external-link"></i></button>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon desktop-only" onclick="dockMediaPlayerToActivePane()" title="Dock Mediaplayer into Active Pane"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingMediaPlayer()" title="Minimize to Pill"><i data-lucide="minus"></i></button>
<button class="btn btn-icon desktop-only" onclick="maximizeFloatingMediaPlayer()" title="Maximize Window"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeMediaPlayer()" title="Close Mediaplayer (Esc)"><i data-lucide="x"></i></button>
</div>
</div>
<div class="mediaplayer-body" id="mediaplayer-body">
<div class="mediaplayer-stage" id="mediaplayer-stage">
<video id="mediaplayer-video-element" playsinline></video>
<audio id="mediaplayer-audio-element" style="display: none;"></audio>
<div class="mediaplayer-subtitles-overlay" id="mediaplayer-subtitles-overlay" style="display: none;"></div>
<div class="mediaplayer-audio-visualizer" id="mediaplayer-audio-visualizer" style="display: none;">
<div class="mediaplayer-audio-bars">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="mediaplayer-audio-info">
<div id="mediaplayer-audio-title" style="font-size: 14px; font-weight: 700; color: var(--text-main);">Audio Track</div>
<div id="mediaplayer-audio-path" style="font-size: 11px; color: var(--text-dim); margin-top: 2px;">/path/to/audio</div>
</div>
</div>
<div class="mediaplayer-error-overlay" id="mediaplayer-error-overlay" style="display: none;">
<div class="mediaplayer-error-box">
<div class="mediaplayer-error-icon"><i data-lucide="video-off"></i></div>
<div class="mediaplayer-error-title" id="mediaplayer-error-title">Cannot Decode Media Format</div>
<div class="mediaplayer-error-desc" id="mediaplayer-error-desc">The browser video engine cannot decode this container or codec natively.</div>
<div class="mediaplayer-error-filename" id="mediaplayer-error-filename">file.avi</div>
<div class="mediaplayer-error-actions">
<button class="btn btn-accent btn-sm" id="btn-mediaplayer-convert" onclick="convertCurrentMediaToMp4()" title="Transcode to web-compatible MP4 with ConvertX">
<i data-lucide="refresh-cw"></i> Convert to Web MP4
</button>
<button class="btn btn-sm" id="btn-mediaplayer-open-system" onclick="openCurrentMediaWithSystemPlayer()" title="Open in VLC, MPV or default desktop media player">
<i data-lucide="external-link"></i> Open with Default Player
</button>
<button class="btn btn-sm" id="btn-mediaplayer-download" onclick="downloadCurrentMedia()" title="Download file to computer">
<i data-lucide="download"></i> Download
</button>
</div>
</div>
</div>
<div class="mediaplayer-osd" id="mediaplayer-osd" style="display: none;">
<i data-lucide="play" id="mediaplayer-osd-icon"></i>
<span id="mediaplayer-osd-text"></span>
</div>
<div class="mediaplayer-overlay-controls" id="mediaplayer-overlay-controls">
<div class="mediaplayer-scrubber-wrapper" onmousemove="handleMediaScrubberHover(event)" onmouseleave="hideMediaScrubberTooltip()">
<div class="mediaplayer-scrubber-track" id="mediaplayer-scrubber-track" onclick="seekMedia(event)">
<div class="mediaplayer-scrubber-buffer" id="mediaplayer-scrubber-buffer"></div>
<div class="mediaplayer-scrubber-progress" id="mediaplayer-scrubber-progress"></div>
<div class="mediaplayer-scrubber-thumb"></div>
</div>
<div class="mediaplayer-scrubber-tooltip" id="mediaplayer-scrubber-tooltip" style="display: none;">00:00</div>
</div>
<div class="mediaplayer-controls-row">
<div class="mediaplayer-controls-left">
<button class="btn btn-icon btn-sm" onclick="navMediaPlaylist(-1)" title="Previous Track"><i data-lucide="skip-back"></i></button>
<button class="btn btn-icon btn-sm" onclick="skipMedia(-10)" title="Rewind 10s (Left Arrow / J)"><i data-lucide="rotate-ccw"></i></button>
<button class="btn btn-accent btn-sm mediaplayer-play-btn" id="btn-mediaplayer-play" onclick="toggleMediaPlay()" title="Play / Pause (Space / K)"><i data-lucide="play" id="mediaplayer-play-icon"></i></button>
<button class="btn btn-icon btn-sm" onclick="skipMedia(10)" title="Forward 10s (Right Arrow / L)"><i data-lucide="rotate-cw"></i></button>
<button class="btn btn-icon btn-sm" onclick="navMediaPlaylist(1)" title="Next Track"><i data-lucide="skip-forward"></i></button>
<div class="mediaplayer-time-display">
<span id="mediaplayer-time-current">00:00</span>
<span style="opacity: 0.4;">/</span>
<span id="mediaplayer-time-total">00:00</span>
</div>
</div>
<div class="mediaplayer-controls-right">
<div class="mediaplayer-volume-group">
<button class="btn btn-icon btn-sm" onclick="toggleMediaMute()" title="Mute / Unmute (M)"><i data-lucide="volume-2" id="mediaplayer-volume-icon"></i></button>
<input type="range" class="range-slider mediaplayer-volume-slider" id="mediaplayer-volume-slider" min="0" max="1" step="0.05" value="1" oninput="changeMediaVolume(this.value)">
</div>
<button class="btn btn-icon btn-sm" id="btn-mediaplayer-loop" onclick="cycleMediaLoop()" title="Toggle Loop (Off / All / One)"><i data-lucide="repeat"></i></button>
<button class="btn btn-icon btn-sm" id="btn-mediaplayer-shuffle" onclick="toggleMediaShuffle()" title="Toggle Shuffle"><i data-lucide="shuffle"></i></button>
<button class="btn btn-icon btn-sm desktop-only" onclick="toggleMediaPiP()" title="Picture-in-Picture (P)"><i data-lucide="picture-in-picture-2"></i></button>
<button class="btn btn-icon btn-sm" onclick="toggleMediaFullscreen()" title="Fullscreen (F)"><i data-lucide="maximize"></i></button>
</div>
</div>
</div>
</div>
<div class="mediaplayer-playlist-sidebar" id="mediaplayer-playlist-sidebar">
<div class="mediaplayer-playlist-header">
<div style="display: flex; align-items: center; gap: 6px;">
<span style="font-weight: 700; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px;">Playlist</span>
<span class="badge" id="mediaplayer-playlist-count" style="font-size: 9px;">0</span>
</div>
<div style="display: flex; align-items: center; gap: 3px;">
<button class="btn btn-icon btn-xs" onclick="populateMediaPlaylistFromActivePane()" title="Load Audio/Video Files from Active Panel"><i data-lucide="folder-input" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs" onclick="clearMediaPlaylist()" title="Clear Playlist"><i data-lucide="trash-2" style="width: 12px; height: 12px;"></i></button>
<button class="btn btn-icon btn-xs mobile-or-tablet-only" onclick="toggleMediaPlaylistDrawer()" title="Close Playlist"><i data-lucide="x" style="width: 12px; height: 12px;"></i></button>
</div>
</div>
<div class="mediaplayer-playlist-filter-row">
<input type="text" id="mediaplayer-playlist-search" class="pane-quick-filter" placeholder="Filter playlist..." style="width: 100%; font-size: 10px; height: 24px;" oninput="filterMediaPlaylist(this.value)">
</div>
<div class="mediaplayer-playlist-list" id="mediaplayer-playlist-list"></div>
</div>
</div>
</div>
<div class="mediaplayer-pill" id="mediaplayer-pill" style="display: none;" onclick="restoreFloatingMediaPlayer()" title="Click to restore Mediaplayer">
<div class="mediaplayer-pill-progress" id="mediaplayer-pill-progress">
<div class="mediaplayer-pill-progress-fill" id="mediaplayer-pill-progress-fill"></div>
</div>
<img src="assets/media.webp" alt="Media" class="mediaplayer-pill-icon" style="width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;">
<div class="mediaplayer-pill-info">
<span class="mediaplayer-pill-title" id="mediaplayer-pill-title">Mediaplayer</span>
<span class="mediaplayer-pill-time" id="mediaplayer-pill-time">00:00 / 00:00</span>
</div>
<div class="mediaplayer-pill-controls">
<button type="button" class="mediaplayer-pill-btn" onclick="event.stopPropagation(); navMediaPlaylist(-1);" title="Previous Track"><i data-lucide="skip-back" style="width: 12px; height: 12px;"></i></button>
<button type="button" class="mediaplayer-pill-btn mediaplayer-pill-btn-play" onclick="event.stopPropagation(); toggleMediaPlay();" title="Play/Pause"><i data-lucide="play" id="mediaplayer-pill-play-icon" style="width: 12px; height: 12px;"></i></button>
<button type="button" class="mediaplayer-pill-btn" onclick="event.stopPropagation(); navMediaPlaylist(1);" title="Next Track"><i data-lucide="skip-forward" style="width: 12px; height: 12px;"></i></button>
<button type="button" class="mediaplayer-pill-btn mediaplayer-pill-close" onclick="event.stopPropagation(); dismissMediaPill();" title="Stop & Close"><i data-lucide="x" style="width: 12px; height: 12px;"></i></button>
</div>
</div>
<div class="convertx-pill" id="convertx-pill" style="display: none;" onclick="restoreConverterModal()" title="Click to restore ConvertX">
<img src="assets/convertx.webp" alt="ConvertX" style="width: 14px; height: 14px; object-fit: contain;">
<i data-lucide="loader" class="convertx-pill-spin" id="convertx-pill-icon" style="width: 13px; height: 13px;"></i>
<span class="convertx-pill-title" id="convertx-pill-title">Converting file...</span>
</div>
<div class="renamer-pill" id="renamer-pill" style="display: none;" onclick="restoreFloatingRenamer()" title="Click to restore Batch Renamer (Ctrl+M)">
<i data-lucide="file-signature" style="width: 14px; height: 14px; color: var(--accent);"></i>
<span class="renamer-pill-title" id="renamer-pill-title">Batch Renamer</span>
</div>
<div class="hexeditor-pill" id="hexeditor-pill" style="display: none;" onclick="restoreFloatingHexEditor()" title="Click to restore Hex Editor">
<i data-lucide="binary" style="width: 14px; height: 14px; color: var(--accent);"></i>
<span class="hexeditor-pill-title" id="hexeditor-pill-title">Hex Editor</span>
</div>
<div class="duplicates-pill" id="duplicates-pill" style="display: none;" onclick="restoreFloatingDuplicateFinder()" title="Click to restore Duplicate Finder">
<i data-lucide="copy-check" style="width: 14px; height: 14px; color: var(--accent);"></i>
<span class="duplicates-pill-title" id="duplicates-pill-title">Duplicate Finder</span>
</div>
<div class="tageditor-pill" id="tageditor-pill" style="display: none;" onclick="restoreFloatingTagEditor()" title="Click to restore Tag Editor">
<i data-lucide="tag" style="width: 14px; height: 14px; color: var(--accent);"></i>
<span class="tageditor-pill-title" id="tageditor-pill-title">Tag Editor</span>
</div>
<div class="logviewer-pill" id="logviewer-pill" style="display: none;" onclick="restoreFloatingLogViewer()" title="Click to restore Log Viewer">
<i data-lucide="scroll-text" style="width: 14px; height: 14px; color: var(--accent);"></i>
<span class="logviewer-pill-title" id="logviewer-pill-title">Log Viewer</span>
</div>
<div class="cad-pill" id="cad-pill" style="display: none;" onclick="restoreFloatingCadStudio()" title="Click to restore 3D CAD Studio">
<i data-lucide="box" style="width: 14px; height: 14px; color: var(--accent);"></i>
<span class="cad-pill-title" id="cad-pill-title">3D CAD Studio</span>
</div>
<div class="modal-overlay" id="book-reader-modal">
<div class="modal-box" style="width: 90vw; height: 90vh; display: flex; flex-direction: column; padding: 0; overflow: hidden;">
<div class="modal-header" style="padding: 10px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border); flex-shrink: 0;">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;">
<span style="font-size: 16px;">📖</span>
<span id="book-reader-title" style="font-weight: 700; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Comic.cbz</span>
</div>
<div style="display: flex; align-items: center; gap: 6px;">
<span id="book-reader-counter" style="font-size: 11px; font-family: var(--font-mono); color: var(--accent); margin-right: 6px;">Page 1 / 1</span>
<button class="btn btn-icon" onclick="navBookPage(-1)" title="Previous Page (Left Arrow)"><i data-lucide="chevron-left" style="width: 14px;"></i></button>
<button class="btn btn-icon" onclick="navBookPage(1)" title="Next Page (Right Arrow)"><i data-lucide="chevron-right" style="width: 14px;"></i></button>
<button class="btn btn-icon" onclick="zoomBookPage(-0.1)" title="Zoom Out"><i data-lucide="zoom-out" style="width: 13px;"></i></button>
<button class="btn btn-icon" onclick="zoomBookPage(0.1)" title="Zoom In"><i data-lucide="zoom-in" style="width: 13px;"></i></button>
<button class="btn btn-icon" onclick="closeModal('book-reader-modal')"><i data-lucide="x" style="width: 13px;"></i></button>
</div>
</div>
<div class="comic-reader-viewport" id="book-reader-viewport">
<img id="book-reader-img" class="comic-reader-img" src="" alt="Comic Page">
<div id="book-reader-text" style="display: none; padding: 24px; color: var(--text-main); line-height: 1.7; max-width: 800px; overflow-y: auto;"></div>
</div>
</div>
</div>
<div class="modal-overlay" id="interpane-drop-modal">
<div class="modal-box" style="width: 440px;">
<div class="modal-header">
<span>🔄 Transfer Files Across Panes</span>
<button class="btn" onclick="closeModal('interpane-drop-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px;">
<p style="font-size: 12px; margin-bottom: 16px; line-height: 1.5;" id="interpane-drop-msg">
Copy or Move items to destination?
</p>
<div style="display: flex; gap: 8px; justify-content: flex-end;">
<button class="btn" onclick="closeModal('interpane-drop-modal')">Cancel</button>
<button class="btn" id="btn-interpane-move" onclick="executeInterpaneDrop('move')"><i data-lucide="move" style="width: 12px;"></i> Move Here (F6)</button>
<button class="btn btn-accent" id="btn-interpane-copy" onclick="executeInterpaneDrop('copy')"><i data-lucide="copy" style="width: 12px;"></i> Copy Here (F5)</button>
</div>
</div>
</div>
</div>
<div class="modal-overlay" id="conflict-resolution-modal">
<div class="modal-box" style="width: 520px; max-width: 95vw;">
<div class="modal-header">
<span style="display: flex; align-items: center; gap: 8px; font-weight: 700;">
<i data-lucide="alert-triangle" style="width: 16px; height: 16px; color: var(--accent);"></i>
<span id="conflict-modal-title">File Conflict Detected</span>
</span>
<button class="btn btn-icon" onclick="resolveConflictChoice('cancel')" title="Cancel Transfer"><i data-lucide="x" style="width: 14px; height: 14px;"></i></button>
</div>
<div class="modal-body" style="padding: 16px; display: flex; flex-direction: column; gap: 14px;">
<div style="font-size: 12px; color: var(--text-muted); line-height: 1.4;" id="conflict-modal-desc">
An item with the same name already exists in the destination folder. How would you like to proceed?
</div>
<div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px;">
<div style="display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 8px;">
<span style="font-weight: 700; font-size: 13px; color: var(--text-main); font-family: var(--font-mono); word-break: break-all;" id="conflict-file-name">filename.ext</span>
<span class="badge badge-accent" id="conflict-counter-badge" style="font-size: 10px; padding: 2px 6px;">1 of 1</span>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 11px;">
<div style="background: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 6px; padding: 10px;">
<div style="color: var(--accent); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 4px;">
<i data-lucide="arrow-down-right" style="width: 12px; height: 12px;"></i> Source (Incoming)
</div>
<div style="color: var(--text-dim);">Size: <strong style="color: var(--text-main);" id="conflict-src-size">-</strong></div>
<div style="color: var(--text-dim); margin-top: 3px;">Modified: <span style="color: var(--text-main);" id="conflict-src-mtime">-</span></div>
</div>
<div style="background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 6px; padding: 10px;">
<div style="color: var(--text-muted); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 4px;">
<i data-lucide="hard-drive" style="width: 12px; height: 12px;"></i> Destination (Existing)
</div>
<div style="color: var(--text-dim);">Size: <strong style="color: var(--text-main);" id="conflict-dest-size">-</strong></div>
<div style="color: var(--text-dim); margin-top: 3px;">Modified: <span style="color: var(--text-main);" id="conflict-dest-mtime">-</span></div>
</div>
</div>
</div>
<div id="conflict-apply-all-wrapper" style="display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer;">
<input type="checkbox" id="conflict-apply-all-chk" style="cursor: pointer; accent-color: var(--accent);">
<label for="conflict-apply-all-chk" style="cursor: pointer; color: var(--text-main);">Apply this action to all remaining conflicts (<span id="conflict-remaining-count">0</span> remaining)</label>
</div>
<div style="display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px;">
<button class="btn btn-outline" onclick="resolveConflictChoice('cancel')">Cancel</button>
<button class="btn btn-outline" onclick="resolveConflictChoice('skip')"><i data-lucide="skip-forward" style="width: 13px; height: 13px;"></i> Skip</button>
<button class="btn btn-outline" onclick="resolveConflictChoice('rename')"><i data-lucide="copy-plus" style="width: 13px; height: 13px;"></i> Auto-Rename</button>
<button class="btn btn-accent" onclick="resolveConflictChoice('overwrite')"><i data-lucide="replace" style="width: 13px; height: 13px;"></i> Overwrite</button>
</div>
</div>
</div>
</div>
<div class="task-drawer-backdrop" id="task-drawer-backdrop" onclick="closeFloatingTaskManager()"></div>
<div id="floating-task-manager" class="floating-task-window" onclick="bringFloatingWindowToFront(this)">
<div class="drawer-pull-bar mobile-only" onclick="closeFloatingTaskManager()">
<div class="drawer-pull-handle"></div>
</div>
<div class="task-win-resize-corner desktop-only" id="task-win-resize-corner" title="Drag to resize width and height">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 9L9 1M1 5L5 1M1 1H1.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<div class="task-win-header" id="task-win-header">
<div class="task-win-title" style="display: flex; align-items: center; gap: 6px;">
<img src="assets/task.webp" alt="Tasks" style="width: 16px; height: 16px; object-fit: contain;">
<span class="task-status-indicator" id="task-status-indicator"></span>
<span id="task-header-title" class="chewtoy-brand-text">Transfers (0 active)</span>
<span id="task-paranoid-badge" style="display: none; color: #22c55e; font-size: 12px; margin-left: 2px;" title="Paranoid SHA-256 Active">🛡️</span>
<span class="task-speed-badge" id="task-speed-badge">0 B/s</span>
</div>
<div class="task-win-controls" style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon btn-task-control desktop-only" onclick="dockTasksToActivePane()" title="Dock Tasks into Active Pane"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon btn-task-control desktop-only" onclick="minimizeFloatingTaskManager()" title="Minimize to Pill"><i data-lucide="minus"></i></button>
<button class="btn btn-icon btn-task-control desktop-only" onclick="maximizeFloatingTaskManager()" title="Expand / Restore"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon btn-task-control btn-task-close modal-close-btn" onclick="closeFloatingTaskManager()" title="Close Transfer Window"><i data-lucide="x"></i></button>
</div>
</div>
<div class="task-batch-summary" id="task-batch-summary">
<div class="task-progress-meta">
<span id="task-batch-files-text">0 / 0 files</span>
<span id="task-batch-percent-text">0%</span>
<span id="task-batch-bytes-text">0 B / 0 B</span>
<span id="task-batch-eta-text" style="color: var(--accent); font-weight: 700;">ETA: --:--</span>
</div>
<div class="task-progress-bar-track">
<div class="task-progress-bar-fill" id="task-batch-progress-fill" style="width: 0%;"></div>
</div>
</div>
<div class="task-active-file-card" id="task-active-file-card">
<div class="task-file-info">
<div style="display: flex; align-items: center; gap: 6px; overflow: hidden;">
<i data-lucide="file-text" style="width: 14px; height: 14px; color: var(--accent); flex-shrink: 0;"></i>
<span class="task-cur-filename" id="task-cur-filename">Idle (No active file)</span>
</div>
<span class="task-cur-speed" id="task-cur-speed">0 B/s</span>
</div>
<div class="task-progress-bar-track task-file-track">
<div class="task-progress-bar-fill task-file-fill" id="task-file-progress-fill" style="width: 0%;"></div>
</div>
<div class="task-file-stats" id="task-file-stats">
<span id="task-cur-bytes">0 B / 0 B</span>
<span id="task-cur-percent">0%</span>
</div>
</div>
<div class="task-queue-container" id="task-queue-container">
<div class="task-queue-list" id="task-queue-list">
</div>
</div>
<div class="task-log-container" id="task-log-container" style="display: none;">
<pre class="task-log-console" id="task-log-console">// Brum Transfer Diagnostic Stream...</pre>
</div>
<div class="task-win-footer" id="task-win-footer">
<div class="task-footer-left">
<button class="btn btn-sm" onclick="pauseAllTasks()" title="Pause All Transfers"><i data-lucide="pause" style="width: 12px;"></i> Pause All</button>
<button class="btn btn-sm" onclick="resumeAllTasks()" title="Resume All Transfers"><i data-lucide="play" style="width: 12px;"></i> Resume All</button>
<button class="btn btn-sm" onclick="clearCompletedTasks()" title="Clear Finished Jobs"><i data-lucide="trash" style="width: 12px;"></i> Clear Completed</button>
</div>
<div class="task-footer-right">
<button class="btn btn-sm" onclick="copyTaskLogs()" title="Copy Diagnostics"><i data-lucide="clipboard" style="width: 12px;"></i> Copy Log</button>
</div>
</div>
<div class="task-win-resize-corner-br desktop-only" id="task-win-resize-corner-br" title="Drag to resize width and height">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
</div>
<div class="tasks-pill" id="tasks-pill" onclick="restoreFloatingTaskManager()" title="Click to open Transfer Manager">
<div class="tasks-pill-pulse" id="tasks-pill-pulse"></div>
<img src="assets/task.webp" alt="Tasks" style="width: 14px; height: 14px; object-fit: contain; vertical-align: middle;">
<span id="tasks-pill-text">0 Transfers</span>
<span class="tasks-pill-speed" id="tasks-pill-speed">0 B/s</span>
</div>
<div class="modal-overlay" id="app-dialog-modal" style="z-index: 9999;">
<div class="modal-box dialog-box" id="app-dialog-box" style="width: 440px; max-width: calc(100vw - 32px);">
<div class="dialog-header">
<div style="display: flex; align-items: center; gap: 10px;">
<div class="dialog-icon-wrapper" id="dialog-icon-wrapper">
<i data-lucide="help-circle" id="dialog-icon" style="width: 20px; height: 20px;"></i>
</div>
<div>
<div class="dialog-title" id="dialog-title">Confirmation</div>
<div class="dialog-subtitle" id="dialog-subtitle">Please confirm your action</div>
</div>
</div>
<button class="btn btn-icon" onclick="closeAppDialog(false)"><i data-lucide="x"></i></button>
</div>
<div class="dialog-body" id="dialog-body">
<div class="dialog-message" id="dialog-message">Are you sure you want to proceed?</div>
<div class="dialog-items-preview" id="dialog-items-preview" style="display: none;"></div>
<div class="dialog-input-group" id="dialog-input-group" style="display: none; margin-top: 12px;">
<input type="text" class="input dialog-input" id="dialog-input-field" placeholder="" style="width: 100%; box-sizing: border-box;">
</div>
</div>
<div class="dialog-footer" id="dialog-footer">
<button class="btn" id="dialog-btn-cancel" onclick="closeAppDialog(false)">Cancel</button>
<button class="btn btn-accent" id="dialog-btn-confirm" onclick="closeAppDialog(true)">Confirm</button>
</div>
</div>
</div>
<div id="session-lock-screen" class="session-lock-screen">
<div class="login-corner-brand">
<img src="assets/brum_icon.webp" alt="Brum" class="login-corner-logo">
<span class="login-corner-name">Brum</span>
</div>
<div class="login-corner-version">
<span class="login-version-badge lock-version-badge" id="lock-corner-version-badge">Brum</span>
</div>
<div class="auth-watermark-backdrop" aria-hidden="true">
<img src="assets/brum_logo.webp" alt="" class="auth-watermark-img">
</div>
<div class="lock-screen-card">
<div class="lock-screen-header">
<div class="lock-avatar-thumb" id="lock-avatar-thumb">👤</div>
<div class="lock-header-text">
<div class="lock-user-label" id="lock-username-label"><span id="lock-username-text">Brum User</span><span id="lock-hostname-suffix" class="lock-hostname-suffix">@localhost</span></div>
<div class="lock-sub-text">Session is locked!</div>
</div>
</div>
<form id="unlock-form" onsubmit="event.preventDefault(); submitUnlockSession();">
<div class="lock-card-body">
<div class="login-form-group">
<label for="unlock-password-input" class="login-label">
<i data-lucide="lock" class="login-label-icon"></i> Password
</label>
<div class="login-input-wrapper">
<input type="password" id="unlock-password-input" class="login-input lock-password-input" autocomplete="current-password" required>
</div>
</div>
<div id="unlock-error-msg" class="login-error-msg lock-error-msg" style="display: none;"></div>
</div>
<div class="lock-card-footer">
<button type="submit" class="btn btn-accent login-submit-btn" id="btn-submit-unlock">
<i data-lucide="unlock" style="width: 14px; height: 14px;"></i>
<span>Unlock Session</span>
</button>
<button type="button" class="btn btn-switch-user" onclick="logout()" title="Switch user or log out">
<i data-lucide="log-out" style="width: 12px; height: 12px;"></i>
<span>Log Out</span>
</button>
</div>
</form>
</div>
</div>
<div class="modal-overlay" id="bookmark-modal" style="z-index: 2050;">
<div class="modal-box" style="width: 480px; max-width: calc(100vw - 32px);">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="bookmark-plus" style="color: var(--accent); width: 18px; height: 18px;"></i>
<span style="font-weight: 700; font-size: 14px;" id="bookmark-modal-title">Add Bookmark / Quick Favorite</span>
</div>
<button class="btn btn-icon" onclick="closeModal('bookmark-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px;">
<div class="form-group">
<label>Bookmark Name:</label>
<input type="text" id="bm-input-name" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="e.g. Office Share, Backup Drive, NAS" />
</div>
<div class="form-group">
<label>Protocol Type:</label>
<select id="bm-select-protocol" class="pane-quick-filter" style="width: 100%; padding: 8px;" onchange="onBookmarkProtocolChange()">
<option value="local">📁 Local Filesystem</option>
<option value="web">🌐 Web URL / URI (https://...)</option>
<option value="smb">🪟 SMB / Samba Share (smb://)</option>
<option value="sftp">🔒 SFTP / SSH (sftp://)</option>
<option value="nfs">🐧 NFS Share (nfs://)</option>
<option value="webdav">🌐 WebDAV (webdav://)</option>
<option value="s3">☁️ Amazon S3 / MinIO (s3://)</option>
<option value="proton">🛡️ Proton Drive (proton://)</option>
</select>
</div>
<div class="form-group">
<label id="bm-label-path">Target Path / URI:</label>
<input type="text" id="bm-input-path" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="/home/user or smb://192.168.1.100/share" />
</div>
<div class="form-group" id="bm-web-target-group" style="display: none;">
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-main);">
<input type="checkbox" id="bm-input-open-tab" checked style="cursor: pointer;" />
<span>Open in New Browser Tab (target="_blank")</span>
</label>
<div style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">
💡 When clicked, immediately opens this web URL in a separate browser tab or window.
</div>
</div>
<div class="form-group" id="bm-password-group" style="display: none;">
<label>Remote Password (Optional):</label>
<input type="password" id="bm-input-password" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="Leave empty to prompt on access" />
<div style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">
💡 If left blank, you will be prompted once per session upon accessing this destination.
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('bookmark-modal')">Cancel</button>
<button class="btn btn-accent" onclick="saveBookmarkFromModal()"><i data-lucide="check"></i> Save Bookmark</button>
</div>
</div>
</div>
<div class="modal-overlay" id="remote-auth-modal" style="z-index: 2200;">
<div class="modal-box" style="width: 420px; max-width: calc(100vw - 32px);">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="lock" style="color: var(--accent); width: 18px; height: 18px;"></i>
<span style="font-weight: 700; font-size: 14px;">Remote Authentication</span>
</div>
<button class="btn btn-icon" onclick="closeModal('remote-auth-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px;">
<div style="font-size: 12px; margin-bottom: 12px; word-break: break-all; color: var(--text-muted);" id="remote-auth-desc">
Please enter credentials for remote destination:
</div>
<div class="form-group">
<label>Username:</label>
<input type="text" id="remote-auth-user" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="e.g. admin or root" />
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="remote-auth-pass" class="pane-quick-filter" style="width: 100%; padding: 8px;" placeholder="Password" />
</div>
<div style="display: flex; align-items: center; gap: 8px; margin-top: 10px;">
<input type="checkbox" id="remote-auth-remember" checked />
<label for="remote-auth-remember" style="font-size: 11px; margin-bottom: 0; cursor: pointer;">Remember for this session</label>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('remote-auth-modal')">Cancel</button>
<button class="btn btn-accent" onclick="submitRemoteAuth()"><i data-lucide="key"></i> Connect</button>
</div>
</div>
</div>
<div class="modal-overlay" id="tags-modal">
<div class="modal-box" style="width: 420px;">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="tag" style="width: 16px; height: 16px; color: var(--accent);"></i>
<span style="font-weight: 700;">Custom Tags</span>
</div>
<button class="btn btn-icon" onclick="closeModal('tags-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
<div>
<div style="font-size: 11px; color: var(--text-muted); margin-bottom: 4px;">Target Item:</div>
<div id="tags-modal-targets" style="font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--accent); word-break: break-all;">1 file selected</div>
</div>
<div>
<label style="font-size: 11px; font-weight: 600; display: block; margin-bottom: 6px;">Active Tags:</label>
<div id="tags-modal-chips" style="display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; padding: 6px 10px; background: rgba(0,0,0,0.2); border: 1px solid var(--border); border-radius: 6px; align-items: center;">
<span style="color: var(--text-muted); font-size: 11px;">No tags yet</span>
</div>
</div>
<div>
<label style="font-size: 11px; font-weight: 600; display: block; margin-bottom: 6px;">Add New Tag(s):</label>
<div style="display: flex; gap: 6px;">
<input type="text" id="tags-modal-input" class="pane-quick-filter" style="flex: 1;" placeholder="e.g. invoice, project, urgent" onkeydown="if (event.key === 'Enter') { event.preventDefault(); addModalTagFromInput(); }">
<button class="btn btn-accent btn-sm" onclick="addModalTagFromInput()"><i data-lucide="plus" style="width: 13px;"></i> Add</button>
</div>
<div style="font-size: 10px; color: var(--text-dim); margin-top: 4px;">Separate multiple tags with commas or press Enter to add</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('tags-modal')">Cancel</button>
<button class="btn btn-accent" onclick="saveModalTags()"><i data-lucide="check"></i> Save Tags</button>
</div>
</div>
</div>
<div class="modal-overlay" id="git-modal" style="z-index: 2050;">
<div class="modal-box" style="width: 960px; max-width: calc(100vw - 32px); height: 85vh; max-height: 800px; display: flex; flex-direction: column;">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="git-branch" style="color: var(--accent); width: 18px; height: 18px;"></i>
<span style="font-weight: 700; font-size: 14px;" id="git-modal-title">Git Manager</span>
<span class="badge" id="git-modal-branch-badge" style="font-size: 10px; text-transform: uppercase;">main</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon" onclick="gitPullCurrentRepo()" title="Pull changes from remote (Git Pull)"><i data-lucide="download"></i></button>
<button class="btn btn-icon" onclick="gitPushCurrentRepo()" title="Push commits to remote (Git Push)"><i data-lucide="upload"></i></button>
<div class="header-sep desktop-only"></div>
<button class="btn btn-icon desktop-only" onclick="dockGitToActivePane()" title="Dock Git Manager into Active Pane"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeModal('git-modal')" title="Close Git Manager (Esc)"><i data-lucide="x"></i></button>
</div>
</div>
<div class="modal-tabs" style="display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--bg-dark);">
<button class="modal-tab-btn active" id="git-tab-status-btn" onclick="switchGitTab('status')">Changes & Staging</button>
<button class="modal-tab-btn" id="git-tab-log-btn" onclick="switchGitTab('log')">Commit History (Log)</button>
</div>
<div class="modal-body" style="flex: 1; display: flex; overflow: hidden; padding: 0;" id="git-status-tab-body">
<div style="width: 320px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-panel);">
<div style="padding: 8px 12px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<span id="git-changes-count">Changes</span>
<div style="display: flex; gap: 4px;">
<button class="btn btn-xs btn-accent" onclick="gitStageAll()" title="Stage all changes" style="height: 26px; padding: 0 8px; font-weight: 600;">Stage All (+)</button>
<button class="btn btn-xs" onclick="gitUnstageAll()" title="Unstage all changes" style="height: 26px; padding: 0 8px; font-weight: 600;">Unstage All</button>
</div>
</div>
<div id="git-files-list" style="flex: 1; overflow-y: auto; padding: 4px 0;"></div>
<div style="padding: 10px; border-top: 1px solid var(--border); background: var(--bg-dark);">
<textarea id="git-commit-msg-input" class="pane-quick-filter" style="width: 100%; height: 60px; resize: none; font-size: 11px; margin-bottom: 6px;" placeholder="Commit message (e.g. feat: update parser)..."></textarea>
<button class="btn btn-accent btn-sm btn-block" style="width: 100%; font-weight: 700; display: flex; justify-content: center; align-items: center; gap: 6px;" onclick="gitCommitStaged()">
<i data-lucide="check"></i> Commit Staged
</button>
</div>
</div>
<div style="flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #181a1f;">
<div style="padding: 8px 12px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-dark);">
<span id="git-diff-filename">Select a file to inspect diff</span>
<span class="badge" id="git-diff-status-badge" style="display: none;"></span>
</div>
<div id="git-diff-viewer" style="flex: 1; overflow: auto; padding: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--text-main); white-space: pre-wrap;"></div>
</div>
</div>
<div class="modal-body" style="flex: 1; overflow-y: auto; padding: 16px; display: none;" id="git-log-tab-body">
<table class="file-table">
<thead>
<tr>
<th style="width: 80px;">Hash</th>
<th>Message</th>
<th style="width: 140px;">Author</th>
<th style="width: 120px;">Date</th>
</tr>
</thead>
<tbody id="git-log-tbody"></tbody>
</table>
</div>
</div>
</div>
<div class="floating-splitter-window" id="floating-splitter-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="splitter-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="splitter-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="splitter-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="splitter-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="splitter-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header splitter-header" id="splitter-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="splitter-drag-handle">
<i data-lucide="scissors" style="width: 17px; height: 17px; color: var(--accent); flex-shrink: 0;"></i>
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">File Splitter & Combiner</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon desktop-only" id="btn-splitter-dock" onclick="dockSplitterToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-splitter-maximize" onclick="toggleMaximizeSplitter()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingSplitter()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingSplitter()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="splitter-body" id="splitter-body" style="display: flex; flex-direction: column; flex: 1; overflow: hidden; height: calc(100% - 42px);">
<div class="settings-tabs" style="border-bottom: 1px solid var(--border); padding: 0 10px; background: var(--bg-dark); flex-shrink: 0;">
<button class="settings-tab-btn active" id="btn-splitter-tab-split" onclick="switchSplitterTab('split')"><i data-lucide="scissors"></i> Split File</button>
<button class="settings-tab-btn" id="btn-splitter-tab-combine" onclick="switchSplitterTab('combine')"><i data-lucide="merge"></i> Combine Parts</button>
</div>
<div class="splitter-scroll-content" style="padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 11px;">
<div id="splitter-tab-split" class="splitter-tab-content" style="display: flex; flex-direction: column; flex: 1;">
<div class="converter-dropzone" id="splitter-dropzone" style="min-height: 60px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer;" onclick="if(!event.target.closest('button')) openSplitterFilePicker();" title="Drag & drop a file here or click to browse">
<div style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px;">
<div style="display: flex; align-items: center; gap: 10px; overflow: hidden; flex: 1;">
<div style="width: 32px; height: 32px; border-radius: 6px; background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<i data-lucide="scissors" style="width: 16px; height: 16px; color: var(--accent);"></i>
</div>
<div style="display: flex; flex-direction: column; overflow: hidden; min-width: 0;">
<span style="font-size: 11.5px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" id="splitter-dropzone-filename">Drop file here or click to browse...</span>
<span style="font-size: 10.5px; color: var(--text-muted);" id="split-source-size-label">No file selected</span>
</div>
</div>
<div style="display: flex; gap: 4px; flex-shrink: 0;">
<button type="button" class="btn btn-xs" onclick="event.stopPropagation(); useActivePaneItemForSplitter();" title="Use file selected in active pane" style="font-size: 10.5px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px;"><i data-lucide="layout" style="width: 11px; height: 11px;"></i> Pane</button>
<button type="button" class="btn btn-xs btn-accent" onclick="event.stopPropagation(); openSplitterFilePicker();" title="Browse / Select File" style="font-size: 10.5px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px;"><i data-lucide="folder-open" style="width: 11px; height: 11px;"></i> Browse</button>
</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 10px;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Source Path:</label>
<input type="text" id="split-source-path" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="/path/to/large-archive.tar.gz" oninput="handleSplitSourceChange(this.value)" />
</div>
<div class="form-group" style="margin-bottom: 10px;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Chunk Size:</label>
<div style="display: flex; gap: 8px;">
<select id="split-size-preset" class="pane-quick-filter" style="flex: 1; font-size: 11.5px;" onchange="handleSplitPresetChange(this.value)">
<option value="10">10 MB (Small Chunks)</option>
<option value="50">50 MB (Discord / Email)</option>
<option value="100" selected>100 MB (Standard Parts)</option>
<option value="250">250 MB</option>
<option value="500">500 MB</option>
<option value="1024">1 GB (Large Chunks)</option>
<option value="custom">Custom Size (MB)...</option>
</select>
<input type="number" id="split-size-custom" class="pane-quick-filter" style="width: 90px; display: none; font-size: 11.5px;" min="1" placeholder="MB" value="100" oninput="updateSplitEstimate()" />
</div>
</div>
<div class="form-group" style="margin-bottom: 10px;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Destination Directory:</label>
<input type="text" id="split-dest-dir" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="Defaults to source folder" />
</div>
<div class="form-group" style="margin-bottom: 8px;">
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11.5px; color: var(--text-main);">
<input type="checkbox" id="split-generate-checksum" checked />
<span>Generate SHA-256 Checksum Manifest (.sha256)</span>
</label>
</div>
<div id="split-progress-box" style="display: none; padding: 8px 10px; background: var(--bg-dark); border-radius: 6px; border: 1px solid var(--border); margin-bottom: 8px;">
<div style="font-size: 11px; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 6px;" id="split-status-text"><i data-lucide="loader" class="spinner" style="width: 13px; height: 13px;"></i> Splitting file...</div>
</div>
<div class="modal-footer" style="padding-top: 6px; display: flex; justify-content: flex-end; gap: 8px; margin-top: auto;">
<button class="btn btn-sm" onclick="closeFloatingSplitter()">Close</button>
<button class="btn btn-sm btn-accent" id="btn-run-split" onclick="executeFileSplit()"><i data-lucide="scissors" style="width: 13px; height: 13px;"></i> Split File</button>
</div>
</div>
<div id="splitter-tab-combine" class="splitter-tab-content" style="display: none; flex-direction: column; flex: 1;">
<div class="form-group" style="margin-bottom: 10px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<label style="font-weight: 600; font-size: 11.5px; color: var(--text-dim);">Detected Parts to Join (Drag files here):</label>
<div style="display: flex; gap: 4px;">
<button type="button" class="btn btn-xs" onclick="scanPaneForCombineParts()" title="Scan active pane for .001, .part1 files" style="font-size: 10.5px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px;"><i data-lucide="refresh-cw" style="width: 11px; height: 11px;"></i> Scan Pane</button>
<button type="button" class="btn btn-xs btn-outline" onclick="clearCombineParts()" title="Clear list" style="font-size: 10.5px; padding: 2px 7px; color: var(--danger);"><i data-lucide="trash-2" style="width: 11px; height: 11px;"></i> Clear</button>
</div>
</div>
<div id="combine-parts-list" style="min-height: 85px; max-height: 150px; overflow-y: auto; padding: 6px; background: var(--bg-dark); border: 1px dashed var(--border); border-radius: 6px; font-size: 11px; font-family: var(--font-mono); display: flex; flex-direction: column; gap: 3px;">
<div style="color: var(--text-muted); text-align: center; padding: 18px;">No part files detected (.001, .part1...). Drag files here, select in pane, or click Scan.</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 10px;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Destination File Output:</label>
<input type="text" id="combine-dest-path" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="e.g. /path/to/restored-archive.tar.gz" />
</div>
<div class="form-group" style="margin-bottom: 10px;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Expected SHA-256 Checksum (Optional verification):</label>
<input type="text" id="combine-expected-sha" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="Auto-detected from .sha256 or paste hash..." />
</div>
<div id="combine-result-box" style="display: none; padding: 8px 10px; background: var(--bg-dark); border-radius: 6px; border: 1px solid var(--border); font-size: 11px; margin-bottom: 8px;"></div>
<div class="modal-footer" style="padding-top: 6px; display: flex; justify-content: flex-end; gap: 8px; margin-top: auto;">
<button class="btn btn-sm" onclick="closeFloatingSplitter()">Close</button>
<button class="btn btn-sm btn-accent" id="btn-run-combine" onclick="executeFileCombine()"><i data-lucide="merge" style="width: 13px; height: 13px;"></i> Join & Verify</button>
</div>
</div>
</div>
</div>
</div>
<div class="splitter-pill" id="splitter-pill" style="display: none;" onclick="restoreFloatingSplitter()" title="Click to restore File Splitter & Combiner">
<i data-lucide="scissors" style="width: 13px; height: 13px; color: var(--accent);"></i>
<span>Splitter & Combiner</span>
</div>
<div class="floating-pdf-window" id="floating-pdf-window" style="display: none;" onclick="bringFloatingWindowToFront(this)">
<div class="win-resize-handle win-resize-top" id="pdf-resize-top"></div>
<div class="win-resize-handle win-resize-bottom" id="pdf-resize-bottom"></div>
<div class="win-resize-handle win-resize-left" id="pdf-resize-left"></div>
<div class="win-resize-handle win-resize-right" id="pdf-resize-right"></div>
<div class="win-resize-handle win-resize-corner" id="pdf-resize-corner">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9 1L1 9M9 5L5 9M9 9H9.01" stroke="rgba(255,255,255,0.4)" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<div class="modal-header pdf-header" id="pdf-header">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;" id="pdf-drag-handle">
<img src="assets/amber-pdftool.webp" alt="PDF Studio" style="width: 17px; height: 17px; object-fit: contain; flex-shrink: 0;" onerror="this.src='assets/amber-frameless-apps.webp'">
<span class="chewtoy-brand-text" style="font-weight: 700; font-size: 13.5px; color: var(--text-main);">PDF Studio</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<button class="btn btn-icon desktop-only" id="btn-pdf-dock" onclick="dockPdfToActivePane()" title="Dock into Active Pane" style="width: 28px; height: 28px;"><i data-lucide="panel-left-close"></i></button>
<button class="btn btn-icon" id="btn-pdf-maximize" onclick="toggleMaximizePdf()" title="Maximize / Restore" style="width: 28px; height: 28px;"><i data-lucide="maximize-2"></i></button>
<button class="btn btn-icon desktop-only" onclick="minimizeFloatingPdf()" title="Minimize to Pill" style="width: 28px; height: 28px;"><i data-lucide="minus"></i></button>
<button class="btn btn-icon modal-close-btn" onclick="closeFloatingPdf()" title="Close (Esc)" style="width: 28px; height: 28px;"><i data-lucide="x"></i></button>
</div>
</div>
<div class="pdf-body" id="pdf-body" style="display: flex; flex-direction: column; flex: 1; overflow: hidden; height: calc(100% - 42px);">
<div class="settings-tabs" style="border-bottom: 1px solid var(--border); padding: 0 10px; background: var(--bg-dark); flex-shrink: 0;">
<button class="settings-tab-btn active" id="btn-pdf-tab-merge" onclick="switchPdfTab('merge')"><i data-lucide="merge"></i> Merge PDFs</button>
<button class="settings-tab-btn" id="btn-pdf-tab-split" onclick="switchPdfTab('split')"><i data-lucide="scissors"></i> Split PDF</button>
<button class="settings-tab-btn" id="btn-pdf-tab-reorder" onclick="switchPdfTab('reorder')"><i data-lucide="rotate-cw"></i> Reorder & Rotate</button>
</div>
<div class="pdf-scroll-content" style="padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px;">
<div id="pdf-tab-merge" class="pdf-tab-content" style="display: flex; flex-direction: column; flex: 1; gap: 10px;">
<div class="form-group" style="margin-bottom: 0;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<label style="font-weight: 600; font-size: 11.5px; color: var(--text-dim);">PDF Documents to Merge (Drag files here):</label>
<div style="display: flex; gap: 4px;">
<button type="button" class="btn btn-xs" onclick="addActivePanePdfFiles()" title="Add selected PDFs from active pane" style="font-size: 10.5px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px;"><i data-lucide="plus" style="width: 11px; height: 11px;"></i> Add From Pane</button>
<button type="button" class="btn btn-xs btn-outline" onclick="clearPdfMergeList()" title="Clear list" style="font-size: 10.5px; padding: 2px 7px; color: var(--danger);"><i data-lucide="trash-2" style="width: 11px; height: 11px;"></i> Clear</button>
</div>
</div>
<div id="pdf-merge-file-list" class="converter-dropzone" style="min-height: 110px; max-height: 200px; overflow-y: auto; padding: 6px; background: var(--bg-dark); border: 1px dashed var(--border); border-radius: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 11px;">
<div style="color: var(--text-muted); text-align: center; padding: 24px;">No PDF files added. Drag PDFs here or click Add From Pane.</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Output Merged PDF Path:</label>
<input type="text" id="pdf-merge-dest" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="e.g. /path/to/merged_document.pdf" />
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11.5px; color: var(--text-main);">
<input type="checkbox" id="pdf-merge-add-bookmarks" checked />
<span>Generate Table of Contents / Outline Bookmarks for Each Document</span>
</label>
</div>
<div class="modal-footer" style="padding-top: 6px; display: flex; justify-content: flex-end; gap: 8px; margin-top: auto;">
<button class="btn btn-sm" onclick="closeFloatingPdf()">Close</button>
<button class="btn btn-sm btn-accent" id="btn-pdf-execute-merge" onclick="executePdfActiveTab()"><i data-lucide="merge" style="width: 13px; height: 13px;"></i> Merge PDFs</button>
</div>
</div>
<div id="pdf-tab-split" class="pdf-tab-content" style="display: none; flex-direction: column; flex: 1; gap: 10px;">
<div class="converter-dropzone" id="pdf-split-dropzone" style="min-height: 55px; padding: 8px 12px; cursor: pointer;" onclick="if(!event.target.closest('button')) openPdfSplitFilePicker();" title="Drag & drop a PDF here or click to browse">
<div style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px;">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;">
<i data-lucide="file-text" style="color: #ef4444; width: 18px; height: 18px; flex-shrink: 0;"></i>
<div style="overflow: hidden; text-align: left;">
<div style="font-weight: 600; font-size: 12px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" id="pdf-split-dropzone-filename">Drop PDF here or click to browse...</div>
<div style="font-size: 10.5px; color: var(--text-dim);" id="pdf-split-dropzone-sub">Single PDF document to extract or split</div>
</div>
</div>
<div style="display: flex; gap: 4px; flex-shrink: 0;">
<button type="button" class="btn btn-xs" onclick="event.stopPropagation(); useActivePaneSelectedPdf('split');" title="Use currently focused PDF in active pane"><i data-lucide="target" style="width: 11px; height: 11px;"></i> Active Pane</button>
<button type="button" class="btn btn-xs" onclick="event.stopPropagation(); openPdfSplitFilePicker();" title="Browse file"><i data-lucide="folder-open" style="width: 11px; height: 11px;"></i> Browse</button>
</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Source PDF Path:</label>
<input type="text" id="pdf-split-source" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="/path/to/document.pdf" onchange="fetchPdfSplitInfo(this.value)" />
<div id="pdf-split-info-badge" style="display: none; margin-top: 4px; font-size: 11px; font-family: var(--font-mono); color: var(--accent);"></div>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Split Mode:</label>
<select id="pdf-split-mode" class="pane-quick-filter" style="width: 100%; font-size: 11.5px;" onchange="togglePdfSplitModeUI(this.value)">
<option value="ranges" selected>Custom Page Ranges (e.g. 1-3, 5, 8-10)</option>
<option value="each_page">Extract Every Page as an Individual PDF</option>
<option value="page_count">Split into N-Page Bundles</option>
</select>
</div>
<div class="form-group" id="pdf-split-ranges-group" style="margin-bottom: 0;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Page Ranges:</label>
<input type="text" id="pdf-split-ranges-val" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="e.g. 1-4, 6, 8-12" value="1-2" />
<div class="form-hint" style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">Separate page numbers and ranges with commas (e.g., "1-3, 5, 7-10").</div>
</div>
<div class="form-group" id="pdf-split-chunk-group" style="display: none; margin-bottom: 0;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Pages per Split Part:</label>
<input type="number" id="pdf-split-chunk-val" class="pane-quick-filter" style="width: 120px; font-size: 11.5px;" min="1" max="500" value="2" />
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Output Directory:</label>
<input type="text" id="pdf-split-dest-dir" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="Directory to store split PDFs" />
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Output Filename Prefix (Optional):</label>
<input type="text" id="pdf-split-prefix" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="e.g. chapter" />
</div>
<div class="modal-footer" style="padding-top: 6px; display: flex; justify-content: flex-end; gap: 8px; margin-top: auto;">
<button class="btn btn-sm" onclick="closeFloatingPdf()">Close</button>
<button class="btn btn-sm btn-accent" id="btn-pdf-execute-split" onclick="executePdfActiveTab()"><i data-lucide="scissors" style="width: 13px; height: 13px;"></i> Split PDF</button>
</div>
</div>
<div id="pdf-tab-reorder" class="pdf-tab-content" style="display: none; flex-direction: column; flex: 1; gap: 10px;">
<div class="converter-dropzone" id="pdf-reorder-dropzone" style="min-height: 55px; padding: 8px 12px; cursor: pointer;" onclick="if(!event.target.closest('button')) openPdfReorderFilePicker();" title="Drag & drop a PDF here or click to browse">
<div style="display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px;">
<div style="display: flex; align-items: center; gap: 8px; overflow: hidden;">
<i data-lucide="rotate-cw" style="color: var(--accent); width: 18px; height: 18px; flex-shrink: 0;"></i>
<div style="overflow: hidden; text-align: left;">
<div style="font-weight: 600; font-size: 12px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" id="pdf-reorder-dropzone-filename">Drop PDF here to arrange pages...</div>
<div style="font-size: 10.5px; color: var(--text-dim);" id="pdf-reorder-dropzone-sub">Interactive visual page organizer</div>
</div>
</div>
<div style="display: flex; gap: 4px; flex-shrink: 0;">
<button type="button" class="btn btn-xs" onclick="event.stopPropagation(); useActivePaneSelectedPdf('reorder');" title="Use currently focused PDF in active pane"><i data-lucide="target" style="width: 11px; height: 11px;"></i> Active Pane</button>
<button type="button" class="btn btn-xs" onclick="event.stopPropagation(); openPdfReorderFilePicker();" title="Browse file"><i data-lucide="folder-open" style="width: 11px; height: 11px;"></i> Browse</button>
</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 0;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
<label style="font-weight: 600; font-size: 11.5px; color: var(--text-dim);">Pages Organizer (↻ Rotate, Drag to Reorder, ✕ Delete):</label>
<span id="pdf-reorder-page-count" style="font-size: 11px; color: var(--accent); font-family: var(--font-mono); font-weight: 600;"></span>
</div>
<div id="pdf-page-organizer-grid" style="min-height: 120px; max-height: 200px; overflow-y: auto; padding: 8px; background: var(--bg-dark); border: 1px dashed var(--border); border-radius: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px;">
<div style="grid-column: 1 / -1; color: var(--text-muted); text-align: center; padding: 24px;">Drop a PDF here, choose a file or click Active Pane to load pages.</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label style="font-weight: 600; font-size: 11.5px; margin-bottom: 4px; display: block; color: var(--text-dim);">Destination Output PDF:</label>
<input type="text" id="pdf-reorder-dest" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="/path/to/reordered_document.pdf" />
</div>
<div class="modal-footer" style="padding-top: 6px; display: flex; justify-content: flex-end; gap: 8px; margin-top: auto;">
<button class="btn btn-sm" onclick="closeFloatingPdf()">Close</button>
<button class="btn btn-sm btn-accent" id="btn-pdf-execute-reorder" onclick="executePdfActiveTab()"><i data-lucide="check" style="width: 13px; height: 13px;"></i> Export PDF</button>
</div>
</div>
<div id="pdf-tool-status-box" style="display: none; padding: 8px 10px; background: var(--bg-dark); border-radius: 6px; border: 1px solid var(--border); font-size: 11px;"></div>
</div>
</div>
</div>
<div class="pdf-pill" id="pdf-pill" style="display: none;" onclick="restoreFloatingPdf()" title="Click to restore PDF Studio">
<img src="assets/amber-pdftool.webp" alt="PDF Studio" style="width: 14px; height: 14px; object-fit: contain;" onerror="this.src='assets/amber-frameless-apps.webp'">
<span>PDF Studio</span>
</div>
<div class="modal-overlay" id="create-vault-modal" style="z-index: 2060;">
<div class="modal-box" style="width: 520px; max-width: calc(100vw - 32px);">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="shield-check" style="color: var(--accent); width: 18px; height: 18px;"></i>
<span style="font-weight: 700; font-size: 14px;">Create Transparent Encrypted Vault</span>
</div>
<button class="btn btn-icon" onclick="closeModal('create-vault-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
<div style="padding: 10px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 4px; font-size: 11px; line-height: 1.5; color: var(--text-main);">
🔒 <strong>AES-256-GCM + Argon2id Authenticated Encryption</strong><br>
Vaults are password-protected encrypted containers. Files decrypt on-the-fly in RAM without ever touching the disk in plaintext.
</div>
<div class="form-group">
<label>Vault Filename / Location:</label>
<input type="text" id="create-vault-path" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" placeholder="/home/bolt/Documents/Personal_Vault.cdvault" />
</div>
<div class="form-group">
<label>Master Password:</label>
<div style="position: relative;">
<input type="password" id="create-vault-pass" class="pane-quick-filter" style="width: 100%; padding-right: 32px;" placeholder="Choose a strong passphrase" onkeyup="if(event.key==='Enter') executeCreateVault()" />
<button type="button" class="btn btn-icon" style="position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 2px 6px; font-size: 11px;" onclick="togglePassVisibility('create-vault-pass')"><i data-lucide="eye" style="width: 13px;"></i></button>
</div>
</div>
<div class="form-group">
<label>Confirm Master Password:</label>
<div style="position: relative;">
<input type="password" id="create-vault-pass-confirm" class="pane-quick-filter" style="width: 100%; padding-right: 32px;" placeholder="Confirm passphrase" onkeyup="if(event.key==='Enter') executeCreateVault()" />
<button type="button" class="btn btn-icon" style="position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 2px 6px; font-size: 11px;" onclick="togglePassVisibility('create-vault-pass-confirm')"><i data-lucide="eye" style="width: 13px;"></i></button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('create-vault-modal')">Cancel</button>
<button class="btn btn-accent" id="btn-confirm-create-vault" onclick="executeCreateVault()"><i data-lucide="lock"></i> Create Encrypted Vault</button>
</div>
</div>
</div>
<div class="modal-overlay" id="unlock-vault-modal" style="z-index: 2060;">
<div class="modal-box" style="width: 480px; max-width: calc(100vw - 32px);">
<div class="modal-header">
<div style="display: flex; align-items: center; gap: 8px;">
<i data-lucide="lock" style="color: var(--accent); width: 18px; height: 18px;"></i>
<span style="font-weight: 700; font-size: 14px;">Unlock Encrypted Vault</span>
</div>
<button class="btn btn-icon" onclick="closeModal('unlock-vault-modal')"><i data-lucide="x"></i></button>
</div>
<div class="modal-body" style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
<div class="form-group">
<label>Vault Path:</label>
<input type="text" id="unlock-vault-path" class="pane-quick-filter" style="width: 100%; font-family: var(--font-mono); font-size: 11px;" readonly />
</div>
<div class="form-group">
<label>Master Password:</label>
<div style="position: relative;">
<input type="password" id="unlock-vault-pass" class="pane-quick-filter" style="width: 100%; padding-right: 32px;" placeholder="Enter vault master password" onkeyup="if(event.key==='Enter') executeUnlockVault()" />
<button type="button" class="btn btn-icon" style="position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 2px 6px; font-size: 11px;" onclick="togglePassVisibility('unlock-vault-pass')"><i data-lucide="eye" style="width: 13px;"></i></button>
</div>
</div>
<div class="form-group">
<label>Auto-Lock Timer:</label>
<select id="unlock-vault-autolock" class="pane-quick-filter" style="width: 100%;">
<option value="300">5 Minutes Inactivity</option>
<option value="900" selected>15 Minutes Inactivity (Recommended)</option>
<option value="1800">30 Minutes Inactivity</option>
<option value="3600">1 Hour Inactivity</option>
<option value="14400">4 Hours Inactivity</option>
<option value="0">Until Session Ends / Manual Lock</option>
</select>
</div>
<div id="unlock-vault-err" style="display: none; padding: 8px 10px; background: rgba(239, 68, 68, 0.15); border: 1px solid var(--danger); border-radius: 4px; color: var(--danger); font-size: 11px;"></div>
</div>
<div class="modal-footer">
<button class="btn" onclick="closeModal('unlock-vault-modal')">Cancel</button>
<button class="btn btn-accent" id="btn-confirm-unlock-vault" onclick="executeUnlockVault()"><i data-lucide="key"></i> Unlock Vault</button>
</div>
</div>
</div>
<div id="toast-container" class="toast-container"></div>
<script src="app.js"></script>
</body>
</html>