Spaces:
Sleeping
Sleeping
| /* SupportCopilot design system — friendly, bright customer-support product. | |
| Warm teal/emerald primary + warm coral accent on a soft "sand" canvas; | |
| generous rounding, soft shadows, modern chat bubbles. Light + dark. | |
| Distinct identity within the portfolio — welcoming like Intercom/Gorgias. */ | |
| :root { | |
| --sc-accent: 16 185 129; /* emerald-500 — bright friendly primary */ | |
| --sc-accent-strong: 13 148 136; /* teal-600 — deeper primary */ | |
| --sc-accent-deep: 15 118 110; /* teal-700 */ | |
| --sc-coral: 244 98 79; /* warm coral — energetic accent */ | |
| --sc-coral-soft: 251 124 114; /* coral-400 */ | |
| --sc-success: 16 185 129; /* emerald-500 */ | |
| --sc-warning: 245 158 11; /* amber-500 */ | |
| --sc-danger: 239 68 68; /* red-500 */ | |
| /* Warm neutral surfaces (sand) — replaces cold slate. */ | |
| --sc-paper: 255 253 250; /* warm white card */ | |
| --sc-line: 231 219 201; /* sand-200 hairline */ | |
| --sc-track: 235 226 212; /* warm track for meters/bars */ | |
| } | |
| .dark { | |
| --sc-accent: 52 211 153; /* emerald-400 — lifts in dark */ | |
| --sc-accent-strong: 45 212 191; /* teal-400 */ | |
| --sc-coral: 251 124 114; /* coral-400 */ | |
| --sc-paper: 32 27 22; /* warm dark card */ | |
| --sc-line: 70 60 49; /* warm slate hairline */ | |
| --sc-track: 60 51 41; | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: "Avenir Next", Avenir, "Nunito Sans", ui-rounded, | |
| "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, | |
| Helvetica, Arial, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| /* Friendly, slightly rounded display headings. */ | |
| h1, h2, h3, .sc-display { | |
| font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", Avenir, | |
| "Nunito Sans", system-ui, sans-serif; | |
| letter-spacing: -0.01em; | |
| } | |
| /* Soft, warm page wash — coral glow top-right, teal glow bottom-left. */ | |
| .sc-bg { | |
| background-image: | |
| radial-gradient(58rem 58rem at 108% -12%, rgb(var(--sc-coral) / 0.12), transparent 55%), | |
| radial-gradient(52rem 52rem at -12% 4%, rgb(var(--sc-accent) / 0.12), transparent 52%); | |
| } | |
| .dark .sc-bg { | |
| background-image: | |
| radial-gradient(58rem 58rem at 108% -12%, rgb(var(--sc-coral) / 0.14), transparent 55%), | |
| radial-gradient(52rem 52rem at -12% 4%, rgb(var(--sc-accent) / 0.16), transparent 52%); | |
| } | |
| /* Gradient brand text — teal -> emerald -> coral, warm and friendly. */ | |
| .sc-gradient-text { | |
| background-image: linear-gradient( | |
| 100deg, rgb(var(--sc-accent-strong)), rgb(var(--sc-accent)) 55%, rgb(var(--sc-coral-soft)) | |
| ); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| /* Reusable brand gradient surface (avatars, marks, the send button accent). */ | |
| .sc-grad { | |
| background-image: linear-gradient(135deg, rgb(var(--sc-accent-strong)), rgb(var(--sc-accent))); | |
| } | |
| .sc-grad-warm { | |
| background-image: linear-gradient(135deg, rgb(var(--sc-accent)), rgb(var(--sc-coral))); | |
| } | |
| /* Card — warm, rounded, soft shadow. */ | |
| .sc-card { | |
| border-radius: 1.35rem; | |
| border: 1px solid rgb(var(--sc-line)); | |
| background: rgb(var(--sc-paper) / 0.92); | |
| backdrop-filter: blur(8px); | |
| box-shadow: 0 1px 2px rgb(70 50 30 / 0.04), 0 14px 34px -18px rgb(70 50 30 / 0.22); | |
| } | |
| .dark .sc-card { | |
| background: rgb(var(--sc-paper) / 0.78); | |
| box-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 14px 34px -18px rgb(0 0 0 / 0.7); | |
| } | |
| /* KPI card hover lift. */ | |
| .sc-kpi { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } | |
| .sc-kpi:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 2px 4px rgb(70 50 30 / 0.05), 0 20px 40px -18px rgb(var(--sc-accent) / 0.28); | |
| } | |
| .dark .sc-kpi:hover { | |
| box-shadow: 0 2px 4px rgb(0 0 0 / 0.4), 0 20px 40px -18px rgb(var(--sc-accent) / 0.4); | |
| } | |
| /* ---- Buttons ------------------------------------------------------------ */ | |
| /* Primary "pill" CTA — friendly teal->emerald with a soft glow. */ | |
| .sc-btn-primary { | |
| display: inline-flex; align-items: center; gap: 0.5rem; | |
| border-radius: 999px; | |
| padding: 0.7rem 1.25rem; | |
| font-weight: 700; font-size: 0.875rem; color: white; | |
| background-image: linear-gradient(135deg, rgb(var(--sc-accent-strong)), rgb(var(--sc-accent))); | |
| box-shadow: 0 10px 22px -10px rgb(var(--sc-accent) / 0.7); | |
| transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; | |
| } | |
| .sc-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.04); | |
| box-shadow: 0 14px 26px -10px rgb(var(--sc-accent) / 0.8); } | |
| .sc-btn-primary:active { transform: translateY(0); } | |
| /* Secondary — soft warm outline pill. */ | |
| .sc-btn-secondary { | |
| display: inline-flex; align-items: center; gap: 0.5rem; | |
| border-radius: 999px; | |
| padding: 0.7rem 1.2rem; | |
| font-weight: 600; font-size: 0.875rem; | |
| color: rgb(var(--sc-accent-deep)); | |
| background: rgb(var(--sc-paper) / 0.7); | |
| border: 1.5px solid rgb(var(--sc-accent) / 0.35); | |
| transition: border-color .12s ease, color .12s ease, background-color .12s ease, transform .12s ease; | |
| } | |
| .sc-btn-secondary:hover { border-color: rgb(var(--sc-accent) / 0.7); transform: translateY(-1px); } | |
| .dark .sc-btn-secondary { color: rgb(var(--sc-accent-strong)); } | |
| /* ---- Chat bubbles ------------------------------------------------------- */ | |
| .sc-bubble { | |
| max-width: 88%; | |
| padding: 0.8rem 1.05rem; | |
| border-radius: 1.4rem; | |
| line-height: 1.55; | |
| font-size: 0.95rem; | |
| } | |
| /* Agent bubble (left) — soft warm card with a friendly tail. */ | |
| .sc-bubble--agent { | |
| border: 1px solid rgb(var(--sc-line)); | |
| background: rgb(var(--sc-paper) / 0.95); | |
| border-bottom-left-radius: 0.45rem; | |
| } | |
| .dark .sc-bubble--agent { | |
| background: rgb(var(--sc-paper) / 0.9); | |
| } | |
| /* User bubble (right) — warm teal->emerald gradient with a tail. */ | |
| .sc-bubble--user { | |
| color: white; | |
| background: linear-gradient(135deg, rgb(var(--sc-accent-strong)), rgb(var(--sc-accent))); | |
| border-bottom-right-radius: 0.45rem; | |
| box-shadow: 0 8px 20px -10px rgb(var(--sc-accent) / 0.7); | |
| } | |
| /* ---- Citation chip ------------------------------------------------------ */ | |
| .sc-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.32rem; | |
| padding: 0.22rem 0.6rem; | |
| border-radius: 999px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| line-height: 1; | |
| border: 1px solid transparent; | |
| transition: background-color .12s ease, border-color .12s ease; | |
| } | |
| .sc-chip-dot { width: 0.42rem; height: 0.42rem; border-radius: 999px; flex: none; } | |
| /* kind variants — keyed to the source type. */ | |
| .sc-chip--policy { | |
| color: rgb(var(--sc-accent-deep)); | |
| background: rgb(var(--sc-accent) / 0.14); | |
| border-color: rgb(var(--sc-accent) / 0.3); | |
| } | |
| .dark .sc-chip--policy { color: rgb(var(--sc-accent-strong)); } | |
| .sc-chip--policy .sc-chip-dot { background: rgb(var(--sc-accent-strong)); } | |
| .sc-chip--product { | |
| color: rgb(15 118 110); | |
| background: rgb(45 212 191 / 0.16); | |
| border-color: rgb(45 212 191 / 0.32); | |
| } | |
| .dark .sc-chip--product { color: rgb(94 234 212); } | |
| .sc-chip--product .sc-chip-dot { background: rgb(20 184 166); } | |
| .sc-chip--order { | |
| color: rgb(189 56 41); | |
| background: rgb(var(--sc-coral) / 0.14); | |
| border-color: rgb(var(--sc-coral) / 0.32); | |
| } | |
| .dark .sc-chip--order { color: rgb(255 160 153); } | |
| .sc-chip--order .sc-chip-dot { background: rgb(var(--sc-coral)); } | |
| /* ---- Status badges ------------------------------------------------------ */ | |
| .sc-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.32rem; | |
| padding: 0.16rem 0.6rem; | |
| border-radius: 999px; | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| letter-spacing: 0.01em; | |
| border: 1px solid transparent; | |
| } | |
| .sc-badge--resolved { | |
| color: rgb(15 118 110); | |
| background: rgb(var(--sc-success) / 0.14); | |
| border-color: rgb(var(--sc-success) / 0.3); | |
| } | |
| .dark .sc-badge--resolved { color: rgb(110 231 183); } | |
| .sc-badge--escalate { | |
| color: rgb(180 83 9); | |
| background: rgb(var(--sc-warning) / 0.14); | |
| border-color: rgb(var(--sc-warning) / 0.3); | |
| } | |
| .dark .sc-badge--escalate { color: rgb(251 191 36); } | |
| .sc-badge--neutral { | |
| color: rgb(var(--sc-line)); | |
| color: rgb(107 90 71); | |
| background: rgb(140 120 96 / 0.14); | |
| border-color: rgb(140 120 96 / 0.28); | |
| } | |
| .dark .sc-badge--neutral { color: rgb(179 158 126); } | |
| /* ---- Decision / escalation cards --------------------------------------- */ | |
| .sc-decision { border-radius: 1.1rem; border: 1px solid; padding: 0.85rem 1rem; } | |
| .sc-decision--approve { | |
| background: rgb(var(--sc-success) / 0.1); | |
| border-color: rgb(var(--sc-success) / 0.4); | |
| } | |
| .sc-decision--deny { | |
| background: rgb(var(--sc-danger) / 0.08); | |
| border-color: rgb(var(--sc-danger) / 0.34); | |
| } | |
| .sc-decision--escalate { | |
| background: rgb(var(--sc-warning) / 0.1); | |
| border-color: rgb(var(--sc-warning) / 0.36); | |
| } | |
| /* ---- Confidence meter --------------------------------------------------- */ | |
| .sc-meter { height: 0.45rem; border-radius: 999px; background: rgb(var(--sc-track)); overflow: hidden; } | |
| .sc-meter > span { | |
| display: block; height: 100%; border-radius: 999px; | |
| background: linear-gradient(90deg, rgb(var(--sc-accent-strong)), rgb(var(--sc-accent))); | |
| } | |
| /* ---- Dashboard bar chart ------------------------------------------------ */ | |
| .sc-bar-track { height: 0.65rem; border-radius: 999px; background: rgb(var(--sc-track)); overflow: hidden; } | |
| .sc-bar-fill { | |
| display: block; height: 100%; border-radius: 999px; min-width: 0.5rem; | |
| background: linear-gradient(90deg, rgb(var(--sc-accent-strong)), rgb(var(--sc-accent))); | |
| } | |
| /* Donut / progress ring uses inline conic-gradient via style attr. */ | |
| .sc-ring { border-radius: 999px; } | |
| /* htmx loading affordance. */ | |
| .htmx-indicator { display: none; } | |
| .htmx-request .htmx-indicator { display: inline-block; } | |
| .htmx-request .htmx-indicator-hide { display: none; } | |
| /* Fade-in for swapped content. */ | |
| @keyframes sc-fade-in { | |
| from { opacity: 0; transform: translateY(5px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .sc-fade { animation: sc-fade-in .24s ease both; } | |
| /* Typing dots (assistant thinking). */ | |
| .sc-typing span { | |
| display: inline-block; width: 0.42rem; height: 0.42rem; margin: 0 0.08rem; | |
| border-radius: 999px; background: currentColor; opacity: 0.5; | |
| animation: sc-blink 1.2s infinite both; | |
| } | |
| .sc-typing span:nth-child(2) { animation-delay: 0.2s; } | |
| .sc-typing span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes sc-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 0.9; } } | |
| /* Focus ring. */ | |
| .sc-focus:focus-visible { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgb(var(--sc-accent) / 0.45); | |
| } | |
| /* Thin scrollbar for the chat thread. */ | |
| .sc-scroll { scrollbar-width: thin; scrollbar-color: rgb(var(--sc-accent) / 0.4) transparent; } | |
| .sc-scroll::-webkit-scrollbar { width: 8px; } | |
| .sc-scroll::-webkit-scrollbar-thumb { background: rgb(var(--sc-accent) / 0.35); border-radius: 999px; } | |
| .sc-scroll::-webkit-scrollbar-track { background: transparent; } | |
| </content> | |
| </invoke> | |