/* Scrollbar customizada */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #0f172a; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Sidebar transition */ #sidebar { transition: transform 0.2s ease; } /* Select aparência dark */ select option { background-color: #1e293b; color: #f1f5f9; } /* Animação pulse suave para o indicador de fase ativa */ @keyframes soft-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .animate-pulse { animation: soft-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* --- Code blocks / markdown --- */ :root { --code-bg: #0b1120; --code-surface: #111827; --code-header-bg: #0f172a; --code-border: #334155; --code-text: #e5eefb; --code-muted: #94a3b8; --code-gutter-bg: rgba(15, 23, 42, 0.68); --code-gutter-text: #64748b; --code-inline-bg: #1e293b; --code-inline-text: #e2e8f0; --code-copy-hover-bg: #334155; --code-copy-hover-text: #f8fafc; --code-shadow: 0 8px 20px rgba(2, 6, 23, 0.12); --code-token-keyword: #c084fc; --code-token-string: #86efac; --code-token-number: #f9a8d4; --code-token-title: #93c5fd; --code-token-comment: #64748b; --code-token-variable: #fca5a5; --code-token-literal: #67e8f9; --code-token-built-in: #fdba74; } /* ============================================================ LIGHT MODE OVERRIDES Applies when has the "light-mode" class. Uses attribute substring selectors to catch all Tailwind opacity variants (e.g. bg-slate-900/70, border-slate-800/60). ============================================================ */ /* --- Body / root backgrounds --- */ html.light-mode { background-color: #f1f5f9 !important; color: #0f172a !important; --code-bg: #f8fafc; --code-surface: #ffffff; --code-header-bg: #eef2ff; --code-border: #dbe4f0; --code-text: #334155; --code-muted: #475569; --code-gutter-bg: #f1f5f9; --code-gutter-text: #94a3b8; --code-inline-bg: #e2e8f0; --code-inline-text: #475569; --code-copy-hover-bg: #dbe4f0; --code-copy-hover-text: #0f172a; --code-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); --code-token-keyword: #7c3aed; --code-token-string: #047857; --code-token-number: #be185d; --code-token-title: #1d4ed8; --code-token-comment: #94a3b8; --code-token-variable: #b91c1c; --code-token-literal: #0f766e; --code-token-built-in: #c2410c; } /* --- Scrollbar --- */ html.light-mode ::-webkit-scrollbar-track { background: #e2e8f0; } html.light-mode ::-webkit-scrollbar-thumb { background: #94a3b8; } html.light-mode ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* --- Backgrounds --- */ html.light-mode [class*="bg-slate-950"] { background-color: #f1f5f9 !important; } html.light-mode [class*="bg-slate-900"] { background-color: #ffffff !important; } html.light-mode [class*="bg-slate-800"] { background-color: #f8fafc !important; } html.light-mode [class*="bg-slate-700"] { background-color: #e2e8f0 !important; } /* body background */ html.light-mode body { background-color: #f1f5f9 !important; } /* --- Borders --- */ html.light-mode [class*="border-slate-800"] { border-color: #e2e8f0 !important; } html.light-mode [class*="border-slate-700"] { border-color: #cbd5e1 !important; } html.light-mode [class*="divide-slate-800"] > * + * { border-color: #e2e8f0 !important; } /* --- Text --- */ html.light-mode [class*="text-slate-100"] { color: #0f172a !important; } html.light-mode [class*="text-slate-200"] { color: #1e293b !important; } html.light-mode [class*="text-slate-300"] { color: #334155 !important; } html.light-mode [class*="text-slate-400"] { color: #475569 !important; } html.light-mode [class*="text-slate-500"] { color: #64748b !important; } html.light-mode [class*="text-slate-600"] { color: #94a3b8 !important; } /* --- Topbar backdrop --- */ html.light-mode header[class*="bg-slate-950"] { background-color: rgba(255, 255, 255, 0.92) !important; border-color: #e2e8f0 !important; } /* --- Sidebar --- */ html.light-mode #sidebar { background-color: #ffffff !important; border-color: #e2e8f0 !important; } /* --- Chat session sidebar --- */ html.light-mode #chat-sidebar { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } html.light-mode #chat-sidebar .session-item[class*="bg-slate-700"] { background-color: rgba(99, 102, 241, 0.12) !important; color: #3730a3 !important; } html.light-mode #chat-sidebar .session-item[class*="bg-slate-700"] svg { color: #4f46e5 !important; } /* --- Sidebar logo area / section labels --- */ html.light-mode #sidebar [class*="border-slate-800"] { border-color: #e2e8f0 !important; } html.light-mode #sidebar [class*="border-slate-700"] { border-color: #cbd5e1 !important; } /* --- Inputs / selects --- */ html.light-mode input, html.light-mode textarea, html.light-mode select { background-color: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.light-mode input::placeholder, html.light-mode textarea::placeholder { color: #94a3b8 !important; } html.light-mode select option { background-color: #ffffff; color: #0f172a; } /* --- Tables --- */ html.light-mode table { border-collapse: collapse; } /* thead row */ html.light-mode thead tr { background-color: #f8fafc !important; } html.light-mode thead th { border-bottom: 2px solid #e2e8f0 !important; } /* tbody row dividers */ html.light-mode tbody tr { border-bottom: 1px solid #e2e8f0 !important; } html.light-mode tbody tr:hover { background-color: #f1f5f9 !important; } /* override Tailwind divide utilities on tbody */ html.light-mode [class*="divide-y"] > tr, html.light-mode [class*="divide-y"] > * { border-color: #e2e8f0 !important; } /* --- Hover states on table rows --- */ html.light-mode tr:hover { background-color: #f1f5f9 !important; } /* --- Mobile overlay --- */ html.light-mode #sidebar-overlay { background-color: rgba(0,0,0,0.4) !important; } /* --- Theme toggle button --- */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; transition: background-color 0.15s; color: #94a3b8; background: transparent; border: none; } .theme-toggle:hover { background-color: rgba(148,163,184,0.15); color: #e2e8f0; } html.light-mode .theme-toggle:hover { background-color: rgba(100,116,139,0.12); color: #334155; } .theme-toggle .icon-dark { display: block; } .theme-toggle .icon-light { display: none; } html.light-mode .theme-toggle .icon-dark { display: none; } html.light-mode .theme-toggle .icon-light { display: block; } /* --- Chat: tipografia do markdown --- */ .markdown-body { font-size: 15px; line-height: 1.8; letter-spacing: -0.01em; color: inherit; } .markdown-body > *:first-child { margin-top: 0 !important; } .markdown-body > *:last-child { margin-bottom: 0 !important; } .markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body .markdown-table-wrap, .markdown-body pre, .markdown-body hr { margin: 0 0 16px; } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin: 24px 0 12px; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; color: #f8fafc; } .markdown-body h1 { font-size: 1.625rem; } .markdown-body h2 { font-size: 1.375rem; } .markdown-body h3 { font-size: 1.125rem; } .markdown-body h4 { font-size: 1rem; } .markdown-body strong { font-weight: 700; color: #f8fafc; } .markdown-body em { color: #cbd5e1; } .markdown-body ul, .markdown-body ol { padding-left: 1.25rem; } .markdown-body ul { list-style: disc; } .markdown-body ol { list-style: decimal; } .markdown-body li + li { margin-top: 6px; } .markdown-body li::marker { color: #94a3b8; } .markdown-body a { color: #93c5fd; text-decoration: underline; text-decoration-color: rgba(147, 197, 253, 0.45); text-underline-offset: 3px; } .markdown-body a:hover { color: #bfdbfe; } .markdown-body blockquote { padding: 12px 16px; border-left: 3px solid rgba(99, 102, 241, 0.9); border-radius: 0 12px 12px 0; background: rgba(99, 102, 241, 0.08); color: #cbd5e1; } .markdown-body hr { height: 1px; border: 0; background: rgba(148, 163, 184, 0.16); } .markdown-table-wrap { overflow-x: auto; border: 1px solid rgba(51, 65, 85, 0.8); border-radius: 14px; background: rgba(15, 23, 42, 0.28); } .markdown-body table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; } .markdown-body thead th { padding: 12px 14px; background: rgba(30, 41, 59, 0.8); color: #e2e8f0; font-size: 0.95em; font-weight: 700; text-align: left; border-bottom: 1px solid rgba(51, 65, 85, 0.85); } .markdown-body tbody td { padding: 12px 14px; vertical-align: top; color: #dbe4f0; border-top: 1px solid rgba(51, 65, 85, 0.6); } .markdown-body tbody tr:first-child td { border-top: 0; } .markdown-body tbody tr:nth-child(even) td { background: rgba(15, 23, 42, 0.2); } .markdown-body tbody tr:hover td { background: rgba(30, 41, 59, 0.38); } html.light-mode .markdown-body { color: #334155 !important; } html.light-mode .markdown-body h1, html.light-mode .markdown-body h2, html.light-mode .markdown-body h3, html.light-mode .markdown-body h4, html.light-mode .markdown-body strong { color: #0f172a !important; } html.light-mode .markdown-body em { color: #475569 !important; } html.light-mode .markdown-body li::marker { color: #94a3b8 !important; } html.light-mode .markdown-body a { color: #2563eb; text-decoration-color: rgba(37, 99, 235, 0.35); } html.light-mode .markdown-body a:hover { color: #1d4ed8; } html.light-mode .markdown-body blockquote { background: #eef2ff; color: #475569; border-left-color: #6366f1; } html.light-mode .markdown-body hr { background: #e2e8f0; } html.light-mode .markdown-table-wrap { border-color: #dbe4f0; background: #ffffff; } html.light-mode .markdown-body thead th { background: #f8fafc; color: #0f172a; border-bottom-color: #e2e8f0; } html.light-mode .markdown-body tbody td { color: #334155; border-top-color: #e2e8f0; } html.light-mode .markdown-body tbody tr:nth-child(even) td { background: #f8fafc; } html.light-mode .markdown-body tbody tr:hover td { background: #f1f5f9; } /* --- Chat: blocos de código --- */ .markdown-body pre { margin: 12px 0; padding: 16px 18px; background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 0; overflow-x: auto; color: var(--code-text); tab-size: 2; } .markdown-body pre code { display: block; width: 100%; font-size: 13px; line-height: 1.65; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color: inherit; background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-size: 1em !important; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .markdown-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background: var(--code-inline-bg); color: var(--code-inline-text); padding: 2px 6px; border-radius: 6px; font-size: 0.875em; } .code-block { margin: 14px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--code-border); background: var(--code-surface); box-shadow: var(--code-shadow); } .code-block-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--code-header-bg); padding: 10px 14px; border-bottom: 1px solid var(--code-border); } .code-block-meta { display: flex; align-items: center; gap: 10px; min-width: 0; } .code-block-lang { min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--code-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .code-block-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; } .code-block-gutter { display: flex; flex-direction: column; align-items: flex-end; gap: 0; padding: 16px 10px 16px 14px; background: var(--code-gutter-bg); border-right: 1px solid var(--code-border); user-select: none; } .code-block-gutter span { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.65; color: var(--code-gutter-text); } .code-block pre { margin: 0; border: 0; border-radius: 0; background: var(--code-bg); overflow-x: hidden; } .copy-code-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--code-muted); background: transparent; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: color .15s, background .15s, transform .15s; } .copy-code-btn:hover { color: var(--code-copy-hover-text); background: var(--code-copy-hover-bg); } .copy-code-btn:active { transform: translateY(1px); } .copy-code-btn.copied { color: #22c55e; } .copy-code-btn .check-icon { display: none; } .copy-code-btn.copied .copy-icon { display: none; } .copy-code-btn.copied .check-icon { display: block; } .hljs { background: transparent; color: var(--code-text); } .hljs-comment, .hljs-quote { color: var(--code-token-comment); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-subst, .hljs-meta .hljs-keyword { color: var(--code-token-keyword); } .hljs-string, .hljs-doctag, .hljs-regexp, .hljs-addition, .hljs-attribute { color: var(--code-token-string); } .hljs-number, .hljs-literal { color: var(--code-token-number); } .hljs-title, .hljs-section, .hljs-selector-id, .hljs-selector-class, .hljs-type { color: var(--code-token-title); } .hljs-variable, .hljs-template-variable, .hljs-name, .hljs-deletion { color: var(--code-token-variable); } .hljs-built_in, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--code-token-built-in); } .hljs-params, .hljs-property, .hljs-operator, .hljs-punctuation { color: var(--code-text); } /* --- Chat: área de mensagens e bolhas em light mode --- */ html.light-mode #messages-area { background: #f1f5f9 !important; } html.light-mode .message-row .assistant-content, html.light-mode .message-row .markdown-body { color: #0f172a !important; } /* Bolha do usuário em light mode */ html.light-mode .message-row .bg-slate-800 { background: #6366f1 !important; } html.light-mode .message-row .bg-slate-800 p { color: #ffffff !important; }