Spaces:
Running
Running
| /* Reset & Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #09090b; | |
| color: #fafafa; | |
| height: 100vh; | |
| display: flex; | |
| overflow: hidden; | |
| } | |
| /* App Layout */ | |
| .app-container { | |
| display: flex; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 280px; | |
| background-color: #18181b; | |
| border-right: 1px solid #27272a; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 24px; | |
| gap: 24px; | |
| } | |
| .sidebar-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .sidebar-header .logo { | |
| font-size: 24px; | |
| } | |
| .sidebar-header h2 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| } | |
| .settings-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .settings-group label { | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: #a1a1aa; | |
| font-weight: 500; | |
| } | |
| .settings-group input { | |
| background-color: #09090b; | |
| border: 1px solid #27272a; | |
| padding: 10px 12px; | |
| border-radius: 8px; | |
| color: #fff; | |
| font-size: 14px; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .settings-group input:focus { | |
| border-color: #6366f1; | |
| } | |
| .help-text { | |
| font-size: 11px; | |
| color: #71717a; | |
| line-height: 1.4; | |
| } | |
| .info-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| flex: 1; | |
| } | |
| .info-group h3 { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: #a1a1aa; | |
| } | |
| .info-group p { | |
| font-size: 12px; | |
| color: #71717a; | |
| line-height: 1.5; | |
| } | |
| .sidebar-footer { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12px; | |
| color: #a1a1aa; | |
| border-top: 1px solid #27272a; | |
| padding-top: 16px; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| background-color: #22c55e; | |
| border-radius: 50%; | |
| display: inline-block; | |
| box-shadow: 0 0 8px #22c55e; | |
| } | |
| /* Chat Area */ | |
| .chat-area { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| background-color: #09090b; | |
| position: relative; | |
| } | |
| .chat-header { | |
| padding: 20px 24px; | |
| border-bottom: 1px solid #27272a; | |
| background-color: #09090bc0; | |
| backdrop-filter: blur(12px); | |
| z-index: 10; | |
| } | |
| .chat-header h1 { | |
| font-size: 20px; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| } | |
| .chat-header p { | |
| font-size: 13px; | |
| color: #71717a; | |
| } | |
| /* Messages Container */ | |
| .messages-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .message { | |
| display: flex; | |
| gap: 16px; | |
| max-width: 85%; | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| .message.user-message { | |
| align-self: flex-end; | |
| flex-direction: row-reverse; | |
| } | |
| .message .avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 8px; | |
| background-color: #27272a; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 18px; | |
| flex-shrink: 0; | |
| } | |
| .message.user-message .avatar { | |
| background-color: #6366f1; | |
| } | |
| .message-content { | |
| background-color: #18181b; | |
| border: 1px solid #27272a; | |
| padding: 14px 18px; | |
| border-radius: 12px; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| color: #e4e4e7; | |
| overflow-x: auto; | |
| } | |
| .message.user-message .message-content { | |
| background-color: #27272a; | |
| border-color: #3f3f46; | |
| } | |
| /* Code Blocks */ | |
| pre[class*="language-"] { | |
| background-color: #0c0c0e ; | |
| border: 1px solid #27272a; | |
| border-radius: 8px; | |
| margin: 12px 0 ; | |
| padding: 12px ; | |
| } | |
| code[class*="language-"] { | |
| font-family: 'JetBrains Mono', monospace ; | |
| font-size: 13px ; | |
| } | |
| /* Input Area */ | |
| .input-area { | |
| padding: 24px; | |
| border-top: 1px solid #27272a; | |
| background-color: #09090b; | |
| } | |
| #chat-form { | |
| display: flex; | |
| background-color: #18181b; | |
| border: 1px solid #27272a; | |
| border-radius: 12px; | |
| padding: 8px 12px; | |
| align-items: flex-end; | |
| gap: 8px; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| transition: border-color 0.2s; | |
| } | |
| #chat-form:focus-within { | |
| border-color: #6366f1; | |
| } | |
| #user-input { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| color: #fff; | |
| font-size: 14px; | |
| padding: 8px 4px; | |
| resize: none; | |
| max-height: 200px; | |
| font-family: inherit; | |
| line-height: 1.5; | |
| } | |
| #send-btn { | |
| background-color: #6366f1; | |
| color: #fff; | |
| border: none; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: background-color 0.2s, transform 0.1s; | |
| } | |
| #send-btn:hover { | |
| background-color: #4f46e5; | |
| } | |
| #send-btn:active { | |
| transform: scale(0.95); | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #27272a; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #3f3f46; | |
| } | |