@tailwind base; @tailwind components; @tailwind utilities; /* `:host` is included so the light defaults also resolve inside the WordPress plugin's Shadow DOM, where `:root` does not match (it only matches in the main document). Dark vars live on `.dark`, which is applied to the shadow mount node, so they already resolve in both contexts. */ :root, :host { /* Neutral surfaces — clean, slightly cool, faint borders (Linear/Vercel feel). bg sits a step below white so surfaces/cards visibly float. */ --app-bg: 242 244 248; --app-surface: 255 255 255; --app-surface-muted: 235 238 243; --app-surface-hover: 228 233 240; /* Elevated = popovers/menus (white + shadow in light). Selected = a very subtle, mostly-neutral active/selected fill (replaces strong cyan tints on rows/bubbles). */ --app-elevated: 255 255 255; --app-selected: 228 236 244; --app-border: 223 228 235; --app-border-strong: 201 208 219; --app-text: 21 26 36; --app-muted: 80 91 109; /* A stronger muted — for nav/section labels that need more presence than `muted` but shouldn't read as full body text. Used consistently across the sidebar. */ --app-muted-strong: 55 66 86; /* Primary accent — Atiba sky-cyan (#37a2d5 / #6ec1e4 from the brand mark). Use for primary/user actions, focus rings, and the brand identity. */ --app-brand: 41 151 209; --app-brand-strong: 23 116 166; --app-brand-text: 13 95 138; --app-brand-subtle: 224 242 251; /* Filled-button cyan — dark enough for white text (WCAG AA) in both modes */ --app-brand-button: 18 110 158; --app-brand-button-hover: 13 88 128; --app-danger: 220 38 38; --app-danger-strong: 185 28 28; --app-danger-text: 153 27 27; --app-success: 22 163 74; --app-success-strong: 21 128 61; --app-success-text: 21 128 61; --app-warning: 217 119 6; --app-warning-text: 146 64 14; --app-shadow: 203 213 226; } .dark { /* Cool near-black base with a faint blue cast; surfaces step up for depth. */ --app-bg: 14 16 21; --app-surface: 24 28 35; --app-surface-muted: 32 37 46; --app-surface-hover: 42 48 59; --app-elevated: 34 40 50; --app-selected: 31 40 53; --app-border: 42 49 61; --app-border-strong: 61 70 85; --app-text: 236 240 246; --app-muted: 170 181 198; --app-muted-strong: 215 222 232; /* Primary accent — lighter Atiba cyan for dark surfaces */ --app-brand: 96 192 230; --app-brand-strong: 56 162 213; --app-brand-text: 137 207 236; --app-brand-subtle: 19 47 62; --app-brand-button: 32 130 178; --app-brand-button-hover: 45 150 200; --app-danger: 248 113 113; --app-danger-strong: 239 68 68; --app-danger-text: 252 165 165; --app-success: 74 222 128; --app-success-strong: 34 197 94; --app-success-text: 134 239 172; --app-warning: 251 191 36; --app-warning-text: 253 230 138; --app-shadow: 0 0 0; } /* Web baseline: make % heights resolve and keep the SPA at viewport height */ html, body, #root { height: 100%; } body { margin: 0; background: rgb(var(--app-bg)); color: rgb(var(--app-text)); } /* Prefer dynamic viewport units for mobile browser UI chrome */ #root { min-height: 100dvh; } /* iOS Safari safe fill */ @supports (-webkit-touch-callout: none) { #root { min-height: -webkit-fill-available; } } /* Help % heights in the first React child resolve cleanly */ #root { display: flex; flex-direction: column; } #root > * { flex: 1 1 auto; min-height: 0; } @layer utilities { .text-balance { text-wrap: balance; } /* Fade content into transparent at the top edge (e.g. long "working" timelines disappearing upward into themselves). */ .fade-mask-top { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.75rem); mask-image: linear-gradient(to bottom, transparent, #000 2.75rem); } /* Gentle fade-in for content appearing after a loading state. */ .animate-fade-in { animation: msgFadeIn 0.3s ease both; } } .markdown { @apply prose prose-invert max-w-none; font-size: 0.95rem; line-height: 1.65; } /* Consistent, slightly tighter paragraph rhythm (prose default 1.25em felt loose and collapsed oddly with per-paragraph block splitting). */ .markdown p { margin: 0.7em 0; } /* Faint, hairline horizontal rule instead of prose's heavy default. */ .markdown hr { margin: 1.5em 0; border: 0; border-top: 1px solid rgb(var(--app-border)); } /* Tailwind Typography's first-child reset targets `.prose > :first-child`, but we apply prose via `@apply prose` on `.markdown` (there is no `.prose` element), so that reset never matches and the first paragraph keeps its ~1.25em top margin — pushing the reply text down and leaving the avatar floating above it. The reply is split into one `.markdown` block PER paragraph, so we must only flatten the FIRST block (not every block, or inter-paragraph spacing collapses). Walk the first-descendant chain so it works for static (`.markdown > p`) and streaming (`.chat-stream-in > .markdown > p`) alike. */ .chat-content > :first-child, .chat-content > :first-child > :first-child, .chat-content > :first-child > :first-child > :first-child { margin-top: 0; } /* Tables: fix wrapping, spacing, and overflow */ .markdown table { table-layout: fixed; width: 100%; border-collapse: collapse; } .markdown thead th, .markdown tbody td { word-wrap: break-word; overflow-wrap: anywhere; white-space: normal; vertical-align: top; } .markdown thead th, .markdown tbody td { padding: 0.4rem 0.7rem; } /* Faint hairline borders to match the `---` rule (prose defaults are too heavy). */ .markdown th, .markdown td { border: 1px solid rgb(var(--app-border)); } .markdown thead th { background: rgb(var(--app-surface-muted)); font-weight: 600; } .markdown table p { margin: 0; /* remove extra spacing inside cells */ } .markdown table ul, .markdown table ol { margin: 0.25rem 0; /* compact lists in cells */ padding-left: 1.1rem; } .markdown table code { white-space: pre-wrap; /* allow inline code to wrap */ word-break: break-word; } .code-block-container .hljs { color: rgb(var(--app-text)); background: transparent; white-space: pre; } .code-block-container .hljs-comment, .code-block-container .hljs-quote { color: rgb(var(--app-muted)); font-style: italic; } .code-block-container .hljs-keyword, .code-block-container .hljs-selector-tag, .code-block-container .hljs-subst { color: #7c3aed; } .code-block-container .hljs-literal, .code-block-container .hljs-number, .code-block-container .hljs-tag .hljs-attr, .code-block-container .hljs-template-variable, .code-block-container .hljs-variable { color: #b45309; } .code-block-container .hljs-doctag, .code-block-container .hljs-string, .code-block-container .hljs-title, .code-block-container .hljs-section, .code-block-container .hljs-selector-id { color: #047857; } .code-block-container .hljs-type, .code-block-container .hljs-class .hljs-title, .code-block-container .hljs-built_in, .code-block-container .hljs-builtin-name { color: #0f766e; } .code-block-container .hljs-attr, .code-block-container .hljs-attribute, .code-block-container .hljs-name, .code-block-container .hljs-selector-class, .code-block-container .hljs-selector-attr, .code-block-container .hljs-selector-pseudo { color: #2563eb; } .code-block-container .hljs-symbol, .code-block-container .hljs-bullet, .code-block-container .hljs-link, .code-block-container .hljs-meta { color: #be123c; } .code-block-container .hljs-deletion { color: #b91c1c; } .code-block-container .hljs-addition { color: #15803d; } .dark .code-block-container .hljs-keyword, .dark .code-block-container .hljs-selector-tag, .dark .code-block-container .hljs-subst { color: #c4b5fd; } .dark .code-block-container .hljs-literal, .dark .code-block-container .hljs-number, .dark .code-block-container .hljs-tag .hljs-attr, .dark .code-block-container .hljs-template-variable, .dark .code-block-container .hljs-variable { color: #fbbf24; } .dark .code-block-container .hljs-doctag, .dark .code-block-container .hljs-string, .dark .code-block-container .hljs-title, .dark .code-block-container .hljs-section, .dark .code-block-container .hljs-selector-id { color: #86efac; } .dark .code-block-container .hljs-type, .dark .code-block-container .hljs-class .hljs-title, .dark .code-block-container .hljs-built_in, .dark .code-block-container .hljs-builtin-name { color: #5eead4; } .dark .code-block-container .hljs-attr, .dark .code-block-container .hljs-attribute, .dark .code-block-container .hljs-name, .dark .code-block-container .hljs-selector-class, .dark .code-block-container .hljs-selector-attr, .dark .code-block-container .hljs-selector-pseudo { color: #93c5fd; } .dark .code-block-container .hljs-symbol, .dark .code-block-container .hljs-bullet, .dark .code-block-container .hljs-link, .dark .code-block-container .hljs-meta { color: #fda4af; } .dark .code-block-container .hljs-deletion { color: #fca5a5; } .dark .code-block-container .hljs-addition { color: #86efac; } .markdown a, .markdown a:any-link { color: rgb(var(--app-brand-text) / 0.8) !important; font-weight: inherit !important; /* only bold if the markdown itself is bold */ text-decoration: none !important; text-underline-offset: 2px; } .markdown a:hover { text-decoration: underline !important; color: rgb(var(--app-brand-text)) !important; } @media (max-width: 640px) { .markdown { font-size: 0.875rem; /* smaller text size on mobile */ } } .prose { --tw-prose-body: inherit; --tw-prose-headings: inherit; --tw-prose-lead: inherit; --tw-prose-links: inherit; --tw-prose-bold: inherit; --tw-prose-counters: inherit; --tw-prose-bullets: inherit; --tw-prose-hr: inherit; --tw-prose-quotes: inherit; --tw-prose-quote-borders: inherit; --tw-prose-captions: inherit; --tw-prose-code: inherit; --tw-prose-pre-code: inherit; --tw-prose-pre-bg: inherit; --tw-prose-th-borders: inherit; --tw-prose-td-borders: inherit; } /* Shared fade-in with a subtle rise — used by the sidebar list, the account avatar, and streaming text. */ @keyframes msgFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* Opacity-only fade (no slide) for the main chat surface — conversation messages and the new-chat home — which should appear without any vertical movement. */ @keyframes fadeOpacity { from { opacity: 0; } to { opacity: 1; } } .animate-fade-opacity { animation: fadeOpacity 0.3s ease both; } .chat-stream-in > .markdown > *, .chat-stream-in > .code-block-container { animation: msgFadeIn 0.45s ease both; } @keyframes gradient-wave-gray { 0% { background-position: 200% 50%; } 100% { background-position: -200% 50%; } } .text-gradient-gray { background: linear-gradient( to right, #333333, #666666, #b0b0b0, #666666, #333333 ); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: gradient-wave-gray 6s linear infinite; } .dark .text-gradient-gray { background: linear-gradient( to right, #9c9c9c, #d0d0d0, #f0f0f0, #d0d0d0, #9c9c9c ); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: gradient-wave-gray 6s linear infinite; } /* Soft brand glow behind the empty-state hero mark */ .hero-glow { background-image: radial-gradient( 60% 70% at 50% 0%, rgb(var(--app-brand) / 0.12), transparent 70% ); } /* Brand wash anchored to the top of the main content column. A soft, straight top-down fade (not a rounded radial) kept subtle so it reads as ambiance. */ .app-top-glow { background-image: linear-gradient( to bottom, rgb(var(--app-brand) / 0.08), transparent 62% ); } .dark .app-top-glow { background-image: linear-gradient( to bottom, rgb(var(--app-brand) / 0.1), transparent 60% ); } .h-mobile-safe { height: 100dvh; } @supports (-webkit-touch-callout: none) { .h-mobile-safe { height: -webkit-fill-available; } } /* Minimal custom scrollbar with shorter track */ .scrollbar-custom { /* Firefox fallback: reduce width and color */ scrollbar-width: thin; scrollbar-color: rgb(var(--app-border-strong)) transparent; } .dark .scrollbar-custom { scrollbar-color: rgb(var(--app-border-strong)) transparent; } /* WebKit-based scrollbars (Chrome, Safari, etc.) */ .scrollbar-custom::-webkit-scrollbar { width: 6px; } /* Shorten the track by adding big 'borders' at top/bottom */ .scrollbar-custom::-webkit-scrollbar-track { border-top: 20px solid transparent; border-bottom: 20px solid transparent; background-clip: padding-box; } .scrollbar-custom::-webkit-scrollbar-thumb { border-radius: 12px; background-color: rgb(var(--app-border-strong)); border: 2px solid transparent; background-clip: content-box; transition: border 0.2s ease; } .dark .scrollbar-custom::-webkit-scrollbar-thumb { background-color: rgb(var(--app-border-strong)); } .scrollbar-custom::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--app-muted)); border: 3px solid transparent; } .dark .scrollbar-custom::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--app-muted)); border: 3px solid transparent; } /* Respect users who prefer reduced motion: neutralize the streaming fade-in, the "working" shimmer, hover transforms, and smooth scrolling. */ @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; } }