:root { --renegade-accent: #d4af37; --renegade-accent-rgb: 212, 175, 55; --renegade-code-color: #39ff14; --renegade-assistant-color: #8fdcff; --renegade-overlay-image: url('images/overlay.png'); /* Mobile has its own overlay art per theme (mobile-overlay, mobile-cyan, mobile-crimson, mobile-violet, mobile-emerald) since the desktop overlay.png images aren't cropped for a phone screen. Kept as a separate variable so settings.js can update both independently - see applyTheme() in settings.js. */ --renegade-overlay-image-mobile: url('images/mobile-overlay.jpg'); } body { margin: 0; background-color: #000; color: var(--renegade-accent); font-family: 'Orbitron', sans-serif; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } #overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; background-image: var(--renegade-overlay-image); background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat; z-index: -1; } #intro { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; opacity: 1; transition: opacity 1s ease; } #intro-scorpion { width: 700px; max-width: 90vw; height: auto; margin-bottom: 20px; } #intro-text { color: var(--renegade-accent); font-size: 1.8rem; font-family: 'Courier New', monospace; text-align: center; } /* * Login gate - dims and locks the whole app until someone is logged in. * See login.js's applyAuthGate(): it toggles "auth-locked" on and * "visible" on #auth-gate-overlay together, in response to * "renegade-auth-changed". * * The overlay is purely visual (pointer-events: none) and sits above * every panel/nav/chat element but below .renegade-modal-panel (the * Login panel itself is one, so it's always drawn on top, undimmed) and * below the toast z-index (10000), so a storage warning etc. can still * surface over a locked screen. * * The actual click-blocking is separate, via pointer-events: none on the * nav/input-bar/chat containers below - with #login-btn, #user-input, * and #send-btn explicitly carved back to pointer-events: auto, since a * descendant can restore its own hit-testing even under a * pointer-events: none ancestor. That's what lets Send Message (and * reopening Login) keep working right through the dim, while every * other button - including anything added later to the history/file * lists - is inert without any script.js changes needed. */ #auth-gate-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.75); z-index: 9995; display: none; pointer-events: none; } #auth-gate-overlay.visible { display: block; } body.auth-locked .left-nav, body.auth-locked .right-nav, body.auth-locked .top-bar, body.auth-locked .input-bar, body.auth-locked #chat-window { pointer-events: none; } body.auth-locked .left-nav #login-btn, body.auth-locked .input-bar #user-input, body.auth-locked .input-bar #send-btn { pointer-events: auto; } /* * ComfyUI fullscreen viewer - opened from the admin panel's Image * Servers tab. Sits above absolutely everything (modal panels at 9999, * toasts at 10000) since it's meant to fully take over the screen while * open; the close button/Escape key are the only way out. */ #comfy-fullscreen-overlay { display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 10050; } #comfy-fullscreen-overlay.open { display: block; } #comfy-fullscreen-iframe { width: 100%; height: 100%; border: none; display: block; } #comfy-fullscreen-close-btn { position: fixed; top: 14px; right: 14px; z-index: 10051; background-color: #000; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; } #comfy-fullscreen-close-btn:hover { background-color: var(--renegade-accent); color: #000; } #title-banner { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); font-size: 2.5rem; font-weight: 700; letter-spacing: 4px; color: var(--renegade-accent); text-shadow: 0 0 15px var(--renegade-accent), 0 0 30px #000; z-index: 10; white-space: nowrap; } .top-bar { position: fixed; top: 120px; left: 50%; transform: translateX(-50%); width: 60%; height: 40px; z-index: 15; display: flex; justify-content: flex-end; align-items: center; } #chat-search-btn { width: 40px !important; height: 30px !important; flex-shrink: 0; padding: 0; background-color: #000; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 8px; cursor: pointer; font-size: 14px; box-sizing: border-box; } #chat-search-btn:hover { background-color: var(--renegade-accent); color: #000; } /* --------------------------------------------- */ /* LEFT NAV */ /* --------------------------------------------- */ .left-nav { position: fixed; top: 180px; left: 4%; display: flex; flex-direction: column; align-items: center; gap: 15px; width: 9%; z-index: 20; } .left-nav > button { width: 130px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; box-sizing: border-box; } .find-bug-severity-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #333; } .find-bug-severity-toggle { padding: 4px 10px; border-radius: 12px; font-size: 11px; cursor: pointer; background: transparent; opacity: 0.4; box-sizing: border-box; } .find-bug-severity-toggle.active { opacity: 1; } .find-bug-severity-critical { border: 1px solid #ff3b3b; color: #ff3b3b; } .find-bug-severity-high { border: 1px solid #ff9d3b; color: #ff9d3b; } .find-bug-severity-medium { border: 1px solid var(--renegade-accent); color: var(--renegade-accent); } .find-bug-severity-low { border: 1px solid #888; color: #999; } .find-bug-issue-group { margin-bottom: 4px; } .find-bug-rescan-btn { display: block; margin-top: 14px; padding: 8px 14px; background: #111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 6px; cursor: pointer; font-size: 12px; } .find-bug-rescan-btn:hover { background: var(--renegade-accent); color: #000; } .find-bug-action-panel { display: flex; flex-direction: column; align-items: center; text-align: center; } .find-bug-action-panel > * { margin-left: auto; margin-right: auto; } .find-bug-code-fix { background: #ff0000 !important; display: flex; align-items: center; gap: 8px; width: 20%; box-sizing: border-box; margin: 8px 0; padding: 8px 12px; background: transparent !important; border: 1px solid #ff0000 !important; border-radius: 6px; color: inherit !important; cursor: pointer; justify-content: center; text-align: center; margin: 8px auto; animation: repairCodePulse 1.5s ease-in-out infinite; } .find-bug-code-fix .code-fix-icon { color: unset !important; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; } .find-bug-code-fix:hover { background: #ff0000 !important; color: #000 !important; border-color: #ff0000 !important; box-shadow: 0 0 15px rgba(255, 0, 0, 0.95), 0 0 30px rgba(255, 0, 0, 0.65), 0 0 45px rgba(255, 0, 0, 0.35) !important; animation: none !important; } .find-bug-code-fix:disabled { opacity: 0.6; cursor: not-allowed; animation: none !important; } .find-bug-fix-card { border: 1px solid var(--renegade-accent); border-radius: 8px; background: #050505; box-shadow: 0 0 8px rgba(var(--renegade-accent-rgb), 0.2); margin: 10px 0; padding: 10px 12px; box-sizing: border-box; text-align: left; } .find-bug-fix-header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--renegade-accent); margin-bottom: 4px; } .find-bug-fix-confidence { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; border: 1px solid var(--renegade-accent); border-radius: 4px; padding: 1px 6px; opacity: 0.85; } .find-bug-fix-location { color: #999; font-family: 'Courier New', monospace; font-size: 0.78rem; margin-bottom: 4px; } .find-bug-fix-reason { color: #ccc; font-size: 0.85rem; margin-bottom: 8px; } .find-bug-explain-fix-btn { display: inline-block; margin-bottom: 8px; padding: 3px 10px; background: transparent; color: var(--renegade-assistant-color); border: 1px solid rgba(143, 220, 255, 0.4); border-radius: 5px; cursor: pointer; font-size: 0.75rem; } .find-bug-explain-fix-btn:hover { border-color: var(--renegade-assistant-color); background: rgba(143, 220, 255, 0.08); } .find-bug-explain-fix-btn:disabled { opacity: 0.5; cursor: not-allowed; } .find-bug-fix-explanation { background: #0a0a0a; border: 1px solid rgba(143, 220, 255, 0.25); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; color: #cde9f7; font-size: 0.82rem; line-height: 1.5; } .find-bug-code-label { color: var(--renegade-accent); font-family: 'Courier New', monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; margin: 6px 0 2px; } .find-bug-code-before { color: #ff5f5f; } .find-bug-code-after { color: var(--renegade-code-color); } .find-bug-confidence-confirm { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; border: 1px dashed var(--renegade-accent); border-radius: 5px; color: var(--renegade-accent); font-size: 0.78rem; cursor: pointer; } .find-bug-confidence-confirm input[type="checkbox"] { accent-color: var(--renegade-accent); cursor: pointer; flex-shrink: 0; } .renegade-modal-panel { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background-color: #000000; border: 1px solid var(--renegade-accent); border-radius: 10px; padding: 18px; width: 280px; box-sizing: border-box; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); } .renegade-modal-panel.open { display: block !important; } .renegade-modal-title { color: var(--renegade-accent); font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 15px; } /* * Settings panel + reasoning panel share the same modal chrome via * .renegade-modal-panel / .renegade-modal-title, so both always match the * active theme's accent color. settings-panel-button mirrors * .account-panel-button so every modal panel's buttons look and behave the * same way as the theme changes. */ #settings-panel { width: 280px; } .settings-panel-buttons { display: flex; flex-direction: column; gap: 10px; } .settings-panel-button { width: 100%; padding: 12px; background-color: #111111; color: var(--renegade-accent); border: 2px solid var(--renegade-accent); border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: bold; text-align: center; box-sizing: border-box; } .settings-panel-button:hover { background-color: #222222; } /* * Console panel - opened via the left-nav's "🖥 Console" button (see * scripts/console-panel.js). A wider, taller variant of the standard * .renegade-modal-panel chrome, sized for a scrollable log rather than a * short list of settings. */ .console-panel { width: 520px; max-width: 90vw; max-height: 70vh; display: none; flex-direction: column; } .console-panel.open { display: flex !important; } .console-panel-toolbar { flex-shrink: 0; display: flex; justify-content: flex-end; margin-bottom: 8px; } .console-panel-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; background-color: #050505; border: 1px solid #333; border-radius: 6px; padding: 8px; font-family: 'Courier New', Consolas, monospace; font-size: 11px; line-height: 1.5; } .console-panel-line { display: flex; gap: 8px; padding: 2px 0; border-bottom: 1px solid #1a1a1a; white-space: pre-wrap; word-break: break-word; } .console-panel-line-time { flex-shrink: 0; color: #666; } .console-panel-line-message { min-width: 0; color: #ccc; } .console-panel-line-warn .console-panel-line-message { color: #e8c14a; } .console-panel-line-error .console-panel-line-message { color: #ff6b6b; } .console-panel-line-info .console-panel-line-message { color: var(--renegade-accent); } .console-panel-empty { padding: 14px 4px; font-size: 12px; color: #999; text-align: center; } /* * Login status - sits above the login button and shows the logged-in * user's avatar + username. Empty/logged-out state collapses to nothing * (no height, no margin) so the buttons below it move up cleanly. */ .login-status { display: flex; flex-direction: column; align-items: center; gap: 6px; max-height: 0; overflow: hidden; margin: 0; opacity: 0; transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease; } .login-status.visible { max-height: 160px; margin: 0 0 10px 0; opacity: 1; } .login-status-avatar-wrap { position: relative; width: 64px; height: 64px; max-width: 120px; max-height: 120px; } .login-status-avatar { width: 100%; height: 100%; max-width: 120px; max-height: 120px; border-radius: 50%; object-fit: cover; border: 2px solid var(--renegade-accent); display: block; background-color: #111111; } .login-status-online-dot { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background-color: #666; border: 2px solid #000; box-sizing: content-box; } .login-status-online-dot.online { background-color: #39ff14; box-shadow: 0 0 4px #39ff14; } .login-status-name { color: var(--renegade-accent); font-size: 12px; font-weight: bold; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .login-status-admin-badge { color: #ffb347; font-size: 10px; font-weight: bold; letter-spacing: 0.5px; margin-top: 2px; } /* * Sized and positioned to exactly match #chat-area's on-screen box, same * as .image-panel below - both panels now occupy the same footprint. * The body underneath the title is laid out as a left nav + right * content column, mirroring index.html's own left-nav + #chat-area * shell (a fixed-width vertical button rail next to the main content * area) rather than one long scrolling stack of sections. */ .admin-panel { top: 20vh; bottom: 13vh; left: 14vw; right: 14vw; transform: none; width: auto; height: auto; max-width: none; max-height: none; overflow: hidden; display: none; } .admin-panel.open { display: flex !important; flex-direction: column; } .admin-panel .renegade-modal-title { flex-shrink: 0; } .admin-panel-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 16px; } .admin-nav { flex: 0 0 170px; display: flex; flex-direction: column; gap: 8px; padding-right: 14px; border-right: 1px solid #333; overflow-y: auto; } .admin-nav-tab { width: 100%; text-align: left; padding: 8px 10px; background: none; border: 1px solid #444; color: #ccc; border-radius: 6px; cursor: pointer; font-size: 12px; } .admin-nav-tab:hover { border-color: var(--renegade-accent); color: var(--renegade-accent); } .admin-nav-tab.active { background-color: rgba(var(--renegade-accent-rgb), 0.12); border-color: var(--renegade-accent); color: var(--renegade-accent); font-weight: bold; } .admin-content { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding-right: 4px; } /* * AI Servers, Image Servers, and Users wrap their content in this (see * admin.js's wrapNarrow()) instead of letting it stretch to the full * width of .admin-content the way Services' cards do - keeps their * server-bar/list layouts closer to the width they were designed at. */ .admin-content-narrow { width: 25%; } .admin-panel .renegade-modal-close-button { flex-shrink: 0; width: 120px; height: 30px; margin: 10px auto 0 auto; padding: 0; } .admin-section { border-top: 1px solid #333; padding-top: 14px; margin-top: 14px; } .admin-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; } .admin-section-title { color: var(--renegade-accent); font-size: 14px; font-weight: bold; margin-bottom: 10px; } .admin-server-bar { background-color: #0d0d0d; border: 1px solid #333; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .admin-server-heading { color: var(--renegade-accent); font-size: 13px; font-weight: bold; margin-bottom: 6px; } .admin-user-list { display: flex; flex-direction: column; gap: 8px; color: #999; font-size: 12px; } .admin-user-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #444; border-radius: 6px; padding: 8px 10px; background-color: #111111; } .admin-user-meta { min-width: 0; flex: 1; } .admin-user-name { color: var(--renegade-accent); font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-user-detail { color: #999; font-size: 11px; margin-top: 2px; text-transform: capitalize; } .admin-user-actions .account-panel-button { font-size: 11px; padding: 6px 10px; width: auto; } .admin-user-actions .account-panel-button:disabled { opacity: 0.4; cursor: not-allowed; } .admin-service-refresh-row { display: flex; justify-content: flex-end; margin-bottom: 10px; } .admin-service-refresh-row .account-panel-button { font-size: 11px; padding: 6px 10px; width: auto; } .admin-service-bulk-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #333; } .admin-service-bulk-row .account-panel-button { font-size: 11px; padding: 6px 10px; width: auto; } .admin-service-bulk-row .account-panel-button:disabled { opacity: 0.4; cursor: not-allowed; } .admin-service-list { display: flex; flex-direction: column; gap: 10px; } .admin-service-card { background-color: #0d0d0d; border: 1px solid #333; border-radius: 8px; padding: 12px; } .admin-service-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .admin-service-name { color: var(--renegade-accent); font-size: 13px; font-weight: bold; } .admin-service-status { font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 10px; white-space: nowrap; } .admin-service-status.running { color: #7cfc7c; background-color: rgba(124, 252, 124, 0.12); border: 1px solid rgba(124, 252, 124, 0.4); } .admin-service-status.stopped { color: #ff6b6b; background-color: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.4); } .admin-service-status.unknown { color: #999; background-color: rgba(153, 153, 153, 0.12); border: 1px solid rgba(153, 153, 153, 0.4); } .admin-service-detail { color: #999; font-size: 11px; margin-bottom: 8px; } .admin-service-actions { display: flex; gap: 8px; flex-wrap: wrap; } .admin-service-actions .account-panel-button { font-size: 11px; padding: 6px 10px; width: auto; } .admin-service-actions .account-panel-button:disabled { opacity: 0.4; cursor: not-allowed; } .admin-service-note { color: #777; font-size: 11px; margin-top: 4px; font-style: italic; } .admin-dependency-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .admin-dependency-item { font-size: 10px; padding: 2px 8px; border-radius: 10px; border: 1px solid #444; color: #999; } .admin-dependency-item.ok { color: #7cfc7c; border-color: rgba(124, 252, 124, 0.4); } .admin-dependency-item.missing { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.4); } /* * Renegade DNS Updater tab * ------------------------------------------------------------------- * .admin-server-row / .admin-server-hint / .account-input are only ever * used by admin.js's buildDnsSection() - they had no rules at all before * this block, so the tab was rendering with bare browser-default * inputs/selects and no card, spacing, or theme colors. Styled here to * match the rest of the admin panel (.admin-service-card, * .admin-service-status, .login-input) instead of introducing a new * visual language. */ .admin-dns-form { width: 55%; min-width: 340px; max-width: 620px; } .admin-dns-status-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; background-color: #0d0d0d; border: 1px solid #333; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; } .admin-dns-status-left { display: flex; align-items: center; gap: 8px; min-width: 0; } .admin-dns-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: bold; letter-spacing: 0.3px; padding: 3px 10px 3px 8px; border-radius: 10px; white-space: nowrap; } .admin-dns-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: currentColor; } .admin-dns-status-pill.online { color: #39ff14; background-color: rgba(57, 255, 20, 0.1); border: 1px solid rgba(57, 255, 20, 0.4); } .admin-dns-status-pill.online::before { box-shadow: 0 0 5px #39ff14; } .admin-dns-status-pill.offline { color: #ff6b6b; background-color: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.4); } .admin-dns-status-pill.checking { color: #999; background-color: rgba(153, 153, 153, 0.12); border: 1px solid rgba(153, 153, 153, 0.4); } .admin-dns-ip { font-size: 12px; color: #999; font-family: "Courier New", Courier, monospace; white-space: nowrap; } .admin-dns-ip-value { font-weight: bold; color: #ccc; } .admin-dns-ip-value.live { color: #39ff14; text-shadow: 0 0 6px rgba(57, 255, 20, 0.45); } .admin-dns-ip-value.error { color: #ff6b6b; } .admin-dns-message { font-size: 11px; color: #999; margin-bottom: 14px; padding: 0 2px; } .admin-dns-card { background-color: #0d0d0d; border: 1px solid #333; border-radius: 8px; padding: 14px; margin-bottom: 12px; } .admin-dns-checkbox-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: #ccc; margin-top: 2px; } .admin-dns-checkbox-row input[type="checkbox"] { accent-color: var(--renegade-accent); width: 14px; height: 14px; cursor: pointer; } .admin-dns-actions { justify-content: flex-end; } .admin-server-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .admin-server-row:last-child { margin-bottom: 0; } .admin-server-row label { font-size: 10px; font-weight: bold; color: #999; text-transform: uppercase; letter-spacing: 0.4px; } .admin-server-hint { font-size: 11px; color: #999; } .account-input { width: 100%; padding: 9px 10px; background-color: #111111; color: #eee; border: 1px solid #444; border-radius: 6px; font-size: 13px; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } select.account-input { cursor: pointer; } .account-input:focus { outline: none; border-color: var(--renegade-accent); box-shadow: 0 0 0 2px rgba(var(--renegade-accent-rgb), 0.15); } .account-input:disabled { opacity: 0.6; } /* * Sized and positioned to exactly match #chat-area's on-screen box * (top:20vh / bottom:13vh / left:14vw / right:14vw) instead of the * generic centered-by-transform sizing every other modal uses, per an * explicit request that the Image panel occupy the same footprint as * the chat area. .admin-panel mirrors this identically below. */ .image-panel { top: 20vh; bottom: 13vh; left: 14vw; right: 14vw; transform: none; width: auto; height: auto; max-width: none; max-height: none; overflow: hidden; display: none; } .image-panel.open { display: flex !important; flex-direction: column; } .image-panel .renegade-modal-title { flex-shrink: 0; } .image-panel .renegade-modal-close-button { flex-shrink: 0; width: 120px; height: 30px; margin: 10px auto 0 auto; padding: 0; } /* * Coding and Video panels share the same admin-panel-style layout and * footprint as .admin-panel/.image-panel above (nav rail + content, * sized to match #chat-area) - see workspace-panels.js (Coding) and * comfyui.js's buildVideoPanel (Video). */ .coding-panel, .video-panel { top: 20vh; bottom: 13vh; left: 14vw; right: 14vw; transform: none; width: auto; height: auto; max-width: none; max-height: none; overflow: hidden; display: none; } .coding-panel.open, .video-panel.open { display: flex !important; flex-direction: column; } .coding-panel .renegade-modal-title, .video-panel .renegade-modal-title { flex-shrink: 0; } .coding-panel .renegade-modal-close-button, .video-panel .renegade-modal-close-button { flex-shrink: 0; width: 120px; height: 30px; margin: 10px auto 0 auto; padding: 0; } .admin-nav-tab-static { cursor: default; } /* * Lets #reasoning-controls-panel (built by reasoning-controls.js as a * floating modal) be reparented into the Admin panel's "Reasoning" tab * (see buildImageServersSection()/detachEmbeddedReasoningPanel() in * admin.js) and lay out inline there instead of as a centered overlay. * !important is needed to beat both the panel's own inline styles (set * directly on the element by reasoning-controls.js) and its injected * #reasoning-controls-panel / .open stylesheet rules. */ .reasoning-panel-embedded { display: block !important; position: static !important; top: auto !important; left: auto !important; transform: none !important; z-index: auto !important; width: 100% !important; max-width: 480px !important; max-height: none !important; margin: 0 auto !important; box-shadow: none !important; border: none !important; padding: 0 !important; } .reasoning-panel-embedded #reasoning-close-btn { display: none !important; } /* * Coding panel's own chat + editor (see scripts/coding-chat.js) - replaces * the old static "pick a tool on the left" hint text that used to sit in * .admin-content. Two columns: a self-contained chat (its own log + input, * entirely separate from #chat-area/#user-input) on the left, and a * persistent, directly-editable code panel on the right that the chat's * code blocks can be sent to with one click. Neither column ever calls * closeCodingPanel() or touches the main input bar, so using either one * never closes or navigates away from this panel. */ .coding-chat-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .coding-chat-layout { display: flex; gap: 16px; flex: 1 1 auto; min-height: 0; } .coding-chat-column { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .coding-chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid #333; border-radius: 8px; background: #050505; padding: 10px; margin-top: 8px; } .coding-chat-log .chat-message { margin-bottom: 12px; } .coding-chat-empty { color: #666; font-size: 12px; text-align: center; margin-top: 20px; } .coding-chat-error { color: #ff6b6b; } .coding-chat-input-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; } .coding-chat-input { flex: 1 1 auto; min-width: 0; height: 34px; max-height: 140px; background: #000; border: 1px solid var(--renegade-accent); color: var(--renegade-accent); padding: 7px 9px; border-radius: 8px; outline: none; box-sizing: border-box; resize: none; overflow-y: auto; font-family: inherit; font-size: 13px; line-height: 1.3; white-space: pre-wrap; } .coding-chat-input:focus { box-shadow: 0 0 8px rgba(var(--renegade-accent-rgb), 0.35); } .coding-chat-input:disabled, .coding-chat-send-btn:disabled { opacity: 0.45; cursor: not-allowed; } .coding-chat-send-btn { flex-shrink: 0; width: auto; height: 34px; padding: 0 16px; margin: 0; } .coding-editor-column { border-left: 1px solid #333; padding-left: 16px; } .coding-editor-toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .coding-editor-filename { flex: 1 1 auto; min-width: 0; background: #111; color: #eee; border: 1px solid #444; border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: 'Courier New', monospace; box-sizing: border-box; } .coding-editor-textarea-large { flex: 1 1 auto; height: auto; min-height: 0; margin-bottom: 0; } .coding-chat-insert-btn { background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 5px; cursor: pointer; font-size: 11px; padding: 3px 8px; } .coding-chat-insert-btn:hover { background-color: #222222; } .coding-editor-toolbar-status { color: var(--renegade-accent); font-size: 11px; } @media (max-width: 900px) { .coding-chat-layout { flex-direction: column; } .coding-editor-column { border-left: none; border-top: 1px solid #333; padding-left: 0; padding-top: 16px; } } .image-generate-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .image-status { flex-shrink: 0; font-size: 12px; margin: 6px 0 10px; min-height: 14px; text-align: center; } .image-status.success { color: #39ff14; } .image-status.error { color: #ff6b6b; } .image-action-row { flex-shrink: 0; display: flex; justify-content: center; gap: 12px; margin-bottom: 12px; } .image-action-row .image-generate-btn, .image-action-row .image-download-link { width: 120px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0; font-size: 12px; box-sizing: border-box; } .image-prompt-fields { flex-shrink: 0; display: flex; flex-direction: column; } .image-prompt-input { min-height: 70px; margin-bottom: 8px; } /* * Video panel's action column - Generate / Workflows / Close, stacked * together in the panel's existing .admin-nav rail instead of Generate * sitting in a row above the prompt box and Close sitting alone at the * bottom of the whole panel. See comfyui.js's buildGenerateVideoSection. */ .video-action-column { display: flex; flex-direction: column; gap: 8px; } .video-nav-generate-btn { background-color: rgba(var(--renegade-accent-rgb), 0.15); border-color: var(--renegade-accent); color: var(--renegade-accent); font-weight: bold; text-align: center; } .video-nav-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* * Only shown while a generation is in flight (see buildGenerateVideoSection's * stopButton.style.display toggling) - styled as a clear "stop" action so * it doesn't get mistaken for another neutral nav button. */ .video-nav-stop-btn { background-color: rgba(255, 107, 107, 0.15); border-color: #ff6b6b; color: #ff6b6b; font-weight: bold; text-align: center; } .video-nav-stop-btn:hover { background-color: rgba(255, 107, 107, 0.28); } .video-nav-stop-btn:disabled { opacity: 0.6; cursor: not-allowed; } .video-nav-workflows-btn { text-align: center; } .video-nav-close-btn { text-align: center; margin-top: auto; border-color: #555; color: #aaa; } .video-nav-close-btn:hover { border-color: #ff6b6b; color: #ff6b6b; } .video-selected-workflow-label { flex-shrink: 0; font-size: 11px; color: #999; text-align: center; margin-bottom: 8px; } .video-reference-slots { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 12px; justify-content: center; } .video-reference-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 110px; } .video-reference-slot .api-panel-label { font-size: 10px; text-align: center; } .video-reference-preview { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; border: 1px solid #444; } /* * Shared "themed choose-file button, no filename text" treatment for * every visible native file input in the Video panel/editor (reference * image slots, the Edit panel's audio track picker). color: transparent * hides the browser's own "No file chosen" text, and the fixed width * plus overflow: hidden keep that (still-present, just invisible) text * from taking up any layout space next to the button. */ .video-file-input { color: transparent; width: 92px; overflow: hidden; font-size: 11px; } .video-file-input::file-selector-button, .video-file-input::-webkit-file-upload-button { background-color: rgba(var(--renegade-accent-rgb), 0.15); border: 1px solid var(--renegade-accent); color: var(--renegade-accent); border-radius: 6px; padding: 6px 10px; font-size: 11px; cursor: pointer; } .video-file-input::file-selector-button:hover, .video-file-input::-webkit-file-upload-button:hover { background-color: rgba(var(--renegade-accent-rgb), 0.28); } .video-reference-file-input { width: 100%; } .video-download-row { margin-bottom: 8px; } /* * Percent-complete status, shown directly above the prompt field while a * generation is running (see buildGenerateVideoSection's progressEl). */ .video-generate-progress { flex-shrink: 0; font-size: 12px; color: var(--renegade-accent); text-align: center; margin-bottom: 8px; } .video-duration-label { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .video-duration-input { width: 60px; } /* * The Workflows picker itself is a small modal spawned on top of the * Video panel (see comfyui.js's openWorkflowPickerPanel) - reuses * .renegade-modal-panel chrome but sized for a short listbox rather than * the default 280px settings-style panel, and sits above .video-panel's * own z-index (9999) since it's opened from within it. */ .video-workflow-picker-panel { width: 360px; max-width: 90vw; z-index: 10000; display: none; flex-direction: column; } .video-workflow-picker-panel.open { display: flex !important; } .video-workflow-listbox { max-height: 40vh; overflow-y: auto; margin-bottom: 12px; display: flex; flex-direction: column; } .video-workflow-item { width: 100%; box-sizing: border-box; display: flex; align-items: center; padding: 8px 6px; gap: 6px; border-bottom: 1px solid #333; font-size: 0.8rem; cursor: pointer; transition: background-color 0.2s ease; } .video-workflow-item:last-child { border-bottom: none; } .video-workflow-item:hover, .video-workflow-item:focus { background-color: #222; outline: none; } .video-workflow-item-left { display: flex; align-items: center; min-width: 0; flex: 1; } .video-workflow-item-icon { margin-right: 6px; flex-shrink: 0; } .video-workflow-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .video-workflow-listbox-empty { padding: 14px 4px; font-size: 12px; color: #999; text-align: center; } /* * Video Edit panel - opened from the Video panel's "✂️ Edit" nav button * (same overlay pattern as the Workflows picker, but a full-size panel * since it holds a whole timeline). See comfyui.js's * openVideoEditPanel/buildEditVideoSection/runVideoExport. */ .video-edit-panel { top: 20vh; bottom: 13vh; left: 10vw; right: 10vw; transform: none; width: auto; height: auto; max-width: none; max-height: none; overflow: hidden; z-index: 10000; display: none; flex-direction: column; } .video-edit-panel.open { display: flex !important; } .video-edit-panel .renegade-modal-title { flex-shrink: 0; } .video-edit-panel .renegade-modal-close-button { flex-shrink: 0; width: 140px; height: 30px; margin: 10px auto 0 auto; padding: 0; } .video-edit-section { display: flex; flex-direction: column; gap: 14px; } .video-edit-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .video-edit-toolbar-hint { margin: 0; } .video-edit-timeline { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; } .video-edit-timeline-empty { padding: 20px; text-align: center; color: #999; font-size: 13px; border: 1px dashed #444; border-radius: 8px; } .video-edit-clip-row { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #333; border-radius: 8px; padding: 10px; } .video-edit-clip-preview { width: 160px; height: 90px; flex-shrink: 0; background: #000; border-radius: 6px; object-fit: cover; } .video-edit-clip-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .video-edit-clip-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .video-edit-clip-index { flex-shrink: 0; color: var(--renegade-accent); font-weight: bold; font-size: 12px; } .video-edit-clip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #ccc; } .video-edit-trim-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .video-edit-trim-row .api-panel-label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; } .video-edit-trim-input { width: 70px; } .video-edit-duration { font-size: 11px; color: #999; } .video-edit-transition-row { display: flex; align-items: center; gap: 8px; } .video-edit-transition-row .api-panel-label { font-size: 11px; margin: 0; } .video-edit-transition-select { font-size: 12px; } .video-edit-clip-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } .video-edit-audio-row { flex-shrink: 0; border-top: 1px solid #333; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .video-edit-audio-label { font-size: 12px; color: #999; } .video-edit-audio-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .video-edit-audio-name { font-size: 12px; color: #ccc; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .video-edit-audio-controls .api-panel-label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; } .video-edit-export-row { flex-shrink: 0; border-top: 1px solid #333; padding-top: 12px; } .video-edit-export-status { margin-bottom: 4px; } .video-edit-result-area { flex-shrink: 0; } .image-result-area { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-bottom: 10px; overflow: hidden; } .image-result-figure { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center; } .image-result-img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--renegade-accent); display: block; margin: 0 auto; object-fit: contain; } .image-download-link { display: inline-block; width: auto; text-decoration: none; padding: 6px 14px; } .chat-inline-image { display: block; max-width: min(420px, 100%); border-radius: 8px; border: 1px solid var(--renegade-accent); margin: 6px 0; } .theme-panel { width: 300px; } .theme-swatch-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .theme-swatch { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #111; color: #ccc; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-size: 13px; text-align: left; } .theme-swatch:hover { border-color: var(--renegade-accent); } .theme-swatch.selected { border-color: var(--renegade-accent); background: rgba(var(--renegade-accent-rgb), 0.1); color: var(--renegade-accent); } .theme-swatch-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); } .data-panel { width: 360px; } .data-panel-hint { color: #999; font-size: 11px; margin-bottom: 12px; line-height: 1.4; } .data-panel-textarea { width: 100%; height: 160px; background: #000; color: var(--renegade-accent); border: 1px solid #444; border-radius: 6px; padding: 8px; box-sizing: border-box; font-family: 'Courier New', monospace; font-size: 11px; resize: vertical; margin-bottom: 8px; } .data-panel-status { font-size: 11px; margin-bottom: 10px; min-height: 14px; } .data-panel-status.success { color: #39ff14; } .data-panel-status.error { color: #ff6b6b; } .data-panel-button-row { display: flex; gap: 8px; margin-bottom: 10px; } .data-panel-export-btn, .data-panel-import-btn { flex: 1; padding: 8px; background: #111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 5px; cursor: pointer; font-size: 12px; box-sizing: border-box; } .data-panel-export-btn:hover, .data-panel-import-btn:hover { background: var(--renegade-accent); color: #000; } .data-panel-storage-section { border-top: 1px solid #333; padding-top: 12px; margin-top: 4px; } .data-panel-storage-heading { color: var(--renegade-accent); font-size: 13px; font-weight: bold; margin-bottom: 6px; } .data-panel-clear-history-btn { width: 100%; padding: 8px; background: #1a0000; color: #ff6b6b; border: 1px solid #ff6b6b; border-radius: 5px; cursor: pointer; font-size: 12px; box-sizing: border-box; } .data-panel-clear-history-btn:hover { background: #ff6b6b; color: #000; } .api-panel { width: 380px; } .api-panel-hint { color: #999; font-size: 11px; margin-bottom: 12px; line-height: 1.4; } .api-panel-label { display: block; color: var(--renegade-accent); font-size: 11px; font-weight: bold; margin-bottom: 4px; } .api-panel-input { margin-bottom: 12px; } .api-panel-status { font-size: 11px; margin-bottom: 10px; min-height: 14px; } .api-panel-status.success { color: #39ff14; } .api-panel-status.error { color: #ff6b6b; } .api-panel-button-row { display: flex; gap: 8px; margin-bottom: 10px; } .api-panel-button-row .account-panel-button { flex: 1; font-size: 11px; } #login-form { display: flex; flex-direction: column; gap: 10px; } .login-input { width: 100%; padding: 10px; background-color: #111111; color: #eee; border: 2px solid var(--renegade-accent); border-radius: 6px; font-size: 14px; box-sizing: border-box; } .login-input:focus { outline: none; border-color: #ffea9e; } .login-input:disabled { opacity: 0.6; } .login-password-row { position: relative; display: flex; } .login-password-row .login-password-input { padding-right: 56px; } .login-password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); background: none; border: none; color: var(--renegade-accent); font-size: 11px; font-weight: bold; letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer; padding: 4px 8px; border-radius: 4px; } .login-password-toggle:hover { background-color: rgba(var(--renegade-accent-rgb), 0.12); } .login-form-error { color: #ff6b6b; font-size: 12px; text-align: center; } .login-submit-button { width: 100%; padding: 12px; background-color: #111111; color: var(--renegade-accent); border: 2px solid var(--renegade-accent); border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: bold; box-sizing: border-box; } .login-submit-button:hover:not(:disabled) { background-color: #222222; } .login-submit-button:disabled { opacity: 0.6; cursor: default; } .login-toggle-button { width: 100%; background: none; border: none; color: var(--renegade-accent); text-decoration: underline; font-size: 12px; cursor: pointer; margin-top: 10px; padding: 4px; } .login-oauth-divider { display: flex; align-items: center; gap: 10px; color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 8px 0; } .login-oauth-divider::before, .login-oauth-divider::after { content: ""; flex: 1; height: 1px; background-color: #333; } .login-oauth-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; box-sizing: border-box; margin-bottom: 8px; border: 1px solid #444; } .login-oauth-button span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; font-weight: bold; flex-shrink: 0; } /* * Google/Facebook buttons intentionally use their own recognizable brand * colors rather than the app's accent theme - these are third-party * sign-in buttons, and keeping their familiar look is what makes users * trust and recognize them, the same reasoning every app that offers * federated login follows. */ .login-google-button { background-color: #ffffff; color: #3c4043; } .login-google-button span { background-color: #ffffff; color: #4285f4; border: 1px solid #dadce0; } .login-google-button:hover { background-color: #f7f7f7; } .login-facebook-button { background-color: #1877f2; color: #ffffff; border-color: #1877f2; } .login-facebook-button span { background-color: #ffffff; color: #1877f2; } .login-facebook-button:hover { background-color: #166fe0; } .renegade-modal-close-button { width: 100%; padding: 8px; margin-top: 8px; background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 5px; cursor: pointer; font-size: 12px; box-sizing: border-box; } .renegade-modal-close-button:hover { background-color: #222222; } .account-panel-buttons { display: flex; flex-direction: column; gap: 8px; } .account-panel-button { width: 100%; padding: 10px 12px; background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 6px; cursor: pointer; font-size: 13px; text-align: center; box-sizing: border-box; } .account-panel-button:hover { background-color: #222222; } .avatar-panel-preview { display: block; width: 120px; height: 120px; max-width: 120px; max-height: 120px; object-fit: cover; border-radius: 50%; border: 2px solid var(--renegade-accent); margin: 0 auto 12px auto; background-color: #111111; } .avatar-panel-hint { color: #999; font-size: 11px; text-align: center; margin-bottom: 10px; } .avatar-panel-status { color: var(--renegade-accent); font-size: 12px; text-align: center; min-height: 16px; margin-bottom: 8px; } .project-panel { width: 460px; max-width: 92vw; } .project-panel-hint { color: #999; font-size: 11px; text-align: center; margin-bottom: 10px; } .project-panel-usage { color: #777; font-size: 10px; text-align: center; margin-bottom: 10px; } .project-panel-usage-warning { color: #ff6b6b; font-weight: bold; } .project-panel-toolbar { display: flex; gap: 8px; margin-bottom: 10px; } .project-panel-toolbar .account-panel-button { flex: 1; } .project-panel-empty { color: #999; font-size: 13px; text-align: center; padding: 16px 0; } .project-file-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin-bottom: 10px; } .project-file-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #444; border-radius: 6px; padding: 8px 10px; background-color: #111111; } .project-file-meta { min-width: 0; flex: 1; } .project-file-name { color: var(--renegade-accent); font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-file-detail { color: #999; font-size: 11px; margin-top: 2px; } .project-file-actions { display: flex; gap: 6px; flex-shrink: 0; } .project-file-action-btn { background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 5px; width: 30px; height: 30px; cursor: pointer; font-size: 13px; } .project-file-action-btn:hover { background-color: #222222; } .project-file-delete-btn { color: #ff6b6b; border-color: #663333; } .project-file-delete-btn:hover { background-color: #221111; border-color: #ff6b6b; } .project-editor-panel { width: 640px; max-width: 92vw; } .project-editor-textarea { width: 100%; height: 40vh; box-sizing: border-box; background-color: #0a0a0a; color: var(--renegade-code-color); border: 1px solid #444; border-radius: 6px; padding: 10px; font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.5; resize: vertical; margin-bottom: 8px; } .project-editor-status { color: var(--renegade-accent); font-size: 12px; min-height: 16px; margin-bottom: 8px; text-align: center; } .project-editor-button-row { display: flex; gap: 8px; margin-bottom: 10px; } .project-editor-button-row .account-panel-button { flex: 1; } .project-editor-divider { color: var(--renegade-accent); font-size: 12px; font-weight: bold; text-align: center; border-top: 1px solid #333; padding-top: 10px; margin-bottom: 8px; } .project-editor-instruction { width: 100%; box-sizing: border-box; background-color: #111111; color: #eee; border: 1px solid var(--renegade-accent); border-radius: 6px; padding: 8px 10px; font-size: 13px; min-height: 60px; resize: vertical; margin-bottom: 8px; } .file-history-panel { width: 640px; max-width: 92vw; } .file-history-body { display: flex; gap: 10px; max-height: 55vh; } .file-history-list { display: flex; flex-direction: column; gap: 4px; width: 180px; flex-shrink: 0; overflow-y: auto; } .file-history-entry { text-align: left; background-color: #111111; color: #ccc; border: 1px solid #444; border-radius: 5px; padding: 6px 8px; cursor: pointer; font-size: 12px; } .file-history-entry:hover { background-color: #1a1a1a; border-color: var(--renegade-accent); } .file-history-entry.selected { border-color: var(--renegade-accent); background-color: #1a1a1a; color: var(--renegade-accent); } .file-history-entry-note { font-weight: bold; margin-bottom: 2px; white-space: normal; word-break: break-word; } .file-history-entry-time { font-size: 10px; color: #888; } .file-history-diff-area { flex: 1; overflow: auto; min-width: 0; } .scan-history-panel { width: 460px; max-width: 92vw; } .scan-history-empty { color: #999; font-size: 13px; text-align: center; padding: 10px 0; } .scan-history-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin-bottom: 10px; } .scan-history-entry { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #444; border-radius: 6px; padding: 8px 10px; background-color: #111111; } .scan-history-entry-meta { min-width: 0; flex: 1; } .scan-history-entry-time { color: var(--renegade-accent); font-size: 12px; font-weight: bold; } .scan-history-entry-files { color: #999; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0; } .scan-history-entry-counts { color: #ccc; font-size: 11px; } .scan-history-view-btn { flex-shrink: 0; background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 5px; padding: 6px 10px; font-size: 11px; cursor: pointer; } .scan-history-view-btn:hover { background-color: #222222; } .scan-history-clear-btn { width: 100%; margin-top: 4px; background-color: #111111; color: #ff6b6b; border: 1px solid #663333; border-radius: 5px; padding: 7px; font-size: 12px; cursor: pointer; } .scan-history-clear-btn:hover { background-color: #221111; border-color: #ff6b6b; } .find-bug-diff { border: 1px solid #333; border-radius: 6px; overflow: hidden; margin-top: 4px; } .find-bug-diff-pre { margin: 0; padding: 6px 0; background: #020202; font-family: 'Courier New', Consolas, monospace; font-size: 0.85rem; line-height: 1.5; white-space: pre; overflow-x: auto; tab-size: 4; } .find-bug-diff-line { padding: 0 10px; white-space: pre; } .find-bug-diff-context { color: #888; } .find-bug-diff-remove { color: #ff8080; background: rgba(255, 0, 0, 0.08); } .find-bug-diff-add { color: var(--renegade-code-color); background: rgba(57, 255, 20, 0.08); } .find-bug-diff-char-remove { background: rgba(255, 0, 0, 0.45); color: #fff; border-radius: 2px; } .find-bug-diff-char-add { background: rgba(57, 255, 20, 0.45); color: #000; border-radius: 2px; } .find-bug-post-apply-panel { display: none; gap: 10px; } .find-bug-post-apply-panel.is-visible { display: flex; } @keyframes repairCodePulse { 0%, 100% { border-color: var(--renegade-accent); box-shadow: 0 0 3px rgba(255, 0, 0, 0.2), 0 0 6px rgba(255, 0, 0, 0.1); } 50% { border-color: #ff0000; box-shadow: 0 0 10px rgba(255, 0, 0, 0.85), 0 0 22px rgba(255, 0, 0, 0.55), 0 0 35px rgba(255, 0, 0, 0.3); } } .file-panel-title { text-align: center; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid var(--renegade-accent); padding-bottom: 4px; padding-top: 6px; margin-bottom: 6px; width: 120% !important; } #files-section { margin-top: 15vh; width: 120% !important; } #files-section > .file-panel-title { width: 100% !important; } #files-section .file-drop-zone, #files-section .file-list { width: 100% !important; } #files-section .file-item { width: 100% !important; } #history-list { width: 120% !important; } .right-nav > .file-panel-title:first-child { width: 120% !important; } .history-listbox { width: 120% !important; overflow-y: visible; max-height: none; margin-top: 8px; background: transparent !important; border: none !important; padding: 8px; box-sizing: border-box; } .history-item { width: 100% !important; display: flex; align-items: center; justify-content: space-between; padding: 5px 6px; gap: 6px; background: transparent !important; border-bottom: 1px solid #333; font-size: 0.8rem; cursor: pointer; transition: all 0.25s ease; } .history-item:hover { background-color: #222; cursor: pointer; } .history-item-left { display: flex; align-items: center; min-width: 0; flex: 1; } .history-item-icon { margin-right: 6px; flex-shrink: 0; } .history-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-item-actions { background: transparent !important; display: flex; gap: 4px; flex-shrink: 0; } .history-item-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--renegade-accent); font-size: 0.8rem; font-weight: bold; } .history-item-summary { display: block; min-width: 0; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9b9b9b; font-family: Arial, sans-serif; font-size: 0.68rem; } .history-empty { padding: 10px; text-align: center; font-size: 0.8rem; opacity: 0.7; } .file-item-btn { width: auto; background: none; border: 1px solid var(--renegade-accent); color: var(--renegade-accent); padding: 2px 6px; font-size: 0.7rem; line-height: 1; border-radius: 6px; cursor: pointer; flex-shrink: 0; } .file-item-btn:hover { background: var(--renegade-accent); color: #000; } /* --------------------------------------------- */ /* RIGHT NAV */ /* --------------------------------------------- */ .right-nav { position: fixed; top: 180px; right: 4%; display: flex; flex-direction: column; align-items: center; gap: 15px; width: 9%; z-index: 20; } .right-nav > button { width: 110px; box-sizing: border-box; } .right-nav #upload-btn { width: 110px !important; height: 30px !important; flex-shrink: 0; /* * Keep the right-nav itself at top: 200px. * Only move the Upload button down inside it. * Because it is absolute, the History list cannot push it down. */ position: absolute; top: calc(50vh - 200px); left: 50%; transform: translateX(-50%); } .right-nav #upload-btn ~ .file-panel-title { /* * This targets only the Files title. * The History title remains completely untouched. */ position: absolute; top: calc(50vh - 155px); left: 0; margin-top: 0; margin-bottom: 0; } .right-nav #upload-btn ~ .file-drop-zone { position: absolute; top: calc(50vh - 110px); left: 0; margin-top: 0; } .right-nav #upload-btn ~ .file-list { position: absolute; top: calc(50vh - 50px); left: 0; margin-top: 0; } .right-nav .file-panel-title, .right-nav .file-drop-zone, .right-nav .file-list { width: 100%; } .file-drop-zone { border: 1px dashed var(--renegade-accent); border-radius: 8px; padding: 10px; font-size: 0.8rem; text-align: center; color: var(--renegade-accent); transition: 0.25s ease; } .file-drop-zone.drag-over { background-color: rgba(var(--renegade-accent-rgb), 0.1); box-shadow: 0 0 10px var(--renegade-accent); } .file-list { max-height: 400px; overflow-y: visible; margin-top: 8px; } .file-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 6px; border-bottom: 1px solid #333; font-size: 0.8rem; gap: 6px; } .file-item-left { display: flex; align-items: center; min-width: 0; flex: 1; } .file-item-icon { margin-right: 6px; flex-shrink: 0; } .file-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-item-actions { display: flex; gap: 4px; flex-shrink: 0; } .file-item-checkbox { margin-right: 8px; flex-shrink: 0; accent-color: var(--renegade-accent); cursor: pointer; } .file-select-all-row { display: flex; align-items: center; padding: 5px 6px; border-bottom: 1px solid var(--renegade-accent); font-size: 0.75rem; color: var(--renegade-accent); opacity: 0.9; } .file-select-all-label { text-transform: uppercase; letter-spacing: 0.5px; } .file-severity-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px; border-bottom: 1px solid #333; font-size: 0.72rem; color: #999; } .file-severity-filter-select { background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 4px; font-size: 0.72rem; padding: 2px 4px; cursor: pointer; } .file-severity-badge { margin-left: 4px; flex-shrink: 0; font-size: 0.85em; } .history-search-input { width: 100%; box-sizing: border-box; margin: 4px 0 8px; padding: 6px 8px; background-color: #111111; color: #eee; border: 1px solid var(--renegade-accent); border-radius: 5px; font-size: 0.78rem; } .history-search-input:focus { outline: none; border-color: #ffea9e; } .history-search-input::placeholder { color: #777; } .history-io-row { display: flex; gap: 6px; margin-bottom: 8px; } .history-io-btn { flex: 1; background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 5px; padding: 5px 4px; font-size: 0.72rem; cursor: pointer; } .history-io-btn:hover { background-color: #222222; } .conversations-panel { width: 320px; max-width: 92vw; } .conversations-panel .history-search-input { margin-top: 0; } .conversations-panel-hint { color: #888; font-size: 0.7rem; line-height: 1.4; margin: 10px 0; text-align: center; } .undo-toast { position: fixed; left: 50%; top: 25%; transform: translate(-50%, 20px); z-index: 10000; display: flex; align-items: center; gap: 14px; background-color: #000000; border: 2px solid var(--renegade-accent); border-radius: 8px; padding: 10px 16px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.85); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; max-width: 90vw; } .undo-toast.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .storage-warning-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 10000; max-width: 90vw; background-color: #1a0d0d; color: #ff6b6b; border: 2px solid #ff6b6b; border-radius: 8px; padding: 10px 18px; font-size: 13px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.85); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .storage-warning-toast.visible { opacity: 1; transform: translate(-50%, 0); } .undo-toast-text { color: #eee; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } .undo-toast-btn { flex-shrink: 0; background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 5px; padding: 5px 12px; font-size: 0.78rem; font-weight: bold; cursor: pointer; } .undo-toast-btn:hover { background-color: #222222; } /* --------------------------------------------- */ /* CHAT AREA */ /* --------------------------------------------- */ #chat-area { position: fixed; top: 20vh; bottom: 13vh; left: 14vw; right: 14vw; z-index: 50; min-width: 0; } button { background: none; border: 1px solid var(--renegade-accent); color: var(--renegade-accent); padding: 6px 12px; cursor: pointer; transition: 0.3s; } .chat-search-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 8px; background: #000; border: 1px solid var(--renegade-accent); border-radius: 8px; box-sizing: border-box; } .chat-search-input { flex: 1 1 auto; min-width: 0; background: #000; border: 1px solid #444; color: var(--renegade-accent); padding: 4px 8px; border-radius: 5px; outline: none; font-size: 13px; } .chat-search-input:focus { border-color: var(--renegade-accent); } .chat-search-count { color: #999; font-size: 11px; font-family: 'Courier New', monospace; min-width: 42px; text-align: center; flex-shrink: 0; } .chat-search-nav-btn { width: 26px; height: 26px; padding: 0; background: #111; color: var(--renegade-accent); border: 1px solid #444; border-radius: 5px; cursor: pointer; font-size: 12px; flex-shrink: 0; } .chat-search-nav-btn:hover { background: #222; border-color: var(--renegade-accent); } .chat-message.chat-search-match { outline: 1px dashed rgba(var(--renegade-accent-rgb), 0.5); outline-offset: 4px; border-radius: 8px; } .chat-message.chat-search-active { outline: 2px solid var(--renegade-accent); outline-offset: 4px; border-radius: 8px; } #chat-window { width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; padding: 14px; background-color: rgba(0, 0, 0, 0.6); border-radius: 12px; border: 2px solid var(--renegade-accent); box-shadow: 0 0 15px var(--renegade-accent); } .chat-message { position: relative; margin-bottom: 16px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; } .edit-message-btn { position: absolute; top: 0; right: 0; width: 24px; height: 24px; padding: 0; background: rgba(0, 0, 0, 0.6); color: var(--renegade-accent); border: 1px solid #444; border-radius: 5px; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity 0.15s ease; } .chat-message:hover .edit-message-btn { opacity: 1; } .edit-message-btn:hover { background: #111; border-color: var(--renegade-accent); } .edit-message-textarea { display: block; width: 100%; min-height: 60px; max-height: 320px; background: #000; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 8px; padding: 8px 10px; box-sizing: border-box; font-family: inherit; font-size: inherit; line-height: 1.4; resize: none; overflow-y: auto; outline: none; } .edit-message-actions { display: flex; gap: 8px; margin-top: 6px; } .edit-message-save-btn, .edit-message-cancel-btn { padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 12px; box-sizing: border-box; } .edit-message-save-btn { background: #111; color: var(--renegade-code-color); border: 1px solid var(--renegade-code-color); } .edit-message-save-btn:hover { background: var(--renegade-code-color); color: #000; } .edit-message-cancel-btn { background: #111; color: #999; border: 1px solid #444; } .edit-message-cancel-btn:hover { background: #222; color: #ccc; } .chat-message-sender { display: block; margin-bottom: 4px; font-weight: bold; } .chat-message-content { display: block; } .user-message .chat-message-sender { color: var(--renegade-accent); } .assistant-message .chat-message-sender { color: #ffd700; } .assistant-message .chat-message-content { color: var(--renegade-assistant-color); } .chat-message-reasoning { margin-bottom: 8px; border: 1px solid #444; border-radius: 6px; background: #0a0a0a; padding: 2px 8px; } .chat-message-reasoning summary { color: #999; font-size: 0.75rem; cursor: pointer; padding: 4px 0; text-transform: uppercase; letter-spacing: 0.5px; outline: none; } .chat-message-reasoning summary:hover { color: var(--renegade-accent); } .chat-message-reasoning-content { color: #888; font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap; padding: 4px 0 8px; border-top: 1px solid #333; margin-top: 2px; } .regenerate-label { color: #888; font-size: 0.75rem; font-style: italic; margin-bottom: 6px; } .compare-card { border: 1px solid var(--renegade-accent); border-radius: 8px; background: #050505; box-shadow: 0 0 8px rgba(var(--renegade-accent-rgb), 0.2); margin: 12px 0; padding: 10px 12px; box-sizing: border-box; } .compare-card-header { color: var(--renegade-accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .compare-card-prompt { color: #ccc; font-size: 0.85rem; font-style: italic; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #333; } .compare-card-columns { display: flex; gap: 10px; } .compare-card-column { flex: 1; min-width: 0; border: 1px solid #333; border-radius: 6px; padding: 8px; background: #020202; } .compare-card-column-title { color: var(--renegade-accent); font-size: 0.72rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .compare-card-column-body { color: var(--renegade-assistant-color); font-size: 0.85rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; } .compare-card-column-meta { display: none; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding-top: 6px; border-top: 1px solid #333; } .compare-card-meta-item { color: #999; font-size: 0.7rem; font-family: 'Courier New', monospace; } .compare-card-column-actions { display: flex; gap: 6px; margin-top: 8px; } .compare-card-action-btn { flex: 1; background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 5px; padding: 5px; font-size: 0.7rem; cursor: pointer; } .compare-card-action-btn:hover:not(:disabled) { background-color: #222222; } .compare-card-action-btn:disabled { opacity: 0.5; cursor: default; } .compare-card-vote-row { display: none; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #333; flex-wrap: wrap; } .compare-card-vote-label { color: #999; font-size: 0.75rem; width: 100%; text-align: center; margin-bottom: 4px; } .compare-card-vote-btn { background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 6px; padding: 6px 14px; font-size: 0.78rem; font-weight: bold; cursor: pointer; } .compare-card-vote-btn:hover { background-color: var(--renegade-accent); color: #000; } @media (max-width: 700px) { .compare-card-columns { flex-direction: column; } } .file-preview-message .chat-message-sender { color: #ffd700; } .file-preview-image { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid rgba(var(--renegade-accent-rgb), 0.4); } .markdown-content { line-height: 1.55; color: var(--renegade-assistant-color); min-width: 0; } .user-message .markdown-content { color: var(--renegade-accent); } .user-message .markdown-content strong { color: var(--renegade-accent); } .markdown-content p { margin: 0 0 10px 0; } .markdown-content p:last-child { margin-bottom: 0; } .markdown-content ul, .markdown-content ol { margin-top: 6px; margin-bottom: 10px; padding-left: 25px; } .markdown-content li { margin-bottom: 4px; } .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 { color: var(--renegade-assistant-color); margin-top: 14px; margin-bottom: 8px; } .user-message .markdown-content h1, .user-message .markdown-content h2, .user-message .markdown-content h3, .user-message .markdown-content h4 { color: var(--renegade-accent); } .markdown-content strong { color: var(--renegade-assistant-color); } .markdown-content em { color: inherit; font-style: italic; } .inline-code { font-family: 'Courier New', monospace; color: var(--renegade-assistant-color); background: rgba(143, 220, 255, 0.08); border: 1px solid rgba(143, 220, 255, 0.25); border-radius: 4px; padding: 1px 5px; } .user-message .inline-code { color: var(--renegade-accent); background: rgba(var(--renegade-accent-rgb), 0.08); border: 1px solid rgba(var(--renegade-accent-rgb), 0.25); } .code-block-wrapper { margin: 12px 0; border: 1px solid var(--renegade-accent); border-radius: 8px; background: #050505; overflow: hidden; box-shadow: 0 0 8px rgba(var(--renegade-accent-rgb), 0.2); color: var(--renegade-code-color); max-width: 100%; } .code-block-header { display: flex; align-items: center; justify-content: space-between; min-height: 30px; padding: 4px 8px; background: #111; border-bottom: 1px solid #333; box-sizing: border-box; } .code-block-actions { display: flex; align-items: center; gap: 6px; } .code-block-label-group { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; } .code-filename { color: #eee; font-family: 'Courier New', monospace; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .code-language { color: var(--renegade-accent); font-family: 'Courier New', monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; } .generate-code-message { max-width: 100%; } .generate-code-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .generate-code-title { color: var(--renegade-accent); font-weight: bold; font-size: 0.95rem; } .generate-code-regen-btn { background: none; border: 1px solid #444; color: #ccc; border-radius: 5px; padding: 3px 8px; cursor: pointer; font-size: 0.85rem; } .generate-code-regen-btn:hover { border-color: var(--renegade-accent); color: var(--renegade-accent); } .generate-code-regen-btn:disabled { opacity: 0.5; cursor: not-allowed; } .generate-code-meta { color: #888; font-size: 0.75rem; margin-bottom: 10px; font-family: 'Courier New', monospace; } .generate-code-empty { color: #666; font-size: 0.85rem; font-style: italic; padding: 6px 0; } .generate-code-error { color: #ff6b6b; font-size: 0.85rem; padding: 6px 0; } .generate-code-save-all-btn { display: block; width: 100%; padding: 8px; margin-bottom: 10px; background: #111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 6px; cursor: pointer; font-size: 0.85rem; } .generate-code-save-all-btn:hover { background: var(--renegade-accent); color: #000; } .copy-code-btn, .download-code-btn { background: none; border: 1px solid var(--renegade-accent); color: var(--renegade-accent); border-radius: 5px; padding: 3px 8px; font-size: 0.7rem; cursor: pointer; } .copy-code-btn:hover, .download-code-btn:hover { background: var(--renegade-accent); color: #000; } .code-block { display: block; margin: 0; padding: 12px; max-width: 100%; overflow-x: auto; box-sizing: border-box; background: #020202; color: var(--renegade-code-color); font-family: 'Courier New', Consolas, monospace; font-size: 0.88rem; line-height: 1.5; tab-size: 4; white-space: pre; word-wrap: normal; overflow-wrap: normal; } .code-block code { font-family: inherit; white-space: inherit; color: var(--renegade-code-color); } .markdown-content .code-block-wrapper, .markdown-content .code-block-wrapper * { color: inherit; } .markdown-content .code-block-wrapper .code-language, .markdown-content .code-block-wrapper .copy-code-btn, .markdown-content .code-block-wrapper .download-code-btn { color: var(--renegade-accent); } .markdown-content .code-block-wrapper .code-block, .markdown-content .code-block-wrapper .code-block code { color: var(--renegade-code-color); } /* --------------------------------------------------------------------- * Docs panel (renegade-docs.js) * ------------------------------------------------------------------- */ #docs-panel.docs-panel { width: 380px; max-width: 92vw; max-height: 82vh; overflow-y: auto; padding: 0; } #docs-panel-content { padding: 16px; } .docs-panel-close-button { display: block; width: calc(100% - 32px); margin: 0 16px 16px; padding: 8px; background-color: #111111; color: var(--renegade-accent); border: 1px solid var(--renegade-accent); border-radius: 5px; cursor: pointer; font-size: 12px; box-sizing: border-box; } .docs-panel-close-button:hover { background-color: #222222; } .renegade-docs-panel { color: #eee; font-size: 13px; } .renegade-docs-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .renegade-docs-title { color: var(--renegade-accent); font-size: 17px; font-weight: bold; } .renegade-docs-subtitle { color: #888; font-size: 11px; margin-top: 2px; word-break: break-all; } .renegade-docs-status { flex-shrink: 0; color: var(--renegade-code-color); font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: 1px; border: 1px solid var(--renegade-code-color); border-radius: 4px; padding: 2px 6px; height: fit-content; } .renegade-docs-section { margin-bottom: 14px; } .renegade-docs-section-title { color: #999; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .renegade-docs-tags { display: flex; flex-wrap: wrap; gap: 6px; } .renegade-docs-tag { display: flex; align-items: center; gap: 6px; background: #111111; border: 1px solid var(--renegade-accent); color: var(--renegade-accent); border-radius: 5px; padding: 4px 8px; font-size: 12px; cursor: default; } .renegade-docs-tag small { color: var(--renegade-code-color); font-family: 'Courier New', monospace; } .renegade-docs-versions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .renegade-docs-version { background: #0a0a0a; border: 1px solid #444; color: #ccc; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-family: 'Courier New', monospace; } .renegade-docs-links { display: flex; flex-direction: column; gap: 6px; } .renegade-docs-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #0a0a0a; border: 1px solid #333; color: var(--renegade-accent); border-radius: 5px; padding: 6px 10px; font-size: 12px; text-decoration: none; } .renegade-docs-link:hover { border-color: var(--renegade-accent); background: #111111; } .renegade-docs-link small { color: var(--renegade-code-color); font-family: 'Courier New', monospace; font-size: 10px; flex-shrink: 0; } .renegade-docs-sources { display: flex; flex-direction: column; gap: 6px; } .renegade-docs-source { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #0a0a0a; border: 1px solid #333; color: #eee; border-radius: 5px; padding: 6px 10px; font-size: 12px; text-decoration: none; } .renegade-docs-source:hover { border-color: var(--renegade-accent); } .renegade-docs-source strong { color: var(--renegade-accent); font-weight: normal; } .renegade-docs-source small { color: #888; flex-shrink: 0; } .renegade-docs-empty { color: #666; font-size: 12px; font-style: italic; } .renegade-docs-actions { margin-top: 4px; } .renegade-docs-ask { width: 100%; padding: 10px; background-color: #111111; color: var(--renegade-code-color); border: 1px solid var(--renegade-code-color); border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: bold; box-sizing: border-box; } .renegade-docs-ask:hover { background-color: var(--renegade-code-color); color: #000; } .docs-send-immediately-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #999; font-size: 11px; cursor: pointer; } .docs-send-immediately-row input[type="checkbox"] { accent-color: var(--renegade-accent); cursor: pointer; } .markdown-blockquote { border-left: 3px solid var(--renegade-accent); padding-left: 12px; margin: 10px 0; opacity: 0.9; } .markdown-table-wrapper { margin: 12px 0; overflow-x: auto; border: 1px solid #333; border-radius: 6px; } .markdown-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .markdown-table th, .markdown-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #333; white-space: nowrap; } .markdown-table th { background: #111; color: var(--renegade-accent); font-weight: bold; border-bottom: 1px solid var(--renegade-accent); } .markdown-table tbody tr:hover { background: rgba(var(--renegade-accent-rgb), 0.06); } .markdown-table tbody tr:last-child td { border-bottom: none; } .generation-stopped-badge { display: inline-block; margin-top: 8px; padding: 2px 8px; border: 1px solid #ff6b6b; border-radius: 4px; color: #ff6b6b; font-size: 11px; font-family: 'Courier New', monospace; } /* --------------------------------------------- */ /* INPUT BAR */ /* --------------------------------------------- */ .input-bar { display: flex; gap: 10px; width: 100%; min-height: 30px; min-width: 0; margin-top: 1.2%; margin-left: 0; margin-right: 0; border-radius: 10px; align-items: flex-end; box-sizing: border-box; } #upload-btn { width: 110px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-sizing: border-box !important; flex-shrink: 0; } #user-input { flex: 1 1 auto; min-width: 0; width: 0; height: 30px; max-height: 160px; min-height: 30px; background: #000; border: 1px solid var(--renegade-accent); color: var(--renegade-accent); padding: 6px 8px; border-radius: 10px; outline: none; box-sizing: border-box; resize: none; overflow-y: auto; font-family: inherit; font-size: inherit; line-height: 1.3; white-space: pre-wrap; } #user-input:focus { box-shadow: 0 0 8px rgba(var(--renegade-accent-rgb), 0.35); } #user-input::placeholder { color: rgba(var(--renegade-accent-rgb), 0.55); } #regenerate-btn { width: 46px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-sizing: border-box !important; flex-shrink: 0; } #send-btn, #stop-btn { border-radius: 10px; flex-shrink: 0; } #stop-btn:hover { background: var(--renegade-accent); color: #000; } button:disabled, #user-input:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } button, #send-btn, #history-btn, #login-btn { transition: all 0.25s ease; border-radius: 10px; border: 1px solid var(--renegade-accent); } /* --------------------------------------------- */ /* MAIN BUTTON HOVER EFFECT */ /* --------------------------------------------- */ #upload-btn:hover:not(:disabled), #regenerate-btn:hover:not(:disabled), #send-btn:hover:not(:disabled), .left-nav > button:hover:not(:disabled) { background-color: var(--renegade-accent) !important; color: #000 !important; box-shadow: 0 0 15px #ffd700, 0 0 30px #ffea00 !important; border-color: #ffea00 !important; cursor: pointer !important; } /* ============================================= */ /* REASONING PANEL BUTTONS */ /* ============================================= */ #reasoning-controls-panel #reasoning-reasonable-btn, #reasoning-controls-panel #reasoning-balanced-btn, #reasoning-controls-panel #reasoning-unreasonable-btn { width: 100%; } /* ============================================= */ /* REASONING CLOSE BUTTON */ /* ============================================= */ #reasoning-controls-panel #reasoning-close-btn { width: 50px !important; height: 30px !important; padding: 4px 8px; margin: 2px auto 0 auto; font-size: 11px; border-radius: 5px; box-sizing: border-box; } /* --------------------------------------------- */ /* PARTICLES */ /* --------------------------------------------- */ .particle { position: fixed; width: 3px; height: 3px; background-color: var(--renegade-accent); border-radius: 50%; pointer-events: none; z-index: 1; animation: particleMove 6s linear infinite; } @keyframes particleMove { 0% { transform: translateY(0) translateX(0); opacity: 1; } 100% { transform: translateY(100vh) translateX(20vw); opacity: 0; } } /* --------------------------------------------- */ /* SCROLLBARS */ /* --------------------------------------------- */ #chat-window::-webkit-scrollbar, .file-list::-webkit-scrollbar, .history-listbox::-webkit-scrollbar, .code-block::-webkit-scrollbar { width: 8px; height: 8px; } #chat-window::-webkit-scrollbar-track, .file-list::-webkit-scrollbar-track, .history-listbox::-webkit-scrollbar-track, .code-block::-webkit-scrollbar-track { background: #050505; } #chat-window::-webkit-scrollbar-thumb, .file-list::-webkit-scrollbar-thumb, .history-listbox::-webkit-scrollbar-thumb, .code-block::-webkit-scrollbar-thumb { background: var(--renegade-accent); border-radius: 6px; } /* --------------------------------------------- */ /* SETTINGS BUTTON */ /* --------------------------------------------- */ #settings-btn .settings-gear-icon { color: #999999; font-size: 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } /* --------------------------------------------- */ /* MOBILE */ /* --------------------------------------------- */ @media (max-width: 1000px) { #overlay { background-image: var(--renegade-overlay-image-mobile) !important; background-size: 100% 100% !important; background-position: center !important; background-repeat: no-repeat !important; } body { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; padding: 10px 10px 160px 10px !important; box-sizing: border-box !important; } .top-bar { position: relative !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; min-width: 0 !important; height: 40px !important; margin: 15px 15px !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; z-index: 15 !important; order: 1 !important; } .top-bar > *:first-child { margin-left: 0 !important; margin-right: auto !important; flex: 0 0 auto !important; } .top-bar > *:last-child { margin-left: auto !important; margin-right: 0 !important; flex: 0 0 auto !important; } #chat-area { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; min-width: 0 !important; height: calc(65vh - 20px) !important; min-height: 0 !important; max-height: calc(65vh - 20px) !important; margin: 15px 15px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; z-index: 50 !important; order: 2 !important; } #chat-window { position: relative !important; transform: translateY(-20px) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; } .input-bar { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 10px 0 0 0 !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } #user-input { min-width: 0 !important; width: 0 !important; flex: 1 1 auto !important; } #upload-btn { flex: 0 0 40px !important; } #regenerate-btn { flex: 0 0 40px !important; } #send-btn, #stop-btn { flex: 0 1 auto !important; min-width: 0 !important; } .left-nav { position: relative !important; transform: translateY(-20px) !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; min-width: 0 !important; height: auto !important; margin: 15px 15px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 15px !important; box-sizing: border-box !important; z-index: 20 !important; order: 3 !important; } .right-nav { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; min-width: 0 !important; height: auto !important; margin: 15px 15px 30px 15px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 15px !important; box-sizing: border-box !important; z-index: 20 !important; order: 4 !important; /* Prevent contents from forcing the nav wider */ overflow-x: hidden !important; } /* * Restore the right-nav contents to normal mobile flow. * The desktop positioning only applies to larger screens. */ .right-nav #upload-btn, .right-nav #upload-btn ~ .file-panel-title, .right-nav #upload-btn ~ .file-drop-zone, .right-nav #upload-btn ~ .file-list { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; } .left-nav > button, .right-nav > button { width: 110px !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; box-sizing: border-box !important; } .right-nav #upload-btn { width: 110px !important; height: 30px !important; flex: none !important; } #title-banner { font-size: 1.7rem !important; max-width: 90vw !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* * Modal panels */ .renegade-modal-panel, #reasoning-controls-panel { width: calc(100vw - 40px) !important; max-width: 380px !important; max-height: 80vh !important; overflow-y: auto !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; padding: 14px !important; box-sizing: border-box !important; } .image-panel, .admin-panel { height: 80vh !important; } .admin-nav { flex: 0 0 120px; } .login-status-avatar-wrap, .avatar-panel-preview { width: 96px !important; height: 96px !important; } } @media (max-width: 600px) { .top-bar, #chat-area, .left-nav, .right-nav { width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; margin-left: 15px !important; margin-right: 15px !important; box-sizing: border-box !important; } #chat-area { height: calc(60vh - 20px) !important; max-height: calc(60vh - 20px) !important; } } /* MOBILE LEFT NAV + INPUT BAR REDESIGN */ @media (max-width: 1000px) { .left-nav { order: 2 !important; width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; margin: 10px 15px 8px 15px !important; padding: 8px !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 7px !important; } .left-nav .file-panel-title, .left-nav .login-status { flex-basis: 100% !important; } .left-nav > button { width: auto !important; min-width: 92px !important; height: 36px !important; flex: 1 1 110px !important; max-width: 160px !important; padding: 0 8px !important; font-size: 12px !important; white-space: nowrap !important; } #chat-area { order: 3 !important; height: calc(65vh - 20px) !important; max-height: calc(65vh - 20px) !important; margin: 8px 15px 15px 15px !important; } .input-bar { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-areas: "input input input input input" "upload search regenerate send stop" !important; gap: 8px !important; align-items: stretch !important; padding: 8px !important; } #user-input { grid-area: input !important; width: 100% !important; min-width: 0 !important; min-height: 58px !important; flex: none !important; } #upload-btn { grid-area: upload !important; width: 100% !important; min-width: 0 !important; } #chat-search-btn { grid-area: search !important; width: 100% !important; height: 36px !important; } #regenerate-btn { grid-area: regenerate !important; width: 100% !important; min-width: 0 !important; } #send-btn { grid-area: send !important; width: 100% !important; min-width: 0 !important; white-space: nowrap !important; } #stop-btn { grid-area: stop !important; width: 100% !important; min-width: 0 !important; } .right-nav { order: 4 !important; } } @media (max-width: 600px) { .left-nav { gap: 6px !important; padding: 6px !important; } .left-nav > button { min-width: calc(50% - 6px) !important; flex: 1 1 calc(50% - 6px) !important; max-width: none !important; } #chat-area { height: calc(62vh - 20px) !important; max-height: calc(62vh - 20px) !important; } .input-bar { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-areas: "input input input input" "upload search regenerate send" "stop stop stop stop" !important; } #send-btn { font-size: 11px !important; } } /* MOBILE INPUT BAR FINAL ADJUSTMENTS */ @media (max-width: 1000px) { .login-status-avatar-wrap, .login-status-avatar { width: 44px !important; height: 44px !important; } .login-status { gap: 3px !important; } .input-bar > button, #chat-search-btn { height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } } @media (max-width: 600px) { .login-status-avatar-wrap, .login-status-avatar { width: 38px !important; height: 38px !important; } .input-bar > button, #chat-search-btn { height: 38px !important; min-height: 38px !important; max-height: 38px !important; } } /* MOBILE NAVIGATION REFINEMENTS */ @media (max-width: 1000px) { .left-nav .login-status { order: -3 !important; width: 100% !important; margin-bottom: 8px !important; } .left-nav #login-btn { order: -2 !important; } .left-nav .file-panel-title { order: -4 !important; } .left-nav > button { width: auto !important; min-width: 82px !important; height: 28px !important; min-height: 28px !important; padding: 0 8px !important; font-size: 11px !important; } .right-nav { margin-top: 14px !important; } } @media (max-width: 600px) { .left-nav > button { min-width: 72px !important; height: 27px !important; min-height: 27px !important; padding: 0 7px !important; font-size: 10px !important; } .right-nav { margin-top: 16px !important; } } /* MOBILE POSITIONING FIX */ @media (max-width: 1000px) { .left-nav { margin-top: -12px !important; } .right-nav { margin-top: 28px !important; clear: both !important; } } @media (max-width: 600px) { .left-nav { margin-top: -16px !important; } .right-nav { margin-top: 32px !important; } } /* MOBILE FULLSCREEN PANELS */ @media (max-width: 1000px) { .renegade-modal-panel, .admin-panel, .image-panel, .coding-panel, .video-panel, .video-edit-panel, .console-panel, .video-workflow-picker-panel, .project-panel, .project-editor-panel { position: fixed !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; transform: none !important; padding: 12px !important; z-index: 9999 !important; box-sizing: border-box !important; } .admin-panel-body, .coding-chat-content, .admin-content { min-height: 0 !important; } .admin-panel-body { flex: 1 1 auto !important; overflow: hidden !important; } .admin-content { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .console-panel-log, .coding-chat-log, .video-workflow-listbox, .project-file-list { -webkit-overflow-scrolling: touch; } /* * Login is a small compact form, not a workspace like admin/image/ * video/coding above - forcing it fullscreen (as the shared * .renegade-modal-panel rule above does) looks broken and covers the * whole screen for no reason. #login-panel's id beats the class * selector above on specificity, so this wins regardless of source * order, and it only needs to size itself to its content. */ #login-panel { position: fixed !important; inset: auto !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: calc(100vw - 40px) !important; max-width: 340px !important; height: auto !important; min-height: 0 !important; max-height: 85vh !important; overflow-y: auto !important; border-radius: 10px !important; margin: 0 !important; padding: 18px !important; } } /* ========================================================= FINAL MOBILE RIGHT NAV / HISTORY WIDTH FIX MUST STAY AT THE BOTTOM OF THE MOBILE CSS ========================================================= */ @media (max-width: 1000px) { /* * Force right nav to use the exact same outer sizing as left nav. */ .right-nav { width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; min-width: 0 !important; margin-left: 15px !important; margin-right: 15px !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; align-self: center !important; } /* * Prevent History and Files children from overflowing * outside the right navigation container. */ .right-nav > *, .right-nav .file-panel-title, .right-nav .file-list, .right-nav .history-listbox, .right-nav #history-list, .right-nav .file-drop-zone { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* * Specifically override any older desktop/mobile rules * that make History 120% wide. */ #history-list, .history-listbox { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* * History title must not be wider than the nav. */ .right-nav > .file-panel-title:first-child { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } * { scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* Old Edge */ } *::-webkit-scrollbar { display: none !important; /* Chrome, Edge, Safari */ width: 0 !important; height: 0 !important; } } @media (max-width: 600px) { .right-nav { width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; margin-left: 15px !important; margin-right: 15px !important; box-sizing: border-box !important; overflow-x: hidden !important; } #history-list, .history-listbox, .right-nav > .file-panel-title:first-child { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } }