Spaces:
Running
Running
| :root { | |
| /* True Black Theme */ | |
| --bg-color: #000000; /* Pure Black */ | |
| --container-bg: #0a0a0a; /* Extremely dark grey */ | |
| --input-bg: #000000; /* Pure Black */ | |
| --user-msg-bg: #1a1a1a; /* Very dark grey for user */ | |
| --assistant-msg-bg: #101010; /* Even darker grey for AI */ | |
| --text-color: #ffffff; /* Slightly lighter grey/off-white text */ | |
| --text-color-darker: #ffffff; /* For less important text */ | |
| --placeholder-color: #404040; /* Darker placeholder text */ | |
| --border-color: #202020; /* Even darker grey border */ | |
| --accent-color-hover: #282828; /* Darker hover for buttons */ | |
| --focus-ring-color: rgba(150, 150, 150, 0.2); /* Even more subtle white focus */ | |
| --error-bg: #1a1a1a; /* Darker grey error background */ | |
| --success-feedback-color: #ffffff; /* White feedback for copy */ | |
| --code-bg: #050505; /* Near black background for code blocks */ | |
| --code-text-color: #c0c0c0; /* Lighter text for code */ | |
| --border-radius-smooth: 8px; /* Slightly reduced radius */ | |
| --border-radius-slight: 4px; | |
| --font-family: 'DM Sans', sans-serif; | |
| --transition-speed: 0.15s; /* Slightly faster transitions */ | |
| } | |
| @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); | |
| * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'DM Sans', sans-serif; } | |
| html, body { height: 100%; overflow: hidden; background-color: var(--bg-color); } | |
| /* Blob styling */ | |
| .blob { | |
| position: absolute; | |
| width: 40vw; | |
| height: 40vw; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| /* Main Container */ | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: var(--text-color); | |
| position: relative; | |
| } | |
| /* Intro Screen Animation */#intro-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100vh; | |
| background: radial-gradient(ellipse at center, #1a1a1a 0%, #080808 100%); /* Subtler gradient */ | |
| color: #e0e0e0; /* Softer white */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 3.2rem; /* Tiny bit bigger */ | |
| z-index: 9999; | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 255, 255, 0.4); /* Refined glow */ | |
| letter-spacing: 3px; /* More dramatic */ | |
| transition: opacity 0.6s ease-out, filter 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smoother, snappier */ | |
| overflow: hidden; /* To contain the pseudo-element animation */ | |
| } | |
| #intro-screen h1 { | |
| position: relative; | |
| margin: 0; | |
| padding-bottom: 15px; /* Space for the fancy underline */ | |
| } | |
| #intro-screen h1::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; /* Moved down */ | |
| left: 15%; /* Starts a bit in */ | |
| width: 70%; /* Wider, more prominent */ | |
| height: 2px; /* Thicker line */ | |
| background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), #ffffff 30%, rgba(255, 255, 255, 0.1)); /* More defined gradient */ | |
| opacity: 0; /* Initially hidden */ | |
| transform: scaleX(0); /* Starts scaled down */ | |
| transition: opacity 0.4s ease-in-out 0.4s, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s; /* Fancy reveal */ | |
| } | |
| /* Chat Container */ | |
| .chat-container { | |
| background-color: var(--container-bg); | |
| width: 90%; | |
| height: 90%; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border-radius: 16px; | |
| transition: all var(--transition-speed) ease; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); | |
| box-shadow: 0px 0px 100px rgba(255, 255, 255,0.1); | |
| position: relative; | |
| z-index: 10; | |
| border: 1px solid var(--border-color); | |
| } | |
| /* Header Styling */ | |
| .chat-header { | |
| background-color: var(--input-bg); | |
| padding: 10px 25px; | |
| border-bottom: 1px solid var(--border-color); | |
| flex-shrink: 0; | |
| transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease; | |
| z-index: 10; | |
| } | |
| .header-top-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .chat-header h1 { | |
| font-size: 1.1em; | |
| font-weight: 500; | |
| margin: 0; | |
| } | |
| .header-button { | |
| background: none; | |
| border: none; | |
| color: var(--text-color-darker); | |
| cursor: pointer; | |
| padding: 5px; | |
| border-radius: var(--border-radius-slight); | |
| transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease; | |
| } | |
| .header-button:hover { | |
| color: var(--text-color); | |
| background-color: var(--accent-color-hover); | |
| } | |
| .header-bottom-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .header-bottom-row label { | |
| font-size: 0.85em; | |
| color: var(--text-color-darker); | |
| } | |
| .model-select { | |
| flex-grow: 1; | |
| background-color: var(--container-bg); | |
| color: var(--text-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-slight); | |
| padding: 5px 8px; | |
| font-size: 0.85em; | |
| cursor: pointer; | |
| transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease; | |
| } | |
| .model-select:focus { | |
| outline: none; | |
| border-color: var(--text-color-darker); | |
| background-color: var(--bg-color); | |
| } | |
| /* Chat Box */ | |
| .chat-box { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding: 25px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| /* Custom Scrollbar */ | |
| .chat-box::-webkit-scrollbar { width: 8px; } | |
| .chat-box::-webkit-scrollbar-track { background: var(--container-bg); } | |
| .chat-box::-webkit-scrollbar-thumb { | |
| background-color: var(--input-bg); | |
| border-radius: 4px; | |
| border: 2px solid var(--container-bg); | |
| } | |
| .chat-box::-webkit-scrollbar-thumb:hover { | |
| background-color: var(--accent-color-hover); | |
| } | |
| /* Message Styling */ | |
| .message { | |
| padding: 14px 20px; | |
| border-radius: var(--border-radius-smooth); | |
| max-width: 85%; | |
| word-wrap: break-word; | |
| line-height: 1.6; | |
| position: relative; | |
| transition: background-color var(--transition-speed) ease; | |
| } | |
| .message-content { padding-right: 30px; } | |
| .user-message { | |
| background-color: var(--user-msg-bg); | |
| color: var(--text-color); | |
| align-self: flex-end; | |
| border-bottom-right-radius: var(--border-radius-slight); | |
| } | |
| .assistant-message { | |
| background-color: var(--assistant-msg-bg); | |
| color: var(--text-color); | |
| align-self: flex-start; | |
| border-bottom-left-radius: var(--border-radius-slight); | |
| } | |
| /* Copy Button */ | |
| .copy-button { | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| color: var(--text-color-darker); | |
| border: none; | |
| border-radius: 4px; | |
| padding: 3px 5px; | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity var(--transition-speed) ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2; | |
| } | |
| .message:hover .copy-button { opacity: 1; } | |
| .copy-button:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: var(--text-color); | |
| } | |
| .copy-button.copied svg path { fill: var(--success-feedback-color); } | |
| .copy-button.copied { background-color: rgba(255, 255, 255, 0.08); } | |
| /* Animation for text appearing */ | |
| .unblur-token { | |
| display: inline; | |
| opacity: 0; | |
| filter: blur(5px); | |
| transform: translateY(5px); | |
| animation: unblurFadeSlide 0.3s ease forwards; | |
| } | |
| /* Keep block elements as block */ | |
| p.unblur-token, h1.unblur-token, h2.unblur-token, h3.unblur-token, | |
| div.unblur-token, pre.unblur-token, blockquote.unblur-token, | |
| ul.unblur-token, ol.unblur-token, li.unblur-token { | |
| display: block; | |
| } | |
| /* Ensure code elements don't break the flow */ | |
| code.unblur-token:not(pre code) { | |
| display: inline; | |
| } | |
| @keyframes unblurFadeSlide { | |
| 0% { | |
| opacity: 0; | |
| filter: blur(5px); | |
| transform: translateY(5px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| filter: blur(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Markdown Content Styling */ | |
| .message p { margin-bottom: 0.8em; } | |
| .message p:last-child { margin-bottom: 0; } | |
| .message a { color: var(--text-color); text-decoration: underline; } | |
| .message a:hover { color: var(--text-color-darker); } | |
| .message ul, .message ol { margin-left: 1.5em; margin-bottom: 0.8em; } | |
| .message li { margin-bottom: 0.3em; } | |
| .message h1, .message h2, .message h3, .message h4, .message h5, .message h6 { | |
| margin-top: 1em; | |
| margin-bottom: 0.5em; | |
| font-weight: 600; | |
| line-height: 1.3; | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 0.2em; | |
| } | |
| .message h1 { font-size: 1.4em; } | |
| .message h2 { font-size: 1.3em; } | |
| .message h3 { font-size: 1.2em; } | |
| .message strong { font-weight: 600; } | |
| .message blockquote { | |
| border-left: 3px solid var(--border-color); | |
| margin-left: 0; | |
| padding-left: 1em; | |
| color: var(--text-color-darker); | |
| font-style: italic; | |
| margin-bottom: 0.8em; | |
| } | |
| .message hr { | |
| border: none; | |
| border-top: 1px solid var(--border-color); | |
| margin: 1.5em 0; | |
| } | |
| /* Code Styling */ | |
| .message code:not(pre code) { | |
| background-color: var(--input-bg); | |
| color: var(--code-text-color); | |
| padding: 0.2em 0.4em; | |
| border-radius: var(--border-radius-slight); | |
| font-size: 0.9em; | |
| font-family: monospace; | |
| } | |
| .message pre { | |
| background-color: var(--code-bg); | |
| padding: 1em; | |
| border-radius: var(--border-radius-slight); | |
| overflow-x: auto; | |
| margin: 0.5em 0 1em 0; | |
| font-family: monospace; | |
| font-size: 0.9em; | |
| line-height: 1.5; | |
| position: relative; | |
| border: 1px solid var(--border-color); | |
| } | |
| .message pre code.hljs { | |
| display: block; | |
| overflow-x: auto; | |
| padding: 0; | |
| background: transparent; | |
| color: inherit; | |
| font-size: inherit; | |
| } | |
| /* Copy Code Button */ | |
| .copy-code-button { | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| background-color: var(--input-bg); | |
| color: var(--text-color-darker); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-slight); | |
| padding: 4px 8px; | |
| cursor: pointer; | |
| font-size: 0.8em; | |
| opacity: 0.3; | |
| transition: opacity var(--transition-speed) ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| z-index: 5; | |
| } | |
| .message pre:hover .copy-code-button { opacity: 1; } | |
| .copy-code-button:hover { | |
| background-color: var(--accent-color-hover); | |
| color: var(--text-color); | |
| } | |
| .copy-code-button svg { width: 12px; height: 12px; } | |
| .copy-code-button.copied span { display: none; } | |
| .copy-code-button.copied::after { content: 'Copied!'; font-weight: 500; } | |
| .copy-code-button.copied { | |
| color: var(--success-feedback-color); | |
| background-color: var(--accent-color-hover); | |
| } | |
| /* Input Area */ | |
| .input-area { | |
| display: flex; | |
| padding: 15px 25px; | |
| border-top: 1px solid var(--border-color); | |
| background-color: var(--input-bg); | |
| flex-shrink: 0; | |
| gap: 10px; | |
| align-items: flex-end; | |
| transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease; | |
| } | |
| #user-input { | |
| flex-grow: 1; | |
| background-color: var(--container-bg); | |
| color: var(--text-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-slight); | |
| padding: 12px 15px; | |
| font-family: var(--font-family); | |
| font-size: 1em; | |
| resize: none; | |
| overflow-y: auto; | |
| max-height: 120px; | |
| line-height: 1.4; | |
| transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease; | |
| } | |
| #user-input:focus { | |
| outline: none; | |
| border-color: var(--text-color-darker); | |
| box-shadow: 0 0 0 2px var(--focus-ring-color); | |
| } | |
| #user-input::placeholder { color: var(--placeholder-color); } | |
| /* Control Buttons */ | |
| .control-button { | |
| background-color: var(--input-bg); | |
| color: var(--text-color-darker); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-slight); | |
| padding: 10px; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| transition: background-color var(--transition-speed) ease, transform 0.1s ease, border-color var(--transition-speed) ease, color var(--transition-speed) ease; | |
| height: 46px; | |
| width: 46px; | |
| flex-shrink: 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .control-button:hover:not(:disabled) { | |
| background-color: var(--accent-color-hover); | |
| border-color: var(--accent-color-hover); | |
| color: var(--text-color); | |
| } | |
| .control-button:active:not(:disabled) { transform: scale(0.95); } | |
| .control-button:disabled { | |
| background-color: var(--container-bg); | |
| color: #555; | |
| border-color: var(--border-color); | |
| cursor: not-allowed; | |
| } | |
| .send-button .send-icon { transition: opacity var(--transition-speed) ease; } | |
| .send-button .button-spinner { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .stop-button { color: var(--error-bg); } | |
| .stop-button:hover:not(:disabled) { | |
| background-color: #dc3545; | |
| color: white; | |
| border-color: #dc3545; | |
| } | |
| /* Spinner */ | |
| .spinner { | |
| display: inline-block; | |
| width: 1em; | |
| height: 1em; | |
| border: 2px solid currentColor; | |
| border-right-color: transparent; | |
| border-radius: 50%; | |
| animation: spinner-border .75s linear infinite; | |
| vertical-align: middle; | |
| } | |
| .button-spinner { | |
| width: 20px; | |
| height: 20px; | |
| border-width: 3px; | |
| color: var(--text-color); | |
| } | |
| @keyframes spinner-border { to { transform: rotate(360deg); } } | |
| /* Error Message */ | |
| .error-message { | |
| background-color: var(--error-bg); | |
| color: #ffcccc; | |
| border: 1px solid #600; | |
| } | |
| .error-message .copy-button { | |
| background-color: rgba(255, 100, 100, 0.1); | |
| color: #ffcccc; | |
| } | |
| .error-message .copy-button:hover { | |
| background-color: rgba(255, 100, 100, 0.2); | |
| color: #ffe0e0; | |
| } | |
| /* Modal Styling */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background-color: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| opacity: 0; | |
| transition: opacity var(--transition-speed) ease; | |
| } | |
| .modal-overlay.visible { opacity: 1; } | |
| .modal-content { | |
| background-color: var(--input-bg); | |
| padding: 25px 30px; | |
| border-radius: var(--border-radius-smooth); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | |
| width: 90%; | |
| max-width: 400px; | |
| text-align: center; | |
| transform: scale(0.95); | |
| transition: transform var(--transition-speed) ease; | |
| border: 1px solid var(--border-color); | |
| } | |
| .modal-overlay.visible .modal-content { transform: scale(1); } | |
| .modal-content h4 { | |
| margin-bottom: 10px; | |
| font-size: 1.2em; | |
| font-weight: 500; | |
| } | |
| .modal-content p { | |
| margin-bottom: 20px; | |
| color: var(--text-color-darker); | |
| font-size: 0.95em; | |
| line-height: 1.5; | |
| } | |
| .modal-buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| } | |
| .modal-button { | |
| padding: 10px 20px; | |
| border-radius: var(--border-radius-slight); | |
| border: 1px solid var(--border-color); | |
| cursor: pointer; | |
| font-weight: 500; | |
| transition: background-color var(--transition-speed) ease, transform 0.1s ease; | |
| } | |
| .modal-button.confirm { | |
| background-color: #b00; | |
| color: white; | |
| border-color: #800; | |
| } | |
| .modal-button.confirm:hover { background-color: #d00; } | |
| .modal-button.cancel { | |
| background-color: var(--assistant-msg-bg); | |
| color: var(--text-color); | |
| } | |
| .modal-button.cancel:hover { background-color: var(--accent-color-hover); } | |
| .modal-button:active { transform: scale(0.97); } | |
| /* Glow Effects */ | |
| .text-gradient { | |
| background: linear-gradient(90deg, #fff, #aaa); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero-title-glow { | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); | |
| } | |
| .hero-subtitle-glow { | |
| text-shadow: 0 0 5px rgba(255, 255, 255, 0.2); | |
| } | |
| .button-glow { | |
| box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); | |
| } | |
| .hero-card-glow { | |
| box-shadow: 0 5px 20px rgba(255, 255, 255, 0.05); | |
| } | |
| .card-item-glow { | |
| box-shadow: 0 2px 8px rgba(255, 255, 255, 0.03); | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0); } | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes scale-in { | |
| from { transform: scale(0.9); opacity: 0; } | |
| to { transform: scale(1); opacity: 1; } | |
| } | |
| .animate-scale-in { | |
| animation: scale-in 0.5s ease-out forwards; | |
| } | |
| @keyframes fade-in-up { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .animate-fade-in-up { | |
| animation: fade-in-up 0.5s ease-out forwards; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .chat-container { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 0; | |
| } | |
| .message { | |
| max-width: 90%; | |
| } | |
| .chat-header, .input-area { | |
| padding: 10px 15px; | |
| } | |
| .chat-box { | |
| padding: 15px; | |
| } | |
| } | |
| .inverted { | |
| filter: invert(1); | |
| } | |
| #invert-btn { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| padding: 10px; /* Removed text, increased padding */ | |
| background: transparent; /* Make background transparent */ | |
| border: none; /* Remove border */ | |
| cursor: pointer; | |
| z-index: 9999; | |
| width: 40px; /* Increased size for icons */ | |
| height: 40px; | |
| display: flex; /* Use flexbox for centering */ | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| #invert-btn svg { | |
| width: 80%; /* Increased size of SVG inside the button */ | |
| height: 80%; | |
| } | |
| .sun { | |
| color: #FFD700; /* Gold for sun */ | |
| } | |
| .moon { | |
| color: #C0C0C0; /* Silver for moon */ | |
| } | |
| /* User information styles */ | |
| .user-info { | |
| position: absolute; | |
| top: 10px; | |
| right: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: #fff; | |
| font-size: 14px; | |
| } | |
| .user-avatar { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: #333; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid #fff; | |
| } | |
| .logout-btn { | |
| background: transparent; | |
| color: #fff; | |
| border: 1px solid #fff; | |
| border-radius: 4px; | |
| padding: 2px 8px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .logout-btn:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); | |
| } |