Spaces:
Running
Running
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); | |
| /* ─── Design tokens ─────────────────────────────────────────── */ | |
| :root { | |
| --emo-radius-xs: 0.375rem; | |
| --emo-radius-sm: 0.5rem; | |
| --emo-radius-md: 0.75rem; | |
| --emo-radius-lg: 1rem; | |
| --emo-radius-xl: 1.25rem; | |
| --emo-radius-2xl: 1.5rem; | |
| --emo-radius-3xl: 1.75rem; | |
| --emo-radius-full: 9999px; | |
| --emo-space-1: 0.25rem; | |
| --emo-space-2: 0.5rem; | |
| --emo-space-3: 0.75rem; | |
| --emo-space-4: 1rem; | |
| --emo-space-5: 1.25rem; | |
| --emo-space-6: 1.5rem; | |
| --emo-space-8: 2rem; | |
| --emo-space-10: 2.5rem; | |
| --emo-space-12: 3rem; | |
| --emo-text-xs: 0.6875rem; | |
| --emo-text-sm: 0.8125rem; | |
| --emo-text-base: 0.9375rem; | |
| --emo-text-lg: 1.0625rem; | |
| --emo-text-xl: 1.25rem; | |
| --emo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); | |
| --emo-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); | |
| --emo-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); | |
| --emo-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.15); | |
| --emo-transition: 0.15s ease; | |
| --emo-transition-slow: 0.28s cubic-bezier(0.4, 0, 0.2, 1); | |
| --emo-transition-panel: 0.22s cubic-bezier(0.4, 0, 0.2, 1); | |
| /* Layering: overlay (40) < drawer (50) < profile (55) < modal (60) < toast (70) */ | |
| --emo-z-base: 0; | |
| --emo-z-sticky: 10; | |
| --emo-z-header: 20; | |
| --emo-z-dropdown: 30; | |
| --emo-z-overlay: 40; | |
| --emo-z-drawer: 50; | |
| --emo-z-profile: 55; | |
| --emo-z-modal: 60; | |
| --emo-z-toast: 70; | |
| --emo-touch-min: 2.75rem; | |
| --emo-safe-top: env(safe-area-inset-top, 0px); | |
| --emo-safe-bottom: env(safe-area-inset-bottom, 0px); | |
| --emo-keyboard-inset: 0px; | |
| --emo-mobile-kb-inset: 0px; | |
| --emo-safe-left: env(safe-area-inset-left, 0px); | |
| --emo-safe-right: env(safe-area-inset-right, 0px); | |
| } | |
| :root, html.theme-dark { | |
| --emo-bg: #0c0c0e; | |
| --emo-bg-subtle: #111114; | |
| --emo-surface: #18181b; | |
| --emo-surface-raised: #222226; | |
| --emo-surface-overlay: #27272b; | |
| --emo-text: #f4f4f5; | |
| --emo-text-secondary: #a1a1aa; | |
| --emo-text-muted: #71717a; | |
| --emo-border: rgba(255, 255, 255, 0.09); | |
| --emo-border-strong: rgba(255, 255, 255, 0.14); | |
| --emo-accent: #8b5cf6; | |
| --emo-accent-hover: #a78bfa; | |
| --emo-accent-soft: rgba(139, 92, 246, 0.14); | |
| --emo-accent-border: rgba(139, 92, 246, 0.38); | |
| --emo-logo-bg: #8b5cf6; | |
| --emo-code-bg: #0f0f11; | |
| --emo-input-bg: #1e1e22; | |
| --emo-glass-bg: #18181b; | |
| --emo-glass-border: rgba(255, 255, 255, 0.06); | |
| --emo-glass-card-bg: #1c1c20; | |
| --emo-glow: rgba(139, 92, 246, 0.18); | |
| --mode-color: #8b5cf6; | |
| --mode-glow: rgba(139, 92, 246, 0.22); | |
| --emo-hover: rgba(255, 255, 255, 0.07); | |
| --emo-hover-subtle: rgba(255, 255, 255, 0.04); | |
| --emo-active-bg: rgba(255, 255, 255, 0.06); | |
| --emo-tab-active-bg: rgba(255, 255, 255, 0.07); | |
| --emo-overlay: rgba(0, 0, 0, 0.55); | |
| --emo-card-bg: rgba(255, 255, 255, 0.03); | |
| --emo-pre-bg: rgba(0, 0, 0, 0.35); | |
| --emo-code-text: #c4b5fd; | |
| --emo-inline-code-bg: rgba(168, 85, 247, 0.12); | |
| --emo-inline-code-text: #e9d5ff; | |
| --emo-badge-bg: rgba(255, 255, 255, 0.05); | |
| --emo-link: #93c5fd; | |
| --emo-on-accent: #ffffff; | |
| --emo-on-mode: #0a0510; | |
| --emo-editor-bg: #1a1a1e; | |
| --emo-editor-text: #fafafa; | |
| --emo-preview-bg: #0a0a0c; | |
| --emo-drawer-bg: #141416; | |
| --emo-drawer-shadow: -24px 0 64px rgba(0, 0, 0, 0.45); | |
| --emo-code-inset: inset 0 0 24px rgba(0, 0, 0, 0.35); | |
| --emo-subtle-bg: rgba(255, 255, 255, 0.03); | |
| --emo-thought-text: #e9d5ff; | |
| --emo-paywall-overlay: rgba(7, 4, 10, 0.88); | |
| --emo-user-msg-bg: rgba(139, 92, 246, 0.16); | |
| --emo-user-msg-border: rgba(139, 92, 246, 0.28); | |
| --emo-assistant-msg-bg: #1e1e22; | |
| --emo-assistant-msg-border: rgba(255, 255, 255, 0.08); | |
| --emo-warning-bg: rgba(245, 158, 11, 0.1); | |
| --emo-warning-border: rgba(245, 158, 11, 0.28); | |
| --emo-warning-text: #fde68a; | |
| --emo-success-text: #6ee7b7; | |
| --emo-error-text: #fca5a5; | |
| --emo-admin-text: #fbbf24; | |
| --emo-admin-bg: rgba(245, 158, 11, 0.12); | |
| --emo-status-online: #34d399; | |
| --emo-status-offline: #71717a; | |
| --emo-status-online-glow: rgba(52, 211, 153, 0.5); | |
| --emo-success-bg: rgba(52, 211, 153, 0.1); | |
| --emo-success-border: rgba(52, 211, 153, 0.28); | |
| --emo-error-bg: rgba(239, 68, 68, 0.12); | |
| --emo-error-border: rgba(239, 68, 68, 0.28); | |
| --emo-chrome-bg: #141416; | |
| --emo-segment-bg: rgba(255, 255, 255, 0.05); | |
| --emo-segment-active: rgba(255, 255, 255, 0.1); | |
| } | |
| html.theme-light { | |
| --emo-bg: #f8f8fa; | |
| --emo-bg-subtle: #f0f0f3; | |
| --emo-surface: #ffffff; | |
| --emo-surface-raised: #f4f4f6; | |
| --emo-surface-overlay: #ebebef; | |
| --emo-text: #18181b; | |
| --emo-text-secondary: #3f3f46; | |
| --emo-text-muted: #71717a; | |
| --emo-border: rgba(0, 0, 0, 0.09); | |
| --emo-border-strong: rgba(0, 0, 0, 0.14); | |
| --emo-accent: #7c3aed; | |
| --emo-accent-hover: #6d28d9; | |
| --emo-accent-soft: rgba(124, 58, 237, 0.1); | |
| --emo-accent-border: rgba(124, 58, 237, 0.32); | |
| --emo-logo-bg: #7c3aed; | |
| --emo-code-bg: #f4f4f6; | |
| --emo-input-bg: #ffffff; | |
| --emo-glass-bg: #ffffff; | |
| --emo-glass-border: rgba(0, 0, 0, 0.08); | |
| --emo-glass-card-bg: #ffffff; | |
| --emo-glow: rgba(124, 58, 237, 0.14); | |
| --mode-color: #7c3aed; | |
| --mode-glow: rgba(124, 58, 237, 0.16); | |
| --emo-hover: rgba(0, 0, 0, 0.04); | |
| --emo-hover-subtle: rgba(0, 0, 0, 0.025); | |
| --emo-active-bg: rgba(124, 58, 237, 0.08); | |
| --emo-tab-active-bg: rgba(124, 58, 237, 0.08); | |
| --emo-overlay: rgba(0, 0, 0, 0.32); | |
| --emo-card-bg: #ffffff; | |
| --emo-pre-bg: #f4f4f6; | |
| --emo-code-text: #5b21b6; | |
| --emo-inline-code-bg: rgba(124, 58, 237, 0.08); | |
| --emo-inline-code-text: #5b21b6; | |
| --emo-badge-bg: rgba(0, 0, 0, 0.04); | |
| --emo-link: #2563eb; | |
| --emo-on-accent: #ffffff; | |
| --emo-on-mode: #ffffff; | |
| --emo-editor-bg: #fafafa; | |
| --emo-editor-text: #18181b; | |
| --emo-preview-bg: #fafafa; | |
| --emo-drawer-bg: #ffffff; | |
| --emo-drawer-shadow: -24px 0 64px rgba(0, 0, 0, 0.1); | |
| --emo-code-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.06); | |
| --emo-subtle-bg: rgba(0, 0, 0, 0.025); | |
| --emo-thought-text: #6d28d9; | |
| --emo-paywall-overlay: rgba(0, 0, 0, 0.42); | |
| --emo-user-msg-bg: rgba(124, 58, 237, 0.1); | |
| --emo-user-msg-border: rgba(124, 58, 237, 0.2); | |
| --emo-assistant-msg-bg: #ffffff; | |
| --emo-assistant-msg-border: rgba(0, 0, 0, 0.08); | |
| --emo-warning-bg: #fffbeb; | |
| --emo-warning-border: #fcd34d; | |
| --emo-warning-text: #92400e; | |
| --emo-success-text: #047857; | |
| --emo-error-text: #b91c1c; | |
| --emo-admin-text: #b45309; | |
| --emo-admin-bg: rgba(245, 158, 11, 0.12); | |
| --emo-status-online: #059669; | |
| --emo-status-offline: #71717a; | |
| --emo-status-online-glow: rgba(5, 150, 105, 0.4); | |
| --emo-success-bg: #ecfdf5; | |
| --emo-success-border: #6ee7b7; | |
| --emo-error-bg: #fef2f2; | |
| --emo-error-border: #fca5a5; | |
| --emo-chrome-bg: #f4f4f6; | |
| --emo-segment-bg: rgba(0, 0, 0, 0.04); | |
| --emo-segment-active: #ffffff; | |
| --emo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); | |
| --emo-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); | |
| --emo-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08); | |
| --emo-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| * { box-sizing: border-box; } | |
| html, body, #root { height: 100%; margin: 0; } | |
| body { | |
| background-color: var(--emo-bg); | |
| color: var(--emo-text); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-size: var(--emo-text-base); | |
| font-weight: 400; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| overflow: hidden; | |
| } | |
| body.emo-scroll-locked .emo-app-shell, | |
| body.emo-scroll-locked .emo-chat-scroll { | |
| overflow: hidden; | |
| touch-action: none; | |
| } | |
| .font-heading { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; } | |
| .font-code { font-family: 'JetBrains Mono', monospace; } | |
| /* ─── Shell & panels ────────────────────────────────────────── */ | |
| .emo-app-shell { | |
| display: flex; | |
| height: 100vh; | |
| height: 100dvh; | |
| width: 100%; | |
| max-width: 100vw; | |
| overflow: hidden; | |
| background: var(--emo-bg); | |
| } | |
| body.emo-scroll-locked { | |
| overflow: hidden; | |
| touch-action: none; | |
| } | |
| .emo-panel { | |
| background: var(--emo-surface); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-lg); | |
| } | |
| .emo-panel-flat { | |
| border-radius: 0 ; | |
| } | |
| .glass-panel { | |
| background: var(--emo-surface); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-lg); | |
| } | |
| .glass-card { | |
| background: var(--emo-glass-card-bg); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-xl); | |
| transition: border-color var(--emo-transition), box-shadow var(--emo-transition); | |
| } | |
| .glass-card:hover { | |
| border-color: var(--emo-accent-border); | |
| } | |
| .em-hover:hover { background-color: var(--emo-hover); } | |
| .em-hover-subtle:hover { background-color: var(--emo-hover-subtle); } | |
| .em-active { background-color: var(--emo-active-bg); } | |
| .em-border-b { border-bottom: 1px solid var(--emo-border); } | |
| .em-border-t { border-top: 1px solid var(--emo-border); } | |
| .em-border-r { border-right: 1px solid var(--emo-border); } | |
| .em-border { border: 1px solid var(--emo-border); } | |
| /* ─── Inputs ────────────────────────────────────────────────── */ | |
| .em-input, | |
| textarea.em-input, | |
| input.em-input { | |
| background: var(--emo-input-bg); | |
| border: 1px solid var(--emo-border); | |
| color: var(--emo-text); | |
| border-radius: var(--emo-radius-md); | |
| transition: border-color var(--emo-transition), box-shadow var(--emo-transition); | |
| } | |
| .em-input::placeholder, | |
| textarea.em-input::placeholder, | |
| input.em-input::placeholder { | |
| color: var(--emo-text-muted); | |
| } | |
| .em-input:focus, | |
| textarea.em-input:focus, | |
| input.em-input:focus { | |
| outline: none; | |
| border-color: var(--emo-accent); | |
| box-shadow: 0 0 0 3px var(--emo-glow); | |
| } | |
| /* ─── Alerts & status ───────────────────────────────────────── */ | |
| .emo-alert-warning { | |
| background: var(--emo-warning-bg); | |
| border: 1px solid var(--emo-warning-border); | |
| color: var(--emo-warning-text); | |
| border-radius: var(--emo-radius-md); | |
| } | |
| .emo-alert-success { | |
| background: var(--emo-success-bg); | |
| border: 1px solid var(--emo-success-border); | |
| color: var(--emo-success-text); | |
| border-radius: var(--emo-radius-md); | |
| } | |
| .emo-alert-error { | |
| background: var(--emo-error-bg); | |
| border: 1px solid var(--emo-error-border); | |
| color: var(--emo-error-text); | |
| border-radius: var(--emo-radius-md); | |
| } | |
| .emo-status-dot-online { | |
| background: var(--emo-status-online); | |
| box-shadow: 0 0 8px var(--emo-status-online-glow); | |
| } | |
| .emo-status-dot-offline { | |
| background: var(--emo-status-offline); | |
| } | |
| .text-muted-em { color: var(--emo-text-muted); } | |
| .text-secondary-em { color: var(--emo-text-secondary); } | |
| html.theme-light .text-emerald-300 { color: var(--emo-success-text) ; } | |
| html.theme-light .text-red-300 { color: var(--emo-error-text) ; } | |
| html.theme-light .bg-amber-500\/10 { background: var(--emo-warning-bg) ; } | |
| html.theme-light .border-amber-500\/30 { border-color: var(--emo-warning-border) ; } | |
| /* ─── Theme selector ────────────────────────────────────────── */ | |
| .emo-theme-btn { | |
| background: var(--emo-surface-raised); | |
| border: 1px solid var(--emo-border); | |
| color: var(--emo-text-secondary); | |
| border-radius: var(--emo-radius-lg); | |
| transition: all var(--emo-transition); | |
| } | |
| .emo-theme-btn[data-active="true"] { | |
| background: var(--emo-accent-soft); | |
| border-color: var(--emo-accent-border); | |
| color: var(--emo-accent); | |
| } | |
| .emo-btn-primary { | |
| background: var(--emo-accent); | |
| color: var(--emo-on-accent); | |
| border: none; | |
| border-radius: var(--emo-radius-md); | |
| font-weight: 500; | |
| transition: background var(--emo-transition), opacity var(--emo-transition); | |
| } | |
| .emo-btn-primary:hover:not(:disabled) { | |
| background: var(--emo-accent-hover); | |
| } | |
| .emo-btn-primary:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| } | |
| .emo-btn-soft { | |
| background: var(--emo-accent-soft); | |
| border: 1px solid var(--emo-accent-border); | |
| color: var(--emo-text); | |
| border-radius: var(--emo-radius-md); | |
| } | |
| .emo-btn-ghost { | |
| background: transparent; | |
| border: 1px solid var(--emo-border); | |
| color: var(--emo-text-secondary); | |
| border-radius: var(--emo-radius-md); | |
| transition: background var(--emo-transition), border-color var(--emo-transition); | |
| } | |
| .emo-btn-ghost:hover { | |
| background: var(--emo-hover-subtle); | |
| border-color: var(--emo-border-strong); | |
| } | |
| /* ─── Segmented control ─────────────────────────────────────── */ | |
| .emo-segment { | |
| display: inline-flex; | |
| padding: 3px; | |
| background: var(--emo-segment-bg); | |
| border-radius: var(--emo-radius-lg); | |
| border: 1px solid var(--emo-border); | |
| gap: 2px; | |
| } | |
| .emo-segment-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| border-radius: calc(var(--emo-radius-lg) - 2px); | |
| font-size: var(--emo-text-xs); | |
| font-weight: 500; | |
| color: var(--emo-text-muted); | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| transition: all var(--emo-transition); | |
| white-space: nowrap; | |
| } | |
| .emo-segment-btn[data-active="true"] { | |
| background: var(--emo-segment-active); | |
| color: var(--emo-text); | |
| box-shadow: var(--emo-shadow-sm); | |
| } | |
| .emo-segment-btn[data-active="true"][data-accent="true"] { | |
| color: var(--emo-accent); | |
| } | |
| /* ─── Chat layout ───────────────────────────────────────────── */ | |
| .emo-chat-main { | |
| flex: 1 1 0%; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| min-height: 0; | |
| overflow: hidden; | |
| background: var(--emo-bg); | |
| } | |
| .emo-right-panel-wrap { | |
| height: 100%; | |
| min-height: 0; | |
| } | |
| .emo-right-panel { | |
| width: min(300px, 26vw); | |
| min-width: 240px; | |
| max-width: 340px; | |
| } | |
| .emo-app-shell:not([data-right-panel-open="true"]) .emo-chat-messages, | |
| .emo-app-shell:not([data-right-panel-open="true"]) .emo-chat-composer-inner { | |
| max-width: 52rem; | |
| } | |
| .emo-app-shell[data-right-panel-open="true"] .emo-chat-messages, | |
| .emo-app-shell[data-right-panel-open="true"] .emo-chat-composer-inner { | |
| max-width: 44rem; | |
| } | |
| .emo-chat-header { | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--emo-space-3); | |
| height: 3.25rem; | |
| padding: 0 var(--emo-space-4); | |
| border-bottom: 1px solid var(--emo-border); | |
| background: var(--emo-surface); | |
| } | |
| .emo-chat-scroll { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| overscroll-behavior: contain; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .emo-chat-messages { | |
| max-width: 48rem; | |
| margin: 0 auto; | |
| padding: var(--emo-space-6) var(--emo-space-5) var(--emo-space-8); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--emo-space-6); | |
| } | |
| .emo-chat-composer-wrap { | |
| flex-shrink: 0; | |
| position: relative; | |
| z-index: var(--emo-z-sticky); | |
| padding: var(--emo-space-3) var(--emo-space-4) var(--emo-space-5); | |
| background: linear-gradient(to top, var(--emo-bg) 70%, transparent); | |
| border-top: 1px solid var(--emo-border); | |
| overflow: visible; | |
| } | |
| .emo-chat-composer-inner { | |
| max-width: 48rem; | |
| margin: 0 auto; | |
| } | |
| /* ─── Message bubbles ───────────────────────────────────────── */ | |
| .emo-bubble-user { | |
| max-width: 85%; | |
| padding: var(--emo-space-3) var(--emo-space-4); | |
| border-radius: var(--emo-radius-2xl); | |
| border-bottom-right-radius: var(--emo-radius-sm); | |
| background: var(--emo-user-msg-bg); | |
| border: 1px solid var(--emo-user-msg-border); | |
| color: var(--emo-text); | |
| font-size: var(--emo-text-base); | |
| line-height: 1.55; | |
| } | |
| .emo-bubble-assistant { | |
| flex: 1; | |
| min-width: 0; | |
| padding: var(--emo-space-4); | |
| border-radius: var(--emo-radius-2xl); | |
| border-top-left-radius: var(--emo-radius-sm); | |
| background: var(--emo-assistant-msg-bg); | |
| border: 1px solid var(--emo-assistant-msg-border); | |
| font-size: var(--emo-text-base); | |
| line-height: 1.6; | |
| } | |
| .emo-bubble-assistant::before { | |
| content: none; | |
| } | |
| /* ─── Composer ──────────────────────────────────────────────── */ | |
| .emo-composer { | |
| background: var(--emo-surface); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-2xl); | |
| box-shadow: var(--emo-shadow-md); | |
| overflow: visible; | |
| transition: border-color var(--emo-transition), box-shadow var(--emo-transition); | |
| } | |
| .emo-composer:focus-within { | |
| border-color: var(--emo-accent-border); | |
| box-shadow: var(--emo-shadow-md), 0 0 0 3px var(--emo-glow); | |
| } | |
| .emo-composer[data-drag="true"] { | |
| border-color: var(--mode-color); | |
| box-shadow: 0 0 0 3px var(--mode-glow); | |
| } | |
| .emo-composer-toolbar { | |
| position: relative; | |
| z-index: 2; | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: flex-start; | |
| gap: var(--emo-space-2); | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| border-bottom: 1px solid var(--emo-border); | |
| background: var(--emo-bg-subtle); | |
| border-top-left-radius: calc(var(--emo-radius-2xl) - 1px); | |
| border-top-right-radius: calc(var(--emo-radius-2xl) - 1px); | |
| overflow: visible; | |
| } | |
| .emo-composer-body { | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| } | |
| .emo-composer-textarea { | |
| width: 100%; | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| resize: none; | |
| padding: var(--emo-space-2) var(--emo-space-1); | |
| font-size: var(--emo-text-base); | |
| line-height: 1.5; | |
| color: var(--emo-text); | |
| max-height: 180px; | |
| } | |
| .emo-composer-textarea::placeholder { | |
| color: var(--emo-text-muted); | |
| } | |
| .emo-composer-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--emo-space-2); | |
| padding: var(--emo-space-2) var(--emo-space-3) var(--emo-space-3); | |
| border-bottom-left-radius: calc(var(--emo-radius-2xl) - 1px); | |
| border-bottom-right-radius: calc(var(--emo-radius-2xl) - 1px); | |
| } | |
| .emo-attachment-strip { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--emo-space-2); | |
| padding: var(--emo-space-3) var(--emo-space-3) 0; | |
| } | |
| .emo-attachment-chip { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--emo-space-2); | |
| padding: var(--emo-space-1); | |
| padding-right: var(--emo-space-2); | |
| background: var(--emo-surface-raised); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-lg); | |
| max-width: 200px; | |
| } | |
| .emo-attachment-chip img { | |
| width: 3rem; | |
| height: 3rem; | |
| object-fit: cover; | |
| border-radius: var(--emo-radius-md); | |
| } | |
| .emo-attachment-chip-name { | |
| font-size: var(--emo-text-xs); | |
| color: var(--emo-text-secondary); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| max-width: 100px; | |
| } | |
| .emo-attachment-remove { | |
| position: absolute; | |
| top: -6px; | |
| right: -6px; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--emo-surface-overlay); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-full); | |
| color: var(--emo-text); | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity var(--emo-transition); | |
| } | |
| .emo-attachment-chip:hover .emo-attachment-remove { | |
| opacity: 1; | |
| } | |
| .emo-icon-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 2rem; | |
| height: 2rem; | |
| border-radius: var(--emo-radius-md); | |
| border: 1px solid var(--emo-border); | |
| background: transparent; | |
| color: var(--emo-text-secondary); | |
| cursor: pointer; | |
| transition: all var(--emo-transition); | |
| } | |
| .emo-icon-btn:hover:not(:disabled) { | |
| background: var(--emo-hover-subtle); | |
| color: var(--emo-text); | |
| } | |
| .emo-icon-btn:disabled { | |
| opacity: 0.35; | |
| cursor: not-allowed; | |
| } | |
| .emo-send-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 2.25rem; | |
| height: 2.25rem; | |
| border-radius: var(--emo-radius-md); | |
| background: var(--emo-accent); | |
| color: var(--emo-on-accent); | |
| border: none; | |
| cursor: pointer; | |
| transition: opacity var(--emo-transition), transform var(--emo-transition); | |
| } | |
| .emo-send-btn:hover:not(:disabled) { | |
| background: var(--emo-accent-hover); | |
| } | |
| .emo-send-btn:disabled { | |
| opacity: 0.3; | |
| cursor: not-allowed; | |
| } | |
| /* ─── Sidebar ───────────────────────────────────────────────── */ | |
| .emo-sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| flex-shrink: 0; | |
| height: 100%; | |
| background: var(--emo-surface); | |
| border-right: 1px solid var(--emo-border); | |
| } | |
| .emo-sidebar-nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--emo-space-3); | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| border-radius: var(--emo-radius-md); | |
| font-size: var(--emo-text-sm); | |
| color: var(--emo-text-secondary); | |
| cursor: pointer; | |
| transition: all var(--emo-transition); | |
| border: 1px solid transparent; | |
| } | |
| .emo-sidebar-nav-item:hover { | |
| background: var(--emo-hover-subtle); | |
| color: var(--emo-text); | |
| } | |
| .emo-sidebar-nav-item[data-active="true"] { | |
| background: var(--emo-active-bg); | |
| color: var(--emo-text); | |
| border-color: var(--emo-border); | |
| } | |
| .emo-sidebar-nav-item[data-active="true"]::before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 3px; | |
| height: 60%; | |
| background: var(--mode-color); | |
| border-radius: 0 2px 2px 0; | |
| } | |
| /* ─── Profile drawer ────────────────────────────────────────── */ | |
| .emo-drawer { | |
| position: fixed; | |
| z-index: var(--emo-z-profile); | |
| border-top-left-radius: var(--emo-radius-2xl); | |
| border-bottom-left-radius: var(--emo-radius-2xl); | |
| transform: translate3d(0, 0, 0); | |
| animation: emoSlideInRight var(--emo-transition-slow) both; | |
| will-change: transform; | |
| } | |
| .emo-settings-layout { | |
| display: flex; | |
| height: 100%; | |
| min-height: 0; | |
| } | |
| .emo-settings-nav { | |
| width: 11rem; | |
| flex-shrink: 0; | |
| padding: var(--emo-space-4) var(--emo-space-3); | |
| border-right: 1px solid var(--emo-border); | |
| background: var(--emo-bg-subtle); | |
| } | |
| .emo-settings-nav-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--emo-space-2); | |
| width: 100%; | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| border-radius: var(--emo-radius-md); | |
| font-size: var(--emo-text-sm); | |
| color: var(--emo-text-secondary); | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: all var(--emo-transition); | |
| } | |
| .emo-settings-nav-btn:hover { | |
| background: var(--emo-hover-subtle); | |
| color: var(--emo-text); | |
| } | |
| .emo-settings-nav-btn[data-active="true"] { | |
| background: var(--emo-accent-soft); | |
| color: var(--emo-accent); | |
| font-weight: 500; | |
| } | |
| .emo-settings-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: var(--emo-space-6); | |
| } | |
| .emo-settings-section { | |
| margin-bottom: var(--emo-space-8); | |
| } | |
| .emo-settings-section-title { | |
| font-size: var(--emo-text-xs); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--emo-text-muted); | |
| margin-bottom: var(--emo-space-3); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--emo-space-2); | |
| } | |
| .emo-settings-card { | |
| background: var(--emo-surface-raised); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-xl); | |
| padding: var(--emo-space-4); | |
| } | |
| /* ─── Browser chrome ────────────────────────────────────────── */ | |
| .emo-browser { | |
| overflow: hidden; | |
| background: var(--emo-surface); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-xl); | |
| box-shadow: var(--emo-shadow-md); | |
| } | |
| .emo-browser-chrome { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--emo-space-2); | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| background: var(--emo-chrome-bg); | |
| border-bottom: 1px solid var(--emo-border); | |
| } | |
| .emo-browser-dots { | |
| display: none; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 0 var(--emo-space-1); | |
| } | |
| @media (min-width: 640px) { | |
| .emo-browser-dots { display: flex; } | |
| } | |
| .emo-browser-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| } | |
| .emo-browser-url-bar { | |
| flex: 1; | |
| min-width: 0; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--emo-space-2); | |
| padding: var(--emo-space-1) var(--emo-space-3); | |
| background: var(--emo-input-bg); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-full); | |
| transition: border-color var(--emo-transition), box-shadow var(--emo-transition); | |
| } | |
| .emo-browser-url-bar:focus-within { | |
| border-color: var(--emo-accent-border); | |
| box-shadow: 0 0 0 2px var(--emo-glow); | |
| } | |
| .emo-browser-url-input { | |
| flex: 1; | |
| min-width: 0; | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: var(--emo-text-xs); | |
| color: var(--emo-text); | |
| } | |
| .emo-browser-viewport { | |
| position: relative; | |
| isolation: isolate; | |
| background: var(--emo-preview-bg); | |
| outline: none; | |
| } | |
| .emo-browser-badge { | |
| position: absolute; | |
| z-index: var(--emo-z-sticky); | |
| pointer-events: none; | |
| } | |
| .emo-browser-badge--keyboard { | |
| top: var(--emo-space-3); | |
| right: var(--emo-space-3); | |
| } | |
| .emo-browser-badge--refresh { | |
| top: var(--emo-space-3); | |
| left: var(--emo-space-3); | |
| } | |
| .emo-browser-click-mark { | |
| position: absolute; | |
| z-index: calc(var(--emo-z-sticky) + 1); | |
| pointer-events: none; | |
| } | |
| .emo-browser-viewport[data-focused="true"] { | |
| box-shadow: inset 0 0 0 2px var(--emo-accent); | |
| } | |
| .emo-browser-keyboard-input { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| outline: none; | |
| resize: none; | |
| opacity: 0; | |
| z-index: 4; | |
| background: transparent; | |
| color: transparent; | |
| caret-color: transparent; | |
| pointer-events: none; | |
| font-size: 16px; | |
| line-height: 1; | |
| -webkit-text-fill-color: transparent; | |
| -webkit-user-select: text; | |
| user-select: text; | |
| } | |
| .emo-browser[data-keyboard-open="true"] .emo-browser-screenshot { | |
| max-height: calc(var(--emo-browser-screenshot-max, 520px) - min(var(--emo-keyboard-inset, 0px), 240px)); | |
| } | |
| .emo-browser-screenshot { | |
| max-height: 520px; | |
| } | |
| .emo-browser-viewport[data-compact="true"] .emo-browser-screenshot { | |
| max-height: 280px; | |
| } | |
| .emo-browser-status { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--emo-space-2); | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| background: var(--emo-chrome-bg); | |
| border-top: 1px solid var(--emo-border); | |
| font-size: var(--emo-text-xs); | |
| color: var(--emo-text-muted); | |
| } | |
| /* ─── Status screens ────────────────────────────────────────── */ | |
| .emo-status-screen { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| flex: 1; | |
| gap: var(--emo-space-4); | |
| padding: var(--emo-space-8); | |
| text-align: center; | |
| } | |
| .emo-status-card { | |
| max-width: 22rem; | |
| padding: var(--emo-space-8); | |
| background: var(--emo-surface); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-2xl); | |
| box-shadow: var(--emo-shadow-lg); | |
| } | |
| .emo-status-icon { | |
| width: 3rem; | |
| height: 3rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto var(--emo-space-4); | |
| border-radius: var(--emo-radius-xl); | |
| background: var(--emo-accent-soft); | |
| color: var(--emo-accent); | |
| } | |
| /* ─── Login ─────────────────────────────────────────────────── */ | |
| .login-page { | |
| background: var(--emo-bg); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .login-page::before { | |
| content: ""; | |
| position: fixed; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse 80% 50% at 50% -20%, var(--emo-glow), transparent), | |
| radial-gradient(ellipse 60% 40% at 100% 100%, rgba(139, 92, 246, 0.06), transparent); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .login-page > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .login-card { | |
| border-radius: var(--emo-radius-2xl); | |
| box-shadow: var(--emo-shadow-float); | |
| background: var(--emo-surface); | |
| border: 1px solid var(--emo-border); | |
| } | |
| .login-input { | |
| background: var(--emo-input-bg); | |
| border: 1px solid var(--emo-border); | |
| color: var(--emo-text); | |
| border-radius: var(--emo-radius-md); | |
| transition: border-color var(--emo-transition), box-shadow var(--emo-transition); | |
| } | |
| .login-input:focus { | |
| outline: none; | |
| border-color: var(--emo-accent); | |
| box-shadow: 0 0 0 3px var(--emo-glow); | |
| } | |
| .login-submit { | |
| background: var(--emo-accent); | |
| color: var(--emo-on-accent); | |
| border: none; | |
| border-radius: var(--emo-radius-md); | |
| font-weight: 500; | |
| transition: background var(--emo-transition); | |
| } | |
| .login-submit:hover:not(:disabled) { | |
| background: var(--emo-accent-hover); | |
| } | |
| .google-btn { | |
| background: var(--emo-surface-raised); | |
| color: var(--emo-text); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-md); | |
| transition: background var(--emo-transition); | |
| } | |
| .google-btn:hover { | |
| background: var(--emo-hover-subtle); | |
| } | |
| .login-boot-dots span { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--emo-accent); | |
| opacity: 0.35; | |
| animation: dot-bounce 1.2s ease-in-out infinite; | |
| } | |
| .login-boot-dots span:nth-child(2) { animation-delay: 0.15s; } | |
| .login-boot-dots span:nth-child(3) { animation-delay: 0.3s; } | |
| .app-topbar { | |
| z-index: var(--emo-z-header); | |
| } | |
| /* ─── Scrollbar ─────────────────────────────────────────────── */ | |
| .scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; } | |
| .scrollbar-thin::-webkit-scrollbar-track { background: transparent; } | |
| .scrollbar-thin::-webkit-scrollbar-thumb { | |
| background: var(--emo-border-strong); | |
| border-radius: 3px; | |
| } | |
| .scrollbar-thin::-webkit-scrollbar-thumb:hover { | |
| background: var(--emo-text-muted); | |
| } | |
| .chat-scroll-area { | |
| -webkit-overflow-scrolling: touch; | |
| overscroll-behavior: contain; | |
| } | |
| /* ─── Animations ────────────────────────────────────────────── */ | |
| @keyframes blink { | |
| 0%, 92%, 100% { transform: scaleY(1); } | |
| 94% { transform: scaleY(0.1); } | |
| 96% { transform: scaleY(1); } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| @keyframes look-around { | |
| 0%, 100% { transform: translateX(0); } | |
| 30% { transform: translateX(2px); } | |
| 60% { transform: translateX(-2px); } | |
| } | |
| @keyframes dot-bounce { | |
| 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } | |
| 30% { transform: translateY(-4px); opacity: 1; } | |
| } | |
| .dot-loading span { | |
| display: inline-block; | |
| width: 5px; height: 5px; | |
| background: var(--emo-accent); | |
| border-radius: 50%; | |
| margin: 0 2px; | |
| animation: dot-bounce 1.2s infinite; | |
| } | |
| .dot-loading span:nth-child(2) { animation-delay: 0.15s; } | |
| .dot-loading span:nth-child(3) { animation-delay: 0.3s; } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(6px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes slideInRight { | |
| from { opacity: 0; transform: translateX(20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes emoOverlayIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes emoSlideInRight { | |
| from { opacity: 0; transform: translate3d(100%, 0, 0); } | |
| to { opacity: 1; transform: translate3d(0, 0, 0); } | |
| } | |
| @keyframes emoSlideInLeft { | |
| from { opacity: 0; transform: translate3d(-100%, 0, 0); } | |
| to { opacity: 1; transform: translate3d(0, 0, 0); } | |
| } | |
| @keyframes emoSlideInUp { | |
| from { opacity: 0; transform: translate3d(0, 100%, 0); } | |
| to { opacity: 1; transform: translate3d(0, 0, 0); } | |
| } | |
| @keyframes slideInLeft { | |
| from { opacity: 0; transform: translateX(-100%); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes slideUpSheet { | |
| from { opacity: 0; transform: translateY(100%); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes overlayIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes msgIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .emo-msg-animate { | |
| animation: msgIn 0.25s ease; | |
| } | |
| @keyframes emo-image-shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| @keyframes emo-image-reveal { | |
| from { opacity: 0; transform: scale(0.96); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| @keyframes emo-sparkle-pulse { | |
| 0%, 100% { opacity: 0.45; transform: scale(0.92) rotate(0deg); } | |
| 50% { opacity: 1; transform: scale(1.08) rotate(8deg); } | |
| } | |
| .emo-image-gen-placeholder { | |
| background: linear-gradient( | |
| 110deg, | |
| var(--emo-preview-bg) 0%, | |
| var(--emo-accent-soft, rgba(139, 92, 246, 0.12)) 35%, | |
| var(--emo-preview-bg) 70% | |
| ); | |
| background-size: 200% 100%; | |
| animation: emo-image-shimmer 2s ease-in-out infinite; | |
| } | |
| .emo-image-gen-sparkles { | |
| animation: emo-sparkle-pulse 1.6s ease-in-out infinite; | |
| } | |
| .emo-image-reveal { | |
| animation: emo-image-reveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; | |
| } | |
| .emo-image-preview-wrap { | |
| position: relative; | |
| } | |
| .emo-image-preview-actions { | |
| position: absolute; | |
| bottom: 0.5rem; | |
| right: 0.5rem; | |
| z-index: 2; | |
| display: flex; | |
| gap: 0.375rem; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity var(--emo-transition); | |
| } | |
| .emo-image-preview-wrap:hover .emo-image-preview-actions, | |
| .emo-image-preview-wrap:focus-within .emo-image-preview-actions { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .emo-image-action-btn { | |
| background: var(--emo-surface-overlay, rgba(255, 255, 255, 0.92)); | |
| backdrop-filter: blur(6px); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); | |
| } | |
| .mode-normal { --mode-color: #8b5cf6; --mode-glow: rgba(139, 92, 246, 0.2); } | |
| .mode-tech { --mode-color: #06b6d4; --mode-glow: rgba(6, 182, 212, 0.2); } | |
| .mode-creatif { --mode-color: #ec4899; --mode-glow: rgba(236, 72, 153, 0.2); } | |
| .mode-brutal { --mode-color: #ef4444; --mode-glow: rgba(239, 68, 68, 0.2); } | |
| ::selection { | |
| background: rgba(139, 92, 246, 0.25); | |
| color: inherit; | |
| } | |
| /* ─── Dropdown menus (composer) ─────────────────────────────── */ | |
| .emo-dropdown { | |
| position: absolute; | |
| top: calc(100% + 4px); | |
| left: 0; | |
| min-width: 11rem; | |
| max-height: 16rem; | |
| overflow-y: auto; | |
| padding: var(--emo-space-1); | |
| background: var(--emo-surface); | |
| border: 1px solid var(--emo-border); | |
| border-radius: var(--emo-radius-lg); | |
| box-shadow: var(--emo-shadow-lg); | |
| z-index: var(--emo-z-dropdown); | |
| } | |
| .emo-dropdown--align-end { | |
| left: auto; | |
| right: 0; | |
| } | |
| .emo-dropdown-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--emo-space-2); | |
| width: 100%; | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| border-radius: var(--emo-radius-md); | |
| font-size: var(--emo-text-sm); | |
| color: var(--emo-text-secondary); | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: background var(--emo-transition); | |
| } | |
| .emo-dropdown-item:hover { | |
| background: var(--emo-hover-subtle); | |
| } | |
| .emo-dropdown-item[data-active="true"] { | |
| background: var(--emo-active-bg); | |
| color: var(--emo-text); | |
| } | |
| /* ─── Error boundary ────────────────────────────────────────── */ | |
| .emo-error-boundary { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 12rem; | |
| padding: var(--emo-space-6); | |
| background: var(--emo-error-bg); | |
| border: 1px solid var(--emo-error-border); | |
| border-radius: var(--emo-radius-xl); | |
| color: var(--emo-error-text); | |
| text-align: center; | |
| } | |
| /* ─── Right panel tabs ──────────────────────────────────────── */ | |
| .emo-panel-tabs { | |
| display: flex; | |
| gap: var(--emo-space-1); | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| border-bottom: 1px solid var(--emo-border); | |
| background: var(--emo-bg-subtle); | |
| } | |
| .emo-panel-tab { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| border-radius: var(--emo-radius-md); | |
| font-size: var(--emo-text-xs); | |
| font-weight: 500; | |
| color: var(--emo-text-muted); | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| transition: all var(--emo-transition); | |
| } | |
| .emo-panel-tab[data-active="true"] { | |
| background: var(--emo-surface); | |
| color: var(--emo-text); | |
| box-shadow: var(--emo-shadow-sm); | |
| } | |
| .emo-panel-tab-stack { | |
| position: relative; | |
| flex: 1; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| .emo-panel-tab-pane { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| overflow: hidden; | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| transform: translate3d(6px, 0, 0); | |
| transition: | |
| opacity var(--emo-transition-panel), | |
| transform var(--emo-transition-panel), | |
| visibility 0s linear var(--emo-transition-panel); | |
| z-index: var(--emo-z-base); | |
| } | |
| .emo-panel-tab-pane[data-active="true"] { | |
| opacity: 1; | |
| visibility: visible; | |
| pointer-events: auto; | |
| transform: translate3d(0, 0, 0); | |
| z-index: 1; | |
| transition: | |
| opacity var(--emo-transition-panel), | |
| transform var(--emo-transition-panel), | |
| visibility 0s; | |
| } | |
| /* ─── Tailwind shadcn base ──────────────────────────────────── */ | |
| @layer base { | |
| :root, html.theme-dark { | |
| --background: 240 6% 4%; | |
| --foreground: 0 0% 98%; | |
| --card: 240 4% 10%; | |
| --card-foreground: 0 0% 98%; | |
| --popover: 240 4% 10%; | |
| --popover-foreground: 0 0% 98%; | |
| --primary: 262 83% 58%; | |
| --primary-foreground: 0 0% 100%; | |
| --secondary: 240 4% 16%; | |
| --secondary-foreground: 0 0% 98%; | |
| --muted: 240 4% 16%; | |
| --muted-foreground: 240 5% 65%; | |
| --accent: 240 4% 16%; | |
| --accent-foreground: 0 0% 98%; | |
| --destructive: 0 72% 51%; | |
| --destructive-foreground: 0 0% 98%; | |
| --border: 240 4% 16%; | |
| --input: 240 4% 16%; | |
| --ring: 262 83% 58%; | |
| --radius: 1rem; | |
| } | |
| html.theme-light { | |
| --background: 0 0% 98%; | |
| --foreground: 240 6% 10%; | |
| --card: 0 0% 100%; | |
| --card-foreground: 240 6% 10%; | |
| --popover: 0 0% 100%; | |
| --popover-foreground: 240 6% 10%; | |
| --primary: 262 83% 58%; | |
| --primary-foreground: 0 0% 100%; | |
| --secondary: 240 5% 96%; | |
| --secondary-foreground: 240 6% 10%; | |
| --muted: 240 5% 96%; | |
| --muted-foreground: 240 4% 46%; | |
| --accent: 240 5% 96%; | |
| --accent-foreground: 240 6% 10%; | |
| --destructive: 0 72% 51%; | |
| --destructive-foreground: 0 0% 98%; | |
| --border: 240 6% 90%; | |
| --input: 240 6% 90%; | |
| --ring: 262 83% 58%; | |
| --radius: 1rem; | |
| } | |
| * { border-color: hsl(var(--border)); } | |
| } | |
| textarea, input { font-family: inherit; } | |
| /* ─── Drawers & overlays ────────────────────────────────────── */ | |
| .emo-drawer-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: var(--emo-z-overlay); | |
| background: var(--emo-overlay); | |
| backdrop-filter: blur(6px); | |
| -webkit-backdrop-filter: blur(6px); | |
| animation: emoOverlayIn var(--emo-transition-slow) both; | |
| will-change: opacity; | |
| } | |
| .emo-profile-overlay { | |
| z-index: var(--emo-z-overlay); | |
| } | |
| .emo-sidebar-drawer { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| z-index: var(--emo-z-drawer); | |
| width: min(18rem, 85vw); | |
| max-width: 85vw; | |
| transform: translate3d(0, 0, 0); | |
| box-shadow: var(--emo-shadow-float); | |
| animation: emoSlideInLeft var(--emo-transition-slow) both; | |
| padding-top: var(--emo-safe-top); | |
| padding-bottom: var(--emo-safe-bottom); | |
| overflow: hidden; | |
| will-change: transform; | |
| } | |
| .emo-sidebar-drawer .emo-sidebar { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .emo-bottom-sheet { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: var(--emo-z-drawer); | |
| display: flex; | |
| flex-direction: column; | |
| max-height: min(88dvh, calc(100dvh - var(--emo-safe-top) - 1rem)); | |
| padding-bottom: var(--emo-safe-bottom); | |
| background: var(--emo-surface); | |
| border-top: 1px solid var(--emo-border); | |
| border-top-left-radius: var(--emo-radius-2xl); | |
| border-top-right-radius: var(--emo-radius-2xl); | |
| box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.28); | |
| transform: translate3d(0, 0, 0); | |
| animation: emoSlideInUp var(--emo-transition-slow) both; | |
| overflow: hidden; | |
| will-change: transform; | |
| } | |
| .emo-bottom-sheet-handle { | |
| flex-shrink: 0; | |
| width: 2.5rem; | |
| height: 4px; | |
| margin: var(--emo-space-2) auto var(--emo-space-1); | |
| border-radius: var(--emo-radius-full); | |
| background: var(--emo-border-strong); | |
| } | |
| .emo-profile-drawer { | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: min(560px, 95vw); | |
| } | |
| .emo-conv-action-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: var(--emo-touch-min); | |
| min-height: var(--emo-touch-min); | |
| padding: 0; | |
| border-radius: var(--emo-radius-md); | |
| border: none; | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| .emo-composer-toolbar-inner { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--emo-space-2); | |
| flex-wrap: wrap; | |
| min-width: 0; | |
| width: 100%; | |
| overflow: visible; | |
| } | |
| .emo-composer-segment { | |
| flex: 0 0 auto; | |
| } | |
| .emo-composer-picker { | |
| position: relative; | |
| flex: 0 1 auto; | |
| min-width: 0; | |
| } | |
| .emo-composer-picker[data-open="true"] { | |
| z-index: var(--emo-z-dropdown); | |
| } | |
| .emo-composer-picker-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| max-width: 100%; | |
| min-width: 0; | |
| min-height: 2rem; | |
| } | |
| .emo-composer-picker-label { | |
| max-width: 7rem; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .emo-composer-picker-label-model { | |
| max-width: 9rem; | |
| } | |
| /* Squeezed desktop: sidebar + chat + right panel */ | |
| @media (min-width: 768px) and (max-width: 1199px) { | |
| .emo-right-panel { | |
| width: min(260px, 22vw); | |
| min-width: 220px; | |
| max-width: 280px; | |
| } | |
| .emo-app-shell[data-right-panel-open="true"] .emo-chat-messages, | |
| .emo-app-shell[data-right-panel-open="true"] .emo-chat-composer-inner { | |
| max-width: 100%; | |
| padding-left: var(--emo-space-4); | |
| padding-right: var(--emo-space-4); | |
| } | |
| .emo-app-shell[data-right-panel-open="true"] .emo-composer-toolbar-inner { | |
| flex-wrap: wrap; | |
| gap: var(--emo-space-1); | |
| row-gap: var(--emo-space-2); | |
| overflow: visible; | |
| } | |
| .emo-app-shell[data-right-panel-open="true"] .emo-composer-segment { | |
| flex-shrink: 0; | |
| } | |
| .emo-app-shell[data-right-panel-open="true"] .emo-composer-picker { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| max-width: calc(50% - var(--emo-space-1)); | |
| } | |
| .emo-app-shell[data-right-panel-open="true"] .emo-segment-btn { | |
| padding: 6px 8px; | |
| } | |
| } | |
| .emo-settings-nav-mobile { | |
| display: flex; | |
| gap: var(--emo-space-2); | |
| overflow-x: auto; | |
| padding: var(--emo-space-3) var(--emo-space-4); | |
| border-bottom: 1px solid var(--emo-border); | |
| -webkit-overflow-scrolling: touch; | |
| scroll-snap-type: x proximity; | |
| } | |
| .emo-settings-nav-mobile .emo-segment-btn { | |
| min-height: var(--emo-touch-min); | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| scroll-snap-align: start; | |
| } | |
| /* ─── Mobile (< 768px) ──────────────────────────────────────── */ | |
| @media (max-width: 767px) { | |
| html, body, #root { | |
| overflow-x: hidden; | |
| max-width: 100vw; | |
| } | |
| .emo-app-shell > aside.emo-sidebar:not(.emo-sidebar-mobile) { | |
| display: none ; | |
| } | |
| .emo-chat-main { | |
| width: 100%; | |
| max-width: 100vw; | |
| } | |
| .emo-icon-btn { | |
| width: var(--emo-touch-min); | |
| height: var(--emo-touch-min); | |
| flex-shrink: 0; | |
| } | |
| .emo-image-preview-actions { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .emo-send-btn { | |
| width: var(--emo-touch-min); | |
| height: var(--emo-touch-min); | |
| } | |
| .emo-chat-header { | |
| height: auto; | |
| min-height: 3rem; | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| padding-top: calc(var(--emo-space-2) + var(--emo-safe-top)); | |
| gap: var(--emo-space-2); | |
| } | |
| .emo-chat-messages { | |
| max-width: 100%; | |
| padding: var(--emo-space-4) var(--emo-space-3) var(--emo-space-6); | |
| gap: var(--emo-space-5); | |
| } | |
| .emo-bubble-user { | |
| max-width: 92%; | |
| } | |
| .emo-chat-composer-wrap { | |
| position: sticky; | |
| bottom: 0; | |
| z-index: var(--emo-z-sticky); | |
| padding: var(--emo-space-2) var(--emo-space-3); | |
| padding-bottom: calc(var(--emo-space-3) + var(--emo-safe-bottom)); | |
| background: var(--emo-bg); | |
| border-top: 1px solid var(--emo-border); | |
| overflow: visible; | |
| } | |
| .emo-chat-composer-inner { | |
| max-width: 100%; | |
| } | |
| .emo-composer { | |
| border-radius: var(--emo-radius-xl); | |
| } | |
| .emo-composer-toolbar { | |
| padding: var(--emo-space-2); | |
| } | |
| .emo-composer-toolbar-inner { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--emo-space-2); | |
| align-items: center; | |
| } | |
| .emo-composer-segment { | |
| flex: 1 1 100%; | |
| min-width: 0; | |
| } | |
| .emo-composer-picker-mode, | |
| .emo-composer-picker-model { | |
| flex: 1 1 calc(50% - var(--emo-space-1)); | |
| min-width: 0; | |
| } | |
| .emo-composer-picker-btn { | |
| min-height: var(--emo-touch-min); | |
| width: 100%; | |
| justify-content: flex-start; | |
| } | |
| .emo-composer-picker-model .emo-composer-picker-btn { | |
| justify-content: flex-end; | |
| } | |
| .emo-composer-picker-label { | |
| display: inline; | |
| max-width: min(9rem, 36vw); | |
| } | |
| .emo-composer-picker-label-model { | |
| max-width: min(11rem, 42vw); | |
| } | |
| .emo-segment-btn { | |
| min-height: 2.25rem; | |
| padding: var(--emo-space-2) var(--emo-space-2); | |
| } | |
| .emo-composer-body { | |
| padding: var(--emo-space-1) var(--emo-space-2); | |
| } | |
| .emo-composer-footer { | |
| padding: var(--emo-space-2); | |
| } | |
| .emo-attachment-strip { | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| scroll-snap-type: x proximity; | |
| padding-bottom: var(--emo-space-1); | |
| } | |
| .emo-attachment-chip { | |
| flex-shrink: 0; | |
| scroll-snap-align: start; | |
| max-width: min(160px, 42vw); | |
| } | |
| .emo-attachment-remove { | |
| opacity: 1; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| top: -4px; | |
| right: -4px; | |
| } | |
| .emo-dropdown { | |
| max-width: min(18rem, calc(100vw - 2rem)); | |
| z-index: var(--emo-z-dropdown); | |
| } | |
| .emo-composer-picker-mode .emo-dropdown { | |
| left: 0; | |
| right: auto; | |
| } | |
| .emo-composer-picker-model .emo-dropdown { | |
| left: auto; | |
| right: 0; | |
| } | |
| .emo-sidebar-mobile .emo-sidebar-nav-item, | |
| .emo-sidebar-mobile [data-testid^="conv-row-"] { | |
| min-height: var(--emo-touch-min); | |
| padding-top: var(--emo-space-3); | |
| padding-bottom: var(--emo-space-3); | |
| } | |
| .emo-profile-drawer { | |
| inset: 0; | |
| width: 100% ; | |
| max-width: 100%; | |
| border-left: none; | |
| border-radius: 0; | |
| padding-top: var(--emo-safe-top); | |
| padding-bottom: var(--emo-safe-bottom); | |
| animation: emoSlideInRight var(--emo-transition-slow) both; | |
| } | |
| .emo-settings-content { | |
| padding: var(--emo-space-4); | |
| padding-bottom: calc(var(--emo-space-8) + var(--emo-safe-bottom)); | |
| } | |
| .emo-theme-btn { | |
| min-height: var(--emo-touch-min); | |
| } | |
| .emo-browser-chrome { | |
| flex-wrap: wrap; | |
| padding: var(--emo-space-2); | |
| gap: var(--emo-space-1); | |
| } | |
| .emo-browser-url-bar { | |
| flex: 1 1 100%; | |
| order: 3; | |
| min-height: var(--emo-touch-min); | |
| } | |
| .emo-browser-viewport img, | |
| .emo-browser-screenshot { | |
| --emo-browser-screenshot-max: min(52dvh, 420px); | |
| max-height: var(--emo-browser-screenshot-max) ; | |
| } | |
| .emo-browser[data-keyboard-open="true"] .emo-browser-viewport img, | |
| .emo-browser[data-keyboard-open="true"] .emo-browser-screenshot { | |
| max-height: calc(var(--emo-browser-screenshot-max, min(52dvh, 420px)) - min(var(--emo-keyboard-inset, 0px), 45dvh)) ; | |
| } | |
| body.emo-mobile-keyboard-open:not(.emo-browser-sheet-open) .emo-chat-composer-wrap { | |
| transform: translateY(calc(-1 * var(--emo-mobile-kb-inset, 0px))); | |
| transition: transform 0.15s ease-out; | |
| } | |
| body.emo-mobile-keyboard-open.emo-browser-sheet-open .emo-bottom-sheet { | |
| max-height: calc(100dvh - var(--emo-mobile-kb-inset, 0px) - var(--emo-safe-top) - 0.5rem); | |
| } | |
| body.emo-mobile-keyboard-open.emo-browser-sheet-open .emo-right-panel-sheet { | |
| min-height: 0; | |
| } | |
| .emo-browser-status { | |
| flex-wrap: wrap; | |
| font-size: 0.625rem; | |
| gap: var(--emo-space-1); | |
| } | |
| .emo-browser-status span:last-child { | |
| max-width: 100%; | |
| } | |
| .emo-browser-mobile-actions { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 2px; | |
| } | |
| .emo-right-panel-sheet .emo-panel-tabs { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .emo-right-panel-sheet .emo-panel-tab { | |
| min-height: var(--emo-touch-min); | |
| flex-shrink: 0; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .emo-browser-mobile-actions { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 374px) { | |
| .emo-chat-header-subtitle { | |
| display: none; | |
| } | |
| .emo-composer-toolbar-inner .emo-btn-ghost { | |
| padding-left: var(--emo-space-2); | |
| padding-right: var(--emo-space-2); | |
| } | |
| } | |