Spaces:
Sleeping
Sleeping
| /* Sebayhi frontend visual system */ | |
| @font-face { | |
| font-family: "Thmanyah Serif"; | |
| src: url("/static/fonts/thmanyahserifdisplay-Regular.woff2") format("woff2"); | |
| font-weight: 400; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| /* test */ | |
| :root { | |
| color-scheme: dark; | |
| --bg: #1a0c05; | |
| --bg-soft: #211007; | |
| --sidebar-bg: rgba(31, 15, 7, 0.97); | |
| --chrome-bg: rgba(26, 12, 5, 0.86); | |
| --surface: #281309; | |
| --surface-raised: #32190d; | |
| --surface-soft: #3a1e11; | |
| --border: #4d2f1e; | |
| --border-strong: #684833; | |
| --text: #e8e2d6; | |
| --text-soft: #c9b8a4; | |
| --text-muted: #a99581; | |
| --text-faint: #927b68; | |
| --danger: #e58e83; | |
| --danger-soft: rgba(229, 142, 131, 0.1); | |
| --success: #9cba8f; | |
| --shadow: 0 24px 65px rgba(10, 4, 1, 0.34); | |
| --shadow-soft: 0 10px 30px rgba(10, 4, 1, 0.24); | |
| --sidebar-w: 288px; | |
| --mobile-topbar-h: 56px; | |
| --content-w: 880px; | |
| --radius-xl: 24px; | |
| --radius-lg: 18px; | |
| --radius-md: 14px; | |
| --radius-sm: 10px; | |
| --font-ui: "Thmanyah Serif", "IBM Plex Sans", system-ui, sans-serif; | |
| --font-display: "Thmanyah Serif", serif; | |
| --ease: cubic-bezier(0.2, 0.75, 0.25, 1); | |
| --accent: #d8b58f; | |
| --accent-rgb: 216, 181, 143; | |
| --accent-soft: rgba(216, 181, 143, 0.12); | |
| --accent-border: rgba(216, 181, 143, 0.3); | |
| --accent-ink: #371702; | |
| } | |
| body[data-theme="light"] { | |
| color-scheme: light; | |
| --bg: #e8e2d6; | |
| --bg-soft: #ded5c5; | |
| --sidebar-bg: rgba(239, 233, 221, 0.97); | |
| --chrome-bg: rgba(232, 226, 214, 0.9); | |
| --surface: #f4efe5; | |
| --surface-raised: #faf6ee; | |
| --surface-soft: #e2d8c8; | |
| --border: #cbbca8; | |
| --border-strong: #ad967f; | |
| --text: #371702; | |
| --text-soft: #5b3824; | |
| --text-muted: #745945; | |
| --text-faint: #795f49; | |
| --danger: #9b3434; | |
| --danger-soft: rgba(155, 52, 52, 0.08); | |
| --success: #4d6a45; | |
| --shadow: 0 24px 65px rgba(55, 23, 2, 0.13); | |
| --shadow-soft: 0 10px 28px rgba(55, 23, 2, 0.09); | |
| --accent: #371702; | |
| --accent-rgb: 55, 23, 2; | |
| --accent-soft: rgba(55, 23, 2, 0.08); | |
| --accent-border: rgba(55, 23, 2, 0.23); | |
| --accent-ink: #f4efe5; | |
| } | |
| /* I3rab uses a cool, analytical palette; typography stays shared with knowledge mode. */ | |
| body[data-mode="i3rab"] { | |
| --bg: #061719; | |
| --bg-soft: #0b2022; | |
| --sidebar-bg: rgba(7, 24, 26, 0.97); | |
| --chrome-bg: rgba(6, 23, 25, 0.88); | |
| --surface: #0d2426; | |
| --surface-raised: #153034; | |
| --surface-soft: #18373a; | |
| --border: #28484b; | |
| --border-strong: #3d6466; | |
| --text: #e6f0ed; | |
| --text-soft: #b6cbc6; | |
| --text-muted: #86a5a0; | |
| --text-faint: #708f8b; | |
| --success: #8bc6ab; | |
| --shadow: 0 24px 65px rgba(1, 10, 11, 0.38); | |
| --shadow-soft: 0 10px 30px rgba(1, 10, 11, 0.28); | |
| --accent: #63d1c0; | |
| --accent-rgb: 99, 209, 192; | |
| --accent-soft: rgba(99, 209, 192, 0.12); | |
| --accent-border: rgba(99, 209, 192, 0.32); | |
| --accent-ink: #062421; | |
| } | |
| body[data-theme="light"][data-mode="i3rab"] { | |
| --bg: #e6efed; | |
| --bg-soft: #d9e6e3; | |
| --sidebar-bg: rgba(239, 245, 243, 0.97); | |
| --chrome-bg: rgba(230, 239, 237, 0.9); | |
| --surface: #f4f8f7; | |
| --surface-raised: #fbfdfc; | |
| --surface-soft: #dceae7; | |
| --border: #bed3cf; | |
| --border-strong: #91b4ae; | |
| --text: #0d3534; | |
| --text-soft: #28534e; | |
| --text-muted: #587871; | |
| --text-faint: #66847e; | |
| --success: #357a64; | |
| --shadow: 0 24px 65px rgba(13, 53, 52, 0.13); | |
| --shadow-soft: 0 10px 28px rgba(13, 53, 52, 0.09); | |
| --accent: #0b746c; | |
| --accent-rgb: 11, 116, 108; | |
| --accent-soft: rgba(11, 116, 108, 0.09); | |
| --accent-border: rgba(11, 116, 108, 0.28); | |
| --accent-ink: #f4f8f7; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| html { | |
| background: var(--bg); | |
| } | |
| body { | |
| display: flex; | |
| min-height: 100vh; | |
| min-height: 100dvh; | |
| overflow: hidden; | |
| background: | |
| radial-gradient(circle at 72% 8%, rgba(var(--accent-rgb), 0.07), transparent 30rem), | |
| var(--bg); | |
| color: var(--text); | |
| font-family: var(--font-ui); | |
| font-size: 15px; | |
| line-height: 1.7; | |
| transition: background-color 180ms ease, color 180ms ease; | |
| } | |
| button, | |
| textarea { | |
| font: inherit; | |
| } | |
| button { | |
| color: inherit; | |
| } | |
| button:disabled { | |
| cursor: not-allowed; | |
| } | |
| [hidden] { | |
| display: none ; | |
| } | |
| ::selection { | |
| background: rgba(var(--accent-rgb), 0.28); | |
| } | |
| ::-webkit-scrollbar { | |
| width: 7px; | |
| height: 7px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| border: 2px solid transparent; | |
| border-radius: 99px; | |
| background: var(--border-strong); | |
| background-clip: padding-box; | |
| } | |
| :focus-visible { | |
| outline: 3px solid rgba(var(--accent-rgb), 0.42); | |
| outline-offset: 3px; | |
| } | |
| .sr-only { | |
| position: absolute ; | |
| width: 1px ; | |
| height: 1px ; | |
| padding: 0 ; | |
| margin: -1px ; | |
| overflow: hidden ; | |
| clip: rect(0, 0, 0, 0) ; | |
| white-space: nowrap ; | |
| border: 0 ; | |
| } | |
| .skip-link { | |
| position: fixed; | |
| inset-block-start: 10px; | |
| inset-inline-start: 50%; | |
| z-index: 1000; | |
| translate: 50% -150%; | |
| padding: 9px 16px; | |
| border-radius: 999px; | |
| background: var(--accent); | |
| color: var(--accent-ink); | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: translate 160ms ease; | |
| } | |
| .skip-link:focus { | |
| translate: 50% 0; | |
| } | |
| /* Mobile controls */ | |
| .mobile-topbar { | |
| display: none; | |
| } | |
| .icon-btn { | |
| width: 40px; | |
| height: 40px; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: var(--surface); | |
| color: var(--text-soft); | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| } | |
| .icon-btn svg { | |
| width: 19px; | |
| height: 19px; | |
| } | |
| .sidebar-overlay { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| z-index: 190; | |
| border: 0; | |
| background: rgba(22, 10, 4, 0.62); | |
| backdrop-filter: blur(3px); | |
| } | |
| .sidebar-overlay.active { | |
| display: block; | |
| animation: fadeIn 160ms ease both; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| position: relative; | |
| z-index: 200; | |
| display: flex; | |
| width: var(--sidebar-w); | |
| min-width: var(--sidebar-w); | |
| height: 100vh; | |
| height: 100dvh; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border-inline-end: 1px solid var(--border); | |
| background: var(--sidebar-bg); | |
| backdrop-filter: blur(18px); | |
| } | |
| .sidebar-brand { | |
| display: flex; | |
| min-height: 82px; | |
| flex-shrink: 0; | |
| align-items: center; | |
| padding: 13px 20px; | |
| border-block-end: 1px solid var(--border); | |
| } | |
| .brand-logo { | |
| display: block; | |
| width: 190px; | |
| height: 54px; | |
| flex: 0 0 auto; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: #e8e2d6; | |
| object-fit: cover; | |
| object-position: center; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .brand-logo--mobile { | |
| width: 128px; | |
| height: 40px; | |
| border-radius: 10px; | |
| box-shadow: none; | |
| } | |
| .sidebar-section { | |
| padding: 18px 14px 12px; | |
| } | |
| .sidebar-section-label { | |
| padding-inline: 6px; | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.01em; | |
| } | |
| .mode-toggle { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 7px; | |
| margin-block-start: 9px; | |
| } | |
| .mode-btn { | |
| position: relative; | |
| display: grid; | |
| width: 100%; | |
| min-height: 68px; | |
| grid-template-columns: 38px minmax(0, 1fr) 10px; | |
| align-items: center; | |
| gap: 11px; | |
| padding: 10px 12px; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-md); | |
| background: transparent; | |
| color: var(--text-muted); | |
| text-align: start; | |
| cursor: pointer; | |
| transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms var(--ease); | |
| } | |
| .mode-btn:not(:disabled):hover { | |
| background: var(--surface); | |
| color: var(--text); | |
| transform: translateX(-2px); | |
| } | |
| .mode-btn:disabled { | |
| opacity: 0.55; | |
| } | |
| .mode-btn--active { | |
| border-color: var(--accent-border); | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| } | |
| .mode-icon { | |
| display: grid; | |
| width: 38px; | |
| height: 38px; | |
| place-items: center; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| } | |
| .mode-icon svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .mode-btn--active .mode-icon { | |
| border-color: var(--accent-border); | |
| background: rgba(var(--accent-rgb), 0.12); | |
| color: var(--accent); | |
| } | |
| .mode-btn-text { | |
| display: flex; | |
| min-width: 0; | |
| flex-direction: column; | |
| line-height: 1.4; | |
| } | |
| .mode-btn-text strong { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .mode-btn-text small { | |
| overflow: hidden; | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .mode-check { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: transparent; | |
| box-shadow: 0 0 0 4px transparent; | |
| } | |
| .mode-btn--active .mode-check { | |
| background: var(--accent); | |
| box-shadow: 0 0 0 4px var(--accent-soft); | |
| } | |
| .new-chat-btn { | |
| display: flex; | |
| min-height: 44px; | |
| flex-shrink: 0; | |
| align-items: center; | |
| gap: 9px; | |
| margin: 2px 14px 14px; | |
| padding: 9px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text-soft); | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease); | |
| } | |
| .new-chat-btn:not(:disabled):hover { | |
| border-color: var(--accent-border); | |
| background: var(--accent-soft); | |
| transform: translateY(-1px); | |
| } | |
| .new-chat-btn:disabled { | |
| opacity: 0.55; | |
| } | |
| .new-chat-btn svg { | |
| width: 17px; | |
| height: 17px; | |
| } | |
| .new-chat-shortcut { | |
| margin-inline-start: auto; | |
| color: var(--text-faint); | |
| font-family: "IBM Plex Sans", sans-serif; | |
| font-size: 10px; | |
| direction: ltr; | |
| } | |
| .sidebar-history-section { | |
| min-height: 0; | |
| flex: 1; | |
| overflow-y: auto; | |
| border-block-start: 1px solid var(--border); | |
| } | |
| .section-heading-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .history-count { | |
| display: grid; | |
| min-width: 22px; | |
| height: 22px; | |
| place-items: center; | |
| border: 1px solid var(--border); | |
| border-radius: 99px; | |
| color: var(--text-muted); | |
| font-family: "IBM Plex Sans", sans-serif; | |
| font-size: 10px; | |
| } | |
| .history-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| margin-block-start: 10px; | |
| } | |
| .history-empty { | |
| display: flex; | |
| min-height: 96px; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| gap: 7px; | |
| border: 1px dashed var(--border); | |
| border-radius: var(--radius-md); | |
| color: var(--text-faint); | |
| font-size: 11px; | |
| } | |
| .history-empty svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .history-item { | |
| display: grid; | |
| width: 100%; | |
| min-height: 44px; | |
| grid-template-columns: 28px minmax(0, 1fr); | |
| align-items: center; | |
| gap: 9px; | |
| padding: 7px 9px; | |
| overflow: hidden; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-muted); | |
| text-align: start; | |
| cursor: pointer; | |
| transition: background 140ms ease, border-color 140ms ease, color 140ms ease; | |
| } | |
| .history-item:hover { | |
| background: var(--surface); | |
| color: var(--text-soft); | |
| } | |
| .history-item--active { | |
| border-color: var(--border); | |
| background: var(--surface-raised); | |
| color: var(--text); | |
| } | |
| .history-item-badge { | |
| display: grid; | |
| width: 28px; | |
| height: 28px; | |
| place-items: center; | |
| border: 1px solid var(--border); | |
| border-radius: 9px; | |
| background: var(--surface-soft); | |
| color: var(--text-muted); | |
| font-family: var(--font-ui); | |
| font-size: 11px; | |
| font-weight: 600; | |
| } | |
| .history-item-badge--i3rab { | |
| border-color: var(--accent-border); | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| } | |
| .history-item-text { | |
| overflow: hidden; | |
| font-size: 12px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .sidebar-bottom { | |
| flex-shrink: 0; | |
| padding: 12px 14px 16px; | |
| border-block-start: 1px solid var(--border); | |
| } | |
| .privacy-note { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 0 7px 10px; | |
| color: var(--text-faint); | |
| font-size: 10px; | |
| } | |
| .privacy-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--success); | |
| box-shadow: 0 0 0 4px rgba(78, 201, 164, 0.08); | |
| } | |
| .theme-btn { | |
| display: grid; | |
| width: 100%; | |
| min-height: 42px; | |
| grid-template-columns: 18px minmax(0, 1fr) 34px; | |
| align-items: center; | |
| gap: 9px; | |
| padding: 8px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| text-align: start; | |
| cursor: pointer; | |
| transition: border-color 150ms ease, color 150ms ease; | |
| } | |
| .theme-btn:hover { | |
| border-color: var(--border-strong); | |
| color: var(--text); | |
| } | |
| .theme-btn svg { | |
| width: 17px; | |
| height: 17px; | |
| } | |
| .theme-switch { | |
| position: relative; | |
| width: 34px; | |
| height: 20px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 99px; | |
| background: var(--surface-soft); | |
| } | |
| .theme-switch span { | |
| position: absolute; | |
| inset-block-start: 3px; | |
| inset-inline-start: 3px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--text-muted); | |
| transition: inset-inline-start 180ms var(--ease), background 180ms ease; | |
| } | |
| body[data-theme="light"] .theme-switch span { | |
| inset-inline-start: 17px; | |
| background: var(--accent); | |
| } | |
| /* Main workspace */ | |
| .chat-main { | |
| position: relative; | |
| display: flex; | |
| min-width: 0; | |
| height: 100vh; | |
| height: 100dvh; | |
| flex: 1; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .context-bar { | |
| position: relative; | |
| z-index: 10; | |
| display: flex; | |
| min-height: 76px; | |
| flex-shrink: 0; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| padding: 12px clamp(22px, 4vw, 52px); | |
| border-block-end: 1px solid var(--border); | |
| background: var(--chrome-bg); | |
| backdrop-filter: blur(18px); | |
| } | |
| .context-copy { | |
| display: flex; | |
| min-width: 0; | |
| align-items: center; | |
| gap: 11px; | |
| } | |
| .context-copy > span:last-child { | |
| display: flex; | |
| min-width: 0; | |
| flex-direction: column; | |
| } | |
| .context-icon { | |
| width: 9px; | |
| height: 34px; | |
| flex: 0 0 auto; | |
| border-radius: 99px; | |
| background: var(--accent); | |
| box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35); | |
| } | |
| .context-eyebrow { | |
| color: var(--accent); | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .context-title { | |
| overflow: hidden; | |
| color: var(--text); | |
| font-size: 15px; | |
| font-weight: 600; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .session-progress { | |
| display: flex; | |
| flex: 0 0 auto; | |
| align-items: center; | |
| gap: 9px; | |
| padding: 7px 11px; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| } | |
| .progress-ring { | |
| --progress: 0deg; | |
| position: relative; | |
| display: grid; | |
| width: 21px; | |
| height: 21px; | |
| place-items: center; | |
| border-radius: 50%; | |
| background: conic-gradient(var(--accent) var(--progress), var(--border) 0); | |
| } | |
| .progress-ring::after { | |
| width: 13px; | |
| height: 13px; | |
| border-radius: inherit; | |
| background: var(--surface); | |
| content: ""; | |
| } | |
| .chat-scroll { | |
| position: relative; | |
| flex: 1; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| overscroll-behavior: contain; | |
| padding: clamp(24px, 4vw, 44px) clamp(20px, 5vw, 64px) 30px; | |
| scroll-behavior: smooth; | |
| } | |
| .chat-watermark { | |
| position: fixed; | |
| inset-block-start: 50%; | |
| inset-inline-start: calc((100% + var(--sidebar-w)) / 2); | |
| z-index: 0; | |
| color: var(--text); | |
| font-family: var(--font-display); | |
| font-size: clamp(130px, 18vw, 260px); | |
| line-height: 1; | |
| opacity: 0.018; | |
| pointer-events: none; | |
| translate: 50% -50%; | |
| user-select: none; | |
| } | |
| .message-list { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| width: min(100%, var(--content-w)); | |
| min-height: 100%; | |
| flex-direction: column; | |
| gap: 24px; | |
| margin-inline: auto; | |
| padding-block-end: 8px; | |
| } | |
| /* Welcome state */ | |
| .welcome-panel { | |
| display: flex; | |
| width: min(100%, 760px); | |
| min-height: 100%; | |
| align-self: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| margin: auto; | |
| padding: 18px 0 40px; | |
| text-align: center; | |
| animation: welcomeIn 420ms var(--ease) both; | |
| } | |
| .welcome-avatar { | |
| position: relative; | |
| display: grid; | |
| width: 76px; | |
| height: 76px; | |
| place-items: center; | |
| margin: 0 auto 20px; | |
| border: 1px solid var(--accent-border); | |
| border-radius: 27px; | |
| background: linear-gradient(145deg, var(--accent-soft), var(--surface)); | |
| box-shadow: 0 18px 45px rgba(var(--accent-rgb), 0.13); | |
| color: var(--accent); | |
| font-family: var(--font-display); | |
| font-size: 43px; | |
| } | |
| .welcome-avatar::before, | |
| .welcome-avatar::after { | |
| position: absolute; | |
| border: 1px solid var(--accent-border); | |
| border-radius: 30px; | |
| content: ""; | |
| inset: -8px; | |
| opacity: 0.35; | |
| } | |
| .welcome-avatar::after { | |
| inset: -16px; | |
| opacity: 0.14; | |
| } | |
| .welcome-kicker { | |
| margin-block-end: 6px; | |
| color: var(--accent); | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .welcome-title { | |
| max-width: 650px; | |
| margin-inline: auto; | |
| font-family: var(--font-display); | |
| font-size: clamp(32px, 5vw, 48px); | |
| font-weight: 400; | |
| line-height: 1.28; | |
| text-wrap: balance; | |
| } | |
| .welcome-copy { | |
| max-width: 590px; | |
| margin: 12px auto 0; | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| line-height: 1.9; | |
| text-wrap: balance; | |
| } | |
| .welcome-path { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| margin-block-start: 28px; | |
| text-align: start; | |
| } | |
| .welcome-step { | |
| position: relative; | |
| min-height: 112px; | |
| padding: 15px; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| background: rgba(var(--accent-rgb), 0.025); | |
| transition: border-color 160ms ease, transform 160ms var(--ease), background 160ms ease; | |
| } | |
| .welcome-step:hover { | |
| border-color: var(--accent-border); | |
| background: var(--accent-soft); | |
| transform: translateY(-2px); | |
| } | |
| .welcome-step-number { | |
| display: grid; | |
| width: 24px; | |
| height: 24px; | |
| place-items: center; | |
| margin-block-end: 10px; | |
| border: 1px solid var(--accent-border); | |
| border-radius: 8px; | |
| color: var(--accent); | |
| font-family: "IBM Plex Sans", sans-serif; | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .welcome-step strong { | |
| display: block; | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .welcome-step p { | |
| margin-block-start: 3px; | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| line-height: 1.6; | |
| } | |
| /* Messages */ | |
| .message { | |
| display: flex; | |
| width: 100%; | |
| align-items: flex-start; | |
| gap: 12px; | |
| direction: rtl; | |
| animation: messageIn 240ms var(--ease) both; | |
| } | |
| .message--user { | |
| flex-direction: row-reverse; | |
| } | |
| .msg-avatar { | |
| display: grid; | |
| width: 36px; | |
| height: 36px; | |
| flex: 0 0 auto; | |
| place-items: center; | |
| border: 1px solid var(--accent-border); | |
| border-radius: 12px; | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| font-family: var(--font-display); | |
| font-size: 19px; | |
| } | |
| .message--user .msg-avatar { | |
| border-color: var(--border); | |
| background: var(--surface-soft); | |
| color: var(--text-muted); | |
| font-family: var(--font-ui); | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .msg-body { | |
| display: flex; | |
| width: fit-content; | |
| max-width: min(100% - 48px, 760px); | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 9px; | |
| } | |
| .message--assistant .msg-body { | |
| width: min(100% - 48px, 760px); | |
| } | |
| .message--user .msg-body { | |
| align-items: flex-end; | |
| } | |
| .intent-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding-inline: 2px; | |
| color: var(--text-muted); | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| box-shadow: 0 0 0 4px var(--accent-soft); | |
| } | |
| .msg-text { | |
| max-width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| background: var(--surface); | |
| color: var(--text-soft); | |
| font-family: var(--font-ui); | |
| font-size: 15px; | |
| line-height: 1.95; | |
| overflow-wrap: anywhere; | |
| white-space: pre-wrap; | |
| } | |
| .message--assistant .msg-text { | |
| border-start-start-radius: 5px; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .message--user .msg-text { | |
| width: fit-content; | |
| border-color: var(--accent-border); | |
| border-start-end-radius: 5px; | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| text-align: start; | |
| } | |
| .streaming-content { | |
| min-height: 30px; | |
| white-space: pre-wrap; | |
| } | |
| .streaming-cursor { | |
| display: inline-block; | |
| width: 2px; | |
| height: 1.1em; | |
| margin-inline-start: 3px; | |
| border-radius: 2px; | |
| background: var(--accent); | |
| vertical-align: -0.15em; | |
| animation: blink 760ms step-end infinite; | |
| } | |
| /* Rich knowledge response */ | |
| .rich-response { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 13px; | |
| white-space: normal; | |
| } | |
| .response-heading { | |
| position: relative; | |
| margin-block-start: 3px; | |
| padding-inline-start: 14px; | |
| color: var(--text); | |
| font-family: var(--font-display); | |
| font-size: 20px; | |
| font-weight: 400; | |
| line-height: 1.6; | |
| } | |
| .response-heading::before { | |
| position: absolute; | |
| inset-block: 7px; | |
| inset-inline-start: 0; | |
| width: 4px; | |
| border-radius: 99px; | |
| background: var(--accent); | |
| content: ""; | |
| } | |
| .response-paragraph { | |
| color: var(--text-soft); | |
| line-height: 1.95; | |
| white-space: pre-wrap; | |
| } | |
| .response-paragraph strong { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .response-paragraph code { | |
| padding: 1px 6px; | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| background: var(--surface-soft); | |
| color: var(--accent); | |
| font-family: var(--font-ui); | |
| } | |
| .response-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .response-list li { | |
| position: relative; | |
| padding-inline-start: 21px; | |
| color: var(--text-soft); | |
| } | |
| .response-list li::before { | |
| position: absolute; | |
| inset-block-start: 0.78em; | |
| inset-inline-start: 3px; | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 2px; | |
| background: var(--accent); | |
| content: ""; | |
| rotate: 45deg; | |
| } | |
| .response-list--numbered { | |
| counter-reset: response-list; | |
| } | |
| .response-list--numbered li { | |
| counter-increment: response-list; | |
| padding-inline-start: 31px; | |
| } | |
| .response-list--numbered li::before { | |
| display: grid; | |
| width: 22px; | |
| height: 22px; | |
| place-items: center; | |
| inset-block-start: 3px; | |
| inset-inline-start: 0; | |
| border: 1px solid var(--accent-border); | |
| border-radius: 7px; | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| content: counter(response-list); | |
| font-family: "IBM Plex Sans", sans-serif; | |
| font-size: 10px; | |
| font-weight: 600; | |
| rotate: 0deg; | |
| } | |
| .response-callout { | |
| display: grid; | |
| grid-template-columns: 30px minmax(0, 1fr); | |
| gap: 10px; | |
| padding: 12px 13px; | |
| border: 1px solid var(--accent-border); | |
| border-radius: var(--radius-md); | |
| background: var(--accent-soft); | |
| } | |
| .response-callout__mark { | |
| display: grid; | |
| width: 28px; | |
| height: 28px; | |
| place-items: center; | |
| border: 1px solid var(--accent-border); | |
| border-radius: 9px; | |
| color: var(--accent); | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .response-callout__content strong { | |
| display: block; | |
| margin-block-end: 2px; | |
| color: var(--text); | |
| font-size: 12px; | |
| } | |
| .response-callout__content p { | |
| color: var(--text-soft); | |
| font-size: 13px; | |
| line-height: 1.8; | |
| } | |
| /* I3rab explorer */ | |
| .i3rab-explorer { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| white-space: normal; | |
| } | |
| .i3rab-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding-block-end: 12px; | |
| border-block-end: 1px solid var(--border); | |
| } | |
| .i3rab-header strong { | |
| display: block; | |
| color: var(--text); | |
| font-family: var(--font-display); | |
| font-size: 19px; | |
| font-weight: 400; | |
| } | |
| .i3rab-header p { | |
| margin-block-start: 1px; | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| } | |
| .i3rab-count { | |
| flex: 0 0 auto; | |
| padding: 4px 9px; | |
| border: 1px solid var(--accent-border); | |
| border-radius: 999px; | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .i3rab-tokens { | |
| display: flex; | |
| gap: 8px; | |
| padding: 3px 1px 8px; | |
| overflow-x: auto; | |
| scroll-snap-type: x proximity; | |
| } | |
| .i3rab-token { | |
| position: relative; | |
| display: flex; | |
| min-width: 72px; | |
| min-height: 58px; | |
| flex: 0 0 auto; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| gap: 2px; | |
| padding: 7px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: var(--surface-soft); | |
| color: var(--text-soft); | |
| cursor: pointer; | |
| scroll-snap-align: start; | |
| transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms var(--ease); | |
| } | |
| .i3rab-token:hover { | |
| border-color: var(--accent-border); | |
| transform: translateY(-2px); | |
| } | |
| .i3rab-token[aria-selected="true"] { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.1); | |
| } | |
| .i3rab-token__word { | |
| font-family: var(--font-display); | |
| font-size: 17px; | |
| line-height: 1.4; | |
| } | |
| .i3rab-token__index { | |
| color: var(--text-muted); | |
| font-family: "IBM Plex Sans", sans-serif; | |
| font-size: 9px; | |
| } | |
| .i3rab-detail { | |
| position: relative; | |
| min-height: 124px; | |
| padding: 16px; | |
| overflow: hidden; | |
| border: 1px solid var(--accent-border); | |
| border-radius: var(--radius-md); | |
| background: linear-gradient(135deg, var(--accent-soft), transparent 75%); | |
| } | |
| .i3rab-detail::after { | |
| position: absolute; | |
| inset-block-start: -35px; | |
| inset-inline-end: -25px; | |
| width: 110px; | |
| height: 110px; | |
| border: 18px solid rgba(var(--accent-rgb), 0.05); | |
| border-radius: 50%; | |
| content: ""; | |
| pointer-events: none; | |
| } | |
| .i3rab-detail__label { | |
| color: var(--accent); | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .i3rab-detail__word { | |
| margin-block: 2px 7px; | |
| color: var(--text); | |
| font-family: var(--font-display); | |
| font-size: 24px; | |
| font-weight: 400; | |
| } | |
| .i3rab-detail__analysis { | |
| max-width: 660px; | |
| color: var(--text-soft); | |
| font-size: 14px; | |
| line-height: 1.95; | |
| } | |
| .i3rab-progress { | |
| display: flex; | |
| height: 3px; | |
| gap: 4px; | |
| } | |
| .i3rab-progress span { | |
| flex: 1; | |
| border-radius: 99px; | |
| background: var(--border); | |
| transition: background 160ms ease; | |
| } | |
| .i3rab-progress span.is-active { | |
| background: var(--accent); | |
| } | |
| .i3rab-next { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding-block-start: 2px; | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| } | |
| .i3rab-next span:last-child { | |
| direction: ltr; | |
| unicode-bidi: isolate; | |
| } | |
| /* I3rab mode: structured analysis surface */ | |
| body[data-mode="i3rab"] { | |
| background: | |
| radial-gradient(circle at 72% 8%, rgba(var(--accent-rgb), 0.12), transparent 30rem), | |
| linear-gradient(135deg, rgba(var(--accent-rgb), 0.025), transparent 45%), | |
| var(--bg); | |
| } | |
| body[data-mode="i3rab"] .chat-scroll { | |
| background-image: | |
| linear-gradient(rgba(var(--accent-rgb), 0.025) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(var(--accent-rgb), 0.025) 1px, transparent 1px); | |
| background-size: 34px 34px; | |
| } | |
| body[data-mode="i3rab"] .context-icon { | |
| display: grid; | |
| width: 34px; | |
| height: 34px; | |
| place-items: center; | |
| border: 1px solid var(--accent-border); | |
| border-radius: 10px; | |
| background: var(--accent-soft); | |
| box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.18); | |
| } | |
| body[data-mode="i3rab"] .context-icon::before { | |
| color: var(--accent); | |
| content: "ع"; | |
| font-size: 17px; | |
| line-height: 1; | |
| } | |
| body[data-mode="i3rab"] .welcome-avatar { | |
| border-radius: 18px; | |
| background: | |
| linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), transparent 58%), | |
| var(--surface); | |
| box-shadow: | |
| 0 18px 45px rgba(var(--accent-rgb), 0.14), | |
| inset 0 0 0 7px rgba(var(--accent-rgb), 0.035); | |
| } | |
| body[data-mode="i3rab"] .welcome-avatar::before { | |
| inset: 7px; | |
| border-style: dashed; | |
| border-radius: 12px; | |
| opacity: 0.4; | |
| } | |
| body[data-mode="i3rab"] .welcome-avatar::after { | |
| inset: -10px; | |
| border-radius: 24px; | |
| opacity: 0.2; | |
| } | |
| body[data-mode="i3rab"] .welcome-step { | |
| border-block-start: 2px solid var(--accent-border); | |
| border-radius: 8px 8px var(--radius-md) var(--radius-md); | |
| background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.075), rgba(var(--accent-rgb), 0.015)); | |
| } | |
| body[data-mode="i3rab"] .welcome-step-number { | |
| border-radius: 999px; | |
| background: var(--accent-soft); | |
| } | |
| body[data-mode="i3rab"] .composer { | |
| border-color: var(--accent-border); | |
| background: | |
| linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 48%), | |
| var(--surface); | |
| } | |
| body[data-mode="i3rab"] .i3rab-token { | |
| border-block-end-width: 2px; | |
| } | |
| body[data-mode="i3rab"] .i3rab-token[aria-selected="true"] { | |
| border-block-end-color: var(--accent); | |
| } | |
| body[data-mode="i3rab"] .i3rab-detail { | |
| border-inline-start-width: 3px; | |
| background: | |
| linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), transparent 68%), | |
| var(--surface); | |
| } | |
| /* Contextual actions */ | |
| .response-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 7px; | |
| padding-inline: 2px; | |
| } | |
| .response-action { | |
| display: inline-flex; | |
| min-height: 36px; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 7px 11px; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms var(--ease); | |
| } | |
| .response-action:hover { | |
| border-color: var(--accent-border); | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| transform: translateY(-1px); | |
| } | |
| .response-action svg { | |
| width: 14px; | |
| height: 14px; | |
| color: var(--accent); | |
| } | |
| /* Thinking and error feedback */ | |
| .thinking-card { | |
| display: flex; | |
| min-width: min(340px, 100%); | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| background: var(--surface); | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .thinking-orbit { | |
| position: relative; | |
| width: 30px; | |
| height: 30px; | |
| flex: 0 0 auto; | |
| border: 2px solid var(--border); | |
| border-radius: 50%; | |
| } | |
| .thinking-orbit::before { | |
| position: absolute; | |
| inset: -2px; | |
| border: 2px solid transparent; | |
| border-block-start-color: var(--accent); | |
| border-radius: inherit; | |
| content: ""; | |
| animation: spin 900ms linear infinite; | |
| } | |
| .thinking-orbit::after { | |
| position: absolute; | |
| inset: 9px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55); | |
| content: ""; | |
| } | |
| .thinking-copy { | |
| display: flex; | |
| flex-direction: column; | |
| line-height: 1.5; | |
| } | |
| .thinking-copy strong { | |
| color: var(--text-soft); | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .thinking-copy span { | |
| color: var(--text-muted); | |
| font-size: 10px; | |
| } | |
| .error-card { | |
| display: grid; | |
| grid-template-columns: 34px minmax(0, 1fr); | |
| gap: 11px; | |
| padding: 13px; | |
| border: 1px solid rgba(241, 120, 120, 0.28); | |
| border-radius: var(--radius-md); | |
| background: var(--danger-soft); | |
| } | |
| .error-mark { | |
| display: grid; | |
| width: 32px; | |
| height: 32px; | |
| place-items: center; | |
| border: 1px solid rgba(241, 120, 120, 0.35); | |
| border-radius: 10px; | |
| color: var(--danger); | |
| font-weight: 600; | |
| } | |
| .error-copy strong { | |
| display: block; | |
| color: var(--text); | |
| font-size: 13px; | |
| } | |
| .error-copy p { | |
| margin-block-start: 2px; | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| } | |
| .error-copy details { | |
| margin-block-start: 7px; | |
| color: var(--text-faint); | |
| font-size: 10px; | |
| } | |
| .error-copy summary { | |
| width: fit-content; | |
| cursor: pointer; | |
| } | |
| .error-retry { | |
| margin-block-start: 9px; | |
| padding: 5px 10px; | |
| border: 1px solid rgba(241, 120, 120, 0.3); | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--danger); | |
| font-size: 11px; | |
| cursor: pointer; | |
| } | |
| .mode-divider { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--text-muted); | |
| animation: messageIn 200ms ease both; | |
| } | |
| .mode-divider-line { | |
| height: 1px; | |
| flex: 1; | |
| background: var(--border); | |
| } | |
| .mode-divider-label { | |
| padding: 4px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| background: var(--bg); | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| /* Composer */ | |
| .input-bar { | |
| position: relative; | |
| z-index: 20; | |
| flex-shrink: 0; | |
| padding: 10px clamp(20px, 5vw, 64px) 14px; | |
| border-block-start: 1px solid var(--border); | |
| background: var(--chrome-bg); | |
| backdrop-filter: blur(20px); | |
| } | |
| .quick-prompts { | |
| display: flex; | |
| width: min(100%, var(--content-w)); | |
| gap: 7px; | |
| margin: 0 auto 9px; | |
| overflow-x: auto; | |
| padding: 2px 2px 4px; | |
| scrollbar-width: none; | |
| } | |
| .quick-prompts::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .quick-prompt { | |
| display: inline-flex; | |
| min-height: 34px; | |
| flex: 0 0 auto; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 6px 11px; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| cursor: pointer; | |
| transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms var(--ease); | |
| } | |
| .quick-prompt::before { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| content: ""; | |
| } | |
| .quick-prompt:hover { | |
| border-color: var(--accent-border); | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| transform: translateY(-1px); | |
| } | |
| .composer { | |
| display: grid; | |
| width: min(100%, var(--content-w)); | |
| min-height: 58px; | |
| grid-template-columns: auto minmax(0, 1fr) 42px; | |
| align-items: end; | |
| gap: 10px; | |
| margin-inline: auto; | |
| padding: 8px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--radius-lg); | |
| background: var(--surface); | |
| box-shadow: var(--shadow-soft); | |
| transition: border-color 160ms ease, box-shadow 160ms ease; | |
| } | |
| .composer:focus-within { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-soft); | |
| } | |
| .composer-mode { | |
| align-self: center; | |
| padding: 5px 9px; | |
| border: 1px solid var(--accent-border); | |
| border-radius: 9px; | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| font-size: 10px; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| .input-field { | |
| width: 100%; | |
| max-height: 150px; | |
| min-height: 40px; | |
| resize: none; | |
| overflow-y: auto; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| color: var(--text); | |
| caret-color: var(--accent); | |
| font-family: var(--font-ui); | |
| font-size: 15px; | |
| line-height: 1.7; | |
| padding: 7px 2px 4px; | |
| } | |
| .input-field::placeholder { | |
| color: var(--text-faint); | |
| } | |
| .send-btn { | |
| display: grid; | |
| width: 42px; | |
| height: 42px; | |
| place-items: center; | |
| border: 1px solid var(--accent); | |
| border-radius: 13px; | |
| background: var(--accent); | |
| color: var(--accent-ink); | |
| cursor: pointer; | |
| box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.2); | |
| transition: transform 150ms var(--ease), opacity 150ms ease, box-shadow 150ms ease; | |
| } | |
| .send-btn:not(:disabled):hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 11px 24px rgba(var(--accent-rgb), 0.28); | |
| } | |
| .send-btn:not(:disabled):active { | |
| transform: translateY(0) scale(0.96); | |
| } | |
| .send-btn:disabled { | |
| border-color: var(--border); | |
| background: var(--surface-soft); | |
| color: var(--text-faint); | |
| box-shadow: none; | |
| opacity: 0.65; | |
| } | |
| .send-btn svg { | |
| width: 18px; | |
| height: 18px; | |
| transform: scaleX(-1); | |
| } | |
| .composer-meta { | |
| display: flex; | |
| width: min(100%, var(--content-w)); | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin: 7px auto 0; | |
| color: var(--text-faint); | |
| font-size: 10px; | |
| } | |
| .keyboard-hint { | |
| direction: rtl; | |
| white-space: nowrap; | |
| } | |
| kbd { | |
| padding: 1px 5px; | |
| border: 1px solid var(--border); | |
| border-block-end-color: var(--border-strong); | |
| border-radius: 5px; | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| font-family: "IBM Plex Sans", sans-serif; | |
| font-size: 9px; | |
| } | |
| /* Motion */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes welcomeIn { | |
| from { opacity: 0; transform: translateY(12px) scale(0.99); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| @keyframes messageIn { | |
| from { opacity: 0; transform: translateY(7px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes spin { | |
| to { rotate: 360deg; } | |
| } | |
| /* Tablet */ | |
| @media (max-width: 1040px) { | |
| :root { | |
| --sidebar-w: 256px; | |
| } | |
| .privacy-note, | |
| .new-chat-shortcut { | |
| display: none; | |
| } | |
| .context-bar { | |
| min-height: 70px; | |
| } | |
| .chat-scroll { | |
| padding-inline: 28px; | |
| } | |
| .input-bar { | |
| padding-inline: 28px; | |
| } | |
| } | |
| /* Mobile */ | |
| @media (max-width: 760px) { | |
| body { | |
| display: block; | |
| } | |
| .mobile-topbar { | |
| position: fixed; | |
| inset-block-start: 0; | |
| inset-inline: 0; | |
| z-index: 150; | |
| display: flex; | |
| height: var(--mobile-topbar-h); | |
| align-items: center; | |
| justify-content: space-between; | |
| padding-inline: 10px; | |
| border-block-end: 1px solid var(--border); | |
| background: var(--sidebar-bg); | |
| backdrop-filter: blur(18px); | |
| } | |
| .mobile-brand { | |
| display: flex; | |
| align-items: center; | |
| line-height: 0; | |
| } | |
| .sidebar { | |
| position: fixed; | |
| inset-block: 0; | |
| inset-inline-start: 0; | |
| z-index: 200; | |
| width: min(88vw, 310px); | |
| min-width: min(88vw, 310px); | |
| border-inline-end: 1px solid var(--border); | |
| box-shadow: var(--shadow); | |
| transform: translateX(105%); | |
| transition: transform 220ms var(--ease); | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| .privacy-note { | |
| display: flex; | |
| } | |
| .chat-main { | |
| height: 100vh; | |
| height: 100dvh; | |
| padding-block-start: var(--mobile-topbar-h); | |
| } | |
| .context-bar { | |
| min-height: 64px; | |
| padding: 9px 16px; | |
| } | |
| .context-title { | |
| max-width: 48vw; | |
| font-size: 13px; | |
| } | |
| .context-eyebrow { | |
| font-size: 9px; | |
| } | |
| .session-progress { | |
| padding: 6px; | |
| border: 0; | |
| background: transparent; | |
| } | |
| .session-progress > span:last-child { | |
| display: none; | |
| } | |
| .chat-scroll { | |
| padding: 22px 14px 20px; | |
| } | |
| .chat-watermark { | |
| inset-inline-start: 50%; | |
| } | |
| .welcome-panel { | |
| justify-content: flex-start; | |
| padding-block-start: 20px; | |
| } | |
| .welcome-avatar { | |
| width: 62px; | |
| height: 62px; | |
| margin-block-end: 18px; | |
| border-radius: 22px; | |
| font-size: 34px; | |
| } | |
| .welcome-title { | |
| font-size: 31px; | |
| } | |
| .welcome-copy { | |
| font-size: 13px; | |
| } | |
| .welcome-path { | |
| grid-template-columns: 1fr; | |
| gap: 7px; | |
| margin-block-start: 22px; | |
| } | |
| .welcome-step { | |
| display: grid; | |
| min-height: 0; | |
| grid-template-columns: 28px minmax(0, 1fr); | |
| gap: 0 9px; | |
| padding: 11px 12px; | |
| } | |
| .welcome-step-number { | |
| grid-row: 1 / 3; | |
| margin: 0; | |
| } | |
| .welcome-step strong, | |
| .welcome-step p { | |
| grid-column: 2; | |
| } | |
| .message-list { | |
| gap: 20px; | |
| } | |
| .message { | |
| gap: 8px; | |
| } | |
| .msg-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 10px; | |
| font-size: 17px; | |
| } | |
| .msg-body, | |
| .message--assistant .msg-body { | |
| width: calc(100% - 40px); | |
| max-width: calc(100% - 40px); | |
| } | |
| .message--user .msg-body { | |
| width: fit-content; | |
| max-width: calc(100% - 40px); | |
| } | |
| .msg-text { | |
| padding: 11px 12px; | |
| border-radius: 15px; | |
| font-size: 14px; | |
| } | |
| .i3rab-detail { | |
| padding: 13px; | |
| } | |
| .input-bar { | |
| padding: 8px 10px max(10px, env(safe-area-inset-bottom)); | |
| } | |
| .quick-prompts { | |
| margin-block-end: 6px; | |
| } | |
| .quick-prompt { | |
| min-height: 32px; | |
| padding: 5px 9px; | |
| font-size: 10px; | |
| } | |
| .composer { | |
| min-height: 54px; | |
| grid-template-columns: minmax(0, 1fr) 40px; | |
| gap: 7px; | |
| padding: 6px; | |
| border-radius: 15px; | |
| } | |
| .composer-mode { | |
| display: none; | |
| } | |
| .input-field { | |
| min-height: 40px; | |
| padding-inline: 6px; | |
| font-size: 16px; | |
| } | |
| .send-btn { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 11px; | |
| } | |
| .composer-meta { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 390px) { | |
| .context-progress { | |
| display: none; | |
| } | |
| .context-title { | |
| max-width: 55vw; | |
| } | |
| .welcome-title { | |
| font-size: 28px; | |
| } | |
| .response-actions { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .response-action { | |
| justify-content: center; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| scroll-behavior: auto ; | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |