spb/uqo-chat

1@import 'katex/dist/katex.min.css';2@tailwind base;3@tailwind components;4@tailwind utilities;56:root {7  --font-scale: 1;8  --safe-bottom: env(safe-area-inset-bottom, 0px);9  --safe-top: env(safe-area-inset-top, 0px);10  --uqo: #0f6180;11  --uqo-dark: #0a4a63;12  --uqo-light: #e6f0f4;13}1415html, body, #root { height: 100%; }16html { -webkit-text-size-adjust: 100%; }17body {18  @apply bg-neutral-bg text-neutral-text font-sans antialiased;19  font-size: calc(16px * var(--font-scale));20  overscroll-behavior-y: none;21  -webkit-tap-highlight-color: transparent;22  text-rendering: optimizeLegibility;23}24::selection { background: rgba(15, 97, 128, 0.18); }25input, textarea, select, button { font: inherit; }26/* Anti-zoom iOS: never below 16 px in inputs */27input, textarea { font-size: max(16px, 1em); }28button, a { touch-action: manipulation; }2930*:focus-visible { outline: 2px solid var(--uqo); outline-offset: 2px; border-radius: 6px; }3132.scroll-thin { scrollbar-width: thin; scrollbar-color: #c5d0db transparent; }33.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }34.scroll-thin::-webkit-scrollbar-thumb { background: #c5d0db; border-radius: 3px; }35.no-scrollbar { scrollbar-width: none; }36.no-scrollbar::-webkit-scrollbar { display: none; }3738/* Brand gradients */39.bg-uqo-gradient { background: linear-gradient(135deg, #0f6180 0%, #0a4a63 60%, #083a4f 100%); }40.bg-uqo-soft { background: radial-gradient(1200px 400px at 20% -20%, rgba(15, 97, 128, 0.10), transparent 60%), #f4f7f9; }41.shadow-soft { box-shadow: 0 1px 2px rgba(10, 74, 99, 0.05), 0 6px 20px rgba(10, 74, 99, 0.07); }42.shadow-float { box-shadow: 0 2px 6px rgba(10, 74, 99, 0.08), 0 14px 34px rgba(10, 74, 99, 0.14); }4344/* Markdown (prose-like, mobile first) */45.md { line-height: 1.62; word-wrap: break-word; }46.md > * + * { margin-top: 0.75em; }47.md h1, .md h2, .md h3, .md h4 { @apply font-semibold text-uqo-blue-dark; line-height: 1.3; margin-top: 1.15em; letter-spacing: -0.01em; }48.md h1 { font-size: 1.32em; } .md h2 { font-size: 1.18em; } .md h3 { font-size: 1.06em; } .md h4 { font-size: 1em; }49.md p { margin: 0; }50.md ul { list-style: disc; padding-left: 1.35em; } .md ol { list-style: decimal; padding-left: 1.35em; }51.md li + li { margin-top: 0.3em; }52.md li::marker { color: var(--uqo); }53.md a { @apply text-uqo-blue underline underline-offset-2 decoration-uqo-blue/40; }54.md blockquote { @apply border-l-4 border-uqo-blue/30 pl-3 text-neutral-muted bg-uqo-blue-light/40 rounded-r-lg py-1; }55.md code:not(pre code) { @apply font-mono text-[0.88em] bg-neutral-surface px-1.5 py-0.5 rounded-md text-uqo-blue-dark; }56.md pre { @apply font-mono text-[0.86em] rounded-xl overflow-x-auto; }57.md table { display: block; overflow-x: auto; max-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.93em; border: 1px solid theme('colors.neutral.line'); border-radius: 10px; }58.md thead th { @apply bg-uqo-blue-light text-uqo-blue-dark font-semibold text-left; padding: 7px 10px; white-space: nowrap; }59.md td { padding: 7px 10px; border-top: 1px solid theme('colors.neutral.line'); white-space: nowrap; }60.md tbody tr:nth-child(even) td { background: #fafbfc; }61.md hr { @apply border-neutral-line my-3; }62.md .katex-display { overflow-x: auto; overflow-y: hidden; padding: 6px 2px; margin: 0.5em 0; }63.md .katex { font-size: 1.05em; }64.md img { max-width: 100%; border-radius: 10px; }65.md strong { color: theme('colors.uqo.blue-dark'); }6667.shiki { padding: 12px 14px; margin: 0; background: #0e1f2b !important; color: #e6edf3; }68.shiki code { counter-reset: line; }6970.streaming-cursor::after { content: '▍'; @apply text-uqo-blue; animation: blink 1s steps(2) infinite; margin-left: 1px; }71@keyframes blink { 50% { opacity: 0; } }7273.progress-bar { position: relative; height: 3px; overflow: hidden; background: var(--uqo-light); }74.progress-bar::after { content: ''; position: absolute; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--uqo), #78be20); animation: slide 1.2s ease-in-out infinite; }75@keyframes slide { to { left: 100%; } }7677.skeleton { @apply bg-neutral-surface rounded-xl; position: relative; overflow: hidden; }78.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.4s infinite; }79@keyframes shimmer { to { transform: translateX(100%); } }8081@media (prefers-reduced-motion: reduce) {82  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }83}84