| :root { |
| --bg: #121317; |
| --panel: #202739; |
| --panel-2: #1f2636; |
| --panel-3: #242c3f; |
| --line: rgba(255, 255, 255, 0.12); |
| --text: #ffffff; |
| --muted: #98a0b3; |
| --brand: #4ecdc4; |
| --brand-dark: #2c3e50; |
| } |
|
|
|
|
| |
| * { |
| scrollbar-width: thin; |
| scrollbar-color: rgba(156, 169, 196, 0.45) transparent; |
| } |
|
|
| *::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| *::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| *::-webkit-scrollbar-thumb { |
| background: linear-gradient(180deg, rgba(141, 156, 184, 0.75), rgba(118, 132, 160, 0.75)); |
| border-radius: 999px; |
| border: 2px solid transparent; |
| background-clip: padding-box; |
| } |
|
|
| *::-webkit-scrollbar-thumb:hover { |
| background: linear-gradient(180deg, rgba(170, 186, 219, 0.85), rgba(134, 151, 184, 0.85)); |
| } |
|
|
| .sidebar { |
| scrollbar-gutter: stable; |
| } |
|
|
| * { margin: 0; padding: 0; box-sizing: border-box; } |
|
|
| body { |
| font-family: 'Segoe UI', 'Inter', sans-serif; |
| background: var(--bg); |
| color: var(--text); |
| min-height: 100vh; |
| } |
|
|
| .app-container { display: flex; height: 100vh; background: var(--bg); } |
|
|
| .app-error-banner { |
| position: fixed; |
| top: 14px; |
| left: 50%; |
| transform: translateX(-50%); |
| z-index: 1000; |
| min-width: 300px; |
| max-width: 900px; |
| width: calc(100% - 32px); |
| background: rgba(102, 17, 17, 0.95); |
| border: 1px solid rgba(255, 82, 82, 0.5); |
| color: #ffe5e5; |
| border-radius: 10px; |
| padding: 12px 44px 12px 14px; |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); |
| } |
|
|
| .app-error-title { |
| font-weight: 700; |
| margin-bottom: 4px; |
| } |
|
|
| .app-error-close { |
| position: absolute; |
| top: 6px; |
| right: 10px; |
| border: none; |
| background: transparent; |
| color: #ffd6d6; |
| font-size: 22px; |
| line-height: 1; |
| cursor: pointer; |
| } |
|
|
| .app-error-close:hover { |
| color: #ffffff; |
| } |
|
|
| .sidebar { |
| width: 290px; |
| background: linear-gradient(180deg, #242b3d 0%, #20283a 100%); |
| border-right: 1px solid #343d52; |
| overflow-y: auto; |
| padding: 26px 12px; |
| } |
|
|
|
|
| .sidebar-toggle { |
| width: 28px; |
| height: 28px; |
| border: none; |
| border-radius: 8px; |
| background: transparent; |
| color: #8aa6d8; |
| font-size: 24px; |
| line-height: 1; |
| cursor: pointer; |
| margin-bottom: 8px; |
| } |
|
|
| .sidebar-toggle:hover { |
| background: rgba(255, 255, 255, 0.06); |
| color: #b7c9e9; |
| } |
|
|
| .sidebar.collapsed { |
| width: 64px; |
| padding: 12px 8px; |
| align-items: flex-start; |
| } |
|
|
| .sidebar.collapsed .sidebar-toggle { |
| margin-bottom: 0; |
| } |
|
|
|
|
| .main-content { flex: 1; display: flex; flex-direction: column; } |
| .chat-history { height: 100%; } |
|
|
| .sidebar-title { color: var(--text); font-size: 32px; margin: 36px 0 22px; } |
| .sidebar-subtitle { color: var(--muted); margin-bottom: 10px; font-size: 16px; } |
|
|
| .new-chat-btn { |
| width: 100%; |
| min-height: 40px; |
| padding: 8px 10px; |
| background: transparent; |
| color: var(--text); |
| border: 1px solid var(--line); |
| border-radius: 10px; |
| cursor: pointer; |
| font-size: 13px; |
| margin-bottom: 10px; |
| transition: all 0.3s ease; |
| } |
|
|
| .new-chat-btn:hover { |
| background-color: rgba(255, 255, 255, 0.08); |
| border-color: rgba(255, 255, 255, 0.25); |
| } |
|
|
| .chat-list { display: flex; flex-direction: column; gap: 2px; } |
|
|
| .chat-item { |
| min-height: 40px; |
| padding: 8px 10px; |
| background: transparent; |
| color: var(--text); |
| border: 1px solid var(--line); |
| border-radius: 10px; |
| cursor: pointer; |
| font-size: 13px; |
| display: flex; |
| align-items: center; |
| } |
|
|
| .chat-item:hover, |
| .chat-item.active { |
| background-color: rgba(255, 255, 255, 0.08); |
| border-color: rgba(255, 255, 255, 0.25); |
| } |
|
|
| .chat-window { display: flex; flex-direction: column; height: 100%; } |
|
|
| .messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 1.6rem 2rem; |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| max-width: 1000px; |
| width: 100%; |
| margin: 0 auto; |
| background-color: transparent; |
| } |
|
|
| .initial-menu { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| margin: auto; |
| text-align: center; |
| gap: 8px; |
| } |
|
|
| .brand-remote-logo { |
| width: 140px; |
| height: auto; |
| margin-bottom: 4px; |
| } |
|
|
|
|
| .robocopy-title { |
| color: #4ecdc4 !important; |
| font-weight: bold; |
| font-size: 48px; |
| margin-bottom: 4px; |
| } |
|
|
| .brand-author.subtitle { |
| font-size: 16px; |
| color: #ffffff; |
| margin-bottom: 14px; |
| } |
|
|
| .initial-menu p { |
| color: var(--text); |
| font-size: 16px; |
| margin-bottom: 24px; |
| } |
| .initial-menu h1 { color: var(--brand); font-size: 44px; font-weight: 700; } |
| .brand-author { font-size: 30px; margin-bottom: 10px; } |
| .initial-menu p { color: var(--text); font-size: 16px; margin-bottom: 24px; } |
|
|
| .example-buttons { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(150px, 1fr)); |
| gap: 12px; |
| max-width: 850px; |
| } |
|
|
| .example-btn { |
| width: 100%; |
| min-height: 52px; |
| white-space: normal; |
| padding: 10px; |
| background-color: rgba(255, 255, 255, 0.04); |
| border: 1px solid rgba(255, 255, 255, 0.25); |
| border-radius: 8px; |
| font-size: 14px; |
| color: white; |
| text-align: center; |
| margin: 5px 0; |
| transition: all 0.3s ease; |
| cursor: pointer !important; |
| } |
|
|
| .example-btn * { cursor: pointer !important; } |
|
|
| .example-btn:hover { |
| background-color: rgba(255, 255, 255, 0.08); |
| color: #ffffff; |
| border-color: rgba(255, 255, 255, 0.35); |
| transform: translateY(-1px); |
| box-shadow: none; |
| } |
|
|
| .message { |
| display: flex; |
| width: 100%; |
| align-items: flex-end; |
| gap: 8px; |
| } |
|
|
| .message .content { |
| width: 100%; |
| max-width: 900px; |
| border-radius: 10px; |
| line-height: 1.65; |
| font-size: 18px; |
| } |
|
|
| .message.assistant, |
| .message.error { |
| justify-content: flex-start; |
| } |
|
|
| .message .content { |
| max-width: 900px; |
| border-radius: 14px; |
| line-height: 1.65; |
| font-size: 16px; |
| } |
|
|
| .message.user .avatar { |
| order: 2; |
| } |
|
|
| .message.user .content { |
| order: 1; |
| max-width: 72%; |
| } |
|
|
| .message.assistant .content, |
| .message.error .content { |
| max-width: 86%; |
| } |
|
|
| .user-plain { |
| background: rgba(78, 205, 196, 0.26); |
| color: #dffaf7; |
| padding: 12px 16px; |
| border-radius: 16px; |
| white-space: pre-wrap; |
| } |
|
|
| .assistant-markdown { |
| color: #f4f6fb; |
| white-space: pre-wrap; |
| background: rgba(31, 38, 54, 0.96); |
| padding: 12px 14px; |
| border-radius: 12px; |
| } |
|
|
| .assistant-markdown p { |
| margin: 0 0 14px; |
| } |
|
|
| .assistant-markdown h1, |
| .assistant-markdown h2, |
| .assistant-markdown h3 { |
| margin: 22px 0 12px; |
| line-height: 1.35; |
| } |
|
|
| .assistant-markdown ul, |
| .assistant-markdown ol { |
| margin: 0 0 14px 22px; |
| } |
|
|
| .assistant-markdown hr { |
| border: none; |
| border-top: 1px solid rgba(255, 255, 255, 0.18); |
| margin: 22px 0; |
| } |
|
|
| .message.user .content { padding-right: 0; } |
| .message.assistant .content { background: transparent; color: var(--text); padding-left: 0; } |
|
|
| .message.error .content { |
| background: rgba(255, 82, 82, 0.15); |
| border: 1px solid rgba(255, 82, 82, 0.35); |
| padding: 10px 12px; |
| } |
|
|
| .error-plain { |
| color: #ffd3d3; |
| white-space: pre-wrap; |
| } |
|
|
| .chat-error-banner { |
| width: 100%; |
| border-radius: 10px; |
| border: 1px solid rgba(255, 82, 82, 0.45); |
| background: rgba(123, 23, 23, 0.4); |
| color: #ffd8d8; |
| padding: 10px 40px 10px 12px; |
| position: relative; |
| } |
|
|
| .chat-error-close { |
| position: absolute; |
| top: 4px; |
| right: 8px; |
| border: 0; |
| background: transparent; |
| color: #ffd8d8; |
| cursor: pointer; |
| font-size: 20px; |
| } |
|
|
| .assistant-actions { |
| display: flex; |
| gap: 8px; |
| margin-top: 8px; |
| } |
|
|
| .action-btn { |
| width: 28px; |
| height: 28px; |
| border-radius: 8px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| background: rgba(255, 255, 255, 0.04); |
| color: #d6ddeb; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| font-size: 14px; |
| } |
|
|
| .action-btn:hover { |
| background: rgba(255, 255, 255, 0.12); |
| } |
|
|
| .action-btn.active { |
| background: rgba(78, 205, 196, 0.24); |
| border-color: #4ecdc4; |
| color: #4ecdc4; |
| } |
|
|
| .message.loading { color: var(--muted); font-style: italic; margin-left: 40px; } |
|
|
| .input-area { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 24px 18px; |
| max-width: 1000px; |
| margin: 0 auto; |
| width: 100%; |
| } |
|
|
| .input-area input { |
| flex: 1; |
| height: 48px; |
| padding: 0 16px; |
| background: var(--panel-3); |
| color: var(--text); |
| border: 1px solid transparent; |
| border-radius: 10px; |
| font-size: 16px; |
| } |
|
|
| .input-area input:focus { outline: none; border-color: var(--brand); } |
| .input-area input::placeholder { color: #9aa3b8; } |
|
|
| .input-ready { |
| width: 22px; |
| height: 22px; |
| border-radius: 999px; |
| background: #1f6ed4; |
| color: #fff; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 14px; |
| font-weight: 700; |
| } |
|
|
| .send-btn { |
| width: 40px; |
| height: 40px; |
| border-radius: 12px; |
| background: #414b60; |
| color: #bfc6d6; |
| border: none; |
| cursor: pointer; |
| font-size: 20px; |
| } |
|
|
| .send-btn.active { |
| background: #4ecdc4; |
| color: #fff; |
| } |
|
|
| .send-btn:hover { background: #4e5a73; } |
| .send-btn.active:hover { background: #40bbb2; } |
| .send-btn:disabled { opacity: 0.6; cursor: not-allowed; } |
|
|
| @media (max-width: 768px) { |
| .app-container { flex-direction: column; } |
|
|
| .sidebar { |
| width: 100%; |
| max-height: 210px; |
| border-right: none; |
| border-bottom: 1px solid #343d52; |
| } |
|
|
| .sidebar-title { margin-top: 0; font-size: 22px; } |
|
|
| .example-buttons { grid-template-columns: 1fr; } |
| } |
|
|
