From 490fe5c6a3ec8ec2a1301815bab5f881b5172904 Mon Sep 17 00:00:00 2001 From: xcaliber Date: Wed, 18 Feb 2026 20:28:28 +0000 Subject: [PATCH 1/5] Upload 9 modified files from chat-switchboard-v0.5.0.zip --- VERSION | 2 +- src/css/styles.css | 1742 +++++++------------------------------------- src/index.html | 681 ++++++----------- src/js/api.js | 439 ++++++----- src/js/app.js | 839 +++++++++++---------- src/js/debug.js | 42 +- src/js/ui.js | 912 +++++++++++------------ 7 files changed, 1617 insertions(+), 3040 deletions(-) diff --git a/VERSION b/VERSION index 267577d..8f0916f 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.4.1 +0.5.0 diff --git a/src/css/styles.css b/src/css/styles.css index a4cc24b..1456415 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,1569 +1,357 @@ /* ========================================== - Chat Switchboard - Styles + Chat Switchboard – Styles (v0.5.0) ========================================== */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - :root { - --bg-primary: #212121; - --bg-secondary: #171717; - --bg-tertiary: #2f2f2f; - --text-primary: #ececec; - --text-secondary: #b4b4b4; - --accent: #10a37f; - --accent-hover: #0d8a6a; - --border: #3a3a3a; - --code-bg: #1e1e1e; - --error: #ff6b6b; - --success: #10a37f; - --warning: #ffd93d; - --thinking-bg: #1a1a2e; - --thinking-border: #4a4a6a; - --thinking-text: #a0a0c0; + --bg: #0f0f13; + --bg-secondary: #1a1a24; + --bg-tertiary: #252533; + --border: #2a2a3a; + --text: #e4e4ef; + --text-secondary: #8888a0; + --accent: #6c9fff; + --accent-hover: #8ab4ff; + --danger: #e74c3c; + --success: #2ecc71; + --warning: #f39c12; + --radius: 8px; + --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --mono: 'SF Mono', 'Fira Code', Consolas, monospace; } -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; - background: var(--bg-primary); - color: var(--text-primary); - min-height: 100vh; - display: flex; - flex-direction: column; -} +* { margin: 0; padding: 0; box-sizing: border-box; } +body { font-family: var(--font); background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; } +a { color: var(--accent); } + +/* ── Layout ──────────────────────────────── */ + +#appContainer { display: flex; flex-direction: column; height: 100vh; } -/* Header */ .header { - background: var(--bg-secondary); - padding: 1rem 2rem; - border-bottom: 1px solid var(--border); - display: flex; - justify-content: space-between; - flex-shrink: 0; - align-items: center; - flex-wrap: wrap; - gap: 1rem; + display: flex; align-items: center; justify-content: space-between; + padding: 0 1rem; height: 48px; background: var(--bg-secondary); + border-bottom: 1px solid var(--border); flex-shrink: 0; } +.header-title { font-size: 1rem; font-weight: 600; } +.header-actions { display: flex; align-items: center; gap: 0.5rem; } -.header h1 { - font-size: 1.5rem; - font-weight: 600; - color: var(--accent); -} +.main { display: flex; flex: 1; overflow: hidden; } -.header-actions { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - align-items: center; -} +/* ── Sidebar ─────────────────────────────── */ -/* Buttons */ -.btn { - padding: 0.5rem 1rem; - border: none; - border-radius: 6px; - cursor: pointer; - font-size: 0.875rem; - font-weight: 500; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.btn-primary { background: var(--accent); color: white; } -.btn-primary:hover { background: var(--accent-hover); } -.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); } -.btn-secondary:hover { background: var(--border); } -.btn-danger { background: transparent; color: var(--error); border: 1px solid var(--error); } -.btn-danger:hover { background: var(--error); color: white; } -.btn-small { padding: 0.25rem 0.5rem; font-size: 0.75rem; } -.btn:disabled { opacity: 0.5; cursor: not-allowed; } - -/* Layout */ -.main-container { - display: flex; - flex: 1; - min-height: 0; - overflow: hidden; -} - -/* Sidebar */ .sidebar { - width: 260px; - background: var(--bg-secondary); - border-right: 1px solid var(--border); - display: flex; - flex-direction: column; - transition: width 0.3s ease; -} - -.sidebar.collapsed { width: 0; overflow: hidden; } - -.sidebar-header { - padding: 1rem; - border-bottom: 1px solid var(--border); -} - -.sidebar-title { - font-weight: 600; - font-size: 0.875rem; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.new-chat-btn { margin: 1rem; width: calc(100% - 2rem); } - -.chat-history { flex: 1; overflow-y: auto; padding: 0.5rem; } - -.chat-history-item { - padding: 0.75rem 1rem; - border-radius: 6px; - cursor: pointer; - margin-bottom: 0.25rem; - transition: background 0.2s ease; - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.5rem; -} - -.chat-history-item:hover { background: var(--bg-tertiary); } -.chat-history-item.active { background: var(--bg-tertiary); border-left: 3px solid var(--accent); } - -.chat-history-item .title { - flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 0.875rem; -} - -.chat-history-item .item-actions { - display: flex; - gap: 0.25rem; - opacity: 0; - transition: opacity 0.2s; -} - -.chat-history-item:hover .item-actions { opacity: 1; } - -.chat-history-item .item-btn { - background: none; - border: none; - color: var(--text-secondary); - cursor: pointer; - padding: 0.25rem; - border-radius: 4px; - transition: all 0.2s; -} - -.chat-history-item .item-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.1); } -.chat-history-item .item-btn.delete:hover { color: var(--error); background: rgba(255, 107, 107, 0.1); } - -/* Chat Area */ -.chat-area { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - min-height: 0; -} - -.chat-messages { - flex: 1; + width: 260px; background: var(--bg-secondary); border-right: 1px solid var(--border); + display: flex; flex-direction: column; padding: 0.75rem; gap: 0.5rem; flex-shrink: 0; overflow-y: auto; - padding: 1rem 2rem; - min-height: 0; } +.new-chat-btn { width: 100%; } +.chat-history { flex: 1; overflow-y: auto; } -/* Messages */ -.message { - max-width: 800px; - margin: 0 auto 1.5rem; - animation: fadeIn 0.3s ease; +.chat-item { + display: flex; align-items: center; padding: 0.5rem 0.75rem; border-radius: var(--radius); + cursor: pointer; font-size: 0.85rem; gap: 0.5rem; transition: background 0.15s; } - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } +.chat-item:hover { background: var(--bg-tertiary); } +.chat-item.active { background: var(--bg-tertiary); border-left: 2px solid var(--accent); } +.chat-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.chat-item-delete { + opacity: 0; background: none; border: none; color: var(--text-secondary); + cursor: pointer; font-size: 0.75rem; padding: 2px 4px; transition: opacity 0.15s; } +.chat-item:hover .chat-item-delete { opacity: 1; } -.message-content { - display: flex; - gap: 1rem; - align-items: flex-start; -} +/* ── Chat Area ───────────────────────────── */ -.message-avatar { - width: 36px; - height: 36px; - border-radius: 6px; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.25rem; - flex-shrink: 0; -} - -.message.user .message-avatar { background: var(--accent); } -.message.assistant .message-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6); } +.chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } +.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; } +.message { margin-bottom: 1rem; } +.message-inner { display: flex; gap: 0.75rem; max-width: 800px; margin: 0 auto; } +.message-avatar { font-size: 1.25rem; flex-shrink: 0; } .message-body { flex: 1; min-width: 0; } - -.message-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; +.message-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } +.message-role { font-weight: 600; font-size: 0.85rem; } +.message-time { font-size: 0.7rem; color: var(--text-secondary); } +.message-copy { + background: none; border: none; cursor: pointer; font-size: 0.75rem; + opacity: 0; transition: opacity 0.15s; margin-left: auto; } - -.message-role { - font-weight: 600; - font-size: 0.875rem; - color: var(--text-secondary); -} - -.message-time { - font-size: 0.7rem; - color: var(--text-secondary); -} - -.message-actions { - display: flex; - gap: 0.25rem; - opacity: 0; - transition: opacity 0.2s; -} - -.message:hover .message-actions { opacity: 1; } - -.message-action-btn { - background: none; - border: none; - color: var(--text-secondary); - cursor: pointer; - padding: 0.25rem 0.5rem; - border-radius: 4px; - font-size: 0.7rem; - transition: all 0.2s; -} - -.message-action-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); } - -.message-text { - line-height: 1.6; - word-wrap: break-word; -} - -.message-text p { margin-bottom: 0.75rem; } -.message-text p:last-child { margin-bottom: 0; } - -/* Code blocks */ -.message-text code { - background: var(--code-bg); - padding: 0.2rem 0.4rem; - border-radius: 4px; - font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; - font-size: 0.875em; -} - +.message:hover .message-copy { opacity: 0.7; } +.message-text { font-size: 0.9rem; line-height: 1.6; word-wrap: break-word; } .message-text pre { - background: var(--code-bg); - padding: 1rem; - border-radius: 8px; - overflow-x: auto; - margin: 0.75rem 0; - position: relative; + background: var(--bg-tertiary); padding: 0.75rem; border-radius: var(--radius); + overflow-x: auto; margin: 0.5rem 0; position: relative; font-size: 0.8rem; } - -.message-text pre code { background: none; padding: 0; } - +.message-text code { font-family: var(--mono); font-size: 0.85em; } +.message-text pre code { font-size: inherit; } .copy-code-btn { - position: absolute; - top: 0.5rem; - right: 0.5rem; - background: var(--bg-tertiary); - border: 1px solid var(--border); - color: var(--text-secondary); - padding: 0.25rem 0.5rem; - border-radius: 4px; - font-size: 0.7rem; - cursor: pointer; - opacity: 0; - transition: opacity 0.2s; + position: absolute; top: 4px; right: 4px; background: var(--bg-secondary); + border: 1px solid var(--border); color: var(--text-secondary); border-radius: 4px; + padding: 2px 8px; font-size: 0.7rem; cursor: pointer; } -.message-text pre:hover .copy-code-btn { opacity: 1; } -.copy-code-btn:hover { background: var(--border); color: var(--text-primary); } +.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); } +.empty-icon { font-size: 3rem; margin-bottom: 1rem; } +.empty-hint { color: var(--text-secondary); font-size: 0.8rem; text-align: center; padding: 1rem; } +.error-hint { color: var(--danger); font-size: 0.8rem; padding: 0.5rem; } +.loading { color: var(--text-secondary); font-size: 0.8rem; padding: 0.5rem; } + +/* ── Thinking Blocks ─────────────────────── */ -/* ========================================== - THINKING BLOCKS - Collapsible & Styled - ========================================== */ .thinking-block { - background: var(--thinking-bg); - border: 1px solid var(--thinking-border); - border-radius: 8px; - margin: 0.75rem 0; - overflow: hidden; + border: 1px solid var(--border); border-radius: var(--radius); + margin: 0.5rem 0; background: rgba(108, 159, 255, 0.05); } - -.thinking-header { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - background: rgba(74, 74, 106, 0.3); - cursor: pointer; - user-select: none; - transition: background 0.2s; +.thinking-block summary { + padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); } - -.thinking-header:hover { - background: rgba(74, 74, 106, 0.5); -} - -.thinking-toggle { - font-size: 0.75rem; - transition: transform 0.2s; - color: var(--thinking-text); -} - -.thinking-block.collapsed .thinking-toggle { - transform: rotate(-90deg); -} - -.thinking-label { - font-size: 0.75rem; - font-weight: 600; - color: var(--thinking-text); - text-transform: uppercase; - letter-spacing: 0.5px; -} - .thinking-content { - padding: 1rem; - color: var(--thinking-text); - font-size: 0.9rem; - line-height: 1.5; - max-height: 300px; - overflow-y: auto; - transition: max-height 0.3s ease, padding 0.3s ease; + padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--text-secondary); + border-top: 1px solid var(--border); max-height: 300px; overflow-y: auto; } -.thinking-block.collapsed .thinking-content { - max-height: 0; - padding: 0 1rem; - overflow: hidden; -} +/* ── Input Area ──────────────────────────── */ -/* Typing indicator */ -.typing-indicator { - display: flex; - gap: 4px; - padding: 0.5rem 0; -} - -.typing-indicator span { - width: 8px; - height: 8px; - background: var(--text-secondary); - border-radius: 50%; - animation: bounce 1.4s infinite ease-in-out; -} - -.typing-indicator span:nth-child(1) { animation-delay: -0.32s; } -.typing-indicator span:nth-child(2) { animation-delay: -0.16s; } - -@keyframes bounce { - 0%, 80%, 100% { transform: scale(0); } - 40% { transform: scale(1); } -} - -/* Input Area */ .input-area { - background: var(--bg-secondary); - border-top: 1px solid var(--border); - padding: 1rem 2rem; - flex-shrink: 0; + border-top: 1px solid var(--border); padding: 0.5rem 1rem 0.75rem; + background: var(--bg-secondary); flex-shrink: 0; } - -.input-container { max-width: 800px; margin: 0 auto; } - -.input-top-bar { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.75rem; - gap: 1rem; - flex-wrap: wrap; -} - -.model-selector { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.model-selector label { - font-size: 0.75rem; - color: var(--text-secondary); -} - +.input-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } +.model-selector { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; } +.model-selector label { color: var(--text-secondary); } .model-selector select { - background: var(--bg-tertiary); - border: 1px solid var(--border); - border-radius: 6px; - color: var(--text-primary); - padding: 0.35rem 0.75rem; - font-size: 0.8rem; - cursor: pointer; - max-width: 200px; + background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text); + padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; max-width: 300px; } - -.model-selector select:focus { outline: none; border-color: var(--accent); } - -.input-shortcuts { - font-size: 0.7rem; - color: var(--text-secondary); +.input-row { display: flex; gap: 0.5rem; align-items: flex-end; } +.input-row textarea { + flex: 1; resize: none; background: var(--bg-tertiary); border: 1px solid var(--border); + color: var(--text); padding: 0.5rem 0.75rem; border-radius: var(--radius); + font-family: var(--font); font-size: 0.9rem; max-height: 200px; line-height: 1.5; } +.input-row textarea:focus { outline: none; border-color: var(--accent); } +.input-actions { display: flex; gap: 0.25rem; align-items: center; } -.input-shortcuts kbd { - background: var(--bg-tertiary); - border: 1px solid var(--border); - border-radius: 3px; - padding: 0.1rem 0.3rem; - font-family: inherit; +/* ── Buttons ─────────────────────────────── */ + +button { font-family: var(--font); cursor: pointer; } +.btn-primary { + background: var(--accent); color: #fff; border: none; padding: 0.5rem 1rem; + border-radius: var(--radius); font-weight: 600; font-size: 0.85rem; + transition: background 0.15s; } +.btn-primary:hover { background: var(--accent-hover); } +.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } +.btn-full { width: 100%; } -.input-wrapper { - background: var(--bg-tertiary); - border: 1px solid var(--border); - border-radius: 12px; - padding: 1rem; - transition: border-color 0.2s ease; +.btn-small { font-size: 0.8rem; padding: 0.35rem 0.75rem; } +.btn-danger { background: var(--danger); color: #fff; border: none; border-radius: 4px; } + +.btn-icon { + background: none; border: none; color: var(--text-secondary); font-size: 1rem; + padding: 0.25rem; transition: color 0.15s; } +.btn-icon:hover { color: var(--text); } -.input-wrapper:focus-within { border-color: var(--accent); } - -.input-wrapper textarea { - width: 100%; - background: none; - border: none; - color: var(--text-primary); - font-size: 1rem; - font-family: inherit; - resize: none; - outline: none; - line-height: 1.5; - max-height: 200px; - min-height: 60px; +.btn-send { + background: var(--accent); color: #fff; border: none; padding: 0.5rem 1rem; + border-radius: var(--radius); font-weight: 600; font-size: 0.85rem; } +.btn-send:disabled { opacity: 0.5; } +.btn-stop { display: none; background: var(--warning); color: #000; border: none; padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 0.85rem; } +.btn-stop.visible { display: block; } +.btn-regen { background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius); padding: 0.35rem; } -.input-wrapper textarea::placeholder { color: var(--text-secondary); } +/* ── Connection Status ───────────────────── */ -.input-actions { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid var(--border); +.connection-status { + display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; + color: var(--text-secondary); cursor: pointer; padding: 0.25rem 0.5rem; + border-radius: var(--radius); transition: background 0.15s; } +.connection-status:hover { background: var(--bg-tertiary); } +.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); } +.connection-status.online .status-dot { background: var(--success); } -.input-left { display: flex; gap: 0.5rem; align-items: center; } +/* ── Typing Indicator ────────────────────── */ -.send-btn { - padding: 0.5rem 1rem; - background: var(--accent); - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-weight: 500; - transition: all 0.2s ease; - display: flex; - align-items: center; - gap: 0.5rem; +.typing-indicator { display: flex; gap: 4px; padding: 0.5rem 0; } +.typing-indicator span { + width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); + animation: typing 1.2s infinite; } +.typing-indicator span:nth-child(2) { animation-delay: 0.2s; } +.typing-indicator span:nth-child(3) { animation-delay: 0.4s; } +@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } } -.send-btn:hover:not(:disabled) { background: var(--accent-hover); } -.send-btn:disabled { opacity: 0.5; cursor: not-allowed; } +/* ── Dropdown ────────────────────────────── */ -.stop-btn { - padding: 0.5rem 1rem; - background: var(--error); - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-weight: 500; - display: none; - align-items: center; - gap: 0.5rem; +.dropdown { position: relative; } +.dropdown-menu { + display: none; position: absolute; top: 100%; right: 0; background: var(--bg-secondary); + border: 1px solid var(--border); border-radius: var(--radius); padding: 0.25rem; + z-index: 100; min-width: 140px; } +.dropdown-menu.show { display: block; } +.dropdown-menu button { + display: block; width: 100%; text-align: left; background: none; border: none; + color: var(--text); padding: 0.4rem 0.75rem; font-size: 0.8rem; border-radius: 4px; +} +.dropdown-menu button:hover { background: var(--bg-tertiary); } -.stop-btn:hover { background: #ff5252; } -.stop-btn.visible { display: flex; } +/* ── Auth Splash ─────────────────────────── */ + +.splash { + display: flex; align-items: center; justify-content: center; height: 100vh; + background: var(--bg); +} +.splash-card { + background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; + padding: 2rem; width: 380px; max-width: 90vw; +} +.splash-brand { text-align: center; margin-bottom: 1.5rem; } +.splash-logo { font-size: 3rem; margin-bottom: 0.5rem; } +.splash-brand h1 { font-size: 1.25rem; } +.splash-brand p { color: var(--text-secondary); font-size: 0.85rem; } +.splash-error { color: var(--danger); font-size: 0.8rem; text-align: center; margin-top: 0.5rem; } + +.auth-tabs { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--border); } +.auth-tab { + flex: 1; background: none; border: none; color: var(--text-secondary); padding: 0.5rem; + cursor: pointer; border-bottom: 2px solid transparent; font-size: 0.9rem; +} +.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); } +.auth-error { color: var(--danger); font-size: 0.8rem; min-height: 1.2em; margin: 0.5rem 0; } +.auth-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } + +/* ── Forms ────────────────────────────────── */ + +.form-group { margin-bottom: 0.75rem; } +.form-group label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem; } +.form-group input, .form-group select, .form-group textarea { + width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border); + color: var(--text); padding: 0.5rem 0.75rem; border-radius: var(--radius); + font-family: var(--font); font-size: 0.85rem; +} +.form-group input:focus, .form-group select:focus, .form-group textarea:focus { + outline: none; border-color: var(--accent); +} +.form-row { display: flex; gap: 0.75rem; } +.form-row .form-group { flex: 1; } +.checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; cursor: pointer; margin: 0.5rem 0; } + +/* ── Modal ────────────────────────────────── */ -/* Modal */ .modal-overlay { - position: fixed; - top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.7); - display: none; - align-items: center; - justify-content: center; - z-index: 1000; + position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; + align-items: center; justify-content: center; z-index: 1000; } - .modal-overlay.active { display: flex; } .modal { - background: var(--bg-secondary); - border-radius: 12px; - width: 90%; - max-width: 600px; - max-height: 90vh; - overflow-y: auto; - animation: modalSlideIn 0.3s ease; -} - -@keyframes modalSlideIn { - from { opacity: 0; transform: scale(0.9); } - to { opacity: 1; transform: scale(1); } + background: var(--bg-secondary); border-radius: 12px; width: 90%; max-width: 560px; + max-height: 85vh; display: flex; flex-direction: column; + animation: modalIn 0.2s ease; } +.modal-wide { max-width: 750px; } +@keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .modal-header { - padding: 1.5rem; - border-bottom: 1px solid var(--border); - display: flex; - justify-content: space-between; - align-items: center; + display: flex; align-items: center; justify-content: space-between; + padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } +.modal-header h2 { font-size: 1rem; } +.modal-close { background: none; border: none; color: var(--text-secondary); font-size: 1.25rem; cursor: pointer; } +.modal-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; } +.modal-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 0.5rem; } -.modal-header h2 { font-size: 1.25rem; font-weight: 600; } +.settings-section { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } +.settings-section:last-child { border-bottom: none; } +.settings-section h3 { font-size: 0.9rem; margin-bottom: 0.75rem; color: var(--accent); } -.modal-close { - background: none; - border: none; - color: var(--text-secondary); - cursor: pointer; - padding: 0.5rem; - border-radius: 6px; - transition: all 0.2s; - font-size: 1.5rem; - line-height: 1; -} - -.modal-close:hover { color: var(--text-primary); background: var(--bg-tertiary); } - -.modal-body { padding: 1.5rem; } - -.form-group { margin-bottom: 1.5rem; } - -.form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: var(--text-secondary); - font-size: 0.875rem; -} - -.form-group input, -.form-group select, -.form-group textarea { - width: 100%; - padding: 0.75rem 1rem; - background: var(--bg-tertiary); - border: 1px solid var(--border); - border-radius: 8px; - color: var(--text-primary); - font-size: 1rem; - font-family: inherit; - transition: border-color 0.2s ease; -} - -.form-group input:focus, -.form-group select:focus, -.form-group textarea:focus { - outline: none; - border-color: var(--accent); -} - -.form-group small { - display: block; - margin-top: 0.5rem; - color: var(--text-secondary); - font-size: 0.75rem; -} - -.form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -.toggle-group { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem; - background: var(--bg-tertiary); - border-radius: 8px; - margin-bottom: 1rem; -} - -.toggle-label { font-weight: 500; } - -.toggle-switch { - position: relative; - width: 50px; - height: 26px; -} - -.toggle-switch input { opacity: 0; width: 0; height: 0; } - -.toggle-slider { - position: absolute; - cursor: pointer; - top: 0; left: 0; right: 0; bottom: 0; - background: var(--border); - border-radius: 26px; - transition: 0.3s; -} - -.toggle-slider:before { - position: absolute; - content: ""; - height: 20px; - width: 20px; - left: 3px; - bottom: 3px; - background: white; - border-radius: 50%; - transition: 0.3s; -} - -.toggle-switch input:checked + .toggle-slider { background: var(--accent); } -.toggle-switch input:checked + .toggle-slider:before { transform: translateX(24px); } - -.modal-footer { - padding: 1rem 1.5rem; - border-top: 1px solid var(--border); - display: flex; - justify-content: flex-end; - gap: 0.75rem; -} - -/* Toast */ -.toast-container { - position: fixed; - bottom: 2rem; - right: 2rem; - z-index: 2000; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.toast { - background: var(--bg-tertiary); - border: 1px solid var(--border); - border-radius: 8px; - padding: 1rem 1.5rem; - display: flex; - align-items: center; - gap: 0.75rem; - animation: slideIn 0.3s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} - -@keyframes slideIn { - from { opacity: 0; transform: translateX(100%); } - to { opacity: 1; transform: translateX(0); } -} - -.toast.success { border-left: 3px solid var(--success); } -.toast.error { border-left: 3px solid var(--error); } -.toast.warning { border-left: 3px solid var(--warning); } - -.toast-close { - background: none; - border: none; - color: var(--text-secondary); - cursor: pointer; - margin-left: auto; -} - -/* Empty State */ -.empty-state { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - text-align: center; - padding: 2rem; -} - -.empty-state-icon { - width: 80px; - height: 80px; - background: var(--bg-tertiary); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 1.5rem; -} - -.empty-state-icon svg { width: 40px; height: 40px; stroke: var(--accent); } -.empty-state h2 { font-size: 1.5rem; margin-bottom: 0.5rem; } -.empty-state p { color: var(--text-secondary); max-width: 400px; } - -/* Dropdown */ -.dropdown { - position: relative; - display: inline-block; -} - -.dropdown-content { - display: none; - position: absolute; - right: 0; - top: 100%; - background: var(--bg-secondary); - border: 1px solid var(--border); - border-radius: 8px; - min-width: 160px; - box-shadow: 0 4px 12px rgba(0,0,0,0.3); - z-index: 100; -} - -.dropdown-content.show { display: block; } - -.dropdown-item { - display: block; - width: 100%; - padding: 0.75rem 1rem; - background: none; - border: none; - color: var(--text-primary); - text-align: left; - cursor: pointer; - font-size: 0.875rem; - transition: background 0.2s; -} - -.dropdown-item:hover { background: var(--bg-tertiary); } -.dropdown-item:first-child { border-radius: 8px 8px 0 0; } -.dropdown-item:last-child { border-radius: 0 0 8px 8px; } - -/* Responsive */ -@media (max-width: 768px) { - .sidebar { - position: fixed; - left: 0; top: 0; bottom: 0; - z-index: 100; - transform: translateX(-100%); - } - .sidebar.open { transform: translateX(0); } - .header { padding: 1rem; } - .chat-messages { padding: 1rem; } - .input-area { padding: 1rem; } - .form-row { grid-template-columns: 1fr; } - .input-top-bar { flex-direction: column; align-items: flex-start; } -} - -/* Scrollbar */ -::-webkit-scrollbar { width: 8px; height: 8px; } -::-webkit-scrollbar-track { background: var(--bg-secondary); } -::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } -::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } - -/* ── Connection Status ──────────────────── */ -.connection-status { - display: flex; - align-items: center; - gap: 0.4rem; - padding: 0.3rem 0.7rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; - cursor: pointer; - transition: opacity 0.2s; - user-select: none; -} -.connection-status:hover { opacity: 0.8; } - -.status-dot { - width: 8px; - height: 8px; - border-radius: 50%; - display: inline-block; -} - -.connection-status.managed .status-dot { background: #22c55e; } -.connection-status.managed { color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); } - -.connection-status.available .status-dot { background: #f59e0b; } -.connection-status.available { color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } - -.connection-status.offline .status-dot { background: var(--text-secondary); } -.connection-status.offline { color: var(--text-secondary); border: 1px solid var(--border); } - -/* ── Auth Modal ─────────────────────────── */ -.auth-modal { - max-width: 400px; -} - -.auth-tabs { - display: flex; - gap: 0; - margin-bottom: 1.25rem; - border-bottom: 1px solid var(--border); -} - -.auth-tab { - flex: 1; - padding: 0.6rem; - background: none; - border: none; - border-bottom: 2px solid transparent; - color: var(--text-secondary); - cursor: pointer; - font-size: 0.9rem; - font-weight: 500; - transition: all 0.2s; -} - -.auth-tab:hover { color: var(--text-primary); } -.auth-tab.active { - color: var(--accent); - border-bottom-color: var(--accent); -} - -.auth-error { - color: #ef4444; - font-size: 0.85rem; - min-height: 1.2rem; - margin-top: 0.5rem; -} - -/* ── App Hidden (splash gate active) ─────── */ - -.app-hidden { - display: none !important; -} - -#appContainer { - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; -} - -/* ── Splash Gate ─────────────────────────── */ - -.splash-gate { - display: none; - position: fixed; - inset: 0; - z-index: 9999; - background: var(--bg-primary); - align-items: center; - justify-content: center; -} - -.splash-gate.visible { - display: flex; -} - -.splash-card { - width: 100%; - max-width: 400px; - padding: 2rem; -} - -.splash-brand { - text-align: center; - margin-bottom: 2rem; -} - -.splash-logo { - font-size: 3rem; - margin-bottom: 0.5rem; -} - -.splash-brand h1 { - font-size: 1.5rem; - font-weight: 600; - color: var(--text-primary); - margin: 0; -} - -.splash-tagline { - color: var(--text-secondary); - font-size: 0.9rem; - margin-top: 0.25rem; -} - -.splash-form { - background: var(--bg-secondary); - border: 1px solid var(--border); - border-radius: 12px; - padding: 1.5rem; -} - -.splash-form .auth-tabs { - margin-bottom: 1rem; -} - -.splash-actions { - margin-top: 1rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.btn-full { - width: 100%; - justify-content: center; -} - -.splash-divider { - display: flex; - align-items: center; - gap: 0.75rem; - margin: 0.25rem 0; - color: var(--text-secondary); - font-size: 0.8rem; -} - -.splash-divider::before, -.splash-divider::after { - content: ''; - flex: 1; - height: 1px; - background: var(--border); -} - - -/* ── Admin Panel ─────────────────────────── */ - -.admin-modal { - max-width: 700px; - width: 90vw; -} - -.admin-tabs { - display: flex; - gap: 0; - border-bottom: 1px solid var(--border); - margin-bottom: 1rem; -} - -.admin-tab { - padding: 0.5rem 1rem; - background: none; - border: none; - border-bottom: 2px solid transparent; - color: var(--text-secondary); - cursor: pointer; - font-size: 0.9rem; -} - -.admin-tab:hover { color: var(--text-primary); } -.admin-tab.active { - color: var(--accent); - border-bottom-color: var(--accent); -} - -.admin-user-row { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.6rem 0; - border-bottom: 1px solid var(--border); -} - -.admin-user-row:last-child { border-bottom: none; } - -.admin-user-info { - flex: 1; - min-width: 0; -} - -.admin-user-name { - font-weight: 600; - display: block; -} - -.admin-user-email { - font-size: 0.8rem; - color: var(--text-secondary); -} - -.admin-user-meta { - display: flex; - gap: 0.4rem; -} - -.admin-badge { - padding: 0.15rem 0.5rem; - border-radius: 4px; - font-size: 0.75rem; - font-weight: 500; -} - -.admin-badge-admin { background: #7c3aed22; color: #a78bfa; } -.admin-badge-user { background: #3b82f622; color: #60a5fa; } -.admin-badge-moderator { background: #f59e0b22; color: #fbbf24; } -.admin-badge-active { background: #10b98122; color: #34d399; } -.admin-badge-inactive { background: #ef444422; color: #f87171; } - -.admin-user-actions { - display: flex; - gap: 0.4rem; - align-items: center; -} - -.admin-role-select { - padding: 0.2rem 0.4rem; - background: var(--bg-primary); - color: var(--text-primary); - border: 1px solid var(--border); - border-radius: 4px; - font-size: 0.8rem; -} - -.admin-you { - color: var(--text-secondary); - font-size: 0.8rem; - font-style: italic; -} - -.btn-warning { background: #f59e0b; color: #000; } -.btn-danger { background: #ef4444; color: #fff; } -.btn-success { background: #10b981; color: #fff; } -.btn-small { padding: 0.2rem 0.5rem; font-size: 0.75rem; } - -.admin-stats-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - gap: 0.75rem; -} - -.admin-stat-card { - background: var(--bg-primary); - border: 1px solid var(--border); - border-radius: 8px; - padding: 1rem; - text-align: center; -} - -.admin-stat-value { - font-size: 1.5rem; - font-weight: 700; - color: var(--accent); -} - -.admin-stat-label { - font-size: 0.8rem; - color: var(--text-secondary); - margin-top: 0.25rem; -} - -.admin-loading, .admin-empty, .admin-error { - padding: 1rem; - text-align: center; - color: var(--text-secondary); -} - -.admin-error { color: #ef4444; } - -.toggle-label { - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; -} - -/* ── Admin Add User / Reset Password ─────── */ - -.admin-add-user-toggle { - margin-bottom: 0.75rem; -} - -.admin-add-user-form { - background: var(--bg-primary); - border: 1px solid var(--border); - border-radius: 8px; - padding: 0.75rem; - margin-bottom: 0.75rem; -} - -.admin-form-row { - display: flex; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.admin-form-row:last-child { - margin-bottom: 0; -} - -.admin-input { - flex: 1; - padding: 0.4rem 0.6rem; - background: var(--bg-secondary); - color: var(--text-primary); - border: 1px solid var(--border); - border-radius: 4px; - font-size: 0.85rem; -} - -.admin-input:focus { - outline: none; - border-color: var(--accent); -} - -.admin-reset-dialog { - position: absolute; - inset: 0; - background: rgba(0,0,0,0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 10; - border-radius: 8px; -} - -.admin-reset-card { - background: var(--bg-secondary); - border: 1px solid var(--border); - border-radius: 8px; - padding: 1.25rem; - min-width: 300px; -} - -.admin-reset-card h3 { - margin: 0 0 0.5rem 0; - font-size: 1rem; -} - -.admin-reset-card p { - color: var(--text-secondary); - font-size: 0.85rem; - margin: 0 0 0.75rem 0; -} - -.admin-reset-card .admin-input { - width: 100%; - margin-bottom: 0.75rem; - box-sizing: border-box; -} - -.admin-modal .modal-body { - position: relative; -} - -/* ── Profile Section in Settings ─────────── */ - -.settings-section-title { - font-size: 0.95rem; - font-weight: 600; - color: var(--accent); - margin: 0 0 0.75rem 0; -} - -.settings-divider { - border: none; - border-top: 1px solid var(--border); - margin: 1rem 0; -} - -.profile-password-row { - margin-top: 0.5rem; -} - -#profileChangePwForm { - margin-top: 0.75rem; - padding: 0.75rem; - background: var(--bg-primary); - border: 1px solid var(--border); - border-radius: 6px; -} - -#profileChangePwForm .form-group { - margin-bottom: 0.5rem; -} - -/* ── API Providers List ──────────────────── */ - -.provider-list { - margin-bottom: 0.5rem; -} +/* ── Providers ───────────────────────────── */ .provider-row { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.5rem 0.6rem; - border: 1px solid var(--border); - border-radius: 6px; - margin-bottom: 0.4rem; - background: var(--bg-primary); + display: flex; align-items: center; justify-content: space-between; + padding: 0.5rem 0; border-bottom: 1px solid var(--border); } +.provider-info { flex: 1; } +.provider-name { font-weight: 600; font-size: 0.85rem; } +.provider-meta { font-size: 0.75rem; color: var(--text-secondary); margin-left: 0.5rem; } +.provider-actions { display: flex; align-items: center; gap: 0.5rem; } +.badge-global { font-size: 0.7rem; color: var(--text-secondary); background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; } -.provider-info { - flex: 1; - min-width: 0; +/* ── Admin ────────────────────────────────── */ + +.admin-tabs { + display: flex; border-bottom: 1px solid var(--border); padding: 0 1rem; + background: var(--bg-tertiary); } - -.provider-name { - font-weight: 600; - font-size: 0.9rem; - display: block; +.admin-tab { + padding: 0.5rem 0.75rem; background: none; border: none; color: var(--text-secondary); + cursor: pointer; font-size: 0.8rem; border-bottom: 2px solid transparent; } +.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); } -.provider-meta { - font-size: 0.75rem; - color: var(--text-secondary); +.admin-user-row { + padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; } - -.provider-actions { - display: flex; - align-items: center; - gap: 0.4rem; -} - -.provider-empty { - padding: 0.75rem; - text-align: center; - color: var(--text-secondary); - font-size: 0.85rem; - border: 1px dashed var(--border); - border-radius: 6px; - margin-bottom: 0.5rem; -} - -.provider-add-toggle { - margin-bottom: 0.5rem; -} - -.provider-add-form { - background: var(--bg-primary); - border: 1px solid var(--border); - border-radius: 8px; - padding: 0.75rem; - margin-bottom: 0.5rem; -} - -.provider-add-form .form-group { - margin-bottom: 0.5rem; -} - -.provider-add-form .form-group:last-of-type { - margin-bottom: 0.75rem; -} - -.admin-hint { - font-size: 0.8rem; - color: var(--text-secondary); - margin: 0 0 0.75rem 0; -} - -/* ── Admin Models Tab ────────────────────── */ - -.admin-models-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.admin-models-header .admin-hint { - flex: 1; - margin: 0; -} - -.admin-model-group { - margin-bottom: 1rem; -} - -.admin-model-group-header { - font-size: 0.8rem; - font-weight: 600; - color: var(--accent); - text-transform: uppercase; - letter-spacing: 0.05em; - padding: 0.25rem 0; - border-bottom: 1px solid var(--border); - margin-bottom: 0.25rem; -} - +.admin-user-email { font-size: 0.75rem; color: var(--text-secondary); } .admin-model-row { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.4rem 0; - border-bottom: 1px solid var(--border); + display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0; + border-bottom: 1px solid var(--border); font-size: 0.8rem; } -.admin-model-row:last-child { - border-bottom: none; -} +.badge-admin { background: var(--accent); color: #fff; font-size: 0.65rem; padding: 1px 6px; border-radius: 4px; } +.badge-user { background: var(--bg-tertiary); color: var(--text-secondary); font-size: 0.65rem; padding: 1px 6px; border-radius: 4px; } +.badge-inactive { background: var(--danger); color: #fff; font-size: 0.65rem; padding: 1px 6px; border-radius: 4px; } -.admin-model-toggle { - flex-shrink: 0; -} +/* ── Toast ────────────────────────────────── */ -.toggle-label-compact input[type="checkbox"] { - width: 16px; - height: 16px; - accent-color: var(--accent); - cursor: pointer; -} - -.admin-model-info { - flex: 1; - min-width: 0; -} - -.admin-model-name { - font-weight: 500; - font-size: 0.85rem; - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.admin-model-id { - font-size: 0.7rem; - color: var(--text-secondary); - font-family: monospace; -} - -.admin-model-caps { - display: flex; - gap: 0.25rem; - flex-shrink: 0; -} - -.cap-badge { - font-size: 0.65rem; - padding: 0.1rem 0.35rem; - border-radius: 3px; - border: 1px solid var(--border); - cursor: pointer; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.03em; - background: none; - transition: all 0.15s; -} - -.cap-active { - background: var(--accent); - color: #000; - border-color: var(--accent); -} - -.cap-inactive { - color: var(--text-secondary); - opacity: 0.5; -} - -.cap-badge:hover { - opacity: 1; -} - -.admin-model-actions { - flex-shrink: 0; -} - -/* ── Settings Mode Badge ─────────────────── */ - -.settings-mode-badge { - padding: 0.5rem 0.75rem; - border-radius: 6px; - font-size: 0.8rem; - margin-bottom: 1rem; - font-weight: 500; -} - -.mode-managed { - background: #10b98115; - border: 1px solid #10b98133; - color: #34d399; -} - -.mode-unmanaged { - background: #f59e0b15; - border: 1px solid #f59e0b33; - color: #fbbf24; +.toast-container { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem; } +.toast { + background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); + padding: 0.5rem 1rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; + animation: toastIn 0.3s ease; } +.toast.error { border-color: var(--danger); } +.toast.warning { border-color: var(--warning); } +.toast.success { border-color: var(--success); } +.toast button { background: none; border: none; color: var(--text-secondary); cursor: pointer; } +@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Debug Modal ─────────────────────────── */ -.debug-modal { - max-width: 900px; - height: 80vh; - display: flex; - flex-direction: column; - overflow: hidden; /* override base .modal overflow-y: auto */ -} - -.debug-tabs { - display: flex; - gap: 0; - border-bottom: 1px solid var(--border); - padding: 0 1rem; - background: var(--bg-secondary); -} - +.debug-modal { max-width: 900px; height: 80vh; overflow: hidden; } +.debug-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 1rem; background: var(--bg-tertiary); } .debug-tab { - padding: 0.5rem 1rem; - background: none; - border: none; - color: var(--text-secondary); - cursor: pointer; - font-size: 0.8rem; - border-bottom: 2px solid transparent; - transition: color 0.2s, border-color 0.2s; + padding: 0.5rem 0.75rem; background: none; border: none; color: var(--text-secondary); + cursor: pointer; font-size: 0.8rem; border-bottom: 2px solid transparent; } +.debug-tab.active { color: var(--accent); border-bottom-color: var(--accent); } +.debug-modal-body { flex: 1; overflow: hidden; padding: 0 !important; } +.debug-tab-content { height: 100%; display: flex; flex-direction: column; } +.debug-toolbar { display: flex; gap: 1rem; padding: 0.4rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.75rem; } +.debug-check { display: flex; align-items: center; gap: 0.3rem; color: var(--text-secondary); cursor: pointer; } +.debug-content { flex: 1; overflow-y: auto; padding: 0.5rem; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; } +.debug-entry { padding: 1px 0.5rem; border-bottom: 1px solid rgba(128,128,128,0.08); white-space: pre-wrap; word-break: break-all; } +.debug-time { color: var(--text-secondary); opacity: 0.6; font-size: 0.68rem; } +.debug-msg { color: var(--text); } +.debug-empty { color: var(--text-secondary); text-align: center; padding: 2rem; } +.debug-net-entry { border-bottom: 1px solid var(--border); } +.debug-net-entry summary { padding: 0.4rem 0.5rem; cursor: pointer; font-size: 0.75rem; } +.debug-net-method { font-weight: bold; color: var(--accent); } +.debug-net-url { color: var(--text); word-break: break-all; } +.debug-net-detail { padding: 0.5rem 1rem; font-size: 0.72rem; } +.debug-pre { white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 4px; margin: 0.3rem 0; } +.debug-footer { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-top: 1px solid var(--border); } -.debug-tab:hover { color: var(--text-primary); } -.debug-tab.active { - color: var(--accent); - border-bottom-color: var(--accent); -} +/* ── Responsive ──────────────────────────── */ -.debug-modal-body { - flex: 1; - overflow: hidden; - padding: 0 !important; +@media (max-width: 768px) { + .sidebar { width: 220px; } + .header-title { font-size: 0.9rem; } } - -.debug-tab-content { - height: 100%; - display: flex; - flex-direction: column; -} - -.debug-toolbar { - display: flex; - gap: 1rem; - padding: 0.4rem 1rem; - border-bottom: 1px solid var(--border); - font-size: 0.75rem; -} - -.debug-check { - display: flex; - align-items: center; - gap: 0.3rem; - color: var(--text-secondary); - cursor: pointer; -} - -.debug-content { - flex: 1; - overflow-y: auto; - padding: 0.5rem; - font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; - font-size: 0.72rem; - line-height: 1.5; -} - -.debug-entry { - padding: 1px 0.5rem; - border-bottom: 1px solid rgba(128, 128, 128, 0.08); - white-space: pre-wrap; - word-break: break-all; -} - -.debug-entry:hover { - background: rgba(255, 255, 255, 0.02); -} - -.debug-time { - color: var(--text-secondary); - opacity: 0.6; - font-size: 0.68rem; -} - -.debug-msg { - color: var(--text-primary); -} - -.debug-empty { - color: var(--text-secondary); - text-align: center; - padding: 2rem; - font-family: inherit; -} - -.debug-net-entry { - border-bottom: 1px solid var(--border); -} - -.debug-net-entry summary { - padding: 0.4rem 0.5rem; - cursor: pointer; - font-size: 0.75rem; -} - -.debug-net-entry summary:hover { - background: rgba(255, 255, 255, 0.02); -} - -.debug-net-method { - font-weight: bold; - color: var(--accent); - min-width: 3em; - display: inline-block; -} - -.debug-net-url { - color: var(--text-primary); - word-break: break-all; -} - -.debug-net-detail { - padding: 0.5rem 1rem; - font-size: 0.72rem; -} - -.debug-pre { - white-space: pre-wrap; - word-break: break-all; - max-height: 200px; - overflow: auto; - padding: 0.5rem; - background: rgba(0, 0, 0, 0.2); - border-radius: 4px; - margin: 0.3rem 0; -} - -.debug-state-pre { - max-height: none; - font-size: 0.75rem; -} - -.debug-footer { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-top: 1px solid var(--border); +@media (max-width: 640px) { + .sidebar { display: none; } } diff --git a/src/index.html b/src/index.html index 15f1f2d..7797d06 100644 --- a/src/index.html +++ b/src/index.html @@ -7,518 +7,299 @@ - + -