diff --git a/ui/public/spider logo white.svg b/ui/public/spider logo white.svg new file mode 100644 index 0000000..8492b76 --- /dev/null +++ b/ui/public/spider logo white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/public/spider wordmark white.svg b/ui/public/spider wordmark white.svg new file mode 100644 index 0000000..bc84aa7 --- /dev/null +++ b/ui/public/spider wordmark white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ui/public/spider-logo-black.svg b/ui/public/spider-logo-black.svg new file mode 100644 index 0000000..350a0a0 --- /dev/null +++ b/ui/public/spider-logo-black.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/public/spider-logo-white.svg b/ui/public/spider-logo-white.svg new file mode 100644 index 0000000..8492b76 --- /dev/null +++ b/ui/public/spider-logo-white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/public/spider-web-pattern.svg b/ui/public/spider-web-pattern.svg new file mode 100644 index 0000000..7b736cc --- /dev/null +++ b/ui/public/spider-web-pattern.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/public/spider-wordmark-black.svg b/ui/public/spider-wordmark-black.svg new file mode 100644 index 0000000..38761a4 --- /dev/null +++ b/ui/public/spider-wordmark-black.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ui/public/spider-wordmark-white.svg b/ui/public/spider-wordmark-white.svg new file mode 100644 index 0000000..bc84aa7 --- /dev/null +++ b/ui/public/spider-wordmark-white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ui/src/App.css b/ui/src/App.css index 1cc2c17..dd20fad 100644 --- a/ui/src/App.css +++ b/ui/src/App.css @@ -1,1077 +1,1941 @@ +/* ========================================================================== + Spider UI - Component Styles + Warm, Luxurious Editorial Design System + ========================================================================== */ + +/* === Keyframe Animations === */ + +/* --- Entry Animations - Smoother, more elegant --- */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-14px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInScale { + from { + opacity: 0; + transform: scale(0.94); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes springIn { + 0% { + opacity: 0; + transform: scale(0.85); + } + 60% { + opacity: 1; + transform: scale(1.03); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes slideInStagger { + from { + opacity: 0; + transform: translateX(-8px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideInFromRight { + from { + opacity: 0; + transform: translateX(28px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes modalEnter { + from { + opacity: 0; + transform: scale(0.95) translateY(12px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +@keyframes subtleFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-4px); } +} + +@keyframes gentlePulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.85; + transform: scale(0.98); + } +} + +@keyframes glowPulse { + 0%, 100% { + box-shadow: 0 0 20px var(--accent-glow); + } + 50% { + box-shadow: 0 0 32px var(--accent-glow), 0 0 48px rgba(245, 184, 76, 0.15); + } +} + +/* --- Interactive Feedback --- */ +@keyframes checkPop { + 0% { + transform: scale(1); + } + 30% { + transform: scale(1.25); + } + 60% { + transform: scale(0.92); + } + 100% { + transform: scale(1); + } +} + +@keyframes checkRipple { + 0% { + box-shadow: 0 0 0 0 var(--accent-glow); + } + 100% { + box-shadow: 0 0 0 16px rgba(245, 184, 76, 0); + } +} + +@keyframes navGlow { + 0%, 100% { + box-shadow: 0 2px 16px var(--accent-glow); + } + 50% { + box-shadow: 0 4px 24px var(--accent-glow), 0 0 36px rgba(245, 184, 76, 0.18); + } +} + +@keyframes buttonPulse { + 0%, 100% { + box-shadow: 0 4px 20px var(--accent-glow); + } + 50% { + box-shadow: 0 8px 32px var(--accent-glow), 0 0 40px rgba(245, 184, 76, 0.22); + } +} + +@keyframes shimmerGold { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +/* --- Exit Animations --- */ +@keyframes fadeOutDown { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(8px); + } +} + @keyframes archiveAway { 0% { + transform: scale(1) translateY(0) rotate(0); + opacity: 1; + } + 25% { + transform: scale(1.03) translateY(-6px) rotate(0); + opacity: 1; + } + 100% { + transform: scale(0.85) translateY(28px) rotate(-2deg); + opacity: 0; + } +} + +/* --- Loading & State --- */ +@keyframes spin { + to { transform: rotate(360deg); } +} + +@keyframes spinnerPulse { + 0% { + transform: scale(1); + opacity: 0.4; + } + 100% { + transform: scale(1.6); + opacity: 0; + } +} + +@keyframes pulse { + 0%, 80%, 100% { + transform: scale(0.85); + opacity: 0.5; + } + 40% { transform: scale(1); opacity: 1; } +} + +@keyframes shimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + +@keyframes shimmerSlide { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + +@keyframes typingDot { + 0%, 80%, 100% { + transform: scale(0.8); + opacity: 0.4; + } 40% { - transform: scale(1.02) translateY(-4px); + transform: scale(1.1); + opacity: 1; } - 100% { - transform: scale(0.9) translateY(24px); +} + +@keyframes softPulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.6; } +} + +/* Legacy alias */ +@keyframes messageSlideIn { + from { opacity: 0; + transform: translateY(12px); } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* === App Shell === */ +.app-shell { + min-height: 100vh; + background: var(--bg-deep); + display: flex; + flex-direction: column; + color: var(--text-primary); + position: relative; + overflow-x: hidden; +} + +/* Atmospheric gradient overlays - warm amber glow */ +.app-shell::before { + content: ''; + position: fixed; + inset: 0; + background: + radial-gradient(ellipse 100% 60% at 30% -10%, rgba(245, 184, 76, 0.06), transparent 50%), + radial-gradient(ellipse 70% 50% at 90% 90%, rgba(184, 164, 232, 0.05), transparent 50%), + radial-gradient(ellipse 50% 40% at 10% 100%, rgba(245, 168, 98, 0.04), transparent 50%); + pointer-events: none; + z-index: 0; +} + +/* Spider Web Pattern - subtle overlay */ +.app-shell::after { + content: ''; + position: fixed; + inset: 0; + background-image: url('/spider-web-pattern.svg'); + background-size: 360px 360px; + background-repeat: repeat; + opacity: 0.02; + pointer-events: none; + z-index: 0; +} + +@media (prefers-color-scheme: light) { + .app-shell::before { + background: + radial-gradient(ellipse 100% 60% at 30% -10%, rgba(217, 119, 6, 0.05), transparent 50%), + radial-gradient(ellipse 70% 50% at 90% 90%, rgba(124, 58, 237, 0.04), transparent 50%), + radial-gradient(ellipse 50% 40% at 10% 100%, rgba(245, 158, 11, 0.03), transparent 50%); + } + .app-shell::after { + opacity: 0.015; + } +} + +.app-main { + flex: 1; + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 1.25rem clamp(1rem, 4vw, 2rem) calc(var(--bottom-nav-height) + 1.25rem); + min-height: 0; + position: relative; + z-index: 1; +} + +.app-main.chat-mode { + overflow: hidden; + padding: 0; + height: calc(100vh - var(--bottom-nav-height)); + box-sizing: border-box; +} + +/* === Alerts === */ +.alert { + border-radius: var(--radius-xl); + background: var(--bg-surface); + backdrop-filter: blur(var(--blur-lg)); + -webkit-backdrop-filter: blur(var(--blur-lg)); + border: 1px solid var(--rose-300); + padding: 0.75rem 1rem; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.9rem; + margin: 1rem clamp(1rem, 5vw, 2.5rem) 0; + color: var(--rose-400); + position: relative; + z-index: 10; +} + +.alert.inline-alert { + margin: 0; +} + +/* === Eyebrow Text === */ +.eyebrow { + font-size: 0.68rem; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--text-muted); + margin: 0; + font-weight: 500; + font-family: var(--font-body); +} + +/* === Badges === */ +.badge { + padding: 0.125rem 0.55rem; + border-radius: var(--radius-full); + border: 1px solid currentColor; + font-size: 0.72rem; + font-weight: 600; + font-variant-numeric: tabular-nums; +} + +/* === Pills === */ +.pill { + padding: 0.2rem 0.55rem; + border-radius: var(--radius-full); + border: 1px solid var(--border-glass-strong); + font-size: 0.72rem; + font-weight: 500; + background: var(--bg-elevated); + letter-spacing: 0.01em; +} + +.pill-soft { + background: var(--accent-soft); + border-color: var(--border-accent); + color: var(--accent); +} + +.pill-ghost { + background: transparent; + color: var(--text-secondary); + border-color: var(--border-glass); +} + +/* === Bottom Navigation === */ +.bottom-nav { + position: fixed; + left: 0; + right: 0; + bottom: 0; + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 0.2rem; + background: var(--bg-surface); + backdrop-filter: blur(var(--blur-xl)); + -webkit-backdrop-filter: blur(var(--blur-xl)); + border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; + padding: 0.5rem clamp(0.5rem, 3vw, 1.25rem) calc(0.5rem + env(safe-area-inset-bottom, 0px)); + box-shadow: + 0 -6px 32px rgba(0, 0, 0, 0.2), + 0 -2px 8px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 252, 245, 0.04); + z-index: 100; + border-top: 1px solid var(--border-glass); +} + +/* Subtle top glow line */ +.bottom-nav::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 40%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(245, 184, 76, 0.25), transparent); + pointer-events: none; +} + +.nav-item { + position: relative; + border: none; + background: transparent; + border-radius: var(--radius-md); + padding: 0.4rem 0.3rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.15rem; + font-size: 0.62rem; + font-weight: 500; + color: var(--text-muted); + transition: + color var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-spring); + overflow: hidden; + letter-spacing: 0.02em; +} + +/* Hover background effect - scales in */ +.nav-item::before { + content: ''; + position: absolute; + inset: 3px; + border-radius: var(--radius-sm); + background: var(--bg-elevated); + opacity: 0; + transform: scale(0.85); + transition: + opacity var(--duration-fast) var(--ease-smooth), + transform var(--duration-normal) var(--ease-spring); + z-index: -1; +} + +.nav-item:not(:disabled):hover { + color: var(--text-secondary); +} + +.nav-item:not(:disabled):hover::before { + opacity: 1; + transform: scale(1); +} + +.nav-item:not(:disabled):active { + transform: scale(0.93); + transition-duration: var(--duration-instant); +} + +.nav-item.active { + background: linear-gradient(145deg, var(--accent), var(--accent-warm)); + color: #0a0a0f; + font-weight: 600; + box-shadow: + 0 3px 16px var(--accent-glow), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +.nav-item.active::before { + display: none; +} + +.nav-item.active .nav-icon { + animation: springIn 0.28s var(--ease-spring); +} + +.nav-item:disabled { + opacity: 0.28; + cursor: not-allowed; +} + +.nav-item.new { + background: var(--accent-soft); + color: var(--accent); + border: 1.5px solid var(--border-accent); + transition: + color var(--duration-fast) var(--ease-smooth), + background var(--duration-fast) var(--ease-smooth), + border-color var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-spring), + box-shadow var(--duration-normal) var(--ease-smooth); +} + +.nav-item.new::before { + display: none; +} + +.nav-item.new:not(:disabled):hover { + background: linear-gradient(145deg, var(--accent), var(--accent-warm)); + color: #0a0a0f; + border-color: transparent; + transform: translateY(-2px); + box-shadow: 0 6px 20px var(--accent-glow); +} + +.nav-item.new:not(:disabled):active { + transform: translateY(0) scale(0.95); + box-shadow: 0 2px 10px var(--accent-glow); +} + +.nav-item.new.subtle { + background: transparent; + color: var(--text-muted); + border-color: var(--border-glass); +} + +.nav-item.new.subtle:not(:disabled):hover { + background: var(--accent-soft); + color: var(--accent); + border-color: var(--border-accent); +} + +.nav-icon { + transition: transform var(--duration-fast) var(--ease-spring); +} + +.nav-item:not(:disabled):hover .nav-icon { + transform: scale(1.08); +} + +.nav-icon svg { + width: 20px; + height: 20px; +} + +.nav-label { + font-size: 0.6rem; + font-weight: 500; + letter-spacing: 0.01em; +} + +/* === Chat View === */ +.chat-view { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + height: 100%; + overflow: hidden; + position: relative; + padding: 0 var(--chat-horizontal-padding); +} + +/* Chat Header with Logo */ +.chat-header { + display: flex; + align-items: center; + gap: 0.85rem; + padding: 1rem 0.6rem; + flex-shrink: 0; +} + +.chat-header-logo { + height: 28px; + width: auto; } -.app-shell { - min-height: 100vh; - background: var(--sand-50); +/* Chat Container - Premium Glass Card */ +.chat-container { + flex: 1; display: flex; flex-direction: column; - color: var(--ink-900); + min-height: 0; + background: var(--bg-surface); + backdrop-filter: blur(var(--blur-xl)); + -webkit-backdrop-filter: blur(var(--blur-xl)); + border-radius: var(--radius-xl); + border: 1px solid var(--border-glass); + box-shadow: + 0 4px 24px rgba(0, 0, 0, 0.12), + 0 12px 48px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 252, 245, 0.03); + overflow: hidden; + margin-bottom: calc(var(--chat-composer-height) + 0.85rem); + position: relative; } -.app-main { +/* Subtle top highlight - warm amber */ +.chat-container::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 50%; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + rgba(245, 184, 76, 0.3), + transparent + ); + pointer-events: none; +} + +/* Chat Log */ +.chat-log { flex: 1; + padding: 1.25rem; display: flex; flex-direction: column; - gap: 1.25rem; - padding: 1.5rem clamp(1rem, 6vw, 3rem) calc(var(--bottom-nav-height) + 2rem); + gap: 0.75rem; + overflow-y: auto; min-height: 0; } -.app-main.chat-mode { - overflow: hidden; - padding: 0.75rem var(--chat-horizontal-padding) - calc(var(--chat-composer-height) + env(safe-area-inset-bottom, 0px)); - height: calc(100vh - var(--bottom-nav-height)); - box-sizing: border-box; - background: var(--sand-50); +/* Chat Messages */ +.chat-line { + display: flex; + width: 100%; + animation: fadeInUp 0.32s var(--ease-smooth-out); } -.eyebrow { - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--ink-500); - margin: 0; +.chat-line.user { + justify-content: flex-end; + animation: fadeInUp 0.26s var(--ease-smooth-out); } -.connection-indicator { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.25rem 0.85rem; - border-radius: 999px; - border: 1.5px solid var(--ink-200); - background: var(--shell-soft); - font-size: 0.85rem; +.chat-line.assistant { + justify-content: flex-start; + animation: fadeInUp 0.32s var(--ease-smooth-out); } -.dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--ink-300); +.chat-bubble { + max-width: min(600px, 88%); + padding: 0.85rem 1.1rem; + border-radius: var(--radius-lg); + position: relative; + transition: + transform var(--duration-fast) var(--ease-spring), + box-shadow var(--duration-normal) var(--ease-smooth); } -.dot.online { - background: var(--green-500); +.chat-bubble:hover { + transform: scale(1.006); } -.alert { - border-radius: 18px; - background: var(--rose-50); - border: 1.5px solid var(--rose-200); - padding: 0.75rem 1rem; - display: flex; - justify-content: space-between; - align-items: center; - font-size: 0.9rem; - margin: 1rem clamp(1rem, 6vw, 3rem) 0; +/* User Message Bubble - Warm amber gradient */ +.chat-line.user .chat-bubble { + background: linear-gradient(145deg, var(--accent) 0%, var(--accent-warm) 100%); + color: #0a0a0f; + font-weight: 450; + border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg); + box-shadow: + 0 3px 12px rgba(245, 184, 76, 0.25), + 0 6px 24px rgba(245, 184, 76, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.2); } -.todo-view, -.notes-view { - display: flex; - flex-direction: column; - gap: 1.25rem; +.chat-line.user .chat-bubble:hover { + box-shadow: + 0 5px 16px rgba(245, 184, 76, 0.3), + 0 10px 32px rgba(245, 184, 76, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.2); } -.timescale-section { - display: flex; - flex-direction: column; - gap: 0.4rem; +/* Assistant Message Bubble */ +.chat-line.assistant .chat-bubble { + background: var(--bg-elevated); + backdrop-filter: blur(var(--blur-md)); + -webkit-backdrop-filter: blur(var(--blur-md)); + border: 1px solid var(--border-glass); + border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px; + color: var(--text-primary); } -.timescale-label { - margin: 0; - font-size: 1rem; - font-weight: 600; - color: var(--ink-600); +.chat-line.assistant .chat-bubble:hover { + border-color: var(--border-glass-strong); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } -.timescale-card { - background: var(--shell-bright); - border-radius: 24px; - border: 1.5px solid var(--ink-200); - padding: 0.9rem; - box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.02); +.chat-bubble p { + margin: 0; + white-space: pre-wrap; + line-height: 1.6; + font-size: 0.94rem; } -.timescale-card.archive-card { - background: var(--ink-50); +.chat-bubble.typing { + display: inline-flex; + align-items: center; + gap: 0.4rem; } -.timescale-head { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.5rem; +/* Markdown in Chat */ +.chat-markdown { + color: var(--text-primary); + line-height: 1.6; font-size: 0.92rem; - color: var(--ink-600); } -.badge { - padding: 0.1rem 0.7rem; - border-radius: 999px; - border: 1.5px solid currentColor; - font-size: 0.8rem; - font-weight: 700; +.chat-markdown p { + margin: 0 0 0.5em 0; } -.entry-stack { - display: flex; - flex-direction: column; - gap: 0.65rem; +.chat-markdown p:last-child { + margin-bottom: 0; } -.entry-card { - display: grid; - grid-template-columns: auto 1fr; - gap: 0.75rem; - align-items: stretch; +.chat-markdown h1, +.chat-markdown h2, +.chat-markdown h3, +.chat-markdown h4 { + margin: 0.7em 0 0.35em 0; + font-weight: 600; + line-height: 1.3; + color: var(--text-primary); + font-family: var(--font-display); } -.entry-check { - width: 34px; - height: 34px; - border-radius: 10px; - border: 1.5px solid var(--ink-300); - background: var(--shell); - font-size: 1rem; - font-weight: 700; - color: transparent; - transition: all 0.2s ease; +.chat-markdown h1:first-child, +.chat-markdown h2:first-child, +.chat-markdown h3:first-child { + margin-top: 0; } -.entry-check.checked { - background: var(--iris-500); - border-color: var(--iris-500); - color: #fff; - box-shadow: 0 3px 0 rgba(15, 23, 42, 0.18); -} +.chat-markdown h1 { font-size: 1.25em; } +.chat-markdown h2 { font-size: 1.12em; } +.chat-markdown h3 { font-size: 1.02em; } -.entry-body { - text-align: left; - border-radius: 20px; - border: 1.5px solid var(--ink-200); - padding: 0.75rem; - background: var(--shell-soft); - display: flex; - flex-direction: column; - gap: 0.35rem; +.chat-markdown ul, +.chat-markdown ol { + margin: 0.4em 0; + padding-left: 1.3em; } -.entry-headline { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 0.5rem; +.chat-markdown li { + margin: 0.15em 0; } -.entry-headline h3 { - margin: 0; - font-size: 1rem; +.chat-markdown code { + background: var(--bg-elevated); + color: var(--accent); + padding: 0.12em 0.35em; + border-radius: var(--radius-sm); + font-size: 0.85em; + font-family: 'SF Mono', Monaco, Consolas, monospace; } -.entry-time { - font-size: 0.9rem; - color: var(--iris-600); - font-weight: 600; +.chat-markdown pre { + background: var(--bg-card); + border-radius: var(--radius-sm); + padding: 0.65em 0.85em; + overflow-x: auto; + margin: 0.5em 0; + border: 1px solid var(--border-glass); } -.entry-meta-line, -.entry-summary { - margin: 0; - font-size: 0.9rem; - color: var(--ink-600); +.chat-markdown pre code { + background: none; + padding: 0; + font-size: 0.82em; + color: var(--text-primary); } -.entry-footer { - display: flex; - flex-wrap: wrap; - gap: 0.4rem; +.chat-markdown blockquote { + margin: 0.5em 0; + padding-left: 0.9em; + border-left: 2px solid var(--accent); + color: var(--text-secondary); + font-style: italic; } -.pill { - padding: 0.15rem 0.65rem; - border-radius: 999px; - border: 1.5px solid var(--ink-200); - font-size: 0.78rem; - font-weight: 600; +.chat-markdown table { + border-collapse: collapse; + margin: 0.5em 0; + width: 100%; + font-size: 0.9em; } -.pill-soft { - background: var(--iris-50); - border-color: var(--iris-200); - color: var(--iris-700); +.chat-markdown th, +.chat-markdown td { + border: 1px solid var(--border-glass-strong); + padding: 0.4em 0.65em; + text-align: left; } -.pill-ghost { - background: transparent; - color: var(--ink-600); +.chat-markdown th { + background: var(--bg-elevated); + font-weight: 600; } -.entry-card.archiving { - animation: archiveAway 0.65s forwards; +.chat-markdown a { + color: var(--accent); + text-decoration: underline; + text-underline-offset: 2px; + text-decoration-thickness: 1px; } -.archive-grid { - display: flex; - flex-wrap: wrap; - gap: 0.4rem; +.chat-markdown hr { + border: none; + border-top: 1px solid var(--border-glass); + margin: 0.85em 0; } -.archive-pill { - border: 1.5px solid var(--ink-200); - border-radius: 1rem; - padding: 0.35rem 0.65rem; +/* Processing State */ +.message-processing { display: inline-flex; align-items: center; - gap: 0.4rem; - background: var(--shell); - font-size: 0.85rem; - font-weight: 600; + gap: 0.5rem; + color: var(--text-secondary); } -.check-icon { - background: var(--green-500); - color: #fff; - width: 20px; - height: 20px; +.spinner { + position: relative; + display: inline-block; + width: 18px; + height: 18px; + border: 2px solid var(--border-glass-strong); + border-top-color: var(--accent); border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +/* Pulsing outer ring */ +.spinner::after { + content: ''; + position: absolute; + inset: -4px; + border-radius: 50%; + border: 1px solid var(--accent); + opacity: 0; + animation: spinnerPulse 1.5s ease-out infinite; +} + +.spinner.tiny { + width: 12px; + height: 12px; +} + +.spinner.tiny::after { + display: none; +} + +/* Typing indicator */ +.typing-indicator { display: inline-flex; align-items: center; - justify-content: center; - font-size: 0.8rem; + gap: 4px; + padding: 0.5rem 0; } -.archive-actions { - display: flex; - gap: 0.5rem; - margin-top: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid var(--ink-100); +.typing-dot { + width: 8px; + height: 8px; + background: var(--text-muted); + border-radius: 50%; + animation: typingDot 1.4s ease-in-out infinite; } -.archive-actions.centered { - justify-content: center; - border-top: none; - padding-top: 0; - margin-top: 0; +.typing-dot:nth-child(1) { animation-delay: 0s; } +.typing-dot:nth-child(2) { animation-delay: 0.2s; } +.typing-dot:nth-child(3) { animation-delay: 0.4s; } + +/* Skeleton loading styles */ +.skeleton { + background: linear-gradient( + 90deg, + var(--bg-elevated) 25%, + var(--bg-surface) 50%, + var(--bg-elevated) 75% + ); + background-size: 200% 100%; + animation: shimmerSlide 1.5s ease-in-out infinite; + border-radius: var(--radius-md); } -.archive-actions .badge { - background: var(--slate-500); - color: #fff; - padding: 0.1rem 0.4rem; - border-radius: 999px; - font-size: 0.75rem; - margin-left: 0.25rem; +.skeleton-text { + height: 1em; + margin-bottom: 0.5em; + border-radius: var(--radius-sm); } -.tap-hint { - font-size: 0.85rem; - text-align: center; - color: var(--ink-500); - margin: 0.5rem 0 0; +.skeleton-text.short { width: 60%; } +.skeleton-text.medium { width: 80%; } +.skeleton-text.full { width: 100%; } + +.skeleton-card { + height: 80px; + border-radius: var(--radius-lg); + margin-bottom: 0.6rem; } -.public-warning { - display: flex; - flex-direction: column; +/* Voice Notes */ +.voice-note { + display: inline-flex; align-items: center; - gap: 0.5rem; - font-size: 1rem; - text-align: center; - color: var(--ink-500); - margin: 0; - padding: 0.5rem; - background: rgba(255, 150, 50, 0.1); - border-radius: 0.5rem; + gap: 0.6rem; + padding: 0.6rem 0.75rem; + border-radius: var(--radius-md); + border: 1px solid var(--border-glass); + background: var(--bg-elevated); + color: var(--text-primary); + cursor: pointer; + width: 100%; + text-align: left; + transition: all var(--duration-fast) var(--ease-out); } -.public-warning .cta-button { - display: inline-block; - padding: 0.75rem 1.5rem; - background: var(--iris-600, #4f46e5); - color: white; - border: none; - border-radius: 12px; - text-decoration: none; - font-weight: 600; - font-size: 0.95rem; - cursor: pointer; - transition: background 0.15s ease; +.voice-note:hover { + background: var(--bg-card); + border-color: var(--border-glass-strong); } -.public-warning .cta-button:hover { - background: var(--iris-700, #4338ca); +.voice-icon { + font-size: 1.1rem; } -.notes-section { +.voice-copy { display: flex; flex-direction: column; - gap: 0.75rem; + gap: 0.1rem; } -.section-label { - margin: 0; - font-size: 1rem; +.voice-title { font-weight: 600; - color: var(--ink-600); + font-size: 0.9rem; } -.pinned-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - gap: 0.75rem; +.voice-subtitle { + font-size: 0.8rem; + color: var(--text-muted); } -.note-tile { - border: none; - border-radius: 24px; - padding: 1rem; - color: #fff; - text-align: left; - min-height: 150px; +/* Tool Calls */ +.tool-calls { display: flex; flex-direction: column; - gap: 0.45rem; - box-shadow: inset 0 -10px 25px rgba(0, 0, 0, 0.35); + gap: 0.3rem; + margin-top: 0.4rem; } -.note-tile h3 { - margin: 0; - font-size: 1.05rem; +.tool-call-chip { + display: inline-flex; + align-items: center; + gap: 0.4rem; + background: var(--bg-card); + border: 1px solid var(--border-glass); + border-radius: var(--radius-md); + padding: 0.35rem 0.6rem; + color: var(--text-secondary); + font-size: 0.85rem; } -.note-tile p { - margin: 0; +.tool-emoji { font-size: 0.9rem; - opacity: 0.9; } -.note-tile-tags { - font-size: 0.75rem; - letter-spacing: 0.08em; - text-transform: uppercase; - opacity: 0.85; +.tool-link { + color: var(--accent); + text-decoration: underline; + font-weight: 600; + background: transparent; + border: none; + cursor: pointer; + padding: 0; } -.note-links { - font-size: 0.8rem; - opacity: 0.85; +.tool-spinner { + width: 12px; + height: 12px; } -.empty { - color: var(--ink-500); - font-style: italic; +/* Empty State - Voice Recording */ +.voice-empty { + border: 2px dashed var(--border-glass-strong); + border-radius: var(--radius-xl); + padding: 2.5rem 2rem; + background: var(--bg-elevated); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + cursor: pointer; + transition: all var(--duration-normal) var(--ease-out); + min-height: 220px; + margin: 1.25rem; + position: relative; + overflow: hidden; } -.note-day { - display: flex; - flex-direction: column; - gap: 0.5rem; +/* Subtle gradient overlay */ +.voice-empty::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.05) 100%); + pointer-events: none; } -.note-row { - width: 100%; - border: 1.5px solid var(--ink-200); - border-radius: 22px; - padding: 0.9rem; +.voice-empty:hover { + border-color: var(--accent); + background: var(--accent-soft); + box-shadow: 0 0 0 4px rgba(245, 184, 76, 0.08); +} + +.voice-empty.recording { + border-color: var(--accent-rose); + border-style: solid; + background: var(--rose-50); + box-shadow: 0 0 0 6px var(--rose-100), 0 8px 32px rgba(249, 168, 212, 0.2); + animation: gentlePulse 2s ease-in-out infinite; +} + +.voice-empty.recording .voice-help { display: flex; flex-direction: column; - text-align: left; - background: var(--shell-bright); - gap: 0.35rem; - box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1); + align-items: center; + text-align: center; } -.note-row-head { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 0.5rem; +.voice-help h3 { + margin: 0.3rem 0; + font-family: var(--font-display); + font-size: 1.2rem; + font-weight: 400; + color: var(--text-primary); } -.note-row-head h3 { - margin: 0; - font-size: 1rem; +.voice-help p { + margin: 0.15rem 0; + color: var(--text-secondary); + font-size: 0.9rem; } -.timestamp { - font-size: 0.8rem; - color: var(--ink-500); +/* Waveform */ +.waveform-container { + display: flex; + align-items: center; + justify-content: center; + gap: 3px; + height: 60px; + padding: 0.5rem 0; } -.note-row-summary, -.note-row-links { - margin: 0; - font-size: 0.9rem; - color: var(--ink-600); +.waveform-bar { + width: 4px; + min-height: 4px; + background: var(--rose-400); + border-radius: 2px; + transition: height 0.05s ease-out; } -.bottom-nav { - position: fixed; - left: 0; - right: 0; - bottom: 0; - display: grid; - grid-template-columns: repeat(7, minmax(0, 1fr)); - gap: 0.35rem; - background: var(--shell); - border-radius: 28px 28px 0 0; - padding: 0.65rem clamp(0.5rem, 5vw, 1.75rem); - box-shadow: 0 -18px 45px rgba(15, 23, 42, 0.12); - z-index: 15; - border: 1px solid var(--ink-100); +.recording-hint { + color: var(--text-muted); + font-size: 0.85rem; + margin-top: 0.5rem; } -.nav-item { - border: none; - background: transparent; - border-radius: 22px; - padding: 0.3rem 0.2rem; +/* Public Warning */ +.public-warning { display: flex; flex-direction: column; align-items: center; - justify-content: center; - gap: 0.15rem; - font-size: 0.75rem; + gap: 0.75rem; + font-size: 0.85rem; + text-align: center; + color: var(--warning); + margin: 1rem; + padding: 1rem; + background: rgba(251, 191, 36, 0.08); + border: 1px solid rgba(251, 191, 36, 0.2); + border-radius: var(--radius-lg); +} + +.public-warning .cta-button { + display: inline-block; + padding: 0.65rem 1.25rem; + background: var(--accent); + color: white; + border-radius: var(--radius-md); + text-decoration: none; font-weight: 600; - color: var(--ink-500); + font-size: 0.9rem; + transition: all var(--duration-fast) var(--ease-out); } -.nav-item.active { - background: var(--iris-100); - color: var(--iris-700); - box-shadow: inset 0 0 0 1.5px var(--iris-400); +.public-warning .cta-button:hover { + background: var(--accent-hover); + transform: translateY(-1px); } -.nav-item:disabled { - opacity: 0.45; - cursor: not-allowed; +/* Suggested Prompts */ +.suggested-prompts { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.5rem; + padding: 0 1rem; + margin: 0 0 1rem 0; + animation: fadeInUp 0.38s var(--ease-smooth-out) 0.1s backwards; } -.nav-item.new { - grid-column: span 1; - background: var(--iris-100); - color: var(--iris-700); - box-shadow: inset 0 0 0 1.5px var(--iris-300); - flex-direction: column; - gap: 0.15rem; +.suggested-prompt { + padding: 0.55rem 0.9rem; + border-radius: var(--radius-full); + border: 1px solid var(--border-glass-strong); + background: var(--bg-elevated); + color: var(--text-secondary); font-size: 0.78rem; + font-weight: 500; + cursor: pointer; + transition: + background var(--duration-fast) var(--ease-smooth), + color var(--duration-fast) var(--ease-smooth), + border-color var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-spring), + box-shadow var(--duration-normal) var(--ease-smooth); + animation: fadeInUp 0.3s var(--ease-smooth-out) backwards; } -.nav-item.new.subtle { - background: transparent; - color: var(--ink-500); - box-shadow: none; +/* Staggered appearance */ +.suggested-prompt:nth-child(1) { animation-delay: 0.06s; } +.suggested-prompt:nth-child(2) { animation-delay: 0.1s; } +.suggested-prompt:nth-child(3) { animation-delay: 0.14s; } +.suggested-prompt:nth-child(4) { animation-delay: 0.18s; } + +.suggested-prompt:hover:not(:disabled) { + background: var(--accent-soft); + color: var(--accent); + border-color: var(--border-accent); + transform: translateY(-2px); + box-shadow: 0 4px 14px var(--accent-glow); } -.nav-icon svg { - width: 22px; - height: 22px; +.suggested-prompt:active:not(:disabled) { + transform: translateY(0) scale(0.96); + box-shadow: 0 2px 6px var(--accent-glow); + transition-duration: var(--duration-instant); } -.chat-view { +.suggested-prompt:disabled { + opacity: 0.35; + cursor: not-allowed; +} + +/* Chat Input Bar */ +.chat-input-bar { + position: fixed; + left: var(--chat-horizontal-padding); + right: var(--chat-horizontal-padding); + bottom: calc(var(--bottom-nav-height) + 0.5rem); display: flex; - flex-direction: column; + align-items: center; gap: 0.5rem; - flex: 1; - min-height: 0; - height: 100%; - max-height: none; - overflow: hidden; - position: relative; - padding-bottom: calc(var(--chat-composer-height) + 0.75rem); + padding: 0.5rem 0.5rem 0.5rem 1rem; + background: var(--bg-surface); + backdrop-filter: blur(var(--blur-xl)); + -webkit-backdrop-filter: blur(var(--blur-xl)); + border: 1px solid var(--border-glass); + border-radius: var(--radius-full); + z-index: 50; + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.15), + 0 8px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 252, 245, 0.03); } -.alert.inline-alert { - margin: 0; +.input-row { + display: flex; + gap: 0.5rem; + align-items: center; + flex: 1; } -.chat-log { +.input-row input { flex: 1; - background: transparent; - border-radius: 0; border: none; - padding: 0.5rem 0 1rem; + background: transparent; + padding: 0.6rem 0; + font-size: 0.92rem; + color: var(--text-primary); + font-family: var(--font-body); +} + +.input-row input::placeholder { + color: var(--text-muted); +} + +.input-row input:focus { + outline: none; +} + +.send-button { + width: 38px; + height: 38px; + min-width: 38px; + flex-shrink: 0; + padding: 0; + border-radius: 50%; display: flex; - flex-direction: column; - gap: 0.6rem; - overflow-y: auto; - min-height: 0; + align-items: center; + justify-content: center; + background: linear-gradient(145deg, var(--accent), var(--accent-warm)); + border: none; + color: #0a0a0f; + transition: + background var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-spring), + box-shadow var(--duration-normal) var(--ease-smooth); +} + +.send-button:hover:not(:disabled) { + transform: scale(1.1); + box-shadow: 0 4px 16px var(--accent-glow); +} + +.send-button:active:not(:disabled) { + transform: scale(0.92); + box-shadow: 0 2px 8px var(--accent-glow); + transition-duration: var(--duration-instant); +} + +.send-button:disabled { + background: var(--bg-elevated); + color: var(--text-muted); box-shadow: none; - color: var(--ink-900); } -.chat-line { - display: flex; - width: 100%; +.send-button svg { + width: 17px; + height: 17px; + transition: transform var(--duration-fast) var(--ease-spring); } -.chat-line.user { - justify-content: flex-end; +.send-button:hover:not(:disabled) svg { + transform: translateX(2px); } -.chat-line.assistant { - justify-content: flex-start; +button.ghost { + background: transparent; + border: 1px solid var(--border-glass-strong); + padding: 0.45rem 0.85rem; + border-radius: var(--radius-md); + color: var(--text-secondary); + font-weight: 500; + font-size: 0.85rem; } -.chat-bubble { - max-width: min(720px, 88%); - padding: 0.85rem 1rem; - border-radius: 16px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.03); - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); - color: var(--ink-900); +button.ghost:hover { + background: var(--bg-elevated); + border-color: var(--border-glass); } -.chat-line.user .chat-bubble { - background: var(--iris-600); - border-color: var(--iris-700); - color: #fff; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); +button.ghost.danger { + color: var(--danger); + border-color: var(--rose-300); } -.chat-bubble p { - margin: 0; - white-space: pre-wrap; +button.ghost.danger:hover { + background: var(--rose-50); } -/* Markdown rendering in chat */ -.chat-markdown { - color: var(--ink-900); - line-height: 1.6; +/* Trial Counter */ +.trial-counter-badge { + position: fixed; + top: 1rem; + right: 1rem; + padding: 0.4rem 0.75rem; + background: var(--bg-surface); + backdrop-filter: blur(var(--blur-lg)); + -webkit-backdrop-filter: blur(var(--blur-lg)); + border: 1px solid var(--border-glass); + border-radius: var(--radius-md); + font-size: 0.8rem; + font-weight: 600; + color: var(--text-secondary); + cursor: pointer; + z-index: 60; + transition: all var(--duration-fast) var(--ease-out); } -.chat-markdown p { - margin: 0 0 0.75em 0; +.trial-counter-badge:hover { + background: var(--bg-elevated); } -.chat-markdown p:last-child { - margin-bottom: 0; +/* Chat Modals */ +.chat-modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.55); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + z-index: 200; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + animation: fadeIn 0.18s var(--ease-smooth-out); } -.chat-markdown h1, -.chat-markdown h2, -.chat-markdown h3, -.chat-markdown h4, -.chat-markdown h5, -.chat-markdown h6 { - margin: 1em 0 0.5em 0; - font-weight: 600; - line-height: 1.3; - color: var(--ink-900); +.chat-modal { + width: 100%; + max-width: 520px; + background: var(--bg-card); + backdrop-filter: blur(var(--blur-xl)); + -webkit-backdrop-filter: blur(var(--blur-xl)); + color: var(--text-primary); + border-radius: var(--radius-lg); + padding: 1.15rem; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + 0 16px 48px rgba(0, 0, 0, 0.2); + border: 1px solid var(--border-glass); + animation: modalEnter 0.28s var(--ease-spring); } -.chat-markdown h1:first-child, -.chat-markdown h2:first-child, -.chat-markdown h3:first-child { - margin-top: 0; +.chat-modal__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.85rem; + margin-bottom: 0.85rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid var(--border-glass); } -.chat-markdown h1 { font-size: 1.4em; } -.chat-markdown h2 { font-size: 1.25em; } -.chat-markdown h3 { font-size: 1.1em; } - -.chat-markdown ul, -.chat-markdown ol { - margin: 0.5em 0; - padding-left: 1.5em; +.chat-modal__header h3 { + margin: 0; + font-family: var(--font-display); + font-size: 1.15rem; + font-weight: 400; } -.chat-markdown li { - margin: 0.25em 0; +.chat-modal__body { + display: flex; + flex-direction: column; + gap: 0.45rem; } -.chat-markdown code { - background: var(--shell-soft); - color: var(--ink-800); - padding: 0.15em 0.4em; - border-radius: 4px; - font-size: 0.9em; - font-family: 'SF Mono', Monaco, Consolas, monospace; +.modal-close { + width: 28px; + height: 28px; + border-radius: var(--radius-sm); + border: 1px solid var(--border-glass); + background: var(--bg-elevated); + color: var(--text-muted); + font-size: 1rem; + display: flex; + align-items: center; + justify-content: center; + transition: + background var(--duration-fast) var(--ease-smooth), + border-color var(--duration-fast) var(--ease-smooth), + color var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-spring); } -.chat-markdown pre { - background: var(--ink-100); - border-radius: 8px; - padding: 0.75em 1em; - overflow-x: auto; - margin: 0.75em 0; +.modal-close:hover { + background: var(--bg-card); + border-color: var(--border-glass-strong); + color: var(--text-secondary); + transform: scale(1.06); } -.chat-markdown pre code { - background: none; - padding: 0; - font-size: 0.85em; - color: var(--ink-800); +.modal-close:active { + transform: scale(0.95); + transition-duration: var(--duration-instant); } -.chat-markdown blockquote { - margin: 0.75em 0; - padding-left: 1em; - border-left: 3px solid var(--iris-400); - color: var(--ink-700); +.json-block { + background: var(--bg-elevated); + border: 1px solid var(--border-glass); + border-radius: var(--radius-sm); + padding: 0.65rem; + max-height: 180px; + overflow: auto; + font-family: 'SF Mono', Monaco, Consolas, monospace; + font-size: 0.75rem; + color: var(--text-secondary); + line-height: 1.5; } -.chat-markdown table { - border-collapse: collapse; - margin: 0.75em 0; - width: 100%; +/* === TODO View === */ +.todo-view, +.notes-view { + display: flex; + flex-direction: column; + gap: 1.75rem; } -.chat-markdown th, -.chat-markdown td { - border: 1px solid var(--ink-200); - padding: 0.5em 0.75em; - text-align: left; +.timescale-section { + display: flex; + flex-direction: column; + gap: 0.5rem; + animation: fadeInUp 0.4s var(--ease-smooth-out) backwards; } -.chat-markdown th { - background: var(--shell-soft); - font-weight: 600; -} +.timescale-section:nth-child(1) { animation-delay: 0ms; } +.timescale-section:nth-child(2) { animation-delay: 60ms; } +.timescale-section:nth-child(3) { animation-delay: 120ms; } +.timescale-section:nth-child(4) { animation-delay: 180ms; } +.timescale-section:nth-child(5) { animation-delay: 240ms; } +.timescale-section:nth-child(n+6) { animation-delay: 300ms; } -.chat-markdown a { - color: var(--iris-600); - text-decoration: underline; +.timescale-label { + margin: 0; + font-size: 1.45rem; + font-weight: 400; + font-family: var(--font-display); + color: var(--text-display); + letter-spacing: -0.015em; } -.chat-markdown hr { - border: none; - border-top: 1px solid var(--ink-200); - margin: 1em 0; +.timescale-card { + background: var(--bg-surface); + backdrop-filter: blur(var(--blur-lg)); + -webkit-backdrop-filter: blur(var(--blur-lg)); + border-radius: var(--radius-lg); + border: 1px solid var(--border-glass); + padding: 1rem; + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.08), + 0 12px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 252, 245, 0.03); } -.chat-bubble.typing { - display: inline-flex; - align-items: center; - gap: 0.35rem; +.timescale-card.archive-card { + background: var(--bg-elevated); + border-style: dashed; } -.message-processing { - display: inline-flex; +.timescale-head { + display: flex; + justify-content: space-between; align-items: center; gap: 0.5rem; - color: var(--ink-600); + font-size: 0.82rem; + color: var(--text-muted); + margin-bottom: 0.6rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--border-glass); } -.spinner { - display: inline-block; - width: 18px; - height: 18px; - border: 2px solid var(--ink-200); - border-top-color: var(--iris-500); - border-radius: 50%; - animation: spin 1s linear infinite; +.timescale-head p { + margin: 0; + font-style: italic; } -.spinner.tiny { - width: 14px; - height: 14px; +.entry-stack { + display: flex; + flex-direction: column; + gap: 0.5rem; } -@keyframes spin { - to { - transform: rotate(360deg); - } +/* Staggered entry animation for cards */ +.entry-card { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.6rem; + align-items: stretch; + animation: slideInStagger 0.3s var(--ease-smooth-out) backwards; } -.voice-note { - display: inline-flex; +.entry-stack .entry-card:nth-child(1) { animation-delay: 0ms; } +.entry-stack .entry-card:nth-child(2) { animation-delay: 35ms; } +.entry-stack .entry-card:nth-child(3) { animation-delay: 70ms; } +.entry-stack .entry-card:nth-child(4) { animation-delay: 105ms; } +.entry-stack .entry-card:nth-child(5) { animation-delay: 140ms; } +.entry-stack .entry-card:nth-child(n+6) { animation-delay: 175ms; } + +.entry-card.archiving { + animation: archiveAway 0.55s var(--ease-smooth) forwards; +} + +.entry-check { + position: relative; + width: 30px; + height: 30px; + border-radius: var(--radius-sm); + border: 2px solid var(--border-glass-strong); + background: var(--bg-elevated); + font-size: 0.9rem; + font-weight: 700; + color: transparent; + transition: + background var(--duration-fast) var(--ease-smooth), + border-color var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-spring), + box-shadow var(--duration-normal) var(--ease-smooth); + display: flex; align-items: center; - gap: 0.55rem; - padding: 0.55rem 0.65rem; - border-radius: 12px; - border: 1px solid var(--ink-200); - background: var(--shell-soft); - color: var(--ink-900); - cursor: pointer; - width: 100%; - text-align: left; + justify-content: center; + margin-top: 2px; } -.voice-icon { - font-size: 1.15rem; +/* Ripple effect container */ +.entry-check::after { + content: ''; + position: absolute; + inset: -4px; + border-radius: inherit; + pointer-events: none; } -.voice-copy { - display: flex; - flex-direction: column; - gap: 0.15rem; +.entry-check:hover { + border-color: var(--accent); + transform: scale(1.1); + background: var(--accent-soft); } -.voice-title { - font-weight: 700; +.entry-check:active { + transform: scale(0.9); + transition-duration: var(--duration-instant); } -.voice-subtitle { - font-size: 0.9rem; - color: var(--ink-600); +.entry-check.checked { + background: linear-gradient(145deg, var(--accent), var(--accent-warm)); + border-color: transparent; + color: #0a0a0f; + box-shadow: 0 3px 12px var(--accent-glow); + animation: checkPop 0.38s var(--ease-spring); } -.tool-calls { - display: flex; - flex-direction: column; - gap: 0.35rem; - margin-top: 0.35rem; +.entry-check.checked::after { + animation: checkRipple 0.48s var(--ease-smooth-out); } -.tool-call-chip { - display: inline-flex; - align-items: center; - gap: 0.4rem; - background: var(--shell-soft); - border: 1px solid var(--ink-200); - border-radius: 12px; - padding: 0.35rem 0.6rem; - color: var(--ink-700); +/* Checkmark spring animation */ +.entry-check.checked svg, +.entry-check.checked span { + animation: springIn 0.28s var(--ease-spring) 0.05s backwards; } -.tool-emoji { - font-size: 1rem; +.entry-body { + text-align: left; + border-radius: var(--radius-md); + border: 1px solid var(--border-glass); + padding: 0.75rem 0.9rem; + background: var(--bg-elevated); + display: flex; + flex-direction: column; + gap: 0.3rem; + transition: + background var(--duration-fast) var(--ease-smooth), + border-color var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-spring), + box-shadow var(--duration-normal) var(--ease-smooth); } -.tool-link { - color: var(--iris-600); - text-decoration: underline; - font-weight: 700; - background: transparent; - border: none; - cursor: pointer; - padding: 0; +.entry-body:hover { + background: var(--bg-card); + border-color: var(--border-glass-strong); + transform: translateX(3px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } -.tool-result-summary { - font-size: 0.85rem; - color: var(--ink-600); +.entry-body:active { + transform: translateX(0) scale(0.994); + transition-duration: var(--duration-instant); } -.suggested-prompts { - display: grid; - grid-template-columns: auto auto; - justify-content: center; +.entry-headline { + display: flex; + justify-content: space-between; + align-items: flex-start; gap: 0.5rem; - padding: 0 var(--chat-horizontal-padding); - margin-bottom: 2rem; } -@media (min-width: 768px) { - .suggested-prompts { - grid-template-columns: repeat(4, auto); - } +.entry-headline h3 { + margin: 0; + font-size: 0.95rem; + font-weight: 550; + color: var(--text-primary); + line-height: 1.4; } -.suggested-prompt { - padding: 0.5rem 0.85rem; - border-radius: 999px; - border: 1.5px solid var(--iris-200); - background: var(--iris-50); - color: var(--iris-700); - font-size: 0.85rem; - font-weight: 500; - cursor: pointer; - text-align: center; - transition: background 0.15s ease, border-color 0.15s ease; +.entry-time { + font-size: 0.72rem; + color: var(--accent); + font-weight: 600; + white-space: nowrap; + padding: 0.15rem 0.5rem; + background: var(--accent-soft); + border-radius: var(--radius-sm); + border: 1px solid var(--border-accent); } -.suggested-prompt:hover:not(:disabled) { - background: var(--iris-100); - border-color: var(--iris-400); +.entry-meta-line { + margin: 0; + font-size: 0.75rem; + color: var(--text-muted); + letter-spacing: 0.01em; } -.suggested-prompt:disabled { - opacity: 0.5; - cursor: not-allowed; +.entry-summary { + margin: 0; + font-size: 0.8rem; + color: var(--text-secondary); + line-height: 1.45; } -.chat-input-bar { - position: fixed; - left: var(--chat-horizontal-padding); - right: var(--chat-horizontal-padding); - bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); +.entry-footer { display: flex; - flex-direction: column; - gap: 0.35rem; - padding: 0.65rem 0.75rem; - background: var(--shell); - border: 1px solid var(--ink-100); - border-radius: 16px 16px 12px 12px; - z-index: 20; - box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25); - min-height: var(--chat-composer-height); - justify-content: center; + flex-wrap: wrap; + gap: 0.3rem; + margin-top: 0.15rem; } -.chat-meta { +/* Archive Grid */ +.archive-grid { display: flex; - gap: 0.35rem; flex-wrap: wrap; - align-items: center; + gap: 0.4rem; } -.input-row { - display: flex; - gap: 0.5rem; +.archive-pill { + border: 1px solid var(--border-glass); + border-radius: var(--radius-full); + padding: 0.35rem 0.65rem; + display: inline-flex; align-items: center; + gap: 0.35rem; + background: var(--bg-elevated); + font-size: 0.8rem; + font-weight: 500; + color: var(--text-secondary); + transition: + background var(--duration-fast) var(--ease-smooth), + border-color var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-spring), + box-shadow var(--duration-normal) var(--ease-smooth); } -.input-row input { - flex: 1; - border: 1.25px solid var(--ink-300); - border-radius: 12px; - padding: 0.85rem 1rem; - font-size: 1rem; - background: rgba(255, 255, 255, 0.07); - color: var(--ink-900); - box-shadow: none; +.archive-pill:hover { + background: var(--bg-card); + border-color: var(--border-glass-strong); + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } -.input-row input::placeholder { - color: var(--ink-500); +.archive-pill:active { + transform: translateY(0) scale(0.97); + transition-duration: var(--duration-instant); } - -.send-button { - width: 32px; - height: 32px; - min-width: 32px; - flex-shrink: 0; - padding: 0; +.check-icon { + background: var(--success); + color: white; + width: 18px; + height: 18px; border-radius: 50%; - display: flex; + display: inline-flex; align-items: center; justify-content: center; - background: var(--accent); - border: none; - color: white; + font-size: 0.7rem; } -.send-button:disabled { - background: var(--ink-300); - color: var(--ink-500); - opacity: 0.5; +.archive-actions { + display: flex; + gap: 0.5rem; + margin-top: 0.75rem; + padding-top: 0.75rem; + border-top: 1px solid var(--border-glass); +} + +.archive-actions.centered { + justify-content: center; + border-top: none; + padding-top: 0; + margin-top: 0; +} + +.archive-actions .badge { + background: var(--accent); + color: white; + padding: 0.1rem 0.4rem; + border-radius: var(--radius-full); + font-size: 0.7rem; + margin-left: 0.25rem; + border: none; } -.send-button svg { - width: 20px; - height: 20px; +.tap-hint { + font-size: 0.8rem; + text-align: center; + color: var(--text-muted); + margin: 0.5rem 0 0; } -.voice-empty { - border: 1.25px dashed rgba(255, 255, 255, 0.08); - border-radius: 18px; - padding: 1.25rem 1rem; - background: rgba(255, 255, 255, 0.02); +.public-warning { display: flex; + flex-direction: column; align-items: center; - justify-content: center; - text-align: left; + gap: 0.5rem; + font-size: 1rem; + text-align: center; + color: var(--ink-500); + margin: 0; + padding: 0.5rem; + background: rgba(255, 150, 50, 0.1); + border-radius: 0.5rem; +} + +.public-warning .cta-button { + display: inline-block; + padding: 0.75rem 1.5rem; + background: var(--iris-600, #4f46e5); + color: white; + border: none; + border-radius: 12px; + text-decoration: none; + font-weight: 600; + font-size: 0.95rem; cursor: pointer; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - min-height: 240px; + transition: background 0.15s ease; } -.voice-empty.recording { - border-color: var(--rose-400); - box-shadow: 0 0 0 3px var(--rose-100); +.public-warning .cta-button:hover { + background: var(--iris-700, #4338ca); } -.voice-empty.recording .voice-help { +/* === Notes View === */ + +.notes-section { display: flex; flex-direction: column; - align-items: center; - text-align: center; + gap: 0.75rem; } -.waveform-container { - display: flex; - align-items: center; - justify-content: center; - gap: 3px; - height: 80px; - padding: 1rem 0; +.section-label { + margin: 0; + font-size: 0.95rem; + font-weight: 600; + color: var(--text-secondary); } -.waveform-bar { - width: 4px; - min-height: 4px; - background: #fb7185; - border-radius: 2px; - transition: height 0.05s ease-out; +.pinned-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 0.75rem; } -.recording-hint { - color: var(--ink-500); - font-size: 0.875rem; - margin-top: 0.5rem; - text-align: center; +.note-tile { + border: none; + border-radius: var(--radius-xl); + padding: 1.15rem; + color: white; + text-align: left; + min-height: 150px; + display: flex; + flex-direction: column; + gap: 0.45rem; + box-shadow: + inset 0 -12px 30px rgba(0, 0, 0, 0.4), + 0 4px 16px rgba(0, 0, 0, 0.15); + transition: + transform var(--duration-normal) var(--ease-spring), + box-shadow var(--duration-normal) var(--ease-smooth); + animation: fadeInScale 0.42s var(--ease-smooth-out) backwards; + position: relative; + overflow: hidden; } -.voice-help h3 { - margin: 0.25rem 0; +/* Subtle shine overlay */ +.note-tile::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 50%; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent); + pointer-events: none; } -.voice-help p { - margin: 0.1rem 0; - color: var(--ink-600); +/* Staggered entrance for pinned notes */ +.pinned-grid .note-tile:nth-child(1) { animation-delay: 0ms; } +.pinned-grid .note-tile:nth-child(2) { animation-delay: 50ms; } +.pinned-grid .note-tile:nth-child(3) { animation-delay: 100ms; } +.pinned-grid .note-tile:nth-child(4) { animation-delay: 150ms; } +.pinned-grid .note-tile:nth-child(n+5) { animation-delay: 200ms; } + +.note-tile:hover { + transform: translateY(-5px) scale(1.02); + box-shadow: + inset 0 -12px 30px rgba(0, 0, 0, 0.4), + 0 16px 36px rgba(0, 0, 0, 0.28); } -.recording-indicator { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.4rem 0.72rem; - background: var(--rose-100); - color: var(--rose-700); - border-radius: 999px; - font-weight: 600; - margin-top: 0.5rem; +.note-tile:active { + transform: translateY(-2px) scale(1); + transition-duration: var(--duration-instant); } -.pulse-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--ink-400); - animation: pulse 1.2s infinite ease-in-out; +.note-tile h3 { + margin: 0; + font-size: 1.05rem; + font-weight: 550; + position: relative; } -.pulse-dot:nth-child(2) { - animation-delay: 0.15s; +.note-tile p { + margin: 0; + font-size: 0.86rem; + opacity: 0.82; + line-height: 1.45; + position: relative; } -.pulse-dot:nth-child(3) { - animation-delay: 0.3s; +.note-tile-tags { + font-size: 0.7rem; + letter-spacing: 0.1em; + text-transform: uppercase; + opacity: 0.7; + font-weight: 500; + position: relative; } -@keyframes pulse { - 0%, - 80%, - 100% { - transform: scale(0.85); - opacity: 0.5; - } - 40% { - transform: scale(1); - opacity: 1; - } +.note-links { + font-size: 0.75rem; + opacity: 0.7; + margin-top: auto; + position: relative; } -.tool-chip { - display: inline-flex; - margin-top: 0.45rem; - padding: 0.25rem 0.55rem; - border-radius: 10px; - background: var(--shell); - color: var(--ink-600); - font-size: 0.8rem; +.empty { + color: var(--text-muted); + font-style: italic; } -.chat-modal-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.45); - z-index: 40; +.note-day { display: flex; - align-items: center; - justify-content: center; - padding: 1rem; + flex-direction: column; + gap: 0.5rem; } -.chat-modal { +.note-row { width: 100%; - max-width: 720px; - background: var(--shell); - color: var(--ink-900); - border-radius: 18px; + border: 1px solid var(--border-glass); + border-radius: var(--radius-xl); padding: 1rem; - box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); - border: 1.5px solid var(--ink-200); -} - -.chat-modal__header { display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; + flex-direction: column; + text-align: left; + background: var(--bg-surface); + backdrop-filter: blur(var(--blur-md)); + -webkit-backdrop-filter: blur(var(--blur-md)); + gap: 0.35rem; + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 252, 245, 0.02); + transition: + background var(--duration-fast) var(--ease-smooth), + border-color var(--duration-fast) var(--ease-smooth), + transform var(--duration-fast) var(--ease-spring), + box-shadow var(--duration-normal) var(--ease-smooth); + animation: fadeInUp 0.36s var(--ease-smooth-out) backwards; } -.chat-modal__header h3 { - margin: 0; +/* Staggered entrance for note rows */ +.note-day .note-row:nth-child(1) { animation-delay: 0ms; } +.note-day .note-row:nth-child(2) { animation-delay: 35ms; } +.note-day .note-row:nth-child(3) { animation-delay: 70ms; } +.note-day .note-row:nth-child(n+4) { animation-delay: 105ms; } + +.note-row:hover { + background: var(--bg-elevated); + border-color: var(--border-glass-strong); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } -.chat-modal__body { - display: flex; - flex-direction: column; - gap: 0.4rem; +.note-row:active { + transform: translateY(0) scale(0.994); + transition-duration: var(--duration-instant); } -.modal-close { - width: 34px; - height: 34px; - border-radius: 12px; - border: 1.5px solid var(--ink-200); - background: var(--shell-soft); - color: var(--ink-700); - font-size: 1.1rem; +.note-row-head { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 0.5rem; } -.trial-counter-badge { - position: fixed; - top: 1rem; - right: 1rem; - padding: 0.375rem 0.75rem; - background: var(--shell); - border: 1.5px solid var(--ink-200); - border-radius: 12px; - font-size: 0.875rem; - font-weight: 600; - color: var(--ink-600); - cursor: pointer; - z-index: 30; +.note-row-head h3 { + margin: 0; + font-size: 0.95rem; + color: var(--text-primary); } -.trial-counter-badge:hover { - background: var(--shell-soft); +.timestamp { + font-size: 0.75rem; + color: var(--text-muted); } -.json-block { - background: var(--shell-soft); - border: 1.5px solid var(--ink-200); - border-radius: 12px; - padding: 0.75rem; - max-height: 240px; - overflow: auto; - font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; - font-size: 0.9rem; - color: var(--ink-700); +.note-row-summary, +.note-row-links { + margin: 0; + font-size: 0.82rem; + color: var(--text-secondary); } +/* === Sheet/Panel Overlays === */ .sheet-overlay { position: fixed; inset: 0; - padding: clamp(0.5rem, 3vw, 1.5rem); - background: rgba(15, 23, 42, 0.45); + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: stretch; - z-index: 20; + z-index: 150; + animation: fadeIn 0.2s var(--ease-smooth-out); } .entry-overlay, @@ -1089,24 +1953,29 @@ width: 100%; max-width: none; border-radius: 0; - background: var(--shell); - padding: calc(1rem + env(safe-area-inset-top, 0px)) clamp(1rem, 5vw, 3rem) + background: var(--bg-card); + backdrop-filter: blur(var(--blur-xl)); + -webkit-backdrop-filter: blur(var(--blur-xl)); + padding: calc(1rem + env(safe-area-inset-top, 0px)) clamp(1rem, 5vw, 2.5rem) calc(1.25rem + env(safe-area-inset-bottom, 0px)); - box-shadow: none; min-height: 100%; overflow: hidden; + animation: slideInFromRight 0.35s var(--ease-expressive); } .archive-panel { width: 100%; height: 100%; - background: var(--shell); - color: var(--ink-900); + background: var(--bg-card); + backdrop-filter: blur(var(--blur-xl)); + -webkit-backdrop-filter: blur(var(--blur-xl)); + color: var(--text-primary); display: flex; flex-direction: column; padding: calc(1rem + env(safe-area-inset-top, 0px)) clamp(1rem, 5vw, 2rem) calc(1rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; + animation: slideInFromRight 0.35s var(--ease-expressive); } .archive-list { @@ -1117,9 +1986,9 @@ .archive-item { display: flex; align-items: center; - min-height: 56px; - padding: 0.75rem 0; - border-bottom: 1px solid var(--ink-100); + min-height: 54px; + padding: 0.7rem 0; + border-bottom: 1px solid var(--border-glass); gap: 0.75rem; } @@ -1145,9 +2014,9 @@ .archive-item-info h4 { margin: 0; - font-size: 1rem; + font-size: 0.95rem; font-weight: 600; - color: var(--ink-900); + color: var(--text-primary); line-height: 1.4; white-space: nowrap; overflow: hidden; @@ -1155,25 +2024,26 @@ } .archive-item-info p { - margin: 0.25rem 0 0; - font-size: 0.875rem; - color: var(--ink-600); + margin: 0.2rem 0 0; + font-size: 0.82rem; + color: var(--text-secondary); line-height: 1.4; } .archive-item-delete { padding: 0.5rem; - font-size: 1.25rem; + font-size: 1.2rem; line-height: 1; flex-shrink: 0; } .empty-message { text-align: center; - color: var(--ink-500); + color: var(--text-muted); padding: 2rem 0; } +/* Panel Header */ .panel-header { display: flex; align-items: center; @@ -1185,21 +2055,23 @@ flex: 1; display: flex; flex-direction: column; - gap: 0.3rem; + gap: 0.25rem; } .panel-title h2 { margin: 0; - font-size: 1.45rem; + font-size: 1.35rem; + color: var(--text-primary); } .panel-title input { border: none; - border-bottom: 1.5px solid var(--ink-200); + border-bottom: 1.5px solid var(--border-glass-strong); padding: 0.15rem 0; - font-size: 1.25rem; + font-size: 1.2rem; font-weight: 600; width: 100%; + background: transparent; } .panel-content { @@ -1212,23 +2084,24 @@ } .meta-bar { + display: flex; gap: 0.5rem; flex-wrap: wrap; } .status-select { padding: 0.5rem 1rem; - border-radius: 999px; - border: 1.5px solid var(--ink-200); - background: var(--shell-soft); - color: var(--ink-900); - font-size: 0.875rem; + border-radius: var(--radius-full); + border: 1px solid var(--border-glass); + background: var(--bg-elevated); + color: var(--text-primary); + font-size: 0.85rem; font-weight: 500; cursor: pointer; } .status-select:focus { - outline: 2px solid var(--iris-400); + outline: 2px solid var(--accent); outline-offset: 2px; } @@ -1244,7 +2117,7 @@ .meta-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; } @@ -1255,61 +2128,83 @@ } .linked-notes button { - border-radius: 16px; - border: 1.5px solid var(--ink-200); - background: var(--shell-soft); - padding: 0.65rem; + border-radius: var(--radius-lg); + border: 1px solid var(--border-glass); + background: var(--bg-elevated); + padding: 0.6rem; text-align: left; + transition: all var(--duration-fast) var(--ease-out); +} + +.linked-notes button:hover { + background: var(--bg-card); + border-color: var(--border-glass-strong); } .icon-button { - border: 1.5px solid var(--ink-200); - border-radius: 12px; + border: 1px solid var(--border-glass); + border-radius: var(--radius-md); width: 36px; height: 36px; - background: var(--shell-soft); + background: var(--bg-elevated); + color: var(--text-secondary); font-size: 1rem; + display: flex; + align-items: center; + justify-content: center; +} + +.icon-button:hover { + background: var(--bg-card); } +/* Pill Switch */ .pill-switch { display: flex; - gap: 0.3rem; - border-radius: 999px; - border: 1.5px solid var(--ink-200); - background: var(--shell-soft); + gap: 0.25rem; + border-radius: var(--radius-full); + border: 1px solid var(--border-glass); + background: var(--bg-elevated); padding: 0.2rem; } .pill-switch button { border: none; - border-radius: 999px; + border-radius: var(--radius-full); background: transparent; - padding: 0.35rem 0.6rem; + padding: 0.35rem 0.65rem; font-weight: 600; - font-size: 0.85rem; - color: var(--ink-500); + font-size: 0.8rem; + color: var(--text-muted); + transition: all var(--duration-fast) var(--ease-out); +} + +.pill-switch button:hover { + color: var(--text-secondary); } .pill-switch button.active { - background: var(--iris-600); - color: #fff; + background: var(--accent); + color: white; } .pill-switch.compact { align-self: flex-start; } +/* Note Editor */ .note-editor textarea, .note-editor .note-preview { - border-radius: 22px; - border: 1.5px solid var(--ink-200); - background: var(--shell-soft); + border-radius: var(--radius-xl); + border: 1px solid var(--border-glass); + background: var(--bg-elevated); padding: 0.85rem; font: inherit; + color: var(--text-primary); } .note-editor textarea { - min-height: 220px; + min-height: 200px; flex: 1; resize: vertical; } @@ -1317,12 +2212,12 @@ .note-editor { display: flex; flex-direction: column; - gap: 0.8rem; + gap: 0.75rem; flex: 1; } .note-preview { - min-height: 220px; + min-height: 200px; border-style: dashed; overflow-y: auto; } @@ -1335,14 +2230,14 @@ } .save-indicator { - font-size: 0.85rem; - color: var(--ink-500); + font-size: 0.8rem; + color: var(--text-muted); } .note-metadata { display: flex; flex-direction: column; - gap: 0.9rem; + gap: 0.85rem; } .meta-field input, @@ -1352,16 +2247,14 @@ padding: 0; font: inherit; width: 100%; - color: var(--ink-900); + color: var(--text-primary); } -/* iOS Safari datetime-local fix */ .meta-field input[type="datetime-local"] { -webkit-appearance: none; appearance: none; - min-height: 44px; + min-height: 42px; padding: 0.5rem 0; - color-scheme: light dark; } .date-input-wrapper { @@ -1380,9 +2273,9 @@ left: 0; top: 50%; transform: translateY(-50%); - width: 20px; - height: 20px; - background-color: var(--ink-400); + width: 18px; + height: 18px; + background-color: var(--text-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; @@ -1391,11 +2284,11 @@ .date-input-wrapper.empty::after { content: 'Tap to set'; position: absolute; - left: 26px; + left: 24px; top: 50%; transform: translateY(-50%); - color: var(--ink-500); - font-size: 0.9rem; + color: var(--text-muted); + font-size: 0.85rem; pointer-events: none; } @@ -1404,18 +2297,18 @@ } .meta-field textarea { - min-height: 80px; + min-height: 70px; resize: vertical; } .meta-field { - border-radius: 22px; - border: 1.5px solid var(--ink-200); - background: var(--shell-soft); - padding: 0.75rem; + border-radius: var(--radius-xl); + border: 1px solid var(--border-glass); + background: var(--bg-elevated); + padding: 0.7rem; display: flex; flex-direction: column; - gap: 0.35rem; + gap: 0.3rem; } .toggle { @@ -1423,14 +2316,15 @@ align-items: center; gap: 0.5rem; font-weight: 600; + color: var(--text-secondary); } .link-list { - max-height: 200px; + max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; - gap: 0.55rem; + gap: 0.5rem; padding: 0.25rem; } @@ -1438,49 +2332,48 @@ display: grid; grid-template-columns: auto 1fr; align-items: flex-start; - gap: 0.65rem; + gap: 0.6rem; padding: 0.55rem 0.65rem; - border-radius: 14px; - border: 1.5px solid var(--ink-200); - background: var(--shell-soft); + border-radius: var(--radius-lg); + border: 1px solid var(--border-glass); + background: var(--bg-elevated); cursor: pointer; - transition: border-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease; + transition: all var(--duration-fast) var(--ease-out); } .link-list label:hover { - border-color: var(--ink-100); - transform: translateY(-1px); - box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06); + border-color: var(--border-glass-strong); + background: var(--bg-card); } .link-list label:has(input:checked) { - border-color: var(--iris-500); - box-shadow: 0 0 0 1px var(--iris-500); + border-color: var(--accent); + box-shadow: 0 0 0 1px var(--accent); } .link-list input[type='checkbox'] { appearance: none; - width: 20px; - height: 20px; - border-radius: 8px; - border: 1.5px solid var(--ink-300); - background: var(--shell); + width: 18px; + height: 18px; + border-radius: 6px; + border: 1.5px solid var(--border-glass-strong); + background: var(--bg-card); display: grid; place-items: center; margin-top: 1px; - transition: all 0.18s ease; + transition: all var(--duration-fast) var(--ease-out); } .link-list input[type='checkbox']:checked { - background: var(--iris-500); - border-color: var(--iris-500); - box-shadow: 0 3px 10px rgba(79, 70, 229, 0.35); - color: #fff; + background: var(--accent); + border-color: var(--accent); + box-shadow: 0 2px 8px var(--accent-glow); + color: white; } .link-list input[type='checkbox']::after { - content: '✓'; - font-size: 0.95rem; + content: '\2713'; + font-size: 0.85rem; color: inherit; transform: scale(0.6); } @@ -1490,15 +2383,15 @@ } .link-list input[type='checkbox']:focus-visible { - outline: 2px solid var(--iris-400); + outline: 2px solid var(--accent); outline-offset: 2px; } .link-list label span { display: block; line-height: 1.35; - font-weight: 700; - color: var(--ink-700); + font-weight: 600; + color: var(--text-secondary); } .sheet-actions { @@ -1507,20 +2400,23 @@ gap: 0.6rem; } -button.ghost { - background: transparent; - border: 1.5px solid var(--ink-200); -} +/* === Responsive === */ +@media (max-width: 520px) { + .app-main { + padding: 1rem 1rem calc(var(--bottom-nav-height) + 1rem); + } -button.ghost.danger { - color: var(--rose-600); - border-color: var(--rose-300); -} + .chat-view { + padding: 0 0.75rem; + } -button.ghost.danger:hover { - background: var(--rose-50); + .chat-input-bar { + left: 0.75rem; + right: 0.75rem; + } } +/* === Textarea & Input Base === */ textarea, input, button { @@ -1535,8 +2431,52 @@ button:disabled { cursor: not-allowed; } -@media (max-width: 520px) { - .app-main { - padding: 1rem 1rem 7rem; +/* === Performance Optimizations === */ + +/* GPU acceleration for frequently animated elements */ +.entry-card, +.chat-line, +.note-tile, +.note-row, +.chat-modal, +.entry-panel, +.note-panel, +.archive-panel { + transform: translateZ(0); + backface-visibility: hidden; +} + +/* Animation containment to prevent layout thrashing */ +.entry-stack, +.chat-log, +.pinned-grid, +.archive-list { + contain: layout style; +} + +/* === Mobile Touch Feedback === */ +@media (hover: none) and (pointer: coarse) { + /* Faster touch feedback on mobile */ + .nav-item:active, + .entry-body:active, + .note-tile:active, + .note-row:active, + .suggested-prompt:active, + .archive-pill:active { + transform: scale(0.97); + transition-duration: var(--duration-instant); + } + + /* Reduce animation complexity on mobile for battery */ + .nav-item.active { + animation: none; + box-shadow: 0 2px 12px var(--accent-glow); + } + + /* Simpler hover states (touch doesn't hover well) */ + .entry-body:hover, + .note-row:hover { + transform: none; + box-shadow: none; } } diff --git a/ui/src/ChatView.tsx b/ui/src/ChatView.tsx index 79ca681..6566b52 100644 --- a/ui/src/ChatView.tsx +++ b/ui/src/ChatView.tsx @@ -106,15 +106,15 @@ const SUGGESTED_PROMPTS = [ value: 'How can you help me manage my todos and notes?', }, { - label: 'Make a task', + label: 'Make task', value: 'Create a new task assigned to me to have lunch with Mr Anderson tomorrow at noon', }, { - label: 'Summarize upcoming tasks', + label: 'Summarize next tasks', value: 'What tasks do I have coming up this week?', }, { - label: 'Make a note', + label: 'Make note', value: 'Create a new note: grocery list, chicken, carrots, celery, lemon, orzo, onion, garlic, broth, link https://pipingpotcurry.com/lemon-chicken-orzo-pressure-cooker#:~:text=Equipment', }, ]; @@ -936,15 +936,17 @@ export default function ChatView({ resetToken }: ChatViewProps) { )} -
+ {/* Frosted Glass Chat Container */} +
+
{visibleMessages.length === 0 ? ( <>
@@ -966,7 +968,7 @@ export default function ChatView({ resetToken }: ChatViewProps) { ) : ( <>

Tap anywhere to dictate

-

Tap again to transcribe and send

+

Tap again to send

)}
@@ -1107,24 +1109,25 @@ export default function ChatView({ resetToken }: ChatViewProps) {
)} -
- {visibleMessages.length === 0 && ( -
- {SUGGESTED_PROMPTS.map((prompt, index) => ( - - ))} + {visibleMessages.length === 0 && ( +
+ {SUGGESTED_PROMPTS.map((prompt, index) => ( + + ))} +
+ )}
- )} + {/* End chat-container */}
@@ -1138,7 +1141,7 @@ export default function ChatView({ resetToken }: ChatViewProps) { void handleSend(); } }} - placeholder={recording ? 'Recording…' : 'Type a message'} + placeholder={recording ? 'Recording…' : 'Type your message...'} disabled={isLoading} /> {isLoading ? ( @@ -1148,7 +1151,7 @@ export default function ChatView({ resetToken }: ChatViewProps) { ) : ( )} @@ -1183,7 +1186,7 @@ export default function ChatView({ resetToken }: ChatViewProps) { {isPublicMode && trialModal.visible && ( setTrialModal({ visible: false, isLimitReached: false, retryAfterSeconds: null })} diff --git a/ui/src/TrialModal.css b/ui/src/TrialModal.css index 6d0d258..c7e052f 100644 --- a/ui/src/TrialModal.css +++ b/ui/src/TrialModal.css @@ -2,12 +2,14 @@ position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); - z-index: 50; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + z-index: 200; display: flex; align-items: center; justify-content: center; - padding: 1rem; - animation: trialFadeIn 0.2s ease-out; + padding: 1.25rem; + animation: trialFadeIn 0.2s var(--ease-smooth-out, ease-out); } @keyframes trialFadeIn { @@ -21,24 +23,31 @@ .trial-modal { width: 100%; - max-width: 420px; + max-width: 400px; background: var(--shell); color: var(--ink-900); - border-radius: 24px; + border-radius: var(--radius-xl, 20px); padding: 1.5rem; - box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4); - border: 1.5px solid var(--iris-300, #a5b4fc); - animation: trialSlideUp 0.25s ease-out; + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.35), + 0 24px 64px rgba(0, 0, 0, 0.25), + inset 0 1px 0 rgba(255, 252, 245, 0.04); + border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.06)); + animation: trialSlideUp 0.32s var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275)); } @keyframes trialSlideUp { - from { + 0% { opacity: 0; - transform: translateY(20px); + transform: scale(0.94) translateY(20px); } - to { + 65% { opacity: 1; - transform: translateY(0); + transform: scale(1.02) translateY(-3px); + } + 100% { + opacity: 1; + transform: scale(1) translateY(0); } } @@ -46,7 +55,7 @@ display: flex; flex-direction: column; align-items: center; - gap: 0.75rem; + gap: 0.7rem; text-align: center; position: relative; } @@ -54,67 +63,96 @@ .trial-modal__header h2 { margin: 0; font-size: 1.35rem; + font-family: var(--font-display, Georgia, serif); + font-weight: 400; color: var(--ink-900); + letter-spacing: -0.01em; } .trial-modal__header .modal-close { position: absolute; - top: -0.5rem; - right: -0.5rem; - width: 32px; - height: 32px; - border-radius: 10px; - border: 1.5px solid var(--ink-200); + top: -0.35rem; + right: -0.35rem; + width: 28px; + height: 28px; + border-radius: var(--radius-sm, 6px); + border: 1px solid var(--ink-200); background: var(--shell-soft); - color: var(--ink-600); - font-size: 1.25rem; + color: var(--ink-500); + font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; + transition: + background var(--duration-fast, 120ms) var(--ease-smooth, ease), + border-color var(--duration-fast, 120ms) var(--ease-smooth, ease), + color var(--duration-fast, 120ms) var(--ease-smooth, ease), + transform var(--duration-fast, 120ms) var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275)); } .trial-modal__header .modal-close:hover { background: var(--ink-100); + color: var(--ink-700); + transform: scale(1.06); +} + +.trial-modal__header .modal-close:active { + transform: scale(0.95); + transition-duration: var(--duration-instant, 75ms); } .trial-modal__body { - margin-top: 1rem; + margin-top: 0.85rem; text-align: center; } .trial-modal__body .trial-count { - margin: 0 0 0.5rem; + margin: 0 0 0.4rem; color: var(--ink-700); - font-size: 1.1rem; + font-size: 1rem; font-weight: 500; + font-variant-numeric: tabular-nums; } .trial-modal__body .trial-retry { - margin: 0 0 1.25rem; + margin: 0 0 1rem; color: var(--ink-600); - line-height: 1.6; + line-height: 1.55; + font-size: 0.9rem; } .trial-cta { - background: var(--iris-50, #eef2ff); - border: 1.5px solid var(--iris-200, #c7d2fe); - border-radius: 16px; + background: var(--accent-soft, rgba(245, 184, 76, 0.08)); + border: 1px solid var(--border-accent, rgba(245, 184, 76, 0.2)); + border-radius: var(--radius-lg, 16px); padding: 1rem; margin-top: 1rem; + animation: fadeInUp 0.3s var(--ease-smooth-out, ease-out) 0.08s backwards; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } .trial-cta .cta-header { - margin: 0 0 0.25rem; - font-weight: 600; - font-size: 1rem; + margin: 0 0 0.2rem; + font-weight: 500; + font-size: 0.92rem; color: var(--ink-800); } .trial-cta .cta-text { - margin: 0 0 0.75rem; + margin: 0 0 0.65rem; color: var(--ink-600); - font-size: 0.9rem; + font-size: 0.82rem; line-height: 1.5; } @@ -124,7 +162,7 @@ } .trial-cta .hubspot-form-container { - transition: opacity 0.3s ease; + transition: opacity 0.3s var(--ease-smooth, ease); } .trial-cta .hubspot-form-container.loading { @@ -166,12 +204,15 @@ font-size: 0.9rem; background: var(--shell); color: var(--ink-900); - transition: border-color 0.15s ease; + transition: + border-color var(--duration-fast, 150ms) var(--ease-smooth, ease), + box-shadow var(--duration-normal, 200ms) var(--ease-smooth, ease); } .trial-cta .hs-form .hs-input:focus { outline: none; border-color: var(--iris-400, #818cf8); + box-shadow: 0 0 0 3px var(--iris-100, rgba(129, 140, 248, 0.2)); } .trial-cta .hs-form .hs-input::placeholder { @@ -183,20 +224,54 @@ } .trial-cta .hs-form .hs-button { + position: relative; width: 100%; - padding: 0.625rem 1rem; - background: var(--iris-600, #4f46e5); - color: white; + padding: 0.65rem 1rem; + background: linear-gradient(145deg, var(--accent, #f5b84c), var(--accent-warm, #f5a862)); + color: #0a0a0f; border: none; - border-radius: 8px; + border-radius: var(--radius-md, 12px); font-weight: 600; - font-size: 0.9rem; + font-size: 0.88rem; cursor: pointer; - transition: background 0.15s ease; + overflow: hidden; + transition: + transform var(--duration-fast, 100ms) var(--ease-spring, ease), + box-shadow var(--duration-normal, 160ms) var(--ease-smooth, ease); } .trial-cta .hs-form .hs-button:hover { - background: var(--iris-700, #4338ca); + transform: translateY(-2px); + box-shadow: 0 6px 16px var(--accent-glow, rgba(245, 184, 76, 0.35)); +} + +.trial-cta .hs-form .hs-button:active { + transform: translateY(0) scale(0.96); + transition-duration: var(--duration-instant, 60ms); +} + +/* Subtle shine animation on button */ +.trial-cta .hs-form .hs-button::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transform: translateX(-100%); + animation: buttonShine 4s ease-in-out infinite 1.5s; +} + +@keyframes buttonShine { + 0%, 100% { + transform: translateX(-100%); + } + 50% { + transform: translateX(100%); + } } .trial-cta .hs-form .hs-error-msgs { @@ -211,47 +286,60 @@ } .trial-cta .hs-form .submitted-message { - padding: 0.75rem; - background: var(--iris-50, #eef2ff); - border-radius: 8px; - color: var(--iris-700, #4338ca); - font-size: 0.9rem; + padding: 0.85rem; + background: var(--accent-soft, rgba(245, 184, 76, 0.1)); + border-radius: var(--radius-md, 12px); + color: var(--accent, #f5b84c); + font-size: 0.92rem; text-align: center; + animation: fadeInUp 0.3s var(--ease-smooth-out, ease-out); + border: 1px solid var(--border-accent, rgba(245, 184, 76, 0.2)); } .trial-share { - margin-top: 1rem; - padding-top: 1rem; + margin-top: 0.85rem; + padding-top: 0.85rem; border-top: 1px solid var(--ink-200); + animation: fadeInUp 0.28s var(--ease-smooth-out, ease-out) 0.12s backwards; } .trial-share .share-text { - margin: 0 0 0.75rem; + margin: 0 0 0.55rem; color: var(--ink-500); - font-size: 0.85rem; + font-size: 0.78rem; + font-style: italic; } .trial-share .share-button { display: inline-flex; align-items: center; - gap: 0.5rem; - padding: 0.6rem 1rem; - border-radius: 10px; + gap: 0.4rem; + padding: 0.5rem 0.85rem; + border-radius: var(--radius-sm, 6px); text-decoration: none; font-weight: 500; - font-size: 0.9rem; - transition: background 0.15s ease, transform 0.1s ease; + font-size: 0.82rem; + transition: + background var(--duration-fast, 120ms) var(--ease-smooth, ease), + transform var(--duration-fast, 120ms) var(--ease-spring, ease), + box-shadow var(--duration-normal, 180ms) var(--ease-smooth, ease); } .trial-share .share-button:hover { transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.trial-share .share-button:active { + transform: translateY(0) scale(0.97); + transition-duration: var(--duration-instant, 75ms); } .trial-share .share-button.twitter { - background: #000; + background: #0f0f0f; color: #fff; } .trial-share .share-button.twitter:hover { - background: #333; + background: #1c1c1c; } diff --git a/ui/src/TrialModal.tsx b/ui/src/TrialModal.tsx index 0f0a315..b4044c9 100644 --- a/ui/src/TrialModal.tsx +++ b/ui/src/TrialModal.tsx @@ -1,4 +1,5 @@ import { useEffect, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; import './TrialModal.css'; const HUBSPOT_FORM_SCRIPT_SRC = "https://js.hsforms.net/forms/embed/developer/46995186.js"; @@ -84,7 +85,7 @@ export default function TrialModal({ return `${minutes} minutes`; }; - return ( + return createPortal(
e.stopPropagation()}>
@@ -142,6 +143,7 @@ export default function TrialModal({
-
+ , + document.body ); } diff --git a/ui/src/index.css b/ui/src/index.css index a2d2d6d..c903057 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -1,51 +1,260 @@ +/* ========================================================================== + Spider UI - Refined Editorial Design System + A warm, luxurious dark interface with editorial sophistication + ========================================================================== */ + +/* === Google Fonts Import === */ +/* Fraunces: A gorgeous display serif with optical sizing and soft, warm character */ +/* Plus Jakarta Sans: A clean geometric sans with excellent legibility */ +@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap'); + :root { - --slate-50: #f8fafc; - --slate-100: #f1f5f9; - --slate-200: #e2e8f0; - --slate-300: #cbd5f5; - --slate-500: #64748b; - --slate-600: #475569; - --slate-900: #0f172a; - --iris-50: #eef2ff; - --iris-100: #e0e7ff; - --iris-200: #c7d2fe; - --iris-400: #818cf8; - --iris-500: #6366f1; - --iris-600: #4f46e5; - --iris-700: #4338ca; - --amber-500: #fbbf24; - --cyan-500: #06b6d4; - --mauve-500: #c084fc; - --rose-50: #fff1f2; - --rose-200: #fecdd3; - --green-500: #22c55e; - --sand-50: #f5f2ec; - --ink-50: #f6f5fb; - --ink-100: #eceaf7; - --ink-200: #e1dfef; - --ink-300: #cfcbe3; - --ink-500: #6c6a7e; - --ink-600: #4c4a63; - --ink-700: #2f2d3d; - --ink-900: #1b1928; - --shell: #ffffff; - --shell-soft: #f9f7ff; - --shell-bright: #fffeff; - --bottom-nav-height: 5.5rem; - --chat-composer-height: 4.25rem; - --chat-horizontal-padding: 0.9rem; - - font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - color: var(--ink-900); - background-color: var(--sand-50); - line-height: 1.5; + /* === Dark Theme (Default) === */ + /* A sophisticated dark palette with warm amber and soft violet accents */ + + /* Background Layers - Deep indigo-black with purple undertones */ + --bg-deep: #0a0a0f; + --bg-surface: rgba(18, 16, 28, 0.88); + --bg-elevated: rgba(32, 28, 48, 0.72); + --bg-card: rgba(24, 22, 38, 0.94); + --bg-hover: rgba(40, 36, 58, 0.6); + + /* Primary Accent - Warm amber/gold as primary for warmth and energy */ + --accent: #f5b84c; + --accent-hover: #fad185; + --accent-soft: rgba(245, 184, 76, 0.12); + --accent-glow: rgba(245, 184, 76, 0.3); + --accent-intense: #ffcc5c; + + /* Secondary Accent - Soft lavender for subtle highlights */ + --accent-secondary: #b8a4e8; + --accent-secondary-soft: rgba(184, 164, 232, 0.12); + --accent-secondary-glow: rgba(184, 164, 232, 0.25); + + /* Tertiary accents for variety */ + --accent-warm: #f5a862; + --accent-cool: #7dd3fc; + --accent-rose: #f9a8d4; + --accent-mint: #6ee7b7; + + /* Text - Warm off-whites with excellent hierarchy */ + --text-primary: #f4f2ef; + --text-secondary: rgba(244, 242, 239, 0.72); + --text-muted: rgba(244, 242, 239, 0.42); + --text-display: #fffcf5; + + /* Borders & Glass Effects - Refined with warm tints */ + --border-glass: rgba(255, 252, 245, 0.06); + --border-glass-strong: rgba(255, 252, 245, 0.12); + --border-accent: rgba(245, 184, 76, 0.35); + --border-secondary: rgba(184, 164, 232, 0.3); + --glow-accent: 0 0 28px rgba(245, 184, 76, 0.25); + --glow-secondary: 0 0 24px rgba(184, 164, 232, 0.2); + + /* Status Colors - Sophisticated palette */ + --success: #6ee7b7; + --success-soft: rgba(110, 231, 183, 0.12); + --warning: #fcd34d; + --warning-soft: rgba(252, 211, 77, 0.12); + --danger: #fca5a5; + --danger-soft: rgba(252, 165, 165, 0.12); + --info: #7dd3fc; + --info-soft: rgba(125, 211, 252, 0.12); + + /* Legacy Compatibility - Now mapped to amber/lavender */ + --iris-50: rgba(184, 164, 232, 0.08); + --iris-100: rgba(184, 164, 232, 0.12); + --iris-200: rgba(184, 164, 232, 0.2); + --iris-300: rgba(184, 164, 232, 0.3); + --iris-400: #c8b8f0; + --iris-500: #b8a4e8; + --iris-600: #9d85d8; + --iris-700: #8268c8; + --rose-50: rgba(249, 168, 212, 0.08); + --rose-100: rgba(249, 168, 212, 0.12); + --rose-200: rgba(249, 168, 212, 0.2); + --rose-300: rgba(249, 168, 212, 0.35); + --rose-400: #f9a8d4; + --rose-500: #f472b6; + --rose-600: #ec4899; + --rose-700: #db2777; + --green-500: #6ee7b7; + --amber-500: #f5b84c; + --cyan-500: #7dd3fc; + --mauve-500: #c8b8f0; + + /* Shell/Surface colors (legacy) - Updated with warm tints */ + --shell: rgba(18, 16, 28, 0.96); + --shell-soft: rgba(24, 22, 38, 0.75); + --shell-bright: rgba(36, 32, 52, 0.85); + --sand-50: var(--bg-deep); + --ink-50: rgba(255, 252, 245, 0.03); + --ink-100: rgba(255, 252, 245, 0.05); + --ink-200: rgba(255, 252, 245, 0.08); + --ink-300: rgba(255, 252, 245, 0.12); + --ink-400: rgba(255, 252, 245, 0.25); + --ink-500: rgba(255, 252, 245, 0.45); + --ink-600: rgba(255, 252, 245, 0.65); + --ink-700: rgba(255, 252, 245, 0.8); + --ink-800: rgba(255, 252, 245, 0.9); + --ink-900: #f4f2ef; + --slate-50: rgba(255, 252, 245, 0.03); + --slate-100: rgba(255, 252, 245, 0.05); + --slate-200: rgba(255, 252, 245, 0.08); + --slate-300: rgba(255, 252, 245, 0.12); + --slate-500: rgba(255, 252, 245, 0.45); + --slate-600: rgba(255, 252, 245, 0.65); + --slate-900: #f4f2ef; + + /* Layout */ + --bottom-nav-height: 4.75rem; + --chat-composer-height: 4rem; + --chat-horizontal-padding: 1rem; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 16px; + --radius-xl: 20px; + --radius-2xl: 24px; + --radius-full: 9999px; + + /* Blur - More dramatic glass effects */ + --blur-sm: 10px; + --blur-md: 18px; + --blur-lg: 24px; + --blur-xl: 32px; + + /* Transitions - Refined Easing Curves */ + --ease-out: cubic-bezier(0.22, 1, 0.36, 1); + --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); + --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); + --ease-spring-soft: cubic-bezier(0.4, 1.4, 0.55, 1); + --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --ease-smooth-out: cubic-bezier(0, 0, 0.2, 1); + --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1); + --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); + + /* Transitions - Durations */ + --duration-instant: 60ms; + --duration-fast: 100ms; + --duration-normal: 160ms; + --duration-slow: 260ms; + --duration-slower: 360ms; + --duration-enter: 200ms; + --duration-exit: 150ms; + + /* Typography - Warm Editorial System */ + --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; + --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; + + font-family: var(--font-body); + color: var(--text-primary); + background-color: var(--bg-deep); + line-height: 1.6; font-weight: 400; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; - color-scheme: light; + -moz-osx-font-smoothing: grayscale; + color-scheme: dark; + letter-spacing: -0.008em; } +/* === Light Theme === */ +@media (prefers-color-scheme: light) { + :root { + /* Background Layers - Warm cream/ivory tones */ + --bg-deep: #faf8f4; + --bg-surface: rgba(255, 253, 250, 0.9); + --bg-elevated: rgba(255, 255, 255, 0.96); + --bg-card: rgba(255, 254, 252, 0.98); + --bg-hover: rgba(245, 240, 230, 0.5); + + /* Accent Colors - Rich amber primary */ + --accent: #d97706; + --accent-hover: #b45309; + --accent-soft: rgba(217, 119, 6, 0.1); + --accent-glow: rgba(217, 119, 6, 0.2); + --accent-intense: #f59e0b; + + /* Secondary Accent - Deeper violet in light mode */ + --accent-secondary: #7c3aed; + --accent-secondary-soft: rgba(124, 58, 237, 0.1); + --accent-secondary-glow: rgba(124, 58, 237, 0.18); + + /* Text - Rich warm darks */ + --text-primary: #1c1917; + --text-secondary: rgba(28, 25, 23, 0.72); + --text-muted: rgba(28, 25, 23, 0.48); + --text-display: #0c0a09; + + /* Borders & Glass Effects */ + --border-glass: rgba(28, 25, 23, 0.06); + --border-glass-strong: rgba(28, 25, 23, 0.12); + --border-accent: rgba(217, 119, 6, 0.3); + --border-secondary: rgba(124, 58, 237, 0.25); + --glow-accent: 0 0 24px rgba(217, 119, 6, 0.18); + --glow-secondary: 0 0 20px rgba(124, 58, 237, 0.15); + + /* Status Colors - Light mode optimized */ + --success: #059669; + --success-soft: rgba(5, 150, 105, 0.1); + --warning: #d97706; + --warning-soft: rgba(217, 119, 6, 0.1); + --danger: #dc2626; + --danger-soft: rgba(220, 38, 38, 0.1); + --info: #0284c7; + --info-soft: rgba(2, 132, 199, 0.1); + + /* Legacy Compatibility */ + --iris-50: rgba(124, 58, 237, 0.06); + --iris-100: rgba(124, 58, 237, 0.1); + --iris-200: rgba(124, 58, 237, 0.16); + --iris-300: rgba(124, 58, 237, 0.25); + --iris-400: #a78bfa; + --iris-500: #8b5cf6; + --iris-600: #7c3aed; + --iris-700: #6d28d9; + --rose-50: rgba(225, 29, 72, 0.06); + --rose-100: rgba(225, 29, 72, 0.1); + --rose-200: rgba(225, 29, 72, 0.16); + --rose-300: rgba(225, 29, 72, 0.28); + --rose-400: #fb7185; + --rose-500: #f43f5e; + --rose-600: #e11d48; + --rose-700: #be123c; + + /* Shell/Surface colors (legacy) */ + --shell: rgba(255, 253, 250, 0.96); + --shell-soft: rgba(255, 254, 252, 0.8); + --shell-bright: rgba(255, 255, 255, 0.98); + --sand-50: var(--bg-deep); + --ink-50: rgba(28, 25, 23, 0.02); + --ink-100: rgba(28, 25, 23, 0.04); + --ink-200: rgba(28, 25, 23, 0.07); + --ink-300: rgba(28, 25, 23, 0.1); + --ink-400: rgba(28, 25, 23, 0.22); + --ink-500: rgba(28, 25, 23, 0.42); + --ink-600: rgba(28, 25, 23, 0.62); + --ink-700: rgba(28, 25, 23, 0.78); + --ink-800: rgba(28, 25, 23, 0.88); + --ink-900: #1c1917; + --slate-50: rgba(28, 25, 23, 0.02); + --slate-100: rgba(28, 25, 23, 0.04); + --slate-200: rgba(28, 25, 23, 0.07); + --slate-300: rgba(28, 25, 23, 0.1); + --slate-500: rgba(28, 25, 23, 0.42); + --slate-600: rgba(28, 25, 23, 0.62); + --slate-900: #1c1917; + --amber-500: #d97706; + --green-500: #059669; + --cyan-500: #0284c7; + --mauve-500: #8b5cf6; + + color-scheme: light; + } +} + +/* === Base Reset === */ *, *::before, *::after { @@ -54,61 +263,23 @@ body { margin: 0; - background: var(--sand-50); -} - -@media (prefers-color-scheme: dark) { - :root { - --slate-50: #121323; - --slate-100: #181a2e; - --slate-200: #1f2139; - --slate-300: #2b2d48; - --slate-500: #94a3b8; - --slate-600: #c7d2fe; - --slate-900: #f1f5ff; - --iris-50: #1a1c39; - --iris-100: #202356; - --iris-200: #272b77; - --iris-400: #8a9bff; - --iris-500: #9eaafc; - --iris-600: #b5bcff; - --iris-700: #d3d7ff; - --amber-500: #fcd34d; - --cyan-500: #22d3ee; - --mauve-500: #c4b5fd; - --rose-50: #3a1224; - --rose-200: #7f1d45; - --green-500: #4ade80; - --ink-50: #0d0d1c; - --ink-100: #1f1d31; - --ink-200: #26243a; - --ink-300: #302d46; - --ink-500: #b8b5d0; - --ink-600: #d9d7ee; - --ink-700: #f2f1ff; - --ink-900: #ffffff; - --shell: #111027; - --shell-soft: #171534; - --shell-bright: #1d1b3f; - --sand-50: #050512; - color-scheme: dark; - } - - body { - background: var(--sand-50); - color: var(--ink-900); - } + background: var(--bg-deep); + color: var(--text-primary); + min-height: 100vh; } #root { min-height: 100vh; } +/* === Base Elements === */ button { font: inherit; cursor: pointer; border: none; background: transparent; + color: inherit; + transition: all var(--duration-fast) var(--ease-out); } button:disabled { @@ -116,7 +287,80 @@ button:disabled { cursor: not-allowed; } +button:not(:disabled):active { + transform: scale(0.97); +} + textarea, input { font: inherit; + color: inherit; +} + +a { + color: var(--accent); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-out); +} + +a:hover { + color: var(--accent-hover); +} + +/* === Utility Classes === */ +.glass { + background: var(--bg-surface); + backdrop-filter: blur(var(--blur-lg)); + -webkit-backdrop-filter: blur(var(--blur-lg)); + border: 1px solid var(--border-glass); +} + +.glass-strong { + background: var(--bg-card); + backdrop-filter: blur(var(--blur-xl)); + -webkit-backdrop-filter: blur(var(--blur-xl)); + border: 1px solid var(--border-glass-strong); +} + +/* === Scrollbar Styling === */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: var(--ink-300); + border-radius: var(--radius-full); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--ink-400); +} + +/* === Focus Styles === */ +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +/* === Selection === */ +::selection { + background: var(--accent-soft); + color: var(--text-primary); +} + +/* === Reduced Motion Support === */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } }