| :root { |
| --cohere-ink: #212121; |
| --cohere-primary: #17171c; |
| --cohere-green: #003c33; |
| --cohere-stone: #eeece7; |
| --cohere-pale-green: #edfce9; |
| --cohere-hairline: #d9d9dd; |
| --cohere-muted: #75758a; |
| --cohere-canvas: #ffffff; |
| --cohere-surface: #ffffff; |
| --cohere-elevated: #fbfaf7; |
| --cohere-input: #ffffff; |
| --cohere-user-bg: #17171c; |
| --cohere-user-fg: #ffffff; |
| --cohere-user-code-bg: rgba(255, 255, 255, 0.12); |
| --cohere-user-code-border: rgba(255, 255, 255, 0.2); |
| --cohere-button-bg: #17171c; |
| --cohere-button-fg: #ffffff; |
| --cohere-button-hover: #003c33; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| :root { |
| --cohere-ink: #f7f5ef; |
| --cohere-primary: #f7f5ef; |
| --cohere-green: #7fd3b0; |
| --cohere-stone: #202725; |
| --cohere-pale-green: #102e28; |
| --cohere-hairline: rgba(238, 236, 231, 0.22); |
| --cohere-muted: #b9b8ad; |
| --cohere-canvas: #07110f; |
| --cohere-surface: #0d1714; |
| --cohere-elevated: #111d19; |
| --cohere-input: #07110f; |
| --cohere-user-bg: #f7f5ef; |
| --cohere-user-fg: #07110f; |
| --cohere-user-code-bg: rgba(0, 0, 0, 0.12); |
| --cohere-user-code-border: rgba(0, 0, 0, 0.18); |
| --cohere-button-bg: #f7f5ef; |
| --cohere-button-fg: #07110f; |
| --cohere-button-hover: #edfce9; |
| } |
| } |
|
|
| :root.dark, |
| .dark, |
| body.dark, |
| .gradio-container.dark, |
| [data-theme="dark"] { |
| --cohere-ink: #f7f5ef; |
| --cohere-primary: #f7f5ef; |
| --cohere-green: #7fd3b0; |
| --cohere-stone: #202725; |
| --cohere-pale-green: #102e28; |
| --cohere-hairline: rgba(238, 236, 231, 0.22); |
| --cohere-muted: #b9b8ad; |
| --cohere-canvas: #07110f; |
| --cohere-surface: #0d1714; |
| --cohere-elevated: #111d19; |
| --cohere-input: #07110f; |
| --cohere-user-bg: #f7f5ef; |
| --cohere-user-fg: #07110f; |
| --cohere-user-code-bg: rgba(0, 0, 0, 0.12); |
| --cohere-user-code-border: rgba(0, 0, 0, 0.18); |
| --cohere-button-bg: #f7f5ef; |
| --cohere-button-fg: #07110f; |
| --cohere-button-hover: #edfce9; |
| } |
|
|
| .gradio-container { |
| color-scheme: light dark; |
| background: var(--cohere-canvas); |
| color: var(--cohere-ink); |
| } |
|
|
| .app-shell { |
| max-width: 1120px; |
| margin: 0 auto; |
| padding: 0 0.75rem 2rem; |
| } |
|
|
| @media (min-width: 768px) { |
| .app-shell { |
| padding: 0 1.25rem 2.5rem; |
| } |
| } |
|
|
| .hero { |
| margin: 0 0 1rem; |
| padding: 1rem 0 1.15rem; |
| border-bottom: 1px solid var(--cohere-hairline); |
| } |
|
|
| .hero-grid { |
| display: grid; |
| gap: 1rem; |
| } |
|
|
| @media (min-width: 820px) { |
| .hero-grid { |
| grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); |
| align-items: end; |
| } |
| } |
|
|
| .gradio-container .hero h1 { |
| margin: 0; |
| color: var(--cohere-primary) !important; |
| font-size: clamp(2.25rem, 11.5vw, 5.25rem); |
| font-weight: 500; |
| letter-spacing: -0.065em; |
| line-height: 0.95; |
| white-space: nowrap; |
| } |
|
|
| .compact-note { |
| margin: 0.9rem 0 0 !important; |
| color: var(--cohere-muted) !important; |
| font-size: 0.82rem; |
| line-height: 1.55; |
| } |
|
|
| .compact-note a { |
| color: var(--cohere-green) !important; |
| text-decoration: underline; |
| text-underline-offset: 0.16em; |
| } |
|
|
| .gradio-container code:not(pre code) { |
| border: 1px solid var(--cohere-hairline) !important; |
| border-radius: 0.35rem !important; |
| background: var(--cohere-stone) !important; |
| color: var(--cohere-primary) !important; |
| padding: 0.04rem 0.3rem !important; |
| font-size: 0.86em; |
| } |
|
|
| .status-banner { |
| margin: 0 0 1rem; |
| padding: 0.85rem 1rem; |
| border: 1px solid rgba(255, 119, 89, 0.55); |
| border-radius: 16px; |
| background: rgba(255, 119, 89, 0.1); |
| color: var(--cohere-primary); |
| } |
|
|
| .status-banner strong { |
| color: var(--cohere-primary); |
| } |
|
|
| .command-chatbot { |
| overflow: hidden; |
| border: 1px solid var(--cohere-hairline) !important; |
| border-radius: 22px !important; |
| background: linear-gradient(180deg, var(--cohere-surface) 0%, var(--cohere-elevated) 100%) !important; |
| } |
|
|
| .command-chatbot .bubble-wrap, |
| .command-chatbot .message-wrap, |
| .command-chatbot .message { |
| border-radius: 18px !important; |
| } |
|
|
| .command-chatbot .message.user, |
| .command-chatbot [data-testid="user"] .message { |
| background: var(--cohere-user-bg) !important; |
| color: var(--cohere-user-fg) !important; |
| } |
|
|
| .command-chatbot .message.user *, |
| .command-chatbot [data-testid="user"] .message *, |
| .command-chatbot .user .message *, |
| .command-chatbot .user-message *, |
| .command-chatbot .user-message * { |
| color: var(--cohere-user-fg) !important; |
| } |
|
|
| .command-chatbot .message.bot, |
| .command-chatbot [data-testid="bot"] .message { |
| border: 1px solid var(--cohere-hairline) !important; |
| background: var(--cohere-surface) !important; |
| color: var(--cohere-ink) !important; |
| } |
|
|
| .command-chatbot .message pre { |
| margin: 0.5rem 0 !important; |
| padding: 0.65rem 0.8rem !important; |
| border-radius: 10px !important; |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; |
| font-size: 0.88em !important; |
| line-height: 1.45 !important; |
| overflow-x: auto !important; |
| white-space: pre !important; |
| } |
|
|
| .command-chatbot .message pre code { |
| background: transparent !important; |
| border: 0 !important; |
| padding: 0 !important; |
| font-size: inherit !important; |
| color: inherit !important; |
| } |
|
|
| .command-chatbot .message.bot pre, |
| .command-chatbot [data-testid="bot"] .message pre { |
| border: 1px solid var(--cohere-hairline) !important; |
| background: var(--cohere-stone) !important; |
| color: var(--cohere-primary) !important; |
| } |
|
|
| .command-chatbot .message.user pre, |
| .command-chatbot [data-testid="user"] .message pre { |
| border: 1px solid var(--cohere-user-code-border) !important; |
| background: var(--cohere-user-code-bg) !important; |
| color: var(--cohere-user-fg) !important; |
| } |
|
|
| .command-chatbot .message.user :not(pre) > code, |
| .command-chatbot [data-testid="user"] .message :not(pre) > code { |
| border: 1px solid var(--cohere-user-code-border) !important; |
| background: var(--cohere-user-code-bg) !important; |
| color: var(--cohere-user-fg) !important; |
| } |
|
|
| .command-chatbot details { |
| margin-bottom: 0.65rem; |
| border: 1px solid var(--cohere-hairline); |
| border-radius: 12px; |
| background: var(--cohere-elevated); |
| } |
|
|
| .command-chatbot summary { |
| padding: 0.45rem 0.65rem; |
| color: var(--cohere-muted); |
| cursor: pointer; |
| font-size: 0.84rem; |
| font-weight: 600; |
| } |
|
|
| .command-chatbot details[open] { |
| padding-bottom: 0.55rem; |
| } |
|
|
| .command-chatbot details > :not(summary) { |
| margin: 0.45rem 0.65rem 0; |
| color: var(--cohere-muted); |
| font-size: 0.9rem; |
| } |
|
|
| .chat-placeholder { |
| display: grid; |
| gap: 0.45rem; |
| max-width: 520px; |
| margin: 0 auto; |
| padding: 1.5rem; |
| text-align: center; |
| color: var(--cohere-ink); |
| } |
|
|
| .placeholder-kicker { |
| justify-self: center; |
| width: fit-content; |
| padding: 0.3rem 0.7rem; |
| border: 1px solid rgba(0, 60, 51, 0.18); |
| border-radius: 999px; |
| background: var(--cohere-pale-green); |
| color: var(--cohere-green); |
| font-size: 0.72rem; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .chat-placeholder strong { |
| font-size: clamp(1.3rem, 4vw, 2rem); |
| font-weight: 500; |
| letter-spacing: -0.035em; |
| } |
|
|
| .chat-placeholder span { |
| color: var(--cohere-muted); |
| line-height: 1.45; |
| } |
|
|
| .command-input { |
| margin-top: 0.85rem !important; |
| border: 2px solid var(--cohere-primary) !important; |
| border-radius: 22px !important; |
| background: var(--cohere-input) !important; |
| box-shadow: none !important; |
| outline: none !important; |
| } |
|
|
| .gradio-container div:has(> .command-input), |
| .gradio-container div:has(.command-input) { |
| background: transparent !important; |
| box-shadow: none !important; |
| outline: none !important; |
| } |
|
|
| .command-input, |
| .command-input > *, |
| .command-input > div, |
| .command-input [class*="container"], |
| .command-input [class*="wrap"], |
| .command-input [data-testid] { |
| background: var(--cohere-input) !important; |
| box-shadow: none !important; |
| outline: none !important; |
| } |
|
|
| .command-input textarea, |
| .command-input input, |
| .command-input [contenteditable="true"] { |
| min-height: 58px !important; |
| border-radius: 18px !important; |
| background: var(--cohere-input) !important; |
| color: var(--cohere-primary) !important; |
| font-size: 1rem !important; |
| line-height: 1.45 !important; |
| box-shadow: none !important; |
| outline: none !important; |
| } |
|
|
| .command-input textarea::placeholder, |
| .command-input input::placeholder { |
| color: var(--cohere-muted) !important; |
| opacity: 1 !important; |
| } |
|
|
| .command-input button { |
| border-radius: 999px !important; |
| } |
|
|
| .gradio-container button.primary, |
| .gradio-container .gr-button-primary { |
| border-radius: 999px !important; |
| background: var(--cohere-button-bg) !important; |
| color: var(--cohere-button-fg) !important; |
| } |
|
|
| .gradio-container button.primary:hover, |
| .gradio-container .gr-button-primary:hover { |
| background: var(--cohere-button-hover) !important; |
| } |
|
|
| .gradio-container button.secondary, |
| .gradio-container .gr-button-secondary { |
| border-radius: 999px !important; |
| } |
|
|
| .gradio-container .examples, |
| .gradio-container [data-testid="examples"] { |
| margin-top: -1.75rem !important; |
| margin-bottom: 1rem !important; |
| transform: translateY(-0.75rem); |
| border: 1px solid var(--cohere-hairline) !important; |
| border-radius: 16px !important; |
| background: var(--cohere-surface) !important; |
| box-shadow: none !important; |
| } |
|
|
| .gradio-container footer { |
| margin-top: 1rem; |
| } |
|
|
| @media (max-width: 640px) { |
| .app-shell { |
| padding-right: 0.5rem; |
| padding-left: 0.5rem; |
| } |
|
|
| .hero { |
| padding-top: 0.65rem; |
| } |
|
|
| .command-chatbot { |
| border-radius: 16px !important; |
| } |
| } |
|
|
