Spaces:
Running
Running
| /* ═══════════════════════════════════════════════════ | |
| SEBAYHI — style.css | |
| Palette: strict black / white / grey | |
| Font: IBM Plex Sans + thmanyah serif (Google Fonts) | |
| mirrors Thmanyah's clean, modern proportions | |
| ═══════════════════════════════════════════════════ */ | |
| @font-face { | |
| font-family: "Thmanyah Serif"; | |
| src: url("/static/fonts/thmanyahserifdisplay-Regular.woff2") format("woff2"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| :root { | |
| --bg: #0a0a0a; | |
| --sidebar-bg: #111111; | |
| --surface: #1c1c1c; | |
| --surface-2: #2a2a2a; | |
| --border: #2e2e2e; | |
| --text: #f0f0f0; | |
| --text-muted: #707070; | |
| --text-faint: #3a3a3a; | |
| --sidebar-w: 260px; | |
| --topbar-h: 52px; | |
| --font: 'IBM Plex Sans', 'Thmanyah Serif', system-ui, sans-serif; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| } | |
| /* ── Light theme ────────────────────────────────────── */ | |
| body[data-theme="light"] { | |
| --bg: #f5f5f5; | |
| --sidebar-bg: #ebebeb; | |
| --surface: #ffffff; | |
| --surface-2: #e0e0e0; | |
| --border: #d0d0d0; | |
| --text: #111111; | |
| --text-muted: #666666; | |
| --text-faint: #bbbbbb; | |
| } | |
| body[data-theme="light"] .send-btn:hover { | |
| background: #111; color: #fff; border-color: #111; | |
| } | |
| /* ── Reset ──────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { | |
| height: 100%; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font); | |
| font-size: 15px; | |
| line-height: 1.65; | |
| overflow: hidden; | |
| } | |
| ::-webkit-scrollbar { width: 5px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } | |
| /* ── Layout ─────────────────────────────────────────── */ | |
| body { display: flex; height: 100vh; flex-direction: row; } | |
| /* ════════════════════════════════════════════════════ | |
| MOBILE TOP BAR (hidden on desktop) | |
| ════════════════════════════════════════════════════ */ | |
| .mobile-topbar { | |
| display: none; | |
| } | |
| /* ════════════════════════════════════════════════════ | |
| SIDEBAR OVERLAY (mobile backdrop) | |
| ════════════════════════════════════════════════════ */ | |
| .sidebar-overlay { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.5); | |
| z-index: 150; | |
| } | |
| .sidebar-overlay.active { display: block; } | |
| /* ════════════════════════════════════════════════════ | |
| SIDEBAR | |
| ════════════════════════════════════════════════════ */ | |
| .sidebar { | |
| width: var(--sidebar-w); | |
| min-width: var(--sidebar-w); | |
| height: 100vh; | |
| background: var(--sidebar-bg); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| z-index: 200; | |
| transition: transform 0.25s ease; | |
| } | |
| .sidebar-brand { | |
| padding: 22px 18px 16px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| flex-shrink: 0; | |
| } | |
| .sidebar-brand-ar { | |
| font-family: 'Thmanyah Serif', sans-serif; | |
| font-size: 20px; font-weight: 600; color: var(--text); | |
| } | |
| .sidebar-brand-en { | |
| font-size: 13px; font-weight: 400; color: var(--text-muted); | |
| } | |
| .sidebar-section { padding: 14px 14px 10px; } | |
| .sidebar-section-label { | |
| font-size: 10px; font-weight: 500; | |
| letter-spacing: 0.1em; text-transform: uppercase; | |
| color: var(--text-muted); margin-bottom: 8px; padding: 0 4px; | |
| } | |
| /* Mode toggle */ | |
| .mode-toggle { display: flex; flex-direction: column; gap: 4px; } | |
| .mode-btn { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 9px 12px; border-radius: var(--radius-sm); | |
| border: 1px solid transparent; background: transparent; | |
| color: var(--text-muted); font-family: var(--font); | |
| font-size: 14px; cursor: pointer; width: 100%; | |
| text-align: left; | |
| transition: background 0.15s, color 0.15s, border-color 0.15s; | |
| } | |
| .mode-btn svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; } | |
| .mode-btn:hover { background: var(--surface); color: var(--text); } | |
| .mode-btn--active { background: var(--surface-2); color: var(--text); border-color: var(--border); } | |
| .mode-btn--active svg { opacity: 1; } | |
| .mode-btn-text { display: flex; flex-direction: column; line-height: 1.2; } | |
| .mode-en { font-size: 13px; font-weight: 500; } | |
| .mode-ar { font-family: 'Thmanyah Serif', sans-serif; font-size: 12px; color: var(--text-muted); } | |
| /* New chat */ | |
| .new-chat-btn { | |
| display: flex; align-items: center; gap: 8px; | |
| margin: 4px 14px 10px; | |
| padding: 9px 12px; border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); background: transparent; | |
| color: var(--text-muted); font-family: var(--font); | |
| font-size: 13px; cursor: pointer; | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .new-chat-btn svg { width: 14px; height: 14px; } | |
| .new-chat-btn:hover { background: var(--surface); color: var(--text); } | |
| /* History */ | |
| .sidebar-history-section { flex: 1; overflow-y: auto; border-top: 1px solid var(--border); } | |
| .history-list { display: flex; flex-direction: column; gap: 2px; } | |
| .history-empty { | |
| font-size: 12px; color: var(--text-faint); | |
| padding: 4px; text-align: center; margin-top: 8px; | |
| } | |
| .history-item { | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 8px 10px; border-radius: var(--radius-sm); | |
| cursor: pointer; border: 1px solid transparent; | |
| transition: background 0.12s; overflow: hidden; | |
| } | |
| .history-item:hover { background: var(--surface); } | |
| .history-item--active { background: var(--surface-2); border-color: var(--border); } | |
| .history-item-badge { | |
| font-size: 9px; font-weight: 600; letter-spacing: 0.08em; | |
| text-transform: uppercase; padding: 2px 6px; | |
| border-radius: 99px; flex-shrink: 0; | |
| border: 1px solid var(--border); color: var(--text-muted); | |
| background: var(--surface); | |
| } | |
| .history-item-text { | |
| font-size: 12px; color: var(--text-muted); | |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis; | |
| flex: 1; font-family: 'Thmanyah Serif', sans-serif; | |
| direction: rtl; text-align: right; | |
| } | |
| /* Sidebar bottom — theme button */ | |
| .sidebar-bottom { | |
| flex-shrink: 0; | |
| padding: 10px 14px 16px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .theme-btn { | |
| display: flex; align-items: center; gap: 8px; | |
| width: 100%; padding: 8px 12px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| background: transparent; color: var(--text-muted); | |
| font-family: var(--font); font-size: 13px; | |
| cursor: pointer; text-align: left; | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .theme-btn:hover { background: var(--surface); color: var(--text); } | |
| .theme-btn svg { width: 14px; height: 14px; flex-shrink: 0; } | |
| /* ════════════════════════════════════════════════════ | |
| MAIN CHAT | |
| ════════════════════════════════════════════════════ */ | |
| .chat-main { | |
| flex: 1; display: flex; flex-direction: column; | |
| height: 100vh; overflow: hidden; position: relative; | |
| } | |
| .chat-scroll { | |
| flex: 1; overflow-y: auto; | |
| padding: 40px 48px 24px; | |
| position: relative; | |
| } | |
| /* Watermark */ | |
| .chat-watermark { | |
| position: absolute; top: 50%; left: 50%; | |
| transform: translate(-50%, -55%); | |
| font-family: 'Thmanyah Serif', sans-serif; | |
| font-size: 120px; font-weight: 700; | |
| color: var(--text); opacity: 0.025; | |
| pointer-events: none; user-select: none; | |
| white-space: nowrap; letter-spacing: -2px; z-index: 0; | |
| } | |
| /* Message list */ | |
| .message-list { | |
| max-width: 820px; margin: 0 auto; | |
| display: flex; flex-direction: column; gap: 28px; | |
| position: relative; z-index: 1; padding-bottom: 20px; | |
| } | |
| /* ── Message ─────────────────────────────────────── */ | |
| .message { | |
| display: flex; gap: 14px; align-items: flex-start; | |
| animation: msgIn 0.2s ease both; | |
| } | |
| .message--user { flex-direction: row-reverse; } | |
| @keyframes msgIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Avatar */ | |
| .msg-avatar { | |
| width: 34px; height: 34px; border-radius: 50%; | |
| background: var(--surface-2); border: 1px solid var(--border); | |
| color: var(--text-muted); | |
| font-family: 'Thmanyah Serif', sans-serif; | |
| font-size: 14px; font-weight: 500; | |
| display: flex; align-items: center; justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .message--user .msg-avatar { border-color: #444; color: var(--text); } | |
| /* Body */ | |
| .msg-body { display: flex; /*flex-direction: column; */ gap: 5px; max-width: 100%; } | |
| .message--user .msg-body { align-items: flex-end; } | |
| /* Intent badge */ | |
| .intent-badge { | |
| font-size: 10px; font-weight: 500; | |
| letter-spacing: 0.07em; text-transform: uppercase; | |
| color: var(--text-muted); | |
| display: flex; align-items: center; gap: 5px; | |
| } | |
| .badge-dot { | |
| width: 5px; height: 5px; border-radius: 50%; | |
| background: var(--text-faint); display: inline-block; | |
| } | |
| /* ── User bubble — has background/border ─────────── */ | |
| /* | |
| .msg-bubble { | |
| padding: 11px 15px; | |
| border-radius: var(--radius); | |
| line-height: 1.7; word-break: break-word; | |
| font-family: 'Thmanyah Serif', 'IBM Plex Sans', sans-serif; | |
| font-size: 15px; | |
| background: var(--surface-2); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| border-top-right-radius: 3px; | |
| direction: rtl; text-align: right; | |
| } | |
| */ | |
| /* ── Assistant text — no bubble, just text ───────── */ | |
| .msg-text { | |
| line-height: 1.8; word-break: break-word; | |
| font-family: 'Thmanyah Serif', 'IBM Plex Sans', sans-serif; | |
| font-size: 15px; color: var(--text); | |
| padding: 2px 0; | |
| } | |
| .msg-text br { display: block; margin-bottom: 6px; } | |
| /* Error state */ | |
| .msg-text--error { color: #e87070; } | |
| /* Streaming cursor */ | |
| .streaming-cursor { | |
| display: inline-block; width: 2px; height: 1em; | |
| background: var(--text-muted); margin-left: 2px; | |
| vertical-align: text-bottom; | |
| animation: blink 0.8s step-end infinite; | |
| } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| /* Thinking dots */ | |
| .thinking { | |
| display: flex; align-items: center; gap: 5px; | |
| padding: 6px 2px; width: fit-content; | |
| } | |
| .thinking-dot { | |
| width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--text-muted); | |
| animation: bounce 1.2s ease-in-out infinite; | |
| } | |
| .thinking-dot:nth-child(2) { animation-delay: 0.2s; } | |
| .thinking-dot:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } | |
| 40% { transform: translateY(-5px); opacity: 1; } | |
| } | |
| /* Mode divider */ | |
| .mode-divider { display: flex; align-items: center; gap: 12px; animation: msgIn 0.2s ease both; } | |
| .mode-divider-line { flex: 1; height: 1px; background: var(--border); } | |
| .mode-divider-label { | |
| font-size: 11px; font-weight: 500; letter-spacing: 0.07em; | |
| text-transform: uppercase; color: var(--text-muted); | |
| white-space: nowrap; padding: 3px 10px; | |
| border-radius: 99px; border: 1px solid var(--border); | |
| } | |
| /* ════════════════════════════════════════════════════ | |
| INPUT BAR | |
| ════════════════════════════════════════════════════ */ | |
| .input-bar { | |
| flex-shrink: 0; | |
| border-top: 1px solid var(--border); | |
| padding: 14px 48px 18px; | |
| background: var(--bg); | |
| } | |
| .input-inner { | |
| max-width: 820px; margin: 0 auto; | |
| display: flex; align-items: flex-end; gap: 10px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 8px 10px; | |
| transition: border-color 0.2s; | |
| } | |
| .input-inner:focus-within { border-color: #555; } | |
| .input-field { | |
| flex: 1; background: transparent; | |
| border: none; outline: none; | |
| color: var(--text); | |
| font-family: 'Thmanyah Serif', 'IBM Plex Sans', sans-serif; | |
| font-size: 15px; line-height: 1.5; | |
| resize: none; max-height: 160px; | |
| overflow-y: auto; direction: auto; | |
| padding: 0; /* removes extra internal padding */ | |
| margin: 0; | |
| display: block; | |
| } | |
| .input-field::placeholder { | |
| color: var(--text-muted); | |
| font-family: 'IBM Plex Sans', sans-serif; | |
| font-size: 14px; | |
| } | |
| .send-btn { | |
| width: 34px; height: 34px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| background: var(--surface-2); color: var(--text-muted); | |
| cursor: pointer; display: flex; | |
| align-items: center; justify-content: center; | |
| flex-shrink: 0; | |
| transition: background 0.15s, color 0.15s, border-color 0.15s; | |
| } | |
| .send-btn:hover { background: #fff; color: #000; border-color: #fff; } | |
| .send-btn:active { opacity: 0.8; } | |
| .send-btn:disabled { background: transparent; color: var(--text-faint); border-color: var(--border); cursor: not-allowed; } | |
| .send-btn svg { width: 15px; height: 15px; } | |
| /* ════════════════════════════════════════════════════ | |
| MOBILE (≤ 680px) | |
| ════════════════════════════════════════════════════ */ | |
| @media (max-width: 680px) { | |
| /* Show mobile topbar */ | |
| .mobile-topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| position: fixed; | |
| top: 0; left: 0; right: 0; | |
| height: var(--topbar-h); | |
| background: var(--sidebar-bg); | |
| border-bottom: 1px solid var(--border); | |
| padding: 0 14px; | |
| z-index: 100; | |
| } | |
| .mobile-brand { | |
| font-family: 'Thmanyah Serif', sans-serif; | |
| font-size: 15px; font-weight: 600; color: var(--text); | |
| } | |
| .mobile-menu-btn, | |
| .mobile-theme-btn { | |
| width: 36px; height: 36px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| background: transparent; color: var(--text-muted); | |
| display: flex; align-items: center; justify-content: center; | |
| cursor: pointer; | |
| } | |
| .mobile-menu-btn svg { width: 18px; height: 18px; } | |
| .mobile-theme-btn svg { width: 16px; height: 16px; } | |
| /* Sidebar slides in from left */ | |
| .sidebar { | |
| position: fixed; | |
| top: 0; left: 0; | |
| height: 100vh; | |
| transform: translateX(-100%); | |
| transition: transform 0.25s ease; | |
| z-index: 200; | |
| } | |
| .sidebar.open { transform: translateX(0); } | |
| /* Push chat below topbar */ | |
| .chat-main { | |
| height: 100vh; | |
| padding-top: var(--topbar-h); | |
| } | |
| .chat-scroll { padding: 20px 16px 16px; } | |
| .input-bar { padding: 10px 14px 14px; } | |
| .chat-watermark { font-size: 56px; } | |
| .msg-body { max-width: 100%; } | |
| } | |