Spaces:
Running
Running
Complete UI rebuild: switch to gradio.Server static-file serving, fix mobile layout from reference UI
3e7e8e0 verified | /* DeepSeek V4 Flash — Clean Mobile-Friendly Style Sheet */ | |
| /* Based on working reference UI from akhaliq/Step-3.7-Flash, with custom features */ | |
| :root { | |
| --bg-primary: #f8f9fa; | |
| --bg-workspace: #f8f9fa; | |
| --bg-card: #ffffff; | |
| --bg-sidebar: #ffffff; | |
| --border-color: #e5e7eb; | |
| --border-light: #f1f2f4; | |
| --border-focus: #111827; | |
| --accent-blue: #2563eb; | |
| --accent-blue-bg: #eff6ff; | |
| --text-primary: #111827; | |
| --text-secondary: #4b5563; | |
| --text-muted: #9ca3af; | |
| --danger: #ef4444; | |
| --btn-light-bg: #f3f4f6; | |
| --btn-light-hover: #e5e7eb; | |
| --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| --font-mono: 'Fira Code', monospace; | |
| --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| --border-radius-sm: 8px; | |
| --border-radius-md: 12px; | |
| --border-radius-lg: 16px; | |
| --border-radius-pill: 100px; | |
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.01); | |
| --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02); | |
| } | |
| /* Reset */ | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| overflow: hidden; | |
| height: 100vh; | |
| width: 100vw; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* Scrollbars */ | |
| ::-webkit-scrollbar { width: 4px; height: 4px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 10px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #cbd5e1; } | |
| /* ── Layout ────────────────────────────────────────────────────────── */ | |
| .app-container { | |
| display: flex; | |
| height: 100vh; | |
| width: 100vw; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .main-workspace { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| background-color: var(--bg-workspace); | |
| overflow: hidden; | |
| position: relative; | |
| width: 100%; | |
| } | |
| /* ── Header ────────────────────────────────────────────────────────── */ | |
| .workspace-header { | |
| height: 56px; | |
| border-bottom: 1px solid var(--border-color); | |
| background-color: var(--bg-card); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 20px; | |
| flex-shrink: 0; | |
| z-index: 10; | |
| } | |
| .header-left-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .header-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .brand-logo-img { | |
| width: 24px; | |
| height: 24px; | |
| object-fit: contain; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .brand-name { | |
| font-family: var(--font-heading); | |
| font-size: 15px; | |
| font-weight: 700; | |
| letter-spacing: -0.3px; | |
| color: var(--text-primary); | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .header-btn { | |
| appearance: none; | |
| -webkit-appearance: none; | |
| background-color: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-sm); | |
| color: var(--text-secondary); | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| font-family: var(--font-body); | |
| font-weight: 500; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| transition: var(--transition-smooth); | |
| outline: none; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .header-btn:hover { | |
| background-color: var(--btn-light-bg); | |
| border-color: #cbd5e1; | |
| color: var(--text-primary); | |
| } | |
| .header-btn:active { | |
| background-color: var(--btn-light-hover); | |
| transform: scale(0.98); | |
| } | |
| .header-btn svg { flex-shrink: 0; } | |
| /* ── Viewport ──────────────────────────────────────────────────────── */ | |
| .workspace-viewport { | |
| flex: 1; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* ── Studio Dashboard (Empty State) ────────────────────────────────── */ | |
| .studio-dashboard { | |
| max-width: 640px; | |
| width: 100%; | |
| margin: auto; | |
| padding: 40px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .welcome-heading { | |
| font-family: var(--font-heading); | |
| font-size: 26px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 24px; | |
| letter-spacing: -0.4px; | |
| text-align: center; | |
| } | |
| /* Console Input Box */ | |
| .console-box { | |
| width: 100%; | |
| background-color: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-lg); | |
| box-shadow: var(--shadow-md); | |
| padding: 12px 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| transition: var(--transition-smooth); | |
| margin-bottom: 36px; | |
| } | |
| .console-box:focus-within { | |
| border-color: var(--border-focus); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .console-box textarea { | |
| width: 100%; | |
| border: none; | |
| outline: none; | |
| resize: none; | |
| font-family: var(--font-body); | |
| font-size: 14.5px; | |
| color: var(--text-primary); | |
| background: transparent; | |
| line-height: 1.45; | |
| min-height: 50px; | |
| } | |
| .console-box textarea::placeholder { color: var(--text-muted); } | |
| .inner-shelf-preview, | |
| .mini-shelf-preview { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| padding-bottom: 2px; | |
| } | |
| .console-action-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid var(--border-light); | |
| padding-top: 10px; | |
| } | |
| /* Circle Buttons */ | |
| .circle-btn-action { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| border: 1px solid var(--border-color); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition-smooth); | |
| outline: none; | |
| } | |
| .circle-btn-action:hover { | |
| background-color: var(--btn-light-bg); | |
| color: var(--text-primary); | |
| } | |
| .circle-btn-send { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| border: none; | |
| background-color: #1f2937; | |
| color: #ffffff; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition-smooth); | |
| outline: none; | |
| } | |
| .circle-btn-send:hover { background-color: #111827; } | |
| /* ── Showcase Chips ────────────────────────────────────────────────── */ | |
| .showcase-section { width: 100%; } | |
| .showcase-title { | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| margin-bottom: 12px; | |
| text-align: center; | |
| font-weight: 500; | |
| } | |
| .showcase-chips-row { | |
| display: flex; | |
| gap: 10px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .recipe-chip { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 16px; | |
| border-radius: var(--border-radius-pill); | |
| background-color: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .recipe-chip:hover { | |
| background-color: var(--btn-light-bg); | |
| border-color: #cbd5e1; | |
| color: var(--text-primary); | |
| transform: translateY(-1px); | |
| } | |
| .recipe-chip:active { transform: translateY(0); } | |
| .chip-icon { font-size: 14px; } | |
| /* ── Chat Thread ───────────────────────────────────────────────────── */ | |
| .chat-thread-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .chat-messages-feed { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| max-width: 680px; | |
| width: 100%; | |
| margin: 0 auto; | |
| } | |
| /* Message Bubbles */ | |
| .message-bubble { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| max-width: 90%; | |
| animation: slideUp 0.25s ease-out; | |
| } | |
| .message-bubble.user { align-self: flex-end; } | |
| .message-bubble.assistant { align-self: flex-start; width: 100%; max-width: 100%; } | |
| .message-meta { | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| margin: 0 4px; | |
| } | |
| .message-bubble.user .message-meta { text-align: right; } | |
| .message-body { | |
| padding: 10px 14px; | |
| border-radius: var(--border-radius-md); | |
| font-size: 13.5px; | |
| line-height: 1.5; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .message-bubble.user .message-body { | |
| background-color: var(--btn-light-bg); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-primary); | |
| border-bottom-right-radius: 4px; | |
| } | |
| .message-bubble.assistant .message-body { | |
| background-color: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-primary); | |
| border-bottom-left-radius: 4px; | |
| } | |
| /* Bubble Attachments */ | |
| .bubble-attachments { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); | |
| gap: 6px; | |
| margin-top: 8px; | |
| max-width: 320px; | |
| } | |
| .bubble-attachment-card { | |
| border-radius: var(--border-radius-sm); | |
| overflow: hidden; | |
| border: 1px solid var(--border-color); | |
| background-color: #fafafa; | |
| position: relative; | |
| aspect-ratio: 16/10; | |
| } | |
| .bubble-attachment-card img, | |
| .bubble-attachment-card video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .bubble-attachment-label { | |
| position: absolute; | |
| bottom: 0; left: 0; right: 0; | |
| background: rgba(0, 0, 0, 0.6); | |
| color: #fff; | |
| font-size: 8px; | |
| text-align: center; | |
| padding: 1px; | |
| font-family: var(--font-mono); | |
| } | |
| /* ── Collapsible Thoughts ──────────────────────────────────────────── */ | |
| .thought-container { | |
| margin-bottom: 12px; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-sm); | |
| overflow: hidden; | |
| } | |
| .thought-container.collapsed .thought-content { display: none; } | |
| .thought-container.collapsed .thought-toggle-icon { transform: rotate(-90deg); } | |
| .thought-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 6px 10px; | |
| background-color: #f9fafb; | |
| cursor: pointer; | |
| user-select: none; | |
| transition: var(--transition-smooth); | |
| } | |
| .thought-header:hover { background-color: #f3f4f6; } | |
| .thought-title-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: var(--font-heading); | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .thought-timer { | |
| font-family: var(--font-mono); | |
| font-size: 9.5px; | |
| color: var(--text-muted); | |
| } | |
| .thought-toggle-icon { | |
| font-size: 9px; | |
| color: var(--text-secondary); | |
| transition: transform 0.2s ease; | |
| } | |
| .thought-content { | |
| padding: 10px 12px; | |
| font-family: var(--font-mono); | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| background-color: #ffffff; | |
| border-top: 1px solid var(--border-color); | |
| white-space: pre-wrap; | |
| max-height: 150px; | |
| overflow-y: auto; | |
| } | |
| /* ── RP (Roleplay) Markdown ────────────────────────────────────────── */ | |
| .rp-narration { | |
| font-style: italic; | |
| color: #6b7280; | |
| background-color: rgba(107, 114, 128, 0.06); | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| border-left: 2px solid #9ca3af; | |
| } | |
| .rp-dialogue { | |
| color: #2563eb; | |
| font-weight: 500; | |
| background-color: rgba(37, 99, 235, 0.06); | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| } | |
| .rp-bold { font-weight: 700; color: #111827; } | |
| .rp-ooc { | |
| color: #9ca3af; | |
| font-style: italic; | |
| opacity: 0.7; | |
| font-size: 0.9em; | |
| } | |
| .rp-divider { | |
| border: none; | |
| border-top: 1px dashed #d1d5db; | |
| margin: 12px 0; | |
| } | |
| /* ── Toggle Switch ─────────────────────────────────────────────────── */ | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 36px; | |
| height: 20px; | |
| flex-shrink: 0; | |
| } | |
| .toggle-switch input { opacity: 0; width: 0; height: 0; } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background-color: #d1d5db; | |
| transition: 0.2s; | |
| border-radius: 20px; | |
| } | |
| .toggle-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 14px; | |
| width: 14px; | |
| left: 3px; | |
| bottom: 3px; | |
| background-color: white; | |
| transition: 0.2s; | |
| border-radius: 50%; | |
| } | |
| .toggle-switch input:checked + .toggle-slider { background-color: #111827; } | |
| .toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); } | |
| .toggle-switch input:focus + .toggle-slider { box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.2); } | |
| .setting-description { | |
| font-size: 10.5px; | |
| color: var(--text-muted); | |
| line-height: 1.4; | |
| padding-top: 2px; | |
| } | |
| /* ── Markdown Typography ───────────────────────────────────────────── */ | |
| .markdown-body h1, .markdown-body h2, .markdown-body h3 { | |
| margin-top: 12px; | |
| margin-bottom: 4px; | |
| font-family: var(--font-heading); | |
| font-weight: 600; | |
| } | |
| .markdown-body h1 { font-size: 14.5px; border-bottom: 1px solid var(--border-light); padding-bottom: 2px; } | |
| .markdown-body h2 { font-size: 13.5px; } | |
| .markdown-body h3 { font-size: 12.5px; } | |
| .markdown-body p { margin-bottom: 6px; } | |
| .markdown-body p:last-child { margin-bottom: 0; } | |
| .markdown-body code { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| background-color: var(--btn-light-bg); | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| color: var(--accent-blue); | |
| } | |
| .markdown-body pre { | |
| margin: 10px 0; | |
| border-radius: var(--border-radius-sm); | |
| overflow: hidden; | |
| border: 1px solid var(--border-color); | |
| } | |
| .markdown-body pre code { | |
| display: block; | |
| padding: 10px; | |
| overflow-x: auto; | |
| background-color: #0f172a ; | |
| color: #e2e8f0; | |
| } | |
| .markdown-body table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 10px 0; | |
| font-size: 12px; | |
| } | |
| .markdown-body th, .markdown-body td { | |
| border: 1px solid var(--border-color); | |
| padding: 6px 8px; | |
| text-align: left; | |
| } | |
| .markdown-body th { background-color: var(--bg-primary); font-weight: 600; } | |
| /* ── Chat Footer ───────────────────────────────────────────────────── */ | |
| .chat-mini-footer { | |
| padding: 12px 20px; | |
| background-color: var(--bg-workspace); | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .chat-mini-footer .console-box { | |
| max-width: 680px; | |
| margin: 0 auto; | |
| box-shadow: var(--shadow-sm); | |
| padding: 8px 12px; | |
| border-radius: var(--border-radius-md); | |
| margin-bottom: 0; | |
| } | |
| /* ── Left Sidebar Drawer (Chat History) ────────────────────────────── */ | |
| .sidebar-left { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| width: 280px; | |
| background-color: var(--bg-sidebar); | |
| border-right: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 1050; | |
| transform: translateX(-100%); | |
| transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08); | |
| } | |
| .sidebar-left.open { transform: translateX(0); } | |
| .left-sidebar-header { | |
| padding: 14px 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .user-profile-section { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .user-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background-color: var(--btn-light-bg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| flex-shrink: 0; | |
| } | |
| .user-avatar.logged-in { background-color: #111827; color: #ffffff; } | |
| .user-info-text { flex: 1; min-width: 0; } | |
| .user-display-name { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .hf-login-btn { | |
| display: inline-block; | |
| margin-top: 4px; | |
| padding: 3px 10px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| font-family: var(--font-body); | |
| color: #ffffff; | |
| background-color: #111827; | |
| border: none; | |
| border-radius: var(--border-radius-pill); | |
| cursor: pointer; | |
| } | |
| .hf-login-btn:hover { background-color: #374151; } | |
| .hf-login-btn.logged-in { background-color: transparent; color: var(--danger); border: 1px solid var(--border-color); } | |
| .hf-login-btn.logged-in:hover { background-color: #fef2f2; border-color: #fecaca; } | |
| .new-chat-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 12px 16px 8px; | |
| padding: 8px 14px; | |
| border-radius: var(--border-radius-sm); | |
| background-color: var(--bg-card); | |
| border: 1px dashed var(--border-color); | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| font-weight: 500; | |
| font-family: var(--font-body); | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| width: calc(100% - 32px); | |
| } | |
| .new-chat-btn:hover { | |
| border-color: #cbd5e1; | |
| color: var(--text-primary); | |
| background-color: var(--btn-light-bg); | |
| border-style: solid; | |
| } | |
| .chat-history-list { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 8px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .empty-history-text { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| text-align: center; | |
| padding: 20px 10px; | |
| line-height: 1.6; | |
| } | |
| .chat-history-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 8px 10px; | |
| border-radius: var(--border-radius-sm); | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| position: relative; | |
| } | |
| .chat-history-item:hover { background-color: var(--btn-light-bg); } | |
| .chat-history-item.active { background-color: var(--accent-blue-bg); border: 1px solid rgba(37, 99, 235, 0.15); } | |
| .history-item-content { flex: 1; min-width: 0; overflow: hidden; } | |
| .history-item-title { | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .history-item-meta { font-size: 9.5px; color: var(--text-muted); margin-top: 2px; } | |
| .history-item-delete { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 4px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| transition: var(--transition-smooth); | |
| flex-shrink: 0; | |
| } | |
| .chat-history-item:hover .history-item-delete { opacity: 1; } | |
| .history-item-delete:hover { background-color: #fef2f2; color: var(--danger); } | |
| .left-sidebar-footer { | |
| padding: 10px 16px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| /* Left sidebar overlay */ | |
| .sidebar-overlay-left { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(2px); | |
| z-index: 1040; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.2s ease; | |
| } | |
| .sidebar-overlay-left.active { opacity: 1; pointer-events: auto; } | |
| /* ── Right Sidebar Overlay ─────────────────────────────────────────── */ | |
| .sidebar-overlay { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| backdrop-filter: blur(1.5px); | |
| z-index: 990; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.2s ease; | |
| } | |
| .sidebar-overlay.active { opacity: 1; pointer-events: auto; } | |
| /* ── Right Settings Drawer ─────────────────────────────────────────── */ | |
| .sidebar-right { | |
| position: absolute; | |
| top: 0; right: 0; bottom: 0; | |
| width: 320px; | |
| background-color: var(--bg-sidebar); | |
| border-left: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 1000; | |
| transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: -4px 0 20px rgba(0, 0, 0, 0.03); | |
| transform: translateX(0); | |
| } | |
| .sidebar-right.collapsed { transform: translateX(100%); } | |
| .right-sidebar-header { | |
| padding: 14px 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .right-sidebar-header h3 { | |
| font-family: var(--font-heading); | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .close-drawer { border-color: transparent ; } | |
| .close-drawer:hover { background-color: var(--btn-light-bg) ; } | |
| .sidebar-right-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .right-block-card { | |
| background-color: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-md); | |
| padding: 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .flex-1-card { flex: 1; min-height: 180px; } | |
| .card-block-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .block-title { | |
| font-family: var(--font-heading); | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .block-value { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| /* System Prompt */ | |
| .system-prompt-textarea { | |
| width: 100%; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-sm); | |
| background-color: #f9fafb; | |
| color: var(--text-primary); | |
| font-family: var(--font-body); | |
| font-size: 12px; | |
| line-height: 1.5; | |
| padding: 8px 10px; | |
| resize: vertical; | |
| min-height: 60px; | |
| outline: none; | |
| } | |
| .system-prompt-textarea:focus { border-color: var(--border-focus); background-color: #ffffff; } | |
| .system-prompt-textarea::placeholder { color: var(--text-muted); } | |
| /* Slider */ | |
| .slider-input { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| height: 4px; | |
| border-radius: 2px; | |
| background-color: #e5e7eb; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| .slider-input::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 14px; height: 14px; | |
| border-radius: 50%; | |
| background-color: #111827; | |
| cursor: pointer; | |
| } | |
| .slider-input::-moz-range-thumb { | |
| width: 14px; height: 14px; | |
| border-radius: 50%; | |
| background-color: #111827; | |
| border: none; | |
| } | |
| /* Effort Picker */ | |
| .effort-picker { | |
| display: flex; | |
| background-color: #f9fafb; | |
| border: 1px solid var(--border-color); | |
| padding: 2.5px; | |
| border-radius: var(--border-radius-sm); | |
| gap: 2px; | |
| } | |
| .effort-pill { flex: 1; cursor: pointer; text-align: center; position: relative; } | |
| .effort-pill input { position: absolute; opacity: 0; width: 0; height: 0; } | |
| .effort-pill span { | |
| display: block; | |
| padding: 5px 0; | |
| font-size: 11px; | |
| font-weight: 500; | |
| border-radius: 4px; | |
| color: var(--text-secondary); | |
| transition: var(--transition-smooth); | |
| font-family: var(--font-heading); | |
| } | |
| .effort-pill input:checked + span { background-color: #111827; color: #ffffff; } | |
| .effort-pill:hover span:not(input:checked + span) { color: var(--text-primary); background-color: rgba(0,0,0,0.02); } | |
| /* Shelf & Media */ | |
| .shelf-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; } | |
| .empty-shelf-text { font-size: 10.5px; color: var(--text-muted); text-align: center; padding: 8px 0; font-style: italic; } | |
| .media-chip { | |
| display: flex; | |
| align-items: center; | |
| background-color: #f9fafb; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-sm); | |
| padding: 5px 8px; | |
| gap: 8px; | |
| } | |
| .media-chip-preview { | |
| width: 24px; height: 24px; | |
| border-radius: 4px; | |
| object-fit: cover; | |
| background-color: #eaeaea; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| } | |
| .media-chip-preview img { width: 100%; height: 100%; object-fit: cover; } | |
| .media-chip-details { flex: 1; min-width: 0; } | |
| .media-chip-name { | |
| font-size: 10.5px; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .media-chip-meta { font-size: 9px; color: var(--text-muted); display: flex; gap: 4px; } | |
| .media-chip-remove { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 3px; display: flex; } | |
| .media-chip-remove:hover { color: var(--danger); } | |
| .quick-preview-item { | |
| width: 32px; height: 32px; | |
| border-radius: var(--border-radius-sm); | |
| border: 1px solid var(--border-color); | |
| overflow: hidden; | |
| position: relative; | |
| flex-shrink: 0; | |
| } | |
| .quick-preview-item img { width: 100%; height: 100%; object-fit: cover; } | |
| .quick-preview-badge { | |
| position: absolute; | |
| top: 1.5px; right: 1.5px; | |
| background-color: var(--accent-blue); | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| } | |
| .right-sidebar-footer { padding: 10px 16px; border-top: 1px solid var(--border-color); } | |
| .status-indicator-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 10.5px; | |
| color: var(--text-secondary); | |
| } | |
| .status-dot { width: 5px; height: 5px; border-radius: 50%; } | |
| .status-dot.online { background-color: #10b981; } | |
| /* Code block copy button */ | |
| .code-block-wrapper { position: relative; } | |
| .code-block-wrapper .copy-code-btn { | |
| position: absolute; | |
| top: 6px; right: 6px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: #9ca3af; | |
| font-size: 10px; | |
| font-family: var(--font-mono); | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .code-block-wrapper .copy-code-btn:hover { background-color: rgba(255, 255, 255, 0.2); color: #e5e7eb; } | |
| /* ── Animations ────────────────────────────────────────────────────── */ | |
| .spinner-light { | |
| width: 12px; height: 12px; | |
| border: 1.5px solid rgba(255, 255, 255, 0.2); | |
| border-top: 1.5px solid #ffffff; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |
| @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } | |
| /* ── Responsive ────────────────────────────────────────────────────── */ | |
| @media (min-width: 641px) { | |
| .sidebar-right.collapsed { transform: translateX(100%); } | |
| } | |
| @media (max-width: 640px) { | |
| body { font-size: 13.5px; } | |
| .workspace-header { padding: 0 12px; height: 50px; } | |
| .header-btn span { display: none; } | |
| .header-btn { padding: 7px; } | |
| .brand-name { font-size: 14px; } | |
| .sidebar-left { width: 85vw ; } | |
| .sidebar-right { width: 100% ; border-left: none; } | |
| .studio-dashboard { padding: 24px 14px; } | |
| .welcome-heading { font-size: 20px; margin-bottom: 16px; } | |
| .chat-messages-feed { padding: 12px 10px; gap: 14px; } | |
| .message-body { padding: 9px 12px; font-size: 13px; } | |
| .message-bubble { max-width: 95%; } | |
| .chat-mini-footer { padding: 8px 10px; } | |
| .chat-mini-footer .console-box { padding: 6px 10px; } | |
| .console-box textarea { font-size: 16px; /* prevent iOS zoom */ } | |
| .recipe-chip { padding: 6px 12px; font-size: 11.5px; } | |
| .code-block-wrapper .copy-code-btn { font-size: 9px; padding: 1px 6px; } | |
| } | |