Spaces:
Sleeping
Sleeping
| :root { | |
| --bg-main: #212121; | |
| --bg-sidebar: #171717; | |
| --bg-input: #2f2f2f; | |
| --text-primary: #ececf1; | |
| --text-secondary: #b4b4b4; | |
| --border-color: #2f2f2f; | |
| --accent-color: #10b981; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Outfit', sans-serif; | |
| background-color: var(--bg-main); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow: hidden; | |
| } | |
| .app-wrapper { | |
| display: flex; | |
| height: 100vh; | |
| } | |
| /* Sidebar styling */ | |
| .sidebar { | |
| width: 260px; | |
| background-color: var(--bg-sidebar); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 12px; | |
| border-right: 1px solid var(--border-color); | |
| } | |
| .btn-new-chat { | |
| width: 100%; | |
| background: transparent; | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-color); | |
| padding: 10px 14px; | |
| border-radius: 6px; | |
| text-align: left; | |
| font-weight: 500; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: background-color 0.2s; | |
| } | |
| .btn-new-chat:hover { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| } | |
| .sidebar-menu { | |
| flex: 1; | |
| margin-top: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| overflow-y: auto; | |
| } | |
| .history-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| padding: 10px 12px; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: background-color 0.2s, color 0.2s; | |
| } | |
| .history-item:hover, .history-item.active { | |
| color: var(--text-primary); | |
| background-color: rgba(255, 255, 255, 0.05); | |
| } | |
| .history-title { | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| margin-right: 8px; | |
| } | |
| .btn-delete-chat { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| cursor: pointer; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| opacity: 0; | |
| transition: opacity 0.2s, color 0.2s; | |
| } | |
| .history-item:hover .btn-delete-chat { | |
| opacity: 1; | |
| } | |
| .btn-delete-chat:hover { | |
| color: #ef4444; | |
| background-color: rgba(255, 255, 255, 0.08); | |
| } | |
| .sidebar-footer { | |
| padding-top: 10px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .btn-admin-link { | |
| display: block; | |
| text-align: center; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 13px; | |
| padding: 8px; | |
| border-radius: 4px; | |
| } | |
| .btn-admin-link:hover { | |
| color: var(--text-primary); | |
| background-color: rgba(255, 255, 255, 0.05); | |
| } | |
| /* Main workspace */ | |
| .chat-main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .chat-header-bar { | |
| height: 52px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| background-color: var(--bg-main); | |
| } | |
| .model-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-weight: 600; | |
| font-size: 15px; | |
| } | |
| .version-tag { | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| background: #2f2f2f; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| .chat-viewport { | |
| flex: 1; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 40px 0; | |
| } | |
| .welcome-container { | |
| margin: auto; | |
| text-align: center; | |
| max-width: 400px; | |
| } | |
| .circle-logo { | |
| width: 60px; | |
| height: 60px; | |
| background-color: var(--text-primary); | |
| color: var(--bg-main); | |
| font-size: 24px; | |
| font-weight: 700; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 20px auto; | |
| } | |
| .welcome-container h1 { | |
| font-size: 24px; | |
| font-weight: 600; | |
| } | |
| /* Chat thread */ | |
| .chat-thread { | |
| max-width: 760px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .message { | |
| display: flex; | |
| flex-direction: column; | |
| max-width: 85%; | |
| } | |
| .message.user { | |
| align-self: flex-end; | |
| } | |
| .message.assistant { | |
| align-self: flex-start; | |
| } | |
| .message .bubble { | |
| padding: 12px 18px; | |
| border-radius: 18px; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| } | |
| .message.user .bubble { | |
| background-color: var(--bg-input); | |
| color: var(--text-primary); | |
| border-bottom-right-radius: 4px; | |
| } | |
| .message.assistant .bubble { | |
| background-color: transparent; | |
| color: var(--text-primary); | |
| padding-left: 0; | |
| } | |
| .message.blocked .bubble { | |
| background-color: rgba(239, 68, 68, 0.1); | |
| border: 1px solid #ef4444; | |
| color: #fca5a5; | |
| border-radius: 8px; | |
| padding-left: 18px; | |
| } | |
| /* Bottom input */ | |
| .chat-footer-input { | |
| padding: 16px 20px 24px 20px; | |
| background-color: var(--bg-main); | |
| } | |
| .input-pill { | |
| max-width: 760px; | |
| width: 100%; | |
| margin: 0 auto; | |
| background-color: var(--bg-input); | |
| border-radius: 24px; | |
| display: flex; | |
| align-items: center; | |
| padding: 8px 12px 8px 20px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .input-pill textarea { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 15px; | |
| outline: none; | |
| font-family: inherit; | |
| resize: none; | |
| max-height: 200px; | |
| overflow-y: hidden; /* Hide scrollbars by default to prevent arrow spinner on refresh */ | |
| padding: 6px 0; | |
| line-height: 1.4; | |
| height: 22px; | |
| } | |
| .btn-send { | |
| background-color: var(--text-primary); | |
| color: var(--bg-main); | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| border: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: opacity 0.2s; | |
| } | |
| .btn-send:hover { | |
| opacity: 0.9; | |
| } | |
| .disclaimer-text { | |
| text-align: center; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-top: 10px; | |
| } | |
| /* Markdown & Text Formatting Styles */ | |
| .bubble h1, .bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6 { | |
| margin: 16px 0 8px 0; | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| .bubble h1 { font-size: 20px; } | |
| .bubble h2 { font-size: 18px; } | |
| .bubble h3 { font-size: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 4px; } | |
| .bubble p { | |
| margin-bottom: 12px; | |
| } | |
| .bubble ul, .bubble ol { | |
| margin: 8px 0 12px 24px; | |
| } | |
| .bubble li { | |
| margin-bottom: 4px; | |
| } | |
| .bubble blockquote { | |
| border-left: 4px solid var(--accent-color); | |
| padding: 4px 12px; | |
| margin: 12px 0; | |
| color: var(--text-secondary); | |
| background-color: rgba(255, 255, 255, 0.02); | |
| } | |
| /* Code block container */ | |
| .bubble pre { | |
| background-color: #1a1a1a; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 14px; | |
| margin: 14px 0; | |
| overflow-x: auto; | |
| } | |
| /* Inline code formatting */ | |
| .bubble :not(pre) > code { | |
| background-color: rgba(255, 255, 255, 0.08); | |
| color: #fca5a5; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-family: 'Consolas', 'Courier New', monospace; | |
| font-size: 13px; | |
| } | |
| .bubble pre code { | |
| font-family: 'Consolas', 'Courier New', monospace; | |
| font-size: 13.5px; | |
| line-height: 1.5; | |
| background: transparent; | |
| padding: 0; | |
| border-radius: 0; | |
| } | |
| /* Tables styling */ | |
| .bubble table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 16px 0; | |
| } | |
| .bubble th, .bubble td { | |
| padding: 8px 12px; | |
| border: 1px solid var(--border-color); | |
| text-align: left; | |
| } | |
| .bubble th { | |
| background-color: rgba(255, 255, 255, 0.04); | |
| font-weight: 600; | |
| } | |
| .bubble a { | |
| color: var(--accent-color); | |
| text-decoration: underline; | |
| } | |
| @media (max-width: 768px) { | |
| .app-wrapper { | |
| flex-direction: column; | |
| } | |
| .sidebar { | |
| width: 100%; | |
| height: auto; | |
| border-right: none; | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 10px; | |
| } | |
| .sidebar-menu { | |
| display: none; /* Collapses session list on mobile */ | |
| } | |
| .btn-new-chat { | |
| display: none; | |
| } | |
| .sidebar-footer { | |
| border-top: none; | |
| padding-top: 0; | |
| display: flex; | |
| justify-content: center; | |
| width: 100%; | |
| } | |
| .btn-admin-link { | |
| padding: 6px 12px; | |
| width: 100%; | |
| font-size: 12px; | |
| } | |
| .chat-main { | |
| height: calc(100vh - 60px); | |
| } | |
| .chat-header-bar { | |
| height: 40px; | |
| padding: 0 15px; | |
| } | |
| .chat-viewport { | |
| padding: 10px 12px; | |
| } | |
| .bubble { | |
| font-size: 14px ; | |
| padding: 10px 14px ; | |
| } | |
| .chat-footer-input { | |
| padding: 10px 12px 16px 12px; | |
| } | |
| .input-pill { | |
| padding: 6px 10px 6px 16px; | |
| } | |
| } | |