|
|
@@ -1,507 +0,0 @@
|
|
|
-:root {
|
|
|
- font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji",
|
|
|
- "Segoe UI Emoji";
|
|
|
- color-scheme: light;
|
|
|
- --bg: #f6f8ff;
|
|
|
- --surface: rgba(255, 255, 255, 0.72);
|
|
|
- --surface-2: rgba(255, 255, 255, 0.6);
|
|
|
- --border: rgba(15, 23, 42, 0.24);
|
|
|
- --text: #0b1224;
|
|
|
- --muted: rgba(11, 18, 36, 0.65);
|
|
|
- --shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
|
|
|
- --ring: rgba(37, 99, 235, 0.45);
|
|
|
- --btn-border: rgba(37, 99, 235, 0.3);
|
|
|
- --btn-bg-1: rgba(37, 99, 235, 0.12);
|
|
|
- --chat-bg: rgba(255, 255, 255, 0.55);
|
|
|
- --bubble-user-bg: rgba(37, 99, 235, 0.12);
|
|
|
- --bubble-user-border: rgba(37, 99, 235, 0.25);
|
|
|
- --bubble-assistant-bg: rgba(255, 255, 255, 0.7);
|
|
|
- --bubble-assistant-border: rgba(15, 23, 42, 0.14);
|
|
|
-}
|
|
|
-
|
|
|
-html.dark {
|
|
|
- color-scheme: dark;
|
|
|
- --bg: #070b16;
|
|
|
- --surface: rgba(16, 24, 44, 0.72);
|
|
|
- --surface-2: rgba(10, 16, 30, 0.7);
|
|
|
- --border: rgba(255, 255, 255, 0.20);
|
|
|
- --text: #e7ecf6;
|
|
|
- --muted: rgba(231, 236, 246, 0.68);
|
|
|
- --shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
|
|
|
- --ring: rgba(91, 140, 255, 0.55);
|
|
|
- --btn-border: rgba(91, 140, 255, 0.28);
|
|
|
- --btn-bg-1: rgba(91, 140, 255, 0.18);
|
|
|
- --chat-bg: rgba(7, 11, 22, 0.6);
|
|
|
- --bubble-user-bg: rgba(27, 42, 78, 0.92);
|
|
|
- --bubble-user-border: rgba(42, 58, 99, 0.9);
|
|
|
- --bubble-assistant-bg: rgba(15, 26, 48, 0.9);
|
|
|
- --bubble-assistant-border: rgba(34, 48, 82, 0.9);
|
|
|
-}
|
|
|
-
|
|
|
-body {
|
|
|
- margin: 0;
|
|
|
- background: radial-gradient(1200px 700px at 15% 15%, rgba(91, 140, 255, 0.16), transparent 60%),
|
|
|
- radial-gradient(900px 700px at 85% 30%, rgba(162, 102, 255, 0.14), transparent 55%),
|
|
|
- radial-gradient(900px 700px at 60% 85%, rgba(0, 198, 255, 0.08), transparent 60%), var(--bg);
|
|
|
- color: var(--text);
|
|
|
-}
|
|
|
-
|
|
|
-* {
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.app {
|
|
|
- height: 100vh;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.panel {
|
|
|
- background: var(--surface);
|
|
|
- border: 1px solid var(--border);
|
|
|
- border-radius: 12px;
|
|
|
- padding: 16px;
|
|
|
- box-shadow: var(--shadow);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
-}
|
|
|
-
|
|
|
-.title {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 650;
|
|
|
- margin: 0 0 10px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.muted {
|
|
|
- color: var(--muted);
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-@layer base {
|
|
|
- button {
|
|
|
- border: 1px solid var(--btn-border);
|
|
|
- background: var(--btn-bg-1);
|
|
|
- color: var(--text);
|
|
|
- padding: 10px 12px;
|
|
|
- border-radius: 10px;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 120ms ease, border-color 120ms ease;
|
|
|
- }
|
|
|
-
|
|
|
- button:hover:not(:disabled) {
|
|
|
- transform: translateY(-1px);
|
|
|
- border-color: var(--ring);
|
|
|
- }
|
|
|
-
|
|
|
- button:disabled {
|
|
|
- opacity: 0.5;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-input,
|
|
|
-textarea {
|
|
|
- width: 100%;
|
|
|
- border: 1px solid var(--border);
|
|
|
- background: var(--surface-2);
|
|
|
- color: var(--text);
|
|
|
- padding: 10px 12px;
|
|
|
- border-radius: 10px;
|
|
|
- outline: none;
|
|
|
-}
|
|
|
-
|
|
|
-select {
|
|
|
- width: 100%;
|
|
|
- border: 1px solid var(--border);
|
|
|
- background: var(--surface-2);
|
|
|
- color: var(--text);
|
|
|
- padding: 10px 12px;
|
|
|
- border-radius: 10px;
|
|
|
- outline: none;
|
|
|
- appearance: none;
|
|
|
-}
|
|
|
-
|
|
|
-textarea {
|
|
|
- resize: vertical;
|
|
|
-}
|
|
|
-
|
|
|
-input:focus,
|
|
|
-textarea:focus,
|
|
|
-select:focus {
|
|
|
- border-color: var(--ring);
|
|
|
- box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.18);
|
|
|
-}
|
|
|
-
|
|
|
-.themeToggle {
|
|
|
- position: fixed;
|
|
|
- top: 14px;
|
|
|
- right: 14px;
|
|
|
- z-index: 1000;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-.appShell {
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 340px 1fr;
|
|
|
-}
|
|
|
-
|
|
|
-.sidebar {
|
|
|
- border-right: 1px solid var(--border);
|
|
|
- background: var(--surface);
|
|
|
- box-shadow: var(--shadow);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- display: grid;
|
|
|
- grid-template-rows: auto 1fr auto;
|
|
|
- min-height: 0;
|
|
|
- gap: 14px;
|
|
|
- overflow: hidden;
|
|
|
- padding: 18px;
|
|
|
-}
|
|
|
-
|
|
|
-.sidebarHeader {
|
|
|
- padding-right: 34px;
|
|
|
-}
|
|
|
-
|
|
|
-.sidebarScroll {
|
|
|
- overflow: auto;
|
|
|
- display: grid;
|
|
|
- gap: 14px;
|
|
|
- min-height: 0;
|
|
|
- padding-right: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-.sidebarFooter {
|
|
|
- font-size: 11px;
|
|
|
- line-height: 1.35;
|
|
|
- padding-right: 34px;
|
|
|
-}
|
|
|
-
|
|
|
-.main {
|
|
|
- padding: 22px;
|
|
|
- display: grid;
|
|
|
- align-items: stretch;
|
|
|
- min-height: 0;
|
|
|
- overflow: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.landingActions {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.topbar {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-end;
|
|
|
- gap: 16px;
|
|
|
- margin-bottom: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.brandTitle {
|
|
|
- letter-spacing: 0.14em;
|
|
|
- font-weight: 760;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.brandSub {
|
|
|
- margin-top: 6px;
|
|
|
- color: var(--muted);
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.layout {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1.35fr 0.65fr;
|
|
|
- gap: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.stack {
|
|
|
- display: grid;
|
|
|
- gap: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.footer {
|
|
|
- margin-top: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-@media (max-width: 980px) {
|
|
|
- .appShell {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
- .sidebar {
|
|
|
- border-right: 0;
|
|
|
- border-bottom: 1px solid var(--border);
|
|
|
- }
|
|
|
- .main {
|
|
|
- padding: 16px;
|
|
|
- }
|
|
|
- .topbar {
|
|
|
- align-items: stretch;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
- .layout {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* ─── Prose: estilos para Markdown renderizado no chat ─── */
|
|
|
-.prose-content {
|
|
|
- font-size: 0.875rem;
|
|
|
- line-height: 1.65;
|
|
|
- color: inherit;
|
|
|
-}
|
|
|
-
|
|
|
-.prose-content p {
|
|
|
- margin: 0 0 0.6em;
|
|
|
-}
|
|
|
-.prose-content p:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.prose-content ul,
|
|
|
-.prose-content ol {
|
|
|
- margin: 0.4em 0 0.6em;
|
|
|
- padding-left: 1.4em;
|
|
|
-}
|
|
|
-.prose-content li {
|
|
|
- margin: 0.2em 0;
|
|
|
-}
|
|
|
-
|
|
|
-.prose-content h1, .prose-content h2, .prose-content h3,
|
|
|
-.prose-content h4, .prose-content h5, .prose-content h6 {
|
|
|
- font-weight: 650;
|
|
|
- line-height: 1.3;
|
|
|
- margin: 0.8em 0 0.3em;
|
|
|
-}
|
|
|
-.prose-content h1 { font-size: 1.15em; }
|
|
|
-.prose-content h2 { font-size: 1.05em; }
|
|
|
-.prose-content h3 { font-size: 0.95em; }
|
|
|
-.prose-content h4, .prose-content h5, .prose-content h6 { font-size: 0.875em; }
|
|
|
-
|
|
|
-.prose-content strong { font-weight: 650; }
|
|
|
-.prose-content em { font-style: italic; }
|
|
|
-
|
|
|
-.prose-content a {
|
|
|
- color: var(--ring);
|
|
|
- text-decoration: underline;
|
|
|
- text-underline-offset: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-.prose-content blockquote {
|
|
|
- margin: 0.5em 0;
|
|
|
- padding-left: 0.75em;
|
|
|
- border-left: 3px solid var(--border);
|
|
|
- color: var(--muted);
|
|
|
- font-style: italic;
|
|
|
-}
|
|
|
-
|
|
|
-.prose-content hr {
|
|
|
- border: none;
|
|
|
- border-top: 1px solid var(--border);
|
|
|
- margin: 0.8em 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* Código inline */
|
|
|
-.prose-content code:not(pre code) {
|
|
|
- background: rgba(91, 140, 255, 0.1);
|
|
|
- border: 1px solid rgba(91, 140, 255, 0.2);
|
|
|
- border-radius: 4px;
|
|
|
- padding: 0.1em 0.35em;
|
|
|
- font-family: "JetBrains Mono", "Fira Mono", monospace;
|
|
|
- font-size: 0.82em;
|
|
|
-}
|
|
|
-html.dark .prose-content code:not(pre code) {
|
|
|
- background: rgba(91, 140, 255, 0.15);
|
|
|
- border-color: rgba(91, 140, 255, 0.25);
|
|
|
-}
|
|
|
-
|
|
|
-/* Blocos de código */
|
|
|
-.code-block-wrapper {
|
|
|
- margin: 0.5em 0;
|
|
|
- border-radius: 10px;
|
|
|
- overflow: hidden;
|
|
|
- border: 1px solid var(--border);
|
|
|
- font-size: 0.8em;
|
|
|
-}
|
|
|
-
|
|
|
-.code-block-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 4px 10px;
|
|
|
- background: rgba(15, 23, 42, 0.06);
|
|
|
- border-bottom: 1px solid var(--border);
|
|
|
-}
|
|
|
-html.dark .code-block-header {
|
|
|
- background: rgba(255, 255, 255, 0.05);
|
|
|
-}
|
|
|
-
|
|
|
-.code-lang {
|
|
|
- font-family: "JetBrains Mono", monospace;
|
|
|
- font-size: 0.78em;
|
|
|
- color: var(--muted);
|
|
|
- text-transform: lowercase;
|
|
|
-}
|
|
|
-
|
|
|
-.code-copy-btn {
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
- border: 1px solid var(--border);
|
|
|
- background: transparent;
|
|
|
- color: var(--muted);
|
|
|
- padding: 2px 8px;
|
|
|
- border-radius: 5px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 0.75em;
|
|
|
- font-family: ui-sans-serif, system-ui, sans-serif;
|
|
|
- transition: color 120ms, border-color 120ms;
|
|
|
- transform: none;
|
|
|
-}
|
|
|
-.code-copy-btn:hover {
|
|
|
- color: var(--text);
|
|
|
- border-color: var(--ring);
|
|
|
- transform: none;
|
|
|
-}
|
|
|
-.code-copy-btn.copied {
|
|
|
- color: #22c55e;
|
|
|
- border-color: #22c55e44;
|
|
|
-}
|
|
|
-.code-copy-btn svg {
|
|
|
- width: 11px;
|
|
|
- height: 11px;
|
|
|
-}
|
|
|
-
|
|
|
-.code-block-wrapper pre {
|
|
|
- margin: 0;
|
|
|
- padding: 12px 14px;
|
|
|
- overflow-x: auto;
|
|
|
- background: rgba(15, 23, 42, 0.04);
|
|
|
-}
|
|
|
-html.dark .code-block-wrapper pre {
|
|
|
- background: rgba(0, 0, 0, 0.3);
|
|
|
-}
|
|
|
-.code-block-wrapper pre code {
|
|
|
- font-family: "JetBrains Mono", "Fira Mono", monospace;
|
|
|
- font-size: 1em;
|
|
|
- line-height: 1.6;
|
|
|
- border: none;
|
|
|
- background: none;
|
|
|
- padding: 0;
|
|
|
- border-radius: 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* ─── Highlight.js tema (light/dark) ─── */
|
|
|
-.hljs { color: #24292e; }
|
|
|
-.hljs-comment, .hljs-punctuation { color: #6a737d; }
|
|
|
-.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: #d73a49; font-weight: 600; }
|
|
|
-.hljs-string, .hljs-attr { color: #032f62; }
|
|
|
-.hljs-number, .hljs-literal { color: #005cc5; }
|
|
|
-.hljs-title, .hljs-function { color: #6f42c1; font-weight: 600; }
|
|
|
-.hljs-variable, .hljs-template-variable { color: #e36209; }
|
|
|
-.hljs-type, .hljs-class { color: #005cc5; font-weight: 600; }
|
|
|
-.hljs-meta { color: #6a737d; }
|
|
|
-.hljs-tag { color: #22863a; }
|
|
|
-.hljs-name { color: #22863a; font-weight: 600; }
|
|
|
-.hljs-attribute { color: #6f42c1; }
|
|
|
-.hljs-symbol, .hljs-bullet, .hljs-link { color: #005cc5; }
|
|
|
-.hljs-deletion { color: #b31d28; background-color: #ffeef0; }
|
|
|
-.hljs-addition { color: #22863a; background-color: #f0fff4; }
|
|
|
-
|
|
|
-html.dark .hljs { color: #cdd9e5; }
|
|
|
-html.dark .hljs-comment, html.dark .hljs-punctuation { color: #768390; }
|
|
|
-html.dark .hljs-keyword, html.dark .hljs-selector-tag, html.dark .hljs-built_in { color: #f47067; font-weight: 600; }
|
|
|
-html.dark .hljs-string, html.dark .hljs-attr { color: #96d0ff; }
|
|
|
-html.dark .hljs-number, html.dark .hljs-literal { color: #6cb6ff; }
|
|
|
-html.dark .hljs-title, html.dark .hljs-function { color: #dcbdfb; font-weight: 600; }
|
|
|
-html.dark .hljs-variable, html.dark .hljs-template-variable { color: #f69d50; }
|
|
|
-html.dark .hljs-type, html.dark .hljs-class { color: #6cb6ff; font-weight: 600; }
|
|
|
-html.dark .hljs-meta { color: #768390; }
|
|
|
-html.dark .hljs-tag { color: #8ddb8c; }
|
|
|
-html.dark .hljs-name { color: #8ddb8c; font-weight: 600; }
|
|
|
-html.dark .hljs-attribute { color: #dcbdfb; }
|
|
|
-html.dark .hljs-symbol, html.dark .hljs-bullet, html.dark .hljs-link { color: #6cb6ff; }
|
|
|
-html.dark .hljs-deletion { color: #ff938a; background-color: rgba(255, 80, 60, 0.12); }
|
|
|
-html.dark .hljs-addition { color: #8ddb8c; background-color: rgba(70, 200, 100, 0.1); }
|
|
|
-
|
|
|
-/* ─── Vue-Toastification overrides ─── */
|
|
|
-:root {
|
|
|
- --toastify-toast-min-height: 48px;
|
|
|
- --toastify-toast-max-height: 200px;
|
|
|
- --toastify-font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
|
|
- --toastify-z-index: 99999;
|
|
|
-}
|
|
|
-
|
|
|
-.Vue-Toastification__toast {
|
|
|
- border-radius: 12px !important;
|
|
|
- font-size: 0.875rem !important;
|
|
|
- font-weight: 500 !important;
|
|
|
- box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
|
|
|
- padding: 12px 16px !important;
|
|
|
- min-height: 48px !important;
|
|
|
-}
|
|
|
-
|
|
|
-.Vue-Toastification__toast--success {
|
|
|
- background-color: #f0fdf4 !important;
|
|
|
- color: #15803d !important;
|
|
|
- border: 1px solid #bbf7d0 !important;
|
|
|
-}
|
|
|
-
|
|
|
-.Vue-Toastification__toast--error {
|
|
|
- background-color: #fef2f2 !important;
|
|
|
- color: #b91c1c !important;
|
|
|
- border: 1px solid #fecaca !important;
|
|
|
-}
|
|
|
-
|
|
|
-.Vue-Toastification__toast--info {
|
|
|
- background-color: #eff6ff !important;
|
|
|
- color: #1d4ed8 !important;
|
|
|
- border: 1px solid #bfdbfe !important;
|
|
|
-}
|
|
|
-
|
|
|
-.Vue-Toastification__toast--warning {
|
|
|
- background-color: #fffbeb !important;
|
|
|
- color: #b45309 !important;
|
|
|
- border: 1px solid #fde68a !important;
|
|
|
-}
|
|
|
-
|
|
|
-html.dark .Vue-Toastification__toast--success {
|
|
|
- background-color: rgba(20, 83, 45, 0.9) !important;
|
|
|
- color: #86efac !important;
|
|
|
- border-color: rgba(74, 222, 128, 0.25) !important;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
-}
|
|
|
-
|
|
|
-html.dark .Vue-Toastification__toast--error {
|
|
|
- background-color: rgba(127, 29, 29, 0.9) !important;
|
|
|
- color: #fca5a5 !important;
|
|
|
- border-color: rgba(252, 165, 165, 0.25) !important;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
-}
|
|
|
-
|
|
|
-html.dark .Vue-Toastification__toast--info {
|
|
|
- background-color: rgba(30, 58, 138, 0.9) !important;
|
|
|
- color: #93c5fd !important;
|
|
|
- border-color: rgba(147, 197, 253, 0.25) !important;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
-}
|
|
|
-
|
|
|
-html.dark .Vue-Toastification__toast--warning {
|
|
|
- background-color: rgba(120, 53, 15, 0.9) !important;
|
|
|
- color: #fcd34d !important;
|
|
|
- border-color: rgba(252, 211, 77, 0.25) !important;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
-}
|
|
|
-
|
|
|
-.Vue-Toastification__progress-bar {
|
|
|
- opacity: 0.35 !important;
|
|
|
-}
|
|
|
-
|
|
|
-.Vue-Toastification__close-button {
|
|
|
- opacity: 0.5 !important;
|
|
|
-}
|
|
|
-.Vue-Toastification__close-button:hover {
|
|
|
- opacity: 1 !important;
|
|
|
-}
|
