would add the template's
whitespace to the code. */
.spreadsheet-exec-code.is-streaming {
display: flex;
flex-direction: column-reverse;
}
.spreadsheet-exec-code.is-streaming code::after {
content: '';
display: inline-block;
width: 2px;
height: 1.1em;
background: var(--primary-9);
animation: d2-cursor-blink 0.8s step-end infinite;
vertical-align: text-bottom;
margin-left: 1px;
}
@media (prefers-reduced-motion: reduce) {
.spreadsheet-exec-code.is-streaming code::after {
animation: none;
}
}
/* Code exec: file outputs list with file-type icons */
.chat-messages .plan-chip-dropdown ul.code-exec-file-output-list {
margin: 0;
padding-left: 0;
padding-right: 0;
list-style: none;
}
.chat-messages .plan-chip-dropdown li.code-exec-file-output-item {
list-style: none;
margin: 0;
padding-bottom: 0;
padding-right: 0;
}
.chat-messages .plan-chip-dropdown li.code-exec-file-output-item + li.code-exec-file-output-item {
margin-top: var(--space-2);
}
.chat-messages .plan-chip-dropdown .code-exec-file-output-row {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
line-height: var(--default-line-height);
font-size: var(--font-size-1);
}
.main-panel chat-conversation .code-exec-file-output-icon {
width: calc(14px * var(--scaling));
height: calc(14px * var(--scaling));
flex-shrink: 0;
color: var(--secondary-9);
}
.chat-messages .plan-chip-dropdown .code-exec-file-output-name {
min-width: 0;
word-break: break-word;
overflow-wrap: anywhere;
font-size: var(--font-size-1);
}
.chat-messages .plan-chip-dropdown .code-exec-file-output-separator {
font-size: var(--font-size-1);
color: var(--secondary-9);
}
.chat-messages .plan-chip-dropdown .code-exec-file-output-download {
font-size: var(--font-size-1);
}
.chat-messages .plan-chip-dropdown .code-exec-file-output-empty {
font-size: var(--font-size-1);
line-height: var(--default-line-height);
}
/* Code exec: stdout/stderr styling (avoid default margins) */
.plan-chip-pre {
margin: 0;
display: block;
font-family: var(--code-font-family);
font-size: var(--font-size-1);
color: var(--secondary-12);
overflow-wrap: anywhere;
}
/*
Prevent giant stdout/stderr from expanding the dropdown indefinitely.
Must override the more specific `.chat-messages pre { overflow: visible; max-height: unset; }`.
*/
.chat-messages pre.plan-chip-pre {
margin: 0;
max-height: 200px;
overflow: auto;
}
/*
Wrap raw payload code inside tool call/result disclosures (slides_editor
edits/source, spreadsheet/full application JSON, code_exec input, video/image
params). Without this, `` inherits `white-space: pre` and long streamed
JSON lines push off-screen (or bleed past the bubble) instead of wrapping, so
the user cannot see the content streaming in. Wrapping keeps every streamed
payload readable inside its disclosure.
*/
.plan-chip-dropdown pre,
.plan-chip-pre,
.chip-code-block pre,
.tool-result-content pre,
.tool-call-content pre {
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
}
/* Shared section label for all tool dropdowns */
.plan-chip-section-label {
font-size: 10px;
font-weight: var(--font-weight-medium);
color: var(--secondary-9);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
/* Step items in dropdown */
.plan-chip-item {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--font-size-2);
padding: var(--space-1) 0;
color: var(--secondary-11);
line-height: 1.5;
min-width: 0; /* Allow flex children to shrink below content size */
}
.plan-chip-item > span:last-child,
.plan-chip-item > a,
.plan-chip-item > div {
min-width: 0;
word-break: break-all;
overflow-wrap: anywhere;
}
.sources-chip .sources-chip-rule-meta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
width: 100%;
max-width: 100%;
padding: 0 0 var(--space-2) 0;
border-bottom: 1px solid var(--secondary-4);
color: var(--secondary-12);
line-height: 1.2;
}
.sources-chip .sources-chip-rule-meta--plain {
padding-bottom: 0;
border-bottom: 0;
}
.sources-chip .sources-chip-rule-label {
padding: 2px 6px;
border-radius: 999px;
background: var(--secondary-3);
color: var(--secondary-10);
font-size: 10px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.sources-chip .sources-chip-rule-meta code {
display: inline-block;
max-width: 100%;
padding: 2px 8px;
border-radius: var(--radius-2);
border: 1px solid var(--secondary-4);
background: var(--secondary-2);
font-size: var(--font-size-1);
color: var(--secondary-11);
word-break: break-all;
overflow-wrap: anywhere;
}
.sources-chip .sources-chip-rule-body {
display: grid;
gap: var(--space-2);
padding: var(--space-3) 0 0 0;
}
.sources-chip .sources-chip-section-divider {
height: 1px;
margin: var(--space-3) 0 0 0;
background: var(--secondary-4);
}
.sources-chip .sources-chip-param-object {
display: grid;
gap: var(--space-2);
}
.sources-chip .sources-chip-param-object--nested {
padding-left: var(--space-2);
border-left: 1px solid var(--secondary-4);
}
.sources-chip .sources-chip-param-row {
display: grid;
grid-template-columns: minmax(96px, max-content) 1fr;
gap: var(--space-3);
align-items: start;
}
.sources-chip .sources-chip-param-key {
color: var(--secondary-11);
font-size: var(--font-size-1);
font-weight: var(--font-weight-medium);
}
.sources-chip .sources-chip-param-value,
.sources-chip .sources-chip-param-scalar {
min-width: 0;
color: var(--secondary-12);
font-size: var(--font-size-1);
overflow-wrap: anywhere;
}
.sources-chip .sources-chip-param-list {
display: grid;
gap: var(--space-1);
}
.sources-chip .sources-chip-param-list-item {
display: flex;
gap: var(--space-2);
align-items: flex-start;
}
.sources-chip .sources-chip-param-empty {
color: var(--secondary-10);
}
/* Marker progress section — indeterminate loader for DataLab text extraction */
.marker-progress-section {
padding-top: var(--space-2);
}
.marker-progress-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) 0;
}
.marker-progress-spinner {
width: 12px;
height: 12px;
border: 1.5px solid var(--secondary-5);
border-top-color: var(--secondary-9);
border-radius: 50%;
animation: plan-chip-spin 0.8s linear infinite;
flex-shrink: 0;
}
.marker-progress-filename {
font-size: var(--font-size-sm);
color: var(--secondary-12);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
.marker-progress-poll {
font-size: var(--font-size-xs);
color: var(--secondary-10);
margin-left: auto;
flex-shrink: 0;
}
.marker-progress-done {
font-size: var(--font-size-xs);
color: var(--success-9);
margin-left: auto;
flex-shrink: 0;
}
.marker-progress-error {
font-size: var(--font-size-xs);
color: var(--failure-9);
margin-left: auto;
flex-shrink: 0;
}
.sources-chip .sources-chip-command-list {
max-height: 220px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
padding-right: var(--space-1);
}
.sources-chip .sources-chip-auth-body {
padding-top: var(--space-2);
}
.sources-chip .sources-chip-auth-body a {
display: inline-flex;
align-items: center;
padding: 0;
border: 0;
background: transparent;
color: var(--primary-11);
font-size: var(--font-size-2);
font-weight: var(--font-weight-medium);
text-decoration: underline;
text-underline-offset: 2px;
}
.sources-chip .sources-chip-auth-body a:hover {
background: transparent;
color: var(--primary-10);
}
.plan-chip-inline-sep {
margin: 0 var(--space-1);
color: var(--secondary-9);
}
.plan-chip-item-icon {
flex-shrink: 0;
width: 16px;
text-align: center;
font-weight: var(--font-weight-bold);
}
.plan-chip-item.done {
color: var(--secondary-10);
}
.plan-chip-item.done .plan-chip-item-icon {
color: var(--success-11);
}
.plan-chip-item.active {
color: var(--secondary-12);
font-weight: var(--font-weight-medium);
}
.plan-chip-item.active .plan-chip-item-icon {
color: var(--primary-9);
}
.plan-chip-item.pending {
color: var(--secondary-10);
}
.plan-chip-item.pending .plan-chip-item-icon {
color: var(--secondary-6);
}
.plan-chip-item.cancelled {
color: var(--secondary-8);
text-decoration: line-through;
}
.plan-chip-item.cancelled .plan-chip-item-icon {
color: var(--failure-9);
}
/* Generic tool result summary (workspaces, chats) */
.generic-result-list {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
overflow: hidden;
}
.generic-result-row {
display: flex;
align-items: baseline;
gap: var(--space-2);
font-size: var(--font-size-2);
color: var(--secondary-11);
padding: 2px 0;
overflow: hidden;
}
.generic-result-num {
color: var(--secondary-8);
font-size: var(--font-size-1);
min-width: 20px;
}
.generic-result-label {
flex: 1;
min-width: 0;
color: var(--secondary-12);
}
.generic-result-meta {
color: var(--secondary-8);
font-size: var(--font-size-1);
white-space: nowrap;
}
.generic-result-more {
color: var(--secondary-8);
font-size: var(--font-size-1);
padding-top: 4px;
}
.generic-result-detail {
padding: 4px 0;
}
.generic-result-content {
margin-top: var(--space-1);
font-size: var(--font-size-2);
color: var(--secondary-10);
max-height: 200px;
overflow-y: auto;
}
.generic-result-snippet {
color: var(--secondary-8);
font-size: var(--font-size-1);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 60%;
}
.search-files-matches-scroll {
max-height: 120px;
overflow: auto;
padding-right: var(--space-1);
}
.search-files-matches-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
.search-files-match-item {
padding: 0;
min-width: 0;
}
.search-files-page-pill {
appearance: none;
-webkit-appearance: none;
width: 100%;
display: flex;
align-items: center;
gap: var(--space-1);
border: 1px solid var(--secondary-6);
border-radius: 999px;
background: var(--secondary-2);
color: var(--secondary-11);
font: inherit;
font-size: var(--font-size-1);
line-height: 1.35;
padding: var(--space-1) var(--space-2);
text-align: left;
cursor: pointer;
}
.search-files-page-pill:hover {
background: var(--secondary-3);
border-color: var(--secondary-7);
}
.search-files-page-pill-title {
min-width: 0;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-files-page-pill-page {
flex: 0 0 auto;
color: var(--secondary-10);
}
@media (max-width: 520px) {
.search-files-matches-grid {
grid-template-columns: 1fr;
}
}
/* Keep long list outputs (e.g., spreadsheet list command) readable. */
.plan-chip-list-scroll {
max-height: min(360px, 45svh);
overflow-y: auto;
overflow-x: hidden;
padding-right: var(--space-1);
}
/* Plan chip: Summary block (optional, from result.summary) */
.plan-chip-summary {
font-size: var(--font-size-2);
color: var(--secondary-10);
line-height: 1.5;
padding-bottom: var(--space-3);
margin-bottom: var(--space-3);
border-bottom: 1px solid var(--secondary-3);
}
/* Plan chip: Error detail block */
.plan-chip-error-detail {
font-size: var(--font-size-2);
color: var(--failure-11);
background: var(--failure-2);
border: 1px solid var(--failure-4);
border-radius: var(--radius-2);
padding: var(--space-2) var(--space-3);
margin-top: var(--space-3);
line-height: 1.4;
}
/* Plan chip: Pulsing dot for in-progress state (plan executing, tool done) */
.plan-chip.in-progress .plan-chip-dot {
animation: plan-chip-pulse 2s ease-in-out infinite;
}
/* Animations */
@keyframes plan-chip-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes plan-chip-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.9); }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.plan-chip-spinner {
animation: none;
opacity: 0.7;
}
.plan-chip-dot {
animation: none;
}
}
/* ===========================================
Chip Pattern: Domain Tags (search_web)
=========================================== */
.chip-domain-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--secondary-3);
}
.chip-domain-tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
background: var(--secondary-2);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-2);
font-size: var(--font-size-1);
color: var(--secondary-9);
}
.chip-domain-tag.loading {
background: var(--primary-2);
border-color: var(--primary-3);
color: var(--primary-11);
}
/* ===========================================
Chip Pattern: Fetch Elements
=========================================== */
.chip-fetch-url {
font-family: var(--code-font-family);
font-size: var(--font-size-2);
color: var(--primary-11);
word-break: break-all;
line-height: 1.5;
}
.chip-fetch-url a {
color: var(--primary-11);
text-decoration: none;
}
.chip-fetch-url a:hover {
text-decoration: underline;
}
.chip-fetch-url-link {
display: inline-block;
min-height: 24px;
font-family: var(--code-font-family);
color: var(--primary-11);
text-decoration: none;
font-size: var(--font-size-2);
word-break: break-all;
overflow-wrap: anywhere;
transition: color var(--duration-fast) var(--ease-out-cubic);
}
.chip-fetch-url-link:hover {
text-decoration: underline;
}
.chip-fetch-progress {
height: 4px;
background: var(--secondary-3);
border-radius: 2px;
margin-top: var(--space-3);
overflow: hidden;
}
.chip-fetch-progress-bar {
height: 100%;
background: var(--primary-9);
animation: chip-progress-pulse 1.5s ease-in-out infinite;
}
@keyframes chip-progress-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.chip-fetch-status {
font-size: var(--font-size-2);
color: var(--secondary-9);
margin-top: var(--space-2);
}
.chip-fetch-pagination {
font-size: var(--font-size-1);
color: var(--secondary-9);
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--secondary-3);
}
.chip-fetch-query {
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--secondary-3);
font-size: var(--font-size-1);
color: var(--secondary-9);
display: flex;
gap: var(--space-1);
align-items: baseline;
}
.chip-fetch-query-label {
font-weight: 500;
white-space: nowrap;
color: var(--secondary-10);
}
.chip-fetch-query-text {
color: var(--secondary-9);
word-break: break-word;
}
/* ===========================================
Chip Pattern: Code Block (js_eval)
=========================================== */
.chip-code-block {
max-height: 200px;
overflow-y: auto;
border-radius: var(--radius-2);
background: var(--secondary-2);
}
.slides-editor-content .chip-code-block {
max-height: var(--space-18);
overflow: auto;
}
/* Live streaming progress for an active slides_editor call. Bounded, plain-text
metadata only — the body is never rendered here. */
.slides-stream-progress {
padding-top: var(--space-2);
}
/* Lazy disclosure controls for the completed slides authored content. */
.slides-content-controls {
display: inline-flex;
gap: var(--space-2);
align-items: center;
flex-wrap: wrap;
}
.slides-content-btn {
display: inline-flex;
align-items: center;
font-size: var(--font-size-1);
line-height: 1.4;
color: var(--primary-9);
background: transparent;
border: 1px solid var(--secondary-5);
border-radius: var(--radius-2);
padding: 1px var(--space-2);
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.slides-content-btn:hover {
background: var(--secondary-3);
color: var(--primary-12);
border-color: var(--primary-7);
}
/* Keep tool disclosure actions neutral in dark mode. Primary blue competes
with tool status and error colors on the dark panel. */
body.dark .plan-chip-dropdown a,
body.dark .slides-content-btn {
color: var(--secondary-11);
}
body.dark .plan-chip-dropdown a:hover,
body.dark .slides-content-btn:hover {
color: var(--secondary-12);
}
/* Plain-text preview/full views inside the disclosure. No syntax colors; the
text is escaped by lit interpolation, so no unsafeHTML is used. */
.slides-content-pre {
margin: 0;
padding: var(--space-2);
background: var(--secondary-3);
font-size: var(--font-size-1);
}
.slides-truncated-note {
font-size: var(--font-size-1);
color: var(--secondary-9);
font-style: italic;
padding: var(--space-1) var(--space-2) 0;
}
.chip-code-block pre.hljs {
margin: 0;
padding: var(--space-2);
background: transparent;
font-size: var(--font-size-1);
}
.chip-code-block code.hljs {
background: transparent;
}
/* js_eval chip wrapper - block display so multiple chips stack vertically */
.js-eval-chip {
display: block;
}
/* js_eval code block - no extra box, just the code inside the dropdown */
.js-eval-chip .chip-code-block {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
max-height: none;
overflow: visible;
}
.js-eval-chip .chip-code-block pre.hljs {
margin: 0;
padding: 0;
background: transparent;
font-size: var(--font-size-1);
}
.js-eval-chip .chip-code-block pre.hljs code.hljs {
padding: 0;
background: transparent;
}
/* js_eval dropdown - align scrolling with output container */
.js-eval-chip .plan-chip-dropdown {
max-height: 200px;
overflow: auto;
}
/* js_eval console output - matches .plan-chip-dropdown dimensions */
.js-eval-output {
margin-top: var(--space-2);
margin-left: 4px;
max-width: min(520px, calc(100vw - var(--space-6)));
min-width: min(300px, calc(100vw - var(--space-6)));
max-height: 200px;
overflow: auto;
/* Box styling matching .plan-chip-dropdown */
background: var(--secondary-2);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
padding: var(--space-4);
}
.console-line {
font-family: var(--code-font-family);
font-size: 11px;
color: var(--secondary-12);
padding: 1px 0;
line-height: 1.4;
overflow-wrap: anywhere;
}
.console-line::before {
content: "→";
margin-right: 6px;
color: var(--primary-10);
}
.console-line--result {
color: var(--success-11);
}
.console-line--result::before {
content: "";
margin-right: 0;
}
.console-line--error {
color: var(--failure-11);
}
.console-line--error::before {
color: var(--failure-9);
}
/* ===========================================
Chip Pattern: str_replace_editor Elements
=========================================== */
/* Wrapper class for str_replace_editor chips */
.str-replace-editor-chip {
display: block;
}
/* Diff container within chip dropdown */
.chip-diff-container {
font-family: var(--code-font-family);
font-size: var(--font-size-2);
line-height: 1.5;
max-height: 200px;
overflow: auto;
}
.app-editor-chip .app-editor-source-preview {
max-height: min(480px, 50vh);
overflow: auto;
}
.app-editor-chip .app-editor-source-preview__code {
margin: 0;
min-width: max-content;
white-space: pre;
}
/* Diff lines - simplified inline display */
.chip-diff-line {
display: block;
padding: var(--space-1) var(--space-2);
margin: 2px 0;
border-radius: var(--radius-2);
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
}
.chip-diff-del {
background: var(--secondary-2);
color: var(--secondary-10);
border-left: 3px solid var(--secondary-6);
}
.chip-diff-add {
background: var(--success-2);
color: var(--success-11);
border-left: 3px solid var(--success-9);
}
.chip-diff-placeholder {
color: var(--secondary-9);
font-style: italic;
padding: var(--space-2);
}
.chip-diff-context {
color: var(--secondary-9);
opacity: 0.85;
}
.chip-diff-context-label {
font-style: italic;
font-size: var(--font-size-1);
margin-right: var(--space-1);
opacity: 0.9;
}
/* Section header with actions (for create command's Open button) */
.plan-chip-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-2);
}
.plan-chip-section-header .plan-chip-section-label {
margin-bottom: 0;
}
/* Open button in chip dropdown */
.chip-open-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1px;
/* The glyph is 8px; the target is what has to be reachable. */
width: 24px;
height: 24px;
color: var(--secondary-11);
background: transparent;
border: none;
border-radius: var(--radius-1);
cursor: pointer;
transition:
background-color var(--duration-fast) var(--ease-out-cubic),
color var(--duration-fast) var(--ease-out-cubic);
}
.chip-open-btn:hover {
background: var(--secondary-3);
color: var(--secondary-12);
}
.chip-open-btn svg {
width: 8px;
height: 8px;
}
/* Meta information (line count, etc.) */
.chip-meta {
font-size: var(--font-size-1);
color: var(--secondary-9);
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--secondary-3);
}
/* Truncation hint shown when streaming content is clipped to show only the tail.
Appears below code blocks and diff containers to communicate that what's
visible is a live preview of the latest content, not the full document. */
.chip-preview-hint {
font-size: var(--font-size-1);
color: var(--secondary-8);
margin-top: var(--space-1);
font-style: italic;
}
/* Skeleton loader for loading states */
.chip-skeleton {
padding: var(--space-2);
}
.chip-skeleton-line {
height: 12px;
background: linear-gradient(90deg, var(--secondary-3) 25%, var(--secondary-2) 50%, var(--secondary-3) 75%);
background-size: 200% 100%;
animation: chip-skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-2);
margin-bottom: var(--space-2);
}
.chip-skeleton-line:last-child {
margin-bottom: 0;
}
.chip-skeleton-line--short {
width: 60%;
}
@keyframes chip-skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Code block for str_replace_editor create/view commands */
.str-replace-editor-chip .chip-code-block {
background: var(--secondary-2);
border: 1px solid var(--secondary-3);
border-radius: var(--radius-2);
max-height: var(--space-14);
overflow-y: auto;
}
.str-replace-editor-chip .chip-code-block pre {
margin: 0;
padding: var(--space-2);
font-family: var(--code-font-family);
font-size: var(--font-size-2);
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
color: var(--secondary-12);
}
/* Height limit for str_replace_editor dropdown content.
Prevents large diffs, body previews, and search results from
consuming excessive vertical space. Same 200px limit as chip-code-block
and chip-diff-container for visual consistency. */
.str-replace-editor-chip .plan-chip-dropdown {
max-height: 300px;
overflow-y: auto;
}
/* Search result cards for str_replace_editor search command.
Each match is a compact card with a line-number badge and
bounded context preview — scannable, not a wall of text. */
.str-replace-editor-chip .search-results-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.str-replace-editor-chip .search-match-item {
background: var(--secondary-1);
border: 1px solid var(--secondary-3);
border-radius: var(--radius-2);
padding: var(--space-2);
}
.str-replace-editor-chip .search-match-item + .search-match-item {
margin-top: 0; /* gap handles spacing */
}
.str-replace-editor-chip .search-match-header {
font-size: var(--font-size-1);
font-weight: var(--font-weight-medium);
color: var(--secondary-9);
margin-bottom: var(--space-1);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-1);
}
.str-replace-editor-chip .search-match-context {
margin: 0;
padding: 0;
font-family: var(--code-font-family);
font-size: var(--font-size-2);
line-height: 1.5;
color: var(--secondary-11);
word-break: break-word;
overflow-wrap: anywhere;
max-height: 120px;
overflow-y: auto;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.chip-skeleton-line {
animation: none;
background: var(--secondary-3);
}
}
/* ===========================================
Chip Pattern: read_image Elements
=========================================== */
/* Wrapper class for read_image chips */
.read-image-chip {
display: block;
}
/* Thumbnails container */
.read-image-thumbnails {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
/* Individual thumbnail */
.read-image-thumb {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: var(--radius-2);
border: 1px solid var(--secondary-4);
background: var(--secondary-2);
}
/* Analysis text - smaller font, readable */
.read-image-analysis {
font-size: var(--font-size-1);
color: var(--secondary-11);
line-height: 1.5;
word-break: break-word;
}
/* Expand/collapse button for truncated analysis */
.read-image-expand {
display: inline;
padding: 0;
margin-left: var(--space-1);
background: none;
border: none;
color: var(--primary-9);
font-size: var(--font-size-1);
cursor: pointer;
text-decoration: none;
}
.read-image-expand:hover {
text-decoration: underline;
}
/* Clickable thumbnail link wrapper */
.read-image-thumb-link {
display: block;
border-radius: var(--radius-2);
transition: opacity 0.15s ease;
}
.read-image-thumb-link:hover {
opacity: 0.85;
}
/* Image pills for streaming state (no thumbnails to avoid flicker) */
.read-image-pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.read-image-pill {
display: inline-flex;
align-items: center;
font-size: var(--font-size-0);
color: var(--secondary-11);
text-decoration: none;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-pill);
background: var(--secondary-3);
border: 1px solid var(--secondary-4);
transition: background 0.15s ease, border-color 0.15s ease;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.read-image-pill:hover {
background: var(--secondary-4);
border-color: var(--secondary-5);
}
/* Legacy: File list styles (if still needed) */
.read-image-files {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.read-image-file-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-1);
color: var(--secondary-11);
}
.read-image-filename {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* -------------------------------------------
Slice 1: Side-by-Side Layout (Single Image)
------------------------------------------- */
/* Flex row container for side-by-side layout */
.read-image-row {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
/* Thumbnail column (fixed width) */
.read-image-thumb-col {
flex-shrink: 0;
}
/* Larger thumbnail for side-by-side (100px) */
.read-image-thumb-lg {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: var(--radius-3);
border: 1px solid var(--secondary-4);
background: var(--secondary-2);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.read-image-thumb-lg:hover {
transform: scale(1.02);
box-shadow: var(--shadow-2);
}
.read-image-thumb-wrapper {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-3);
background: var(--secondary-2);
overflow: hidden;
}
.read-image-thumb-wrapper--lg {
width: 100px;
height: 100px;
}
.read-image-thumb-wrapper--card {
width: 120px;
height: 90px;
}
.read-image-thumb-skeleton {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(to right, var(--secondary-5) 8%, var(--secondary-3) 18%, var(--secondary-5) 33%);
background-size: 80rem 100%;
animation: shimmer 1.5s infinite linear;
opacity: 1;
transition: opacity 0.2s ease;
pointer-events: none;
}
.read-image-thumb-wrapper img {
opacity: 0;
transition: opacity 0.2s ease;
}
.read-image-thumb-wrapper[data-loaded="true"] img {
opacity: 1;
}
.read-image-thumb-wrapper[data-error="true"] img {
opacity: 0;
}
.read-image-thumb-fallback {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-1);
font-size: var(--font-size-0);
color: var(--secondary-10);
background: var(--secondary-2);
}
.read-image-thumb-wrapper[data-loaded="true"] .read-image-thumb-skeleton {
opacity: 0;
}
.read-image-thumb-wrapper[data-error="true"] .read-image-thumb-skeleton {
opacity: 0;
}
.read-image-thumb-wrapper[data-error="true"] .read-image-thumb-fallback {
display: flex;
}
.read-image-thumb-wrapper[data-error="true"] img {
display: none;
}
/* Analysis column (flex to fill remaining space) */
.read-image-analysis-col {
flex: 1;
min-width: 0;
}
/* Analysis text in side-by-side layout */
.read-image-analysis-text {
font-size: var(--font-size-2);
color: var(--secondary-11);
line-height: 1.5;
word-break: break-word;
}
/* Objective/context block (avoid pre-wrap indentation) */
.read-image-meta {
margin-bottom: var(--space-2);
}
.read-image-meta .plan-chip-section-label {
margin-bottom: var(--space-1);
}
.read-image-meta-text {
font-size: var(--font-size-1);
color: var(--secondary-11);
line-height: 1.4;
white-space: normal;
word-break: break-word;
}
/* Show more/less button */
.read-image-show-more {
display: inline;
padding: 0;
margin: 0;
background: none;
border: none;
font-size: var(--font-size-1);
color: var(--primary-9);
cursor: pointer;
font-weight: var(--font-weight-medium);
}
.read-image-show-more:hover {
text-decoration: underline;
}
/* -------------------------------------------
Slice 2: Gallery Layout (Multi-Image)
------------------------------------------- */
/* Gallery container */
.read-image-gallery {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Images row (horizontal scrollable strip) */
.read-image-images-row {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
/* Individual image card with hover effects */
.read-image-card {
position: relative;
flex-shrink: 0;
border-radius: var(--radius-3);
overflow: hidden;
border: 1px solid var(--secondary-4);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.read-image-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-3);
}
/* Gallery thumbnail (120x90, 4:3 aspect) */
.read-image-card img {
display: block;
width: 120px;
height: 90px;
object-fit: cover;
}
/* Hover overlay with filename */
.read-image-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
display: flex;
align-items: flex-end;
padding: var(--space-2);
opacity: 0;
transition: opacity 0.15s ease;
}
.read-image-card:hover .read-image-card-overlay {
opacity: 1;
}
.read-image-card-filename {
font-size: var(--font-size-0);
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Expand icon on hover */
.read-image-card-expand {
position: absolute;
top: var(--space-2);
right: var(--space-2);
width: 24px;
height: 24px;
background: rgba(0,0,0,0.5);
border-radius: var(--radius-2);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.15s ease;
}
.read-image-card:hover .read-image-card-expand {
opacity: 1;
}
.read-image-card-expand svg {
width: 14px;
height: 14px;
color: white;
}
/* Analysis box below gallery */
.read-image-analysis-box {
background: var(--secondary-3);
border-radius: var(--radius-3);
padding: var(--space-3);
}
.read-image-analysis-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.read-image-analysis-label {
font-size: var(--font-size-1);
font-weight: var(--font-weight-medium);
color: var(--secondary-9);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Cached badge */
.read-image-cached-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px 6px;
background: var(--success-3);
border-radius: var(--radius-pill);
font-size: var(--font-size-0);
color: var(--success-11);
font-weight: var(--font-weight-medium);
}
.read-image-routing-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px 6px;
background: var(--accent-3);
border-radius: var(--radius-pill);
font-size: var(--font-size-0);
color: var(--accent-11);
font-weight: var(--font-weight-medium);
}
/* -------------------------------------------
Slice 3: Progress Bar (Streaming Multi-Image)
------------------------------------------- */
/* Progress section container */
.read-image-progress-section {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
/* Progress bar track */
.read-image-progress-bar {
flex: 1;
height: 4px;
background: var(--secondary-4);
border-radius: var(--radius-pill);
overflow: hidden;
}
/* Indeterminate progress fill (animated) */
.read-image-progress-fill {
height: 100%;
background: var(--primary-9);
border-radius: var(--radius-pill);
animation: read-image-progress-indeterminate 1.5s ease-in-out infinite;
}
@keyframes read-image-progress-indeterminate {
0% {
width: 0%;
margin-left: 0%;
}
50% {
width: 40%;
margin-left: 30%;
}
100% {
width: 0%;
margin-left: 100%;
}
}
/* Progress label */
.read-image-progress-label {
font-size: var(--font-size-1);
color: var(--secondary-9);
flex-shrink: 0;
min-width: 60px;
text-align: right;
}
/* File pill states for progress tracking */
.read-image-pill.done {
background: var(--success-3);
border-color: var(--success-9);
color: var(--success-11);
}
.read-image-pill.processing {
background: var(--primary-2);
border-color: var(--primary-3);
color: var(--primary-11);
}
.read-image-pill.pending {
background: var(--secondary-3);
border-color: var(--secondary-4);
color: var(--secondary-9);
}
/* Pill with check icon for done state */
.read-image-pill svg {
width: 12px;
height: 12px;
margin-right: var(--space-1);
flex-shrink: 0;
}
/* Mini spinner inside processing pill */
.read-image-pill .read-image-pill-spinner {
width: 10px;
height: 10px;
border: 2px solid var(--primary-9);
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: var(--space-1);
flex-shrink: 0;
}
/* Skeleton loader for analysis during streaming */
.read-image-skeleton {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.read-image-skeleton-line {
height: 12px;
background: linear-gradient(90deg, var(--secondary-4) 25%, var(--secondary-3) 50%, var(--secondary-4) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-1);
}
.read-image-skeleton-line:nth-child(2) {
width: 80%;
}
.read-image-skeleton-line:nth-child(3) {
width: 60%;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.read-image-progress-fill {
animation: none;
width: 50%;
margin-left: 25%;
}
.read-image-skeleton-line {
animation: none;
background: var(--secondary-3);
}
.read-image-thumb-skeleton {
animation: none;
background: var(--secondary-3);
}
.read-image-pill .read-image-pill-spinner {
animation: none;
}
}
/* ===========================================
B3: Grouped Sources by Domain
=========================================== */
/* Outer collapsible wrapper for large result sets */
.grouped-sources-outer {
margin-top: var(--space-1);
margin-bottom: var(--space-4);
margin-left: var(--space-4);
border-top: none;
padding-top: 0;
}
.grouped-sources-summary {
list-style: none;
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-1);
font-weight: var(--font-weight-bold);
color: var(--secondary-9);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
user-select: none;
padding: var(--space-1) 0;
}
.grouped-sources-summary::-webkit-details-marker {
display: none;
}
.grouped-sources-summary::before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid var(--secondary-9);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.grouped-sources-outer[open] > .grouped-sources-summary::before {
transform: rotate(90deg);
}
.grouped-sources-summary-text {
flex-shrink: 0;
}
.grouped-sources-peek {
font-weight: var(--font-weight-regular);
color: var(--secondary-10);
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60%;
}
/* Inner grouped sources container */
.grouped-sources {
margin-top: var(--space-2);
padding-top: var(--space-2);
}
/* Legacy header (not used when outer wrapper is present) */
.grouped-sources-header {
font-size: var(--font-size-1);
font-weight: var(--font-weight-bold);
color: var(--secondary-9);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
.domain-group {
margin-bottom: var(--space-1);
}
.domain-group-header {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
background: var(--secondary-1);
border: 1px solid transparent;
border-radius: var(--radius-2);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease;
}
.domain-group-header:hover {
background: var(--secondary-2);
border-color: var(--secondary-4);
}
.domain-group-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-9);
transition: transform 0.2s ease;
}
.domain-group.expanded .domain-group-icon,
.domain-group[open] .domain-group-icon {
transform: rotate(90deg);
color: var(--secondary-12);
}
.domain-group-label {
flex: 1;
font-size: var(--font-size-2);
font-weight: var(--font-weight-medium);
color: var(--secondary-12);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.domain-group-count {
font-size: var(--font-size-1);
color: var(--secondary-9);
background: var(--secondary-3);
padding: 1px 6px;
border-radius: var(--radius-pill);
font-weight: var(--font-weight-bold);
}
.domain-group-items {
padding-left: 24px;
margin-top: var(--space-1);
border-left: 1px solid var(--secondary-4);
margin-left: 8px;
}
/* For JS-based expansion (legacy) */
.domain-group:not(details) .domain-group-items {
display: none;
}
.domain-group.expanded .domain-group-items {
display: block;
}
/* For native details element - reset default marker */
details.domain-group > summary {
list-style: none;
}
details.domain-group > summary::-webkit-details-marker {
display: none;
}
.domain-source-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 6px 0;
padding-left: var(--space-3);
cursor: pointer;
position: relative;
}
.domain-source-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 10px;
height: 1px;
background: var(--secondary-4);
}
.domain-source-item:hover .domain-source-title {
color: var(--primary-9);
text-decoration: underline;
}
.domain-source-num {
font-size: var(--font-size-1);
color: var(--secondary-9);
font-family: var(--code-font-family);
width: 24px;
flex-shrink: 0;
}
.domain-source-title {
font-size: var(--font-size-2);
color: var(--secondary-11);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
/* "Other domains" bucket styling */
.domain-group--other .domain-group-label {
color: var(--secondary-11);
font-style: italic;
}
.domain-group--other .domain-group-count {
background: var(--secondary-4);
}
/* ===========================================
Quick Sources (inline chips in tool block)
=========================================== */
.quick-sources {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-top: 1px solid var(--secondary-3);
}
.quick-source {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 4px 10px;
background: var(--secondary-2);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-2);
font-size: var(--font-size-2);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease;
max-width: 200px;
text-decoration: none;
color: inherit;
}
.quick-source:hover {
background: var(--primary-3);
color: var(--primary-11);
border-color: var(--primary-4);
text-decoration: none;
}
.quick-source:focus-visible {
outline: 2px solid var(--primary-9);
outline-offset: 2px;
}
.quick-source-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.quick-sources-more {
color: var(--secondary-9);
font-size: var(--font-size-2);
padding: 4px 8px;
cursor: pointer;
white-space: nowrap;
background: none;
border: none;
font-family: inherit;
}
.quick-sources-more:hover {
color: var(--primary-9);
text-decoration: underline;
}
.quick-sources-more:focus-visible {
outline: 2px solid var(--primary-9);
outline-offset: 2px;
}
/* Inline variant for quick sources in block_type 6 (not inside tool block) */
.quick-sources--inline {
border-top: none;
padding-left: var(--space-4);
margin-top: var(--space-2);
margin-bottom: var(--space-1);
}
/* ============================================================================
* Text Selection Chips (for "Add Selection" feature in chat-input)
* ============================================================================ */
.text-selections-container {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
padding-bottom: 0;
max-height: 80px;
overflow: hidden;
}
.text-selection-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
background: var(--primary-3);
border: 1px solid var(--primary-5);
border-radius: var(--radius-2);
font-size: var(--font-size-1);
max-width: 300px;
overflow: hidden;
}
.text-selections-container--codesigner {
padding-top: var(--space-2);
}
.text-selection-chip--codesigner {
background: var(--accent-3);
border-color: var(--accent-6);
}
.text-selection-chip--codesigner .text-selection-label {
color: var(--accent-11);
}
.text-selection-chip--codesigner .text-selection-preview {
color: var(--accent-10);
}
.text-selection-grip {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary-8);
flex-shrink: 0;
cursor: grab;
}
.main-panel chat-conversation .text-selection-grip svg {
width: 6px;
height: 11px;
}
.text-selection-grip:active {
cursor: grabbing;
}
.text-selection-label {
font-weight: 500;
color: var(--primary-11);
white-space: nowrap;
flex-shrink: 0;
}
.text-selection-preview {
color: var(--primary-10);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.text-selection-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--primary-5);
color: var(--primary-11);
font-size: 12px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease;
}
.text-selection-remove:hover {
background: var(--primary-7);
}
.text-selection-clear-all {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2);
border: 1px dashed var(--secondary-7);
border-radius: var(--radius-2);
background: transparent;
color: var(--secondary-11);
font-size: var(--font-size-1);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease;
}
.text-selection-clear-all:hover {
background: var(--secondary-3);
border-color: var(--secondary-8);
color: var(--secondary-12);
}
/* Dark mode adjustments */
body.dark .text-selection-chip {
background: var(--primary-3);
border-color: var(--primary-6);
}
body.dark .text-selection-grip {
color: var(--primary-7);
}
body.dark .text-selection-label {
color: var(--primary-11);
}
body.dark .text-selection-preview {
color: var(--primary-10);
}
body.dark .text-selection-remove {
background: var(--primary-5);
color: var(--primary-11);
}
body.dark .text-selection-remove:hover {
background: var(--primary-7);
}
/* Text selection tooltip (hover preview) */
.text-selection-tooltip {
position: fixed;
z-index: var(--z-index-6, 1000);
max-width: 400px;
max-height: 300px;
background: var(--secondary-1);
border: 1px solid var(--secondary-6);
border-radius: var(--radius-3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
overflow: hidden;
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.text-selection-tooltip.visible {
opacity: 1;
}
.text-selection-tooltip__header {
padding: var(--space-2) var(--space-3);
background: var(--secondary-3);
border-bottom: 1px solid var(--secondary-5);
font-size: var(--font-size-1);
font-weight: 500;
color: var(--secondary-11);
}
.text-selection-tooltip__body {
margin: 0;
padding: var(--space-2) var(--space-3);
font-family: var(--font-mono);
font-size: var(--font-size-1);
line-height: 1.5;
word-break: break-word;
color: var(--secondary-12);
max-height: 240px;
overflow-y: auto;
}
/* Dark mode */
body.dark .text-selection-tooltip {
background: var(--secondary-2);
border-color: var(--secondary-7);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
body.dark .text-selection-tooltip__header {
background: var(--secondary-4);
border-color: var(--secondary-6);
}
/* Selection chip drag-and-drop states */
.text-selection-chip.dragging {
opacity: 0.5;
border-style: dashed;
}
/* Drop target indication for container with chips */
.text-selections-container.drop-target {
background: var(--primary-2);
border: 2px dashed var(--primary-7);
border-radius: var(--radius-3);
min-height: 40px;
}
/* Empty drop zone (for non-main inputs without selections) */
.selection-drop-zone {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2) var(--space-3);
border: 2px dashed var(--secondary-6);
border-radius: var(--radius-3);
background: var(--secondary-2);
min-height: 36px;
margin: var(--space-2) var(--space-3);
margin-bottom: 0;
}
.selection-drop-zone.active {
border-color: var(--primary-7);
background: var(--primary-2);
}
.selection-drop-zone__text {
font-size: var(--font-size-1);
color: var(--secondary-10);
}
.selection-drop-zone.active .selection-drop-zone__text {
color: var(--primary-11);
}
/* Dark mode for drag-drop */
body.dark .text-selections-container.drop-target {
background: var(--primary-3);
border-color: var(--primary-6);
}
body.dark .selection-drop-zone {
background: var(--secondary-3);
border-color: var(--secondary-7);
}
body.dark .selection-drop-zone.active {
background: var(--primary-3);
border-color: var(--primary-6);
}
/* ============================================================================
Selection blocks (block_type: 8) - document text selections in chat
============================================================================ */
.selection-block {
display: flex;
flex-direction: column;
margin: 4px 0;
border-radius: var(--radius-3);
border: 1px solid var(--secondary-6);
background: var(--secondary-2);
overflow: hidden;
}
.selection-block__header {
display: flex;
align-items: center;
gap: 4px;
padding: 0;
background: var(--secondary-3);
border-bottom: 1px solid var(--secondary-6);
font-size: 11px;
color: var(--secondary-11);
}
.selection-block__icon {
font-size: 11px;
color: var(--primary-9);
line-height: 1;
}
.selection-block__label {
display: flex;
align-items: center;
gap: 4px;
}
.selection-block__body {
padding: 0;
margin: 0;
}
.selection-block__code {
margin: 0;
padding: 6px 8px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.4;
word-break: break-word;
background: var(--secondary-1);
color: var(--secondary-12);
max-height: 150px;
overflow-y: auto;
}
/* Cursor position variant (no text body) */
.selection-block--cursor {
border-style: dashed;
background: transparent;
}
.selection-block--cursor .selection-block__header {
background: transparent;
border-bottom: none;
padding: 4px 8px;
}
/* Codesigner feedback variant */
.selection-block--codesigner {
border-color: var(--primary-7, #2563eb);
background: var(--primary-1, #eff6ff);
}
.selection-block--codesigner .selection-block__header {
background: var(--primary-3, #dbeafe);
border-color: var(--primary-6, #93c5fd);
color: var(--primary-11, #1e40af);
}
.selection-block--codesigner .selection-block__icon {
color: var(--primary-9, #2563eb);
}
.selection-block--codesigner .selection-block__label code {
font-family: var(--font-mono);
font-size: 10px;
background: var(--primary-4, #bfdbfe);
padding: 1px 4px;
border-radius: 3px;
color: var(--primary-11, #1e40af);
}
.selection-block--codesigner .selection-block__code {
background: var(--primary-1, #eff6ff);
color: var(--primary-11, #1e40af);
}
/* Dark mode adjustments */
body.dark .selection-block {
border-color: var(--secondary-7);
background: var(--secondary-3);
}
body.dark .selection-block__header {
background: var(--secondary-4);
border-color: var(--secondary-7);
}
body.dark .selection-block__code {
background: var(--secondary-2);
}
body.dark .selection-block--cursor {
background: transparent;
}
body.dark .selection-block--codesigner {
border-color: var(--primary-8, #3b82f6);
background: var(--primary-2, #1e3a5f);
}
body.dark .selection-block--codesigner .selection-block__header {
background: var(--primary-4, #1e40af);
border-color: var(--primary-7, #3b82f6);
color: var(--primary-11, #93c5fd);
}
body.dark .selection-block--codesigner .selection-block__icon {
color: var(--primary-9, #60a5fa);
}
body.dark .selection-block--codesigner .selection-block__label code {
background: var(--primary-6, #1d4ed8);
color: var(--primary-11, #93c5fd);
}
body.dark .selection-block--codesigner .selection-block__code {
background: var(--primary-2, #1e3a5f);
color: var(--primary-11, #93c5fd);
}
/* User message selection blocks container - match input-wrapper styling */
.user-selection-blocks {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-1);
background-color: var(--secondary-1);
padding: var(--space-2);
margin: 0 0 var(--space-1) 0;
width: 100%;
border: 1px solid var(--secondary-5);
border-radius: var(--radius-4);
}
/* Desktop: Constrain to match input-wrapper */
@media (min-width: 769px) {
.user-selection-blocks {
max-width: var(--thread-max-width, 1024px);
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-1);
}
}
.user-selection-blocks .selection-block {
margin: 0;
border: none;
background: var(--secondary-2);
}
.user-selection-blocks .selection-block__header {
background: transparent;
border-bottom: 1px solid var(--secondary-4);
}
.user-selection-blocks .selection-block--cursor {
border: 1px dashed var(--secondary-6);
background: transparent;
}
body.dark .user-selection-blocks {
background-color: var(--secondary-2);
border-color: var(--secondary-6);
}
body.dark .user-selection-blocks .selection-block {
background: var(--secondary-3);
}
body.dark .user-selection-blocks .selection-block__header {
border-color: var(--secondary-5);
}
/* ============================================================================
Table Grid Picker (Insert Table UI)
============================================================================ */
.table-button-container {
position: relative;
display: inline-flex;
}
.table-grid-picker {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: var(--space-2);
padding: var(--space-3);
background: var(--color-surface, var(--secondary-1));
border: 1px solid var(--secondary-6);
border-radius: var(--radius-3);
box-shadow: var(--shadow-3);
z-index: var(--z-index-9, 900);
}
.table-grid {
display: grid;
gap: 2px;
}
.table-grid-cell {
width: 20px;
height: 20px;
border: 1px solid var(--secondary-6);
border-radius: var(--radius-1);
background: var(--secondary-2);
cursor: pointer;
transition: background-color 0.1s ease, border-color 0.1s ease;
}
.table-grid-cell:hover {
background: var(--secondary-3);
}
.table-grid-cell--highlighted {
background: var(--primary-4);
border-color: var(--primary-7);
}
.table-grid-label {
margin-top: var(--space-2);
text-align: center;
font-size: var(--font-size-1);
color: var(--secondary-11);
font-weight: var(--font-weight-medium);
}
/* Danger button for delete table */
.chat-nav-sidebar__toolbar-button--danger {
color: var(--danger-11, #e5484d);
}
.chat-nav-sidebar__toolbar-button--danger:hover:not(:disabled) {
background-color: var(--danger-3, #ffefef);
border-color: var(--danger-6, #f9c6c6);
color: var(--danger-11, #e5484d);
}
/* Dark mode adjustments for danger button */
body.dark .chat-nav-sidebar__toolbar-button--danger:hover:not(:disabled) {
background-color: var(--danger-3, #3a1616);
}
/* ============================================================================
Table Editing Styles (prosemirror-tables cell selection)
============================================================================ */
/* Selected cells in table */
.ProseMirror .selectedCell:after {
z-index: 2;
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
background: var(--primary-4, rgba(59, 130, 246, 0.2));
pointer-events: none;
}
/* Ensure table cells have relative positioning for selection overlay */
.ProseMirror td,
.ProseMirror th {
position: relative;
}
/* Table cell focus outline */
.ProseMirror td:focus,
.ProseMirror th:focus {
outline: 2px solid var(--primary-7);
outline-offset: -2px;
}
/* Mobile adjustments for table toolbar */
@media (max-width: 480px) {
.table-grid-picker {
left: auto;
right: 0;
transform: none;
}
.table-grid-cell {
width: 24px;
height: 24px;
}
}
/* ============================================================================
Skills Chip Styles (D2 Pattern - read command detail view)
============================================================================ */
.flows-detail {
padding: var(--space-2) 0;
}
.flows-detail-title {
font-weight: 600;
font-size: var(--font-size-2);
color: var(--secondary-12);
margin-bottom: var(--space-1);
}
.flows-detail-trigger {
font-size: var(--font-size-1);
color: var(--secondary-11);
margin-bottom: var(--space-2);
}
.flows-detail-label {
font-weight: 500;
color: var(--secondary-10);
}
.flows-detail-preview {
font-size: var(--font-size-1);
color: var(--secondary-10);
line-height: 1.5;
padding: var(--space-2);
background: var(--secondary-2);
border-radius: var(--radius-2);
max-height: 200px;
overflow-y: auto;
}
.byok-badge {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 5px;
background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary-3) 100%);
border: 1px solid var(--primary-6);
border-radius: 4px;
font-size: 10px;
font-weight: var(--font-weight-bold);
color: var(--primary-11);
letter-spacing: 0.02em;
margin-left: var(--space-1);
}
.byok-badge svg {
width: 10px !important;
height: 10px !important;
margin-left: 0 !important;
display: block;
}
/* ==========================================================================
Ask User Interactive Card
========================================================================== */
.ask-user-card {
border: 1px solid var(--primary-6);
border-radius: 12px;
padding: var(--space-4);
margin: var(--space-2) 0;
background: var(--primary-2);
}
.ask-user-card--answered {
border-color: var(--secondary-5);
background: var(--secondary-2);
}
.ask-user-card--cancelled {
border-color: var(--secondary-5);
background: var(--secondary-1);
}
.ask-user-header--cancelled {
color: var(--secondary-11);
font-size: var(--font-size-1);
}
.ask-user-cancelled-note {
color: var(--secondary-9);
font-size: var(--font-size-0);
}
/* Message-level "Stopped" indicator shown below messages that were
stopped mid-stream (stop button / Escape key, not ask_user cancel). */
.message-stop-indicator-row {
display: flex;
align-items: center;
justify-content: flex-start;
margin: var(--space-2) 0;
}
.message-stop-indicator {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-1);
font-weight: var(--font-weight-medium);
color: var(--secondary-11);
background: var(--secondary-3);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-5);
line-height: 1;
}
.ask-user-header {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--font-size-1);
font-weight: var(--font-weight-semibold);
color: var(--primary-10);
}
.ask-user-header--answered {
color: var(--secondary-10);
font-size: var(--font-size-2);
margin-bottom: var(--space-3);
}
.ask-user-question {
margin-bottom: var(--space-3);
}
.ask-user-question-text {
font-size: var(--font-size-1);
color: var(--secondary-12);
margin-bottom: var(--space-1);
font-weight: var(--font-weight-medium);
}
.ask-user-choices {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 4px;
}
.ask-user-choice-btn {
padding: 6px 14px;
border-radius: 8px;
border: 1px solid var(--primary-7);
background: var(--secondary-1);
color: var(--primary-10);
font-size: var(--font-size-1);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease;
}
.ask-user-choice-btn:hover {
background: var(--primary-3);
}
.ask-user-choice-btn--selected {
background: var(--primary-10);
color: var(--secondary-2);
border-color: var(--primary-10);
}
.ask-user-choice-btn--selected:hover {
background: var(--primary-11);
color: var(--secondary-1);
border-color: var(--primary-11);
}
.ask-user-input {
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--primary-6);
border-radius: 8px;
font-size: var(--font-size-1);
outline: none;
box-sizing: border-box;
background: var(--secondary-1);
color: var(--secondary-12);
}
.ask-user-input:focus {
border-color: var(--primary-8);
}
.ask-user-submit {
padding: var(--space-2) 20px;
border-radius: 8px;
border: none;
background: var(--primary-10);
color: var(--secondary-2);
font-size: var(--font-size-1);
font-weight: var(--font-weight-semibold);
cursor: pointer;
margin-top: var(--space-1);
transition: background 0.15s ease;
}
.ask-user-submit:hover {
background: var(--primary-11);
}
.ask-user-chip .ask-user-card--answered {
box-sizing: border-box;
max-width: min(480px, calc(100vw - var(--space-6)));
margin: var(--space-1) 0 var(--space-1) var(--space-1);
padding: var(--space-1) var(--space-3);
border-color: var(--secondary-4);
border-radius: var(--radius-4);
}
.ask-user-card--answered .ask-user-answer-item {
display: grid;
gap: var(--space-half);
margin: 0;
padding: var(--space-2) 0;
}
.ask-user-card--answered .ask-user-answer-item + .ask-user-answer-item {
border-top: 1px solid var(--secondary-4);
}
.ask-user-card--answered .ask-user-answer-label {
display: block;
color: var(--secondary-10);
font-size: var(--font-size-1-half);
line-height: var(--line-height-1);
}
.ask-user-card--answered .ask-user-answer-value {
display: block;
margin: 0;
color: var(--secondary-12);
font-size: var(--font-size-2);
line-height: var(--line-height-2);
}
.ask-user-card--answered .ask-user-answer-attachments {
margin: var(--space-half) 0 0;
}
/* ask_user guide banner in AI response — compact strip */
.ask-user-guide {
display: flex;
align-items: center;
padding: var(--space-1) var(--space-2);
margin: var(--space-1) 0 0 0;
background: var(--primary-2);
border: 1px solid var(--primary-6);
border-radius: 6px;
color: var(--primary-10);
font-size: var(--font-size-1);
font-weight: var(--font-weight-medium);
width: fit-content;
}
/* Compact message-content when waiting for ask_user answers */
.message-content--ask-user-pending {
padding: var(--space-1) var(--space-2);
}
/* ask_user pending indicator (inline in AI response) */
.ask-user-card--pending {
border-color: var(--primary-5);
background: var(--primary-1);
padding: var(--space-3) var(--space-4);
}
.ask-user-header--pending {
color: var(--primary-9);
font-size: var(--font-size-0);
margin-bottom: 0;
}
/* ask_user takeover (main chat-input) */
.input-wrapper--ask-user-takeover {
padding: 0;
border-color: var(--secondary-6);
background: var(--secondary-1);
overflow: hidden;
box-shadow: var(--shadow-4);
transform: none;
}
.ask-user-takeover {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
max-height: min(68vh, 640px);
overflow: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
color: var(--secondary-12);
background: var(--secondary-1);
}
.ask-user-takeover__header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--secondary-5);
background: var(--secondary-1);
}
.ask-user-takeover__header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--secondary-5);
border-radius: var(--radius-4);
color: var(--secondary-10);
background: var(--secondary-2);
}
.ask-user-takeover__header-icon svg {
width: 16px;
height: 16px;
}
.ask-user-takeover__heading {
min-width: 0;
}
.ask-user-takeover__heading h2,
.ask-user-takeover__heading p {
margin: 0;
}
.ask-user-takeover__heading h2 {
color: var(--secondary-12);
font-size: var(--font-size-2-half);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-3);
}
.ask-user-takeover__heading p {
margin-top: 1px;
color: var(--secondary-9);
font-size: var(--font-size-1-half);
line-height: var(--line-height-2);
}
.ask-user-takeover__progress {
display: inline-flex;
align-items: center;
gap: var(--space-1-half);
color: var(--secondary-9);
font-size: var(--font-size-1-half);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-2);
white-space: nowrap;
}
.ask-user-takeover__progress[data-phase='posting'],
.ask-user-takeover__progress[data-phase='syncing'] {
color: var(--primary-11);
}
.ask-user-takeover__progress[data-phase='sync_failed'] {
color: var(--warning-11);
}
.ask-user-takeover__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-height: 0;
padding: var(--space-2);
overflow-y: auto;
}
.ask-user-takeover__question {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-inline-size: 0;
margin: 0;
padding: var(--space-3);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-4);
background: var(--secondary-1);
transition:
border-color 160ms var(--ease-out-cubic),
background-color 160ms var(--ease-out-cubic);
}
.ask-user-takeover__question[data-invalid='true'] {
border-color: var(--danger-7);
background: var(--danger-2);
}
.ask-user-takeover__question-text {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: 0;
color: var(--secondary-12);
font-size: var(--font-size-2-half);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-3);
}
.ask-user-takeover__question-index {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
width: 22px;
height: 22px;
border: 1px solid var(--secondary-5);
border-radius: 50%;
color: var(--secondary-10);
background: var(--secondary-2);
font-size: var(--font-size-1);
font-variant-numeric: tabular-nums;
}
.ask-user-takeover__required {
margin-left: auto;
color: var(--secondary-8);
font-size: var(--font-size-1);
font-weight: var(--font-weight-regular);
letter-spacing: var(--letter-spacing-1);
}
.ask-user-takeover__attachments {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
border: 1px dashed var(--secondary-6);
border-radius: var(--radius-4);
background: var(--secondary-2);
}
.ask-user-takeover__attach-btn {
min-height: 38px;
padding: 0 var(--space-3);
border: 1px solid var(--secondary-6);
border-radius: var(--radius-3);
color: var(--secondary-11);
background: var(--secondary-1);
font-size: var(--font-size-2);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition:
border-color 150ms var(--ease-out-cubic),
background-color 150ms var(--ease-out-cubic);
}
.ask-user-takeover__attachment-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.ask-user-takeover__attach-btn:focus-visible,
.ask-user-takeover__attachment-remove:focus-visible,
.ask-user-takeover__choice-btn:focus-visible,
.ask-user-takeover__input:focus-visible,
.ask-user-takeover__back-btn:focus-visible,
.ask-user-takeover__cancel:focus-visible,
.ask-user-takeover__submit:focus-visible {
outline: 2px solid var(--primary-8);
outline-offset: 2px;
}
.ask-user-takeover__file-picker {
border: 1px solid var(--secondary-5);
border-radius: var(--radius-4);
overflow: hidden;
}
.ask-user-takeover__attachment-hint {
color: var(--secondary-9);
font-size: var(--font-size-1-half);
line-height: var(--line-height-2);
}
.ask-user-takeover__attachment-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ask-user-takeover__attachment-chip {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-pill);
background: var(--secondary-3);
color: var(--secondary-11);
font-size: var(--font-size-1-half);
line-height: var(--line-height-2);
}
.ask-user-takeover__attachment-remove {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
margin: -4px -6px -4px 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--secondary-10);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
}
.ask-user-takeover__attachment-remove:disabled,
.ask-user-takeover__attach-btn:disabled,
.ask-user-takeover__choice-btn:disabled,
.ask-user-takeover__input:disabled,
.ask-user-takeover__back-btn:disabled,
.ask-user-takeover__cancel:disabled,
.ask-user-takeover__submit:disabled {
cursor: var(--cursor-disabled);
opacity: 0.58;
}
.ask-user-takeover__choices {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-2);
}
.ask-user-takeover__choice-btn {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 42px;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--secondary-5);
border-radius: var(--radius-3);
background: var(--secondary-1);
color: var(--secondary-11);
font-size: var(--font-size-2-half);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-3);
text-align: left;
cursor: pointer;
transition:
border-color 150ms var(--ease-out-cubic),
background-color 150ms var(--ease-out-cubic),
color 150ms var(--ease-out-cubic);
}
.ask-user-takeover__choice-mark {
position: relative;
flex: 0 0 16px;
width: 16px;
height: 16px;
border: 1px solid var(--secondary-7);
border-radius: 50%;
background: var(--secondary-1);
}
.ask-user-takeover__choice-btn--selected {
border-color: var(--primary-7);
color: var(--primary-11);
background: var(--primary-2);
}
.ask-user-takeover__choice-btn--selected .ask-user-takeover__choice-mark {
border-color: var(--primary-9);
box-shadow: inset 0 0 0 4px var(--secondary-1);
background: var(--primary-9);
}
.ask-user-takeover__input {
width: 100%;
min-height: 42px;
padding: 0 var(--space-3);
border: 1px solid var(--secondary-6);
border-radius: var(--radius-3);
font-size: var(--font-size-2-half);
outline: none;
box-sizing: border-box;
background: var(--secondary-1);
color: var(--secondary-12);
transition:
border-color 150ms var(--ease-out-cubic),
box-shadow 150ms var(--ease-out-cubic);
}
.ask-user-takeover__input:focus {
border-color: var(--primary-8);
box-shadow: 0 0 0 2px var(--primary-3);
}
.ask-user-takeover__input[aria-invalid='true'] {
border-color: var(--danger-8);
box-shadow: 0 0 0 2px var(--danger-3);
}
.ask-user-takeover__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 40px;
padding: 0 var(--space-4);
border-radius: var(--radius-3);
border: none;
background: var(--primary-10);
color: var(--secondary-2);
font-size: var(--font-size-2-half);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition:
background-color 150ms var(--ease-out-cubic),
transform 150ms var(--ease-out-cubic);
}
.ask-user-takeover__footer {
padding: var(--space-2) var(--space-4) var(--space-3);
border-top: 1px solid var(--secondary-5);
background: var(--secondary-1);
}
.ask-user-takeover__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.ask-user-takeover__cancel {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-height: 40px;
padding: 0 var(--space-3);
border-radius: var(--radius-3);
border: 1px solid var(--secondary-5);
background: var(--secondary-1);
color: var(--secondary-10);
font-size: var(--font-size-2-half);
cursor: pointer;
transition:
background-color 150ms var(--ease-out-cubic),
color 150ms var(--ease-out-cubic);
flex-shrink: 0;
}
.ask-user-takeover__feedback {
margin: 0 0 var(--space-2);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--danger-6);
border-radius: var(--radius-3);
color: var(--danger-11);
background: var(--danger-2);
font-size: var(--font-size-1-half);
line-height: var(--line-height-2);
}
.ask-user-takeover[data-phase='sync_failed'] .ask-user-takeover__feedback--operation {
border-color: var(--warning-6);
color: var(--warning-11);
background: var(--warning-2);
}
.ask-user-takeover__question-error {
margin: 0;
color: var(--danger-11);
font-size: var(--font-size-1-half);
line-height: var(--line-height-2);
}
.ask-user-answer-attachments {
display: block;
margin-left: var(--space-1);
color: var(--secondary-10);
font-size: var(--font-size-0);
}
/* Custom answer toggle — styled as an inline choice pill */
.ask-user-takeover__custom-toggle {
grid-column: 1 / -1;
}
/* Back button from custom answer view */
.ask-user-takeover__back-btn {
align-self: flex-start;
min-height: 34px;
padding: 0 var(--space-2);
border: 0;
border-radius: var(--radius-2);
background: transparent;
color: var(--secondary-10);
font-size: var(--font-size-1-half);
cursor: pointer;
transition: background-color 150ms var(--ease-out-cubic);
}
/* Choices/custom visibility toggling */
.ask-user-takeover__choices-view {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.ask-user-takeover__custom-view {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
[data-show-custom="true"] .ask-user-takeover__choices-view {
display: none;
}
[data-show-custom="false"] .ask-user-takeover__custom-view {
display: none;
}
.ask-user-takeover__spinner {
width: 14px;
height: 14px;
border: 1.5px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: ask-user-spin 700ms linear infinite;
}
@keyframes ask-user-spin {
to {
transform: rotate(360deg);
}
}
@media (hover: hover) {
.ask-user-takeover__attach-btn:not(:disabled):hover,
.ask-user-takeover__choice-btn:not(:disabled):hover,
.ask-user-takeover__cancel:not(:disabled):hover,
.ask-user-takeover__back-btn:not(:disabled):hover {
background: var(--secondary-3);
}
.ask-user-takeover__choice-btn--selected:not(:disabled):hover {
border-color: var(--primary-8);
background: var(--primary-3);
}
.ask-user-takeover__submit:not(:disabled):hover {
background: var(--primary-11);
transform: translateY(-1px);
}
}
@media (max-width: 768px) {
.input-wrapper--ask-user-takeover {
max-height: calc(100dvh - 88px);
}
.ask-user-takeover {
max-height: calc(100dvh - 88px);
}
.ask-user-takeover__header {
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-2);
padding: var(--space-3);
}
.ask-user-takeover__progress {
grid-column: 2;
}
.ask-user-takeover__body {
padding: var(--space-2);
}
.ask-user-takeover__question {
padding: var(--space-2-half);
}
.ask-user-takeover__question-text {
align-items: flex-start;
font-size: var(--font-size-2-half);
}
.ask-user-takeover__required {
padding-top: 2px;
}
.ask-user-takeover__choices {
grid-template-columns: 1fr;
}
.ask-user-takeover__choice-btn,
.ask-user-takeover__attach-btn,
.ask-user-takeover__input,
.ask-user-takeover__submit,
.ask-user-takeover__cancel {
min-height: 44px;
font-size: var(--font-size-2-half);
}
.ask-user-takeover__attach-btn {
flex: 1 1 140px;
}
.ask-user-takeover__footer {
padding: var(--space-2) var(--space-3)
calc(var(--space-3) + env(safe-area-inset-bottom));
}
.ask-user-takeover__submit {
flex: 1 1 auto;
}
.ask-user-takeover__attachment-list {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.ask-user-takeover *,
.ask-user-takeover *::before,
.ask-user-takeover *::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Source Engines display in chat input — inline SVG icons, no box backgrounds */
.specific-domains-list--engines {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
align-items: center;
}
.chat-input__engines-label {
font-size: var(--font-size-1);
color: var(--secondary-9);
white-space: nowrap;
letter-spacing: 0.02em;
}
.chat-input__engine-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
color: var(--secondary-11);
cursor: default;
line-height: 0;
}
.specific-domains-list--engines .chat-input__engine-icon svg {
display: block;
width: 11px;
height: 11px;
pointer-events: none;
}
.chat-input__engine-icon--gear {
cursor: pointer;
/* The glyph is 9px; the control still needs a target you can hit. */
width: 26px;
min-width: 26px;
height: 26px;
margin-left: var(--space-1);
padding: 0;
border: none;
border-radius: var(--radius-1);
color: var(--secondary-11);
background: transparent;
transition:
background-color var(--duration-fast) var(--ease-out-cubic),
color var(--duration-fast) var(--ease-out-cubic);
}
.chat-input__engine-icon--gear:hover {
color: var(--secondary-12);
background: var(--secondary-4);
}
.chat-input__engine-icon--gear:active {
transform: scale(0.94);
}
.chat-input__engine-icon--gear svg {
width: 9px;
height: 9px;
}
/* /css/components/compaction.css */
/* Compaction warning banner and modal */
.compaction-banner {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
width: 100%;
box-sizing: border-box;
margin: 0 0 -1px 0;
background: var(--secondary-1);
border: 1px solid var(--secondary-6);
border-bottom: none;
border-radius: 11.55px 11.55px 0 0;
font-size: 12px;
color: var(--secondary-11);
line-height: 1.4;
}
.compaction-banner__icon {
font-size: 13px;
flex-shrink: 0;
}
.compaction-banner__actions {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.compaction-banner__compress-btn,
.compaction-banner__handoff-btn {
background: none;
border: none;
color: var(--secondary-11);
cursor: pointer;
text-decoration: underline;
font-size: 12px;
font-weight: 500;
padding: 0;
}
.compaction-modal-overlay {
position: fixed;
inset: 0;
background: var(--black-5);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-index-9);
}
.compaction-modal {
background: var(--secondary-1);
border-radius: 12px;
padding: 24px;
max-width: 480px;
width: 90%;
box-shadow: 0 8px 32px var(--black-3);
border: 1px solid var(--secondary-6);
}
.compaction-modal__title {
font-size: 16px;
font-weight: 600;
margin: 0 0 8px 0;
color: var(--secondary-12);
}
.compaction-modal__help {
font-size: 14px;
color: var(--secondary-11);
margin: 0 0 16px 0;
}
.compaction-modal__input {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--secondary-6);
border-radius: 8px;
font-size: 14px;
box-sizing: border-box;
background: var(--secondary-2);
color: var(--secondary-12);
}
.compaction-modal__input::placeholder {
color: var(--secondary-10);
}
.compaction-modal__input:focus {
outline: none;
border-color: var(--secondary-8);
}
.compaction-modal__error {
color: #d32f2f;
font-size: 13px;
margin: 8px 0;
}
.compaction-modal__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
.compaction-modal__btn {
padding: 8px 16px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
}
.compaction-modal__btn--cancel {
background: var(--secondary-3);
color: var(--secondary-11);
}
.compaction-modal__btn--submit {
background: var(--secondary-12);
color: var(--secondary-1);
}
.compaction-modal__btn--submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.handoff-ask-modal__textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--secondary-6);
border-radius: 8px;
font-size: 14px;
box-sizing: border-box;
background: var(--secondary-2);
color: var(--secondary-12);
resize: vertical;
font-family: inherit;
line-height: 1.5;
}
.handoff-ask-modal__textarea::placeholder {
color: var(--secondary-10);
}
.handoff-ask-modal__textarea:focus {
outline: none;
border-color: var(--secondary-8);
}
/* Handoff loading state */
.handoff-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-2);
text-align: center;
}
.handoff-loading__spinner {
width: 32px;
height: 32px;
border: 3px solid var(--secondary-4);
border-top-color: var(--secondary-11);
border-radius: 50%;
animation: handoff-spin 0.8s linear infinite;
}
.handoff-loading__text {
margin: 0;
font-size: 13px;
color: var(--secondary-10);
line-height: 1.5;
max-width: 340px;
}
@keyframes handoff-spin {
to { transform: rotate(360deg); }
}
/* Handoff review modal */
.handoff-review-modal {
background: var(--secondary-1);
border-radius: 12px;
padding: 24px;
max-width: 720px;
width: 92%;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 8px 32px var(--black-3);
border: 1px solid var(--secondary-6);
}
.handoff-review-modal__editor {
border: 1px solid var(--secondary-6);
border-radius: 8px;
margin: 12px 0;
min-height: 200px;
max-height: 400px;
overflow-y: auto;
}
.handoff-review-modal__destination {
display: flex;
flex-direction: column;
gap: 8px;
margin: 12px 0;
padding: 12px;
background: var(--secondary-2);
border-radius: 8px;
}
.handoff-review-modal__radio {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--secondary-12);
cursor: pointer;
}
.handoff-review-modal__workspace-select {
padding: 6px 10px;
border: 1px solid var(--secondary-6);
border-radius: 6px;
background: var(--secondary-1);
color: var(--secondary-12);
font-size: 14px;
margin-left: 24px;
}
.handoff-review-modal__field-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--secondary-11);
margin-bottom: 4px;
}
.handoff-review-modal__title-section {
margin: 8px 0 4px;
}
.handoff-review-modal__title-input {
width: 100%;
padding: 6px 10px;
background: var(--secondary-2);
color: var(--secondary-12);
border: 1px solid var(--secondary-7);
border-radius: var(--radius-3);
font-size: var(--font-size-3);
&::placeholder {
color: var(--secondary-8);
}
}
.handoff-review-modal__editor minimal-markdown-editor {
display: block;
min-height: 200px;
}
.handoff-review-modal__sources {
margin: 12px 0;
}
.handoff-review-modal__sources-label {
font-size: 13px;
font-weight: 500;
color: var(--secondary-11);
margin-bottom: 8px;
}
.handoff-review-modal__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.handoff-chip {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 16px;
border: 1px solid var(--secondary-6);
background: var(--secondary-2);
color: var(--secondary-11);
font-size: 13px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.handoff-chip--selected {
background: var(--secondary-11);
color: var(--secondary-1);
border-color: var(--secondary-11);
}
.handoff-chip__kind {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px 5px;
border-radius: 4px;
background: var(--secondary-4);
color: var(--secondary-10);
margin-right: 6px;
}
.handoff-chip--selected .handoff-chip__kind {
background: rgba(255, 255, 255, 0.2);
color: var(--secondary-1);
}
/* Marker divider in message list */
.compaction-marker-divider {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
margin: 8px 0;
color: var(--secondary-10);
font-size: 12px;
}
.compaction-marker-divider__line {
flex: 1;
height: 1px;
background: var(--secondary-6);
}
/* /css/components/prose.css */
/* Prose typography - better font rendering and readability */
.prose {
color: var(--secondary-12);
line-height: var(--prose-line-height);
font-size: var(--font-size-2-half);
font-family: var(--default-font-family);
/* Better text rendering across all themes */
word-spacing: 0.02em;
letter-spacing: 0.005em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Paragraphs - no top/bottom margin on first/last child */
.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-p-margin-y);
margin-bottom: var(--prose-p-margin-y);
}
.prose :where(p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-bottom: 0;
}
.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-12);
font-weight: var(--prose-h1-font-weight);
font-size: var(--prose-h1-font-size);
margin-top: var(--prose-h1-margin-top);
margin-bottom: var(--prose-h1-margin-bottom);
line-height: var(--prose-h1-line-height);
}
.prose :where(h1:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-12);
font-weight: var(--prose-h2-font-weight);
font-size: var(--prose-h2-font-size);
margin-top: var(--prose-h2-margin-top);
margin-bottom: var(--prose-h2-margin-bottom);
line-height: var(--prose-h2-line-height);
}
.prose :where(h2:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-12);
font-weight: var(--prose-h3-font-weight);
font-size: var(--prose-h3-font-size);
margin-top: var(--prose-h3-margin-top);
margin-bottom: var(--prose-h3-margin-bottom);
line-height: var(--prose-h3-line-height);
}
.prose :where(h3:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-12);
font-weight: var(--prose-h4-font-weight);
margin-top: var(--prose-h4-margin-top);
margin-bottom: var(--prose-h4-margin-bottom);
line-height: var(--prose-h4-line-height);
}
.prose :where(h4:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(.lead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-12);
font-size: var(--prose-lead-font-size);
line-height: var(--prose-lead-line-height);
margin-top: var(--prose-lead-margin-top);
margin-bottom: var(--prose-lead-margin-bottom);
}
.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--primary-9);
text-decoration: underline;
font-weight: var(--font-weight-regular);
}
.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
opacity: 0.8;
}
.prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-12);
font-weight: var(--font-weight-bold);
}
.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
list-style-type: decimal;
margin-top: var(--prose-ol-margin-y);
margin-bottom: var(--prose-ol-margin-y);
padding-inline-start: var(--prose-ol-padding-inline-start);
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
list-style-type: lower-roman;
}
.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
list-style-type: disc;
margin-top: var(--prose-ul-margin-y);
margin-bottom: var(--prose-ul-margin-y);
padding-inline-start: var(--prose-ul-padding-inline-start);
}
.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-li-margin-y);
margin-bottom: var(--prose-li-margin-y);
font-size: inherit;
line-height: inherit;
}
.prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
padding-inline-start: 0.375em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.prose :where(li)::marker:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-10);
}
.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-style: italic;
color: var(--secondary-12);
border-inline-start-width: 0.25rem;
border-inline-start-color: var(--secondary-6);
padding-inline-start: var(--prose-blockquote-padding-inline-start);
margin-top: var(--prose-blockquote-margin-y);
margin-bottom: var(--prose-blockquote-margin-y);
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
content: close-quote;
}
/* Inline code - applies to all code elements */
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):not(.hljs) {
color: var(--secondary-12);
font-weight: var(--prose-code-font-weight);
font-size: var(--prose-code-font-size);
font-family: var(--code-font-family);
padding-top: var(--prose-code-padding-y);
padding-bottom: var(--prose-code-padding-y);
padding-left: var(--prose-code-padding-x);
padding-right: var(--prose-code-padding-x);
background-color: var(--secondary-2);
border-radius: var(--prose-code-border-radius);
}
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):not(.hljs)::before {
content: none;
}
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):not(.hljs)::after {
content: none;
}
/* Pre - Basic styling for code blocks */
.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-pre-margin-y);
margin-bottom: var(--prose-pre-margin-y);
border-radius: var(--prose-pre-border-radius);
overflow-x: auto;
}
/* Code inside pre: reset inline code styles */
.prose :where(pre > code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
background-color: transparent;
padding: 0;
border-radius: 0;
font-size: inherit;
font-weight: inherit;
}
/* Tables */
.prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
width: 100%;
table-layout: auto;
text-align: start;
margin-top: var(--prose-table-margin-y);
margin-bottom: var(--prose-table-margin-y);
font-size: 1em; /* Now same as base since base is 14px */
line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
border-bottom-width: var(--prose-thead-border-bottom-width);
border-bottom-color: var(--secondary-7);
}
.prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-12);
font-weight: var(--font-weight-medium);
vertical-align: bottom;
padding-inline-end: var(--prose-thead-th-padding-inline-end);
padding-bottom: var(--prose-thead-th-padding-bottom);
padding-inline-start: var(--prose-thead-th-padding-inline-start);
}
.prose :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--secondary-6);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
vertical-align: baseline;
padding: var(--prose-tbody-td-padding);
}
/* Horizontal Rules */
.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
border-color: var(--secondary-6);
border-top-width: var(--prose-hr-border-top-width);
margin-top: var(--prose-hr-margin-y);
margin-bottom: var(--prose-hr-margin-y);
}
/* Figures and Captions */
.prose :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-10);
font-size: 0.875em;
line-height: 1.4285714;
margin-top: 0.8571429em;
}
/* Images */
.prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
/* Videos */
.prose :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
/* Size Variants */
.prose-sm {
font-size: var(--prose-sm-font-size);
line-height: var(--prose-sm-line-height);
}
.prose-sm :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-sm-p-margin-y);
margin-bottom: var(--prose-sm-p-margin-y);
}
.prose-sm :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-sm-h1-font-size);
margin-top: var(--prose-sm-h1-margin-top);
margin-bottom: var(--prose-sm-h1-margin-bottom);
line-height: var(--prose-sm-h1-line-height);
}
.prose-sm :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-sm-h2-font-size);
margin-top: var(--prose-sm-h2-margin-top);
margin-bottom: var(--prose-sm-h2-margin-bottom);
line-height: var(--prose-sm-h2-line-height);
}
.prose-sm :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-sm-h3-font-size);
margin-top: var(--prose-sm-h3-margin-top);
margin-bottom: var(--prose-sm-h3-margin-bottom);
line-height: var(--prose-sm-h3-line-height);
}
.prose-sm :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: inherit;
margin-top: var(--prose-sm-li-margin-y);
margin-bottom: var(--prose-sm-li-margin-y);
}
.prose-sm :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose-sm :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-sm-ol-margin-y);
margin-bottom: var(--prose-sm-ul-margin-y);
}
.prose-sm :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-sm-table-margin-y);
margin-bottom: var(--prose-sm-table-margin-y);
}
.prose-sm :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-sm-pre-margin-y);
margin-bottom: var(--prose-sm-pre-margin-y);
}
.prose-sm :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-sm-hr-margin-y);
margin-bottom: var(--prose-sm-hr-margin-y);
}
.prose-lg {
font-size: var(--prose-lg-font-size);
line-height: var(--prose-lg-line-height);
}
.prose-lg :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-lg-p-margin-y);
margin-bottom: var(--prose-lg-p-margin-y);
}
.prose-lg :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-lg-h1-font-size);
margin-top: var(--prose-lg-h1-margin-top);
margin-bottom: var(--prose-lg-h1-margin-bottom);
line-height: var(--prose-lg-h1-line-height);
}
.prose-lg :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-lg-h2-font-size);
margin-top: var(--prose-lg-h2-margin-top);
margin-bottom: var(--prose-lg-h2-margin-bottom);
line-height: var(--prose-lg-h2-line-height);
}
.prose-lg :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-lg-h3-font-size);
margin-top: var(--prose-lg-h3-margin-top);
margin-bottom: var(--prose-lg-h3-margin-bottom);
line-height: var(--prose-lg-h3-line-height);
}
.prose-lg :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: inherit;
margin-top: var(--prose-lg-li-margin-y);
margin-bottom: var(--prose-lg-li-margin-y);
}
.prose-lg :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose-lg :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-lg-ol-margin-y);
margin-bottom: var(--prose-lg-ul-margin-y);
}
.prose-lg :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-lg-table-margin-y);
margin-bottom: var(--prose-lg-table-margin-y);
}
.prose-lg :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-lg-pre-margin-y);
margin-bottom: var(--prose-lg-pre-margin-y);
}
.prose-lg :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-lg-hr-margin-y);
margin-bottom: var(--prose-lg-hr-margin-y);
}
.prose-xl {
font-size: var(--prose-xl-font-size);
line-height: var(--prose-xl-line-height);
}
.prose-xl :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-xl-p-margin-y);
margin-bottom: var(--prose-xl-p-margin-y);
}
.prose-xl :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-xl-h1-font-size);
margin-top: var(--prose-xl-h1-margin-top);
margin-bottom: var(--prose-xl-h1-margin-bottom);
line-height: var(--prose-xl-h1-line-height);
}
.prose-xl :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-xl-h2-font-size);
margin-top: var(--prose-xl-h2-margin-top);
margin-bottom: var(--prose-xl-h2-margin-bottom);
line-height: var(--prose-xl-h2-line-height);
}
.prose-xl :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-xl-h3-font-size);
margin-top: var(--prose-xl-h3-margin-top);
margin-bottom: var(--prose-xl-h3-margin-bottom);
line-height: var(--prose-xl-h3-line-height);
}
.prose-xl :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: inherit;
margin-top: var(--prose-xl-li-margin-y);
margin-bottom: var(--prose-xl-li-margin-y);
}
.prose-xl :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose-xl :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-xl-ol-margin-y);
margin-bottom: var(--prose-xl-ul-margin-y);
}
.prose-xl :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-xl-table-margin-y);
margin-bottom: var(--prose-xl-table-margin-y);
}
.prose-xl :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-xl-pre-margin-y);
margin-bottom: var(--prose-xl-pre-margin-y);
}
.prose-xl :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-xl-hr-margin-y);
margin-bottom: var(--prose-xl-hr-margin-y);
}
.prose-2xl {
font-size: var(--prose-2xl-font-size);
line-height: var(--prose-2xl-line-height);
}
.prose-2xl :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-2xl-p-margin-y);
margin-bottom: var(--prose-2xl-p-margin-y);
}
.prose-2xl :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-2xl-h1-font-size);
margin-top: var(--prose-2xl-h1-margin-top);
margin-bottom: var(--prose-2xl-h1-margin-bottom);
line-height: var(--prose-2xl-h1-line-height);
}
.prose-2xl :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-2xl-h2-font-size);
margin-top: var(--prose-2xl-h2-margin-top);
margin-bottom: var(--prose-2xl-h2-margin-bottom);
line-height: var(--prose-2xl-h2-line-height);
}
.prose-2xl :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: var(--prose-2xl-h3-font-size);
margin-top: var(--prose-2xl-h3-margin-top);
margin-bottom: var(--prose-2xl-h3-margin-bottom);
line-height: var(--prose-2xl-h3-line-height);
}
.prose-2xl :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: inherit;
margin-top: var(--prose-2xl-li-margin-y);
margin-bottom: var(--prose-2xl-li-margin-y);
}
.prose-2xl :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose-2xl :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-2xl-ol-margin-y);
margin-bottom: var(--prose-2xl-ul-margin-y);
}
.prose-2xl :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-2xl-table-margin-y);
margin-bottom: var(--prose-2xl-table-margin-y);
}
.prose-2xl :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-2xl-pre-margin-y);
margin-bottom: var(--prose-2xl-pre-margin-y);
}
.prose-2xl :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-2xl-hr-margin-y);
margin-bottom: var(--prose-2xl-hr-margin-y);
}
/* Container Query Support */
@container (min-width: 640px) {
.prose {
font-size: var(--prose-lg-font-size);
}
}
@container (min-width: 768px) {
.prose {
font-size: var(--prose-xl-font-size);
}
}
/* Global first/last child margin resets */
.prose > :first-child {
margin-top: 0;
}
.prose > :last-child {
margin-bottom: 0;
}
/* Adjacency selectors - reset margins after headings */
.prose :where(h1 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
/* Keyboard input */
.prose :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-weight: var(--prose-kbd-font-weight);
font-family: var(--code-font-family);
font-size: var(--prose-kbd-font-size);
color: var(--secondary-12);
box-shadow: var(--prose-kbd-shadow);
border-radius: var(--prose-kbd-border-radius);
padding-top: var(--prose-kbd-padding-y);
padding-right: var(--prose-kbd-padding-x);
padding-bottom: var(--prose-kbd-padding-y);
padding-left: var(--prose-kbd-padding-x);
background-color: var(--secondary-2);
border: 1px solid var(--secondary-6);
}
/* Definition Lists */
.prose :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-dl-margin-y);
margin-bottom: var(--prose-dl-margin-y);
}
.prose :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
color: var(--secondary-12);
font-weight: var(--prose-dt-font-weight);
margin-top: var(--prose-dt-margin-top);
}
.prose :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: var(--prose-dd-margin-top);
padding-inline-start: var(--prose-dd-padding-inline-start);
}
.prose :where(dt:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
}
/* Picture element */
.prose :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
display: block;
margin-top: var(--prose-img-margin-y);
margin-bottom: var(--prose-img-margin-y);
}
.prose :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
/* Enhanced list item padding */
.prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
padding-inline-start: 0.375em;
}
/* Utility to escape prose styling */
.not-prose {
/* Will inherit parent styles, bypassing prose */
}
/* /css/components/typography-enhancements.css */
/* Typography enhancements for better readability */
.prose {
/* Better font rendering across themes */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.prose :where(h1, h2, h3, h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
/* Tighter spacing improves readability */
letter-spacing: -0.005em;
margin-top: 2em;
margin-bottom: 1em;
}
.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: 2em;
line-height: 1.2;
margin-bottom: 0.8em;
}
.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: 1.5em;
line-height: 1.3;
margin-bottom: 0.9em;
}
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
font-size: 1.25em;
line-height: 1.4;
margin-bottom: 0.8em;
}
.prose :where(ul, ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 1.5em;
margin-bottom: 1.5em;
padding-inline-start: 2em;
}
.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0.8em;
margin-bottom: 0.8em;
line-height: 1.7;
}
.chat-messages p {
margin-bottom: 1.2em;
}
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):not(.hljs) {
/* Better inline code contrast */
background-color: var(--secondary-3);
color: var(--secondary-11);
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.9em;
}
/* Reset inline code styles for code inside pre (code blocks).
The selectors repeat the inline rule's `:not(.hljs)` and name the
highlighted case directly so this wins on specificity instead of on
source order — the previous version lost to the rule above it, which is
why code blocks rendered at the inline-code size. */
.prose :where(pre > code):not(:where([class~="not-prose"], [class~="not-prose"] *)):not(.hljs),
.prose pre > code.hljs {
background-color: transparent;
padding: 0;
border-radius: 0;
/* `.hljs` adds 0.9em on top of the 0.875em step, which landed blocks near
11px. Floor the rendered size at the 12px step. */
font-size: max(var(--prose-code-font-size), var(--font-size-1-half));
}
.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
border-left-color: var(--secondary-7);
padding-left: 1.5em;
margin: 1.5em 0;
font-style: italic;
color: var(--secondary-11);
}
@media (max-width: 768px) {
.prose {
font-size: var(--font-size-2-half);
line-height: 1.7;
}
.chat-messages p {
font-size: var(--font-size-2-half);
}
}
@media (prefers-contrast: high) {
.prose {
font-weight: 500;
letter-spacing: 0.02em;
}
}
@media (prefers-reduced-motion: reduce) {
.prose * {
transition: none !important;
}
}
/* /css/components/command.css */
.command-options {
display: flex;
flex-direction: column;
gap: var(--space-2);
background-color: var(--secondary-3);
margin-left: 0;
margin-bottom: 0;
padding: var(--space-4) var(--space-1);
padding-left: 2px;
padding-top: var(--space-1);
border-top-left-radius: 0;
border-top-right-radius: var(--radius-3);
border-bottom-left-radius: var(--radius-3);
border-bottom-right-radius: var(--radius-3);
font-size: var(--font-size-3);
}
.command__checkboxes {
display: flex;
flex-wrap: wrap;
align-items: left;
margin-top: var(--space-1);
}
.command__input-checkbox {
display: none;
}
.command__label-checkbox {
display: flex;
align-items: center;
cursor: var(--cursor-pointer);
position: relative;
padding-left: var(--space-5);
display: inline-block;
line-height: var(--line-height-3);
color: var(--secondary-9);
font-size: var(--font-size-3);
}
.command__label-checkbox::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-color: transparent;
border: 0.5px solid var(--secondary-7);
border-radius: var(--radius-3);
box-sizing: border-box;
transition: background-color 0.2s, border-color 0.2s;
}
.command__input-checkbox:checked+.command__label-checkbox::before {
background-color: var(--primary-9);
border-color: var(--primary-9);
}
.command__input-checkbox:checked+.command__label-checkbox::after {
content: '✓';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%) translateX(10%);
color: var(--secondary-3);
font-size: var(--font-size-3);
}
.command__input-checkbox--secondary:checked+.command__label-checkbox--secondary::before {
background-color: var(--secondary-9);
border-color: var(--secondary-9);
}
.command__label-status {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--secondary-9);
}
.command__label-status--text {
padding-bottom: var(--space-1);
}
.command__label-status svg {
width: 20px;
height: 20px;
fill: var(--secondary-9);
}
.command__model-options--top-left-straight {
max-width: var(--container-3);
margin-bottom: var(--space-3);
padding: var(--space-1) var(--space-2);
border-radius: 0 var(--radius-3) var(--radius-3) var(--radius-3);
background-color: var(--secondary-3);
color: var(--secondary-11);
font-size: var(--font-size-3);
font-weight: var(--font-weight-regular);
}
.command__model-options--top-right-straight {
max-width: var(--container-3);
margin-bottom: var(--space-3);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-3) 0 var(--radius-3) var(--radius-3);
background-color: var(--secondary-3);
color: var(--secondary-11);
font-size: var(--font-size-3);
font-weight: var(--font-weight-regular);
}
.command__model-options--no-straights-clean {
padding: var(--space-1) var(--space-2);
}
.command__model-options--no-straights {
flex: 1;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-3) var(--radius-3) var(--radius-3) var(--radius-3);
background-color: var(--secondary-2-half);
color: var(--secondary-11);
font-size: var(--font-size-3);
font-weight: var(--font-weight-regular);
}
/* Mobile responsive for command model options */
@media (max-width: 480px) {
.command__model-options--no-straights {
min-width: 100%;
width: 100%;
}
}
.command__suggestions {
margin-bottom: var(--space-3);
padding: var(--space-3) var(--space-3);
border-radius: var(--radius-3) var(--radius-3) var(--radius-3) var(--radius-3);
color: var(--secondary-11);
font-size: var(--font-size-3);
font-weight: var(--font-weight-regular);
}
.command__model-options__radio-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
color: var(--secondary-11);
font-size: var(--font-size-2);
margin: var(--space-2);
}
.command__model-options__radio-input {
display: none;
}
.command__model-options__radio-label {
position: relative;
padding-left: var(--space-5);
cursor: pointer;
line-height: var(--line-height-3);
display: flex;
align-items: center;
&:hover {
color: var(--secondary-12);
}
}
.command__model-options__radio-label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-color: transparent;
border: 0.5px solid var(--secondary-7);
border-radius: 50%;
box-sizing: border-box;
transition: background-color 0.2s, border-color 0.2s;
}
.command__model-options__radio-input:checked+.command__model-options__radio-label::before {
background-color: var(--primary-9);
border-color: var(--primary-9);
}
.command__model-options__radio-input:checked+.command__model-options__radio-label::after {
content: '';
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%) scale(1);
width: 8px;
height: 8px;
background-color: white;
border-radius: 50%;
transition: transform 0.2s ease-in-out;
}
.command__model-options__radio-label:hover::before {
background-color: var(--secondary-2);
}
.command__specific-site-container {
display: flex;
align-items: center;
gap: var(--space-1);
}
.command__model-options__text-input {
padding: var(--space-1);
border: 0.5px solid var(--secondary-7);
border-radius: var(--radius-3);
margin: 0 var(--space-2);
}
/* Style for the small button */
.command__model-options__submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-1) var(--space-1);
background-color: var(--primary-6);
color: var(--primary-12);
border: none;
cursor: pointer;
font-size: var(--font-size-3);
border-radius: var(--radius-3);
&:hover {
background-color: var(--primary-7);
}
&:where(.command__model-options__submit-btn--secondary) {
background-color: var(--secondary-3);
color: var(--secondary-11);
&:hover {
background-color: var(--secondary-5);
}
&:where(.command__model-options__submit-refresh-btn) {
animation: spin 4s linear infinite;
cursor: not-allowed;
&:hover {
background-color: var(--secondary-3);
}
}
}
}
.command__model-options__submit-btn--disabled {
background-color: var(--secondary-5);
color: var(--secondary-11);
cursor: not-allowed;
&:hover {
background-color: var(--secondary-5);
}
}
.command__model-options__submit-error {
color: var(--failure-9);
margin-left: var(--space-2);
animation: bounce 0.5s;
font-size: var(--font-size-3);
}
.command__label {
font-size: var(--font-size-2);
color: var(--secondary-11);
}
.command__search-options {
margin-top: var(--space-5);
font-size: var(--font-size-2);
}
.command__search-options-section {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: var(--space-2);
}
.command__source-options {
margin-top: var(--space-5);
font-size: var(--font-size-2);
}
.command__source-options-section {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: var(--space-2);
}
.command__button-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.command__button-row {
display: flex;
flex-wrap: wrap;
}
.command__suggestions-options {
font-size: var(--font-size-3);
max-width: var(--container-2);
}
.command__options-h4 {
color: var(--secondary-11);
margin: 0;
padding: var(--space-2) 0;
margin-left: var(--space-2);
font-size: var(--font-size-2);
}
.command__suggestions-h4 {
color: var(--secondary-11);
margin: var(--space-2);
padding: var(--space-2) 0;
font-size: var(--font-size-1-half);
font-weight: var(--font-weight-regular);
display: flex;
align-items: center;
gap: var(--space-1);
padding-bottom: 0;
max-width: var(--container-0);
}
.command__model-options--no-straights .command__suggestions-h4 {
color: var(--secondary-11);
margin: var(--space-2);
padding: 0;
font-size: var(--font-size-2);
font-weight: var(--font-weight-regular);
display: flex;
align-items: center;
gap: var(--space-1);
padding-bottom: 0;
max-width: var(--container-0);
}
.command__specific-sites {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.command__specific-sites-row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.command__specific-sources {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-2);
}
.command__specific-sources-row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.command__specific-source {
padding-left: var(--space-2);
}
.command__input-text {
flex-grow: 1;
padding: var(--space-3);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
box-sizing: border-box;
background-color: var(--primary-1);
color: var(--secondary-12);
margin-top: var(--space-1);
width: 100%;
&:focus {
outline: none;
border-color: var(--secondary-8);
}
}
.command__specific-sites-limit {
color: var(--secondary-9);
padding-left: var(--space-2);
}
.command__suggestions {
max-width: var(--container-2);
}
.command__toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
background: none;
font-size: var(--font-size-3);
color: var(--secondary-11);
padding: var(--space-2) var(--space-2);
gap: var(--space-1);
font-size: var(--font-size-2);
}
.command__toggle-btn:hover svg:not(.command__toggle-svg--off) path {
fill: var(--primary-10);
}
.command__toggle-btn:hover svg.command__toggle-svg--off path {
fill: var(--secondary-10);
}
.command__checkboxes-toggle {
display: flex;
align-items: center;
}
.command__toggle-btn--active {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--secondary-3);
border-radius: var(--radius-3) var(--radius-3) 0 0;
gap: var(--space-1);
font-size: var(--font-size-2);
}
.command__toggle-btn svg {
vertical-align: middle;
}
.command__toggle-btn:disabled {
background-color: transparent;
cursor: not-allowed;
}
.command__inline-options {
display: flex;
flex-direction: row;
gap: var(--space-2);
align-items: center;
}
.command__input-chat {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
}
.command__status--loading {
animation: pulse 3s infinite;
}
.command__pills-container {
min-height: var(--space-8);
gap: var(--space-2);
}
.command__pill {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-2);
background-color: var(--primary-5);
color: var(--secondary-12);
border-radius: var(--radius-3);
margin-top: var(--space-1);
margin-right: var(--space-1);
margin-bottom: var(--space-3);
font-size: var(--font-size-3);
}
.command__pill .btn--close {
background-color: transparent;
border: none;
color: var(--secondary-12);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
font-size: var(--font-size-3);
line-height: 1;
}
.command__pill .btn--close::before {
content: '×';
display: block;
}
.command__add-source-link {
color: var(--secondary-11);
font-size: var(--font-size-3);
text-decoration: none;
font-weight: var(--font-weight-regular);
&:hover {
color: var(--secondary-12);
}
}
.command__section--no-sources {
color: var(--secondary-11);
}
.command__specific-sources-small {
margin-left: var(--space-3);
}
.command__add-sources--link {
color: var(--secondary-11);
font-size: var(--font-size-2);
text-decoration: underline;
font-weight: var(--font-weight-regular);
cursor: pointer;
&:hover {
color: var(--primary-9);
text-decoration: underline;
}
&:active {
color: var(--primary-10);
}
}
.command__attach-source {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1);
border-radius: 50%;
background-color: var(--secondary-8);
color: var(--secondary-12);
border: none;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
&:hover {
background-color: var(--secondary-9);
color: var(--secondary-1);
}
&:where(.disabled) {
background-color: var(--secondary-3);
color: var(--secondary-12);
&:hover {
background-color: var(--secondary-3);
color: var(--secondary-12);
}
}
}
.command__text {
color: var(--secondary-10);
font-size: var(--font-size-3);
font-weight: var(--font-weight-regular);
background-color: transparent;
&:where(.usage-count) {
margin-left: var(--space-2);
:where(a) {
margin-left: var(--space-1);
color: var(--black-8);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.command__suggestion {
font-size: var(--font-size-2);
font-weight: var(--font-weight-regular);
padding: var(--space-2);
border-radius: var(--radius-3);
margin-right: var(--space-2);
margin-bottom: var(--space-2);
margin-top: var(--space-2);
background-color: transparent;
color: var(--secondary-11);
border: 1px solid var(--secondary-1);
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
box-shadow: var(--shadow-2);
text-align: left;
display: inline-flex;
align-items: center;
gap: var(--space-2);
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
&:hover {
background-color: var(--primary-3);
color: var(--primary-10);
border: 1px solid var(--primary-7);
}
&:active {
background-color: var(--primary-4);
color: var(--primary-12);
border: 1px solid var(--primary-8);
}
&:where(.disabled) {
background-color: var(--secondary-2);
color: var(--secondary-7);
border: 1px solid var(--secondary-4);
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
&:where(.command__suggestion--left) {
text-align: left;
}
&:where(.command__suggestion--link) {
text-decoration: none;
color: var(--secondary-11);
text-decoration-skip-ink: none;
transition: color 0.2s;
border: none;
font-size: var(--font-size-3);
text-align: left;
background-color: transparent;
&:hover {
background-color: transparent;
color: var(--primary-10);
border: none;
}
&:active {
background-color: transparent;
color: var(--primary-11);
border: none;
}
}
&:where(.skeleton) {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: linear-gradient(to right, var(--secondary-5) 8%, var(--secondary-3) 18%, var(--secondary-5) 33%);
background-size: 80rem 100%;
font-size: var(--font-size-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-3);
margin-right: var(--space-2);
margin-bottom: var(--space-1);
margin-top: var(--space-1);
height: var(--space-5);
color: transparent;
/* Hide text during loading */
border: 1px solid transparent;
box-shadow: none;
width: 60%;
pointer-events: none;
&:hover {
border: none;
box-shadow: none;
}
}
}
.command__section {
margin-top: var(--space-2);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-3);
}
/* /css/components/dashboard.css */
.dashboard__welcome {
max-width: 1024px;
margin: 0 auto;
padding: 0;
margin: 0 var(--space-4);
}
@media (min-width: 769px) {
.dashboard__welcome {
margin: 0 auto;
margin-top: var(--space-8);
}
}
.dashboard__welcome h1 {
font-size: var(--font-size-6);
font-weight: var(--font-weight-medium);
color: var(--secondary-12);
margin-bottom: var(--space-3);
}
.dashboard__welcome p {
font-size: var(--font-size-3-half);
color: var(--secondary-11);
}
.dashboard {
padding: var(--space-4) var(--space-4);
max-width: var(--container-4);
margin: 0 auto;
}
/* Tab Navigation */
.dashboard__tabs {
display: flex;
border-bottom: 1px solid var(--secondary-6);
margin-bottom: var(--space-3);
gap: var(--space-1);
}
.dashboard__tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: none;
border: none;
color: var(--secondary-11);
font-size: var(--font-size-3);
font-weight: var(--font-weight-regular);
cursor: var(--cursor-link);
border-radius: var(--radius-3) var(--radius-3) 0 0;
transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic);
position: relative;
}
.dashboard__tab:hover {
color: var(--secondary-12);
background-color: var(--secondary-2);
}
.dashboard__tab--active {
color: var(--primary-11);
background-color: var(--primary-3);
}
.dashboard__tab--active:hover {
background-color: var(--primary-4);
}
.dashboard__tab--active:active {
background-color: var(--primary-5);
}
.dashboard__tab--active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: var(--primary-9);
border-radius: var(--radius-1);
}
.dashboard__tab svg {
stroke-width: 1.5;
}
/* Content Area */
.dashboard__content {
min-height: 400px;
}
.dashboard__panel {
display: flex;
flex-direction: column;
}
.dashboard__panel-header {
display: flex;
justify-content: flex-start;
margin-bottom: var(--space-2);
}
.dashboard__panel-footer {
display: flex;
justify-content: center;
margin-top: var(--space-2);
}
.dashboard__view-all-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: 28px;
padding: var(--space-1) var(--space-2);
background: transparent;
border: none;
color: var(--primary-11);
font-size: var(--font-size-2);
font-weight: var(--font-weight-medium);
cursor: pointer;
border-radius: var(--radius-3);
transition:
background-color var(--duration-fast) var(--ease-out-cubic),
color var(--duration-fast) var(--ease-out-cubic),
box-shadow var(--duration-fast) var(--ease-out-cubic),
transform var(--duration-fast) var(--ease-out-cubic);
}
.dashboard__view-all-btn:hover {
background: var(--primary-3);
box-shadow: var(--shadow-2);
transform: translateY(-1px);
}
.dashboard__view-all-btn svg {
transition: transform 0.2s ease;
}
.dashboard__view-all-btn:hover svg {
transform: translateX(2px);
}
.dashboard__items {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: 0;
}
.dashboard__create-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--primary-9);
border: none;
border-radius: var(--radius-3);
color: var(--primary-1);
font-size: var(--font-size-2-half);
font-weight: var(--font-weight-regular);
cursor: var(--cursor-link);
transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic);
width: fit-content;
}
.dashboard__create-btn:hover {
background: var(--primary-10);
transform: translateY(-1px);
box-shadow: var(--shadow-3);
}
.dashboard__item-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-2);
}
.dashboard__item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4);
background: var(--secondary-2);
border: 1px solid var(--secondary-5);
border-radius: var(--radius-3);
text-decoration: none;
transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic);
cursor: var(--cursor-link);
width: 100%;
flex: 1;
}
.dashboard__item:hover {
background: var(--secondary-3);
border-color: var(--secondary-7);
transform: translateY(-1px);
box-shadow: var(--shadow-2);
}
.dashboard__item-delete {
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: var(--secondary-2);
border: 1px solid var(--secondary-6);
border-radius: var(--radius-3);
color: var(--secondary-11);
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}
/* Only show delete button on hover for devices that support hover */
@media (hover: hover) {
.dashboard__item-wrapper:hover .dashboard__item-delete {
opacity: 1;
visibility: visible;
}
}
/* Always show delete button on touch devices */
@media (hover: none) and (pointer: coarse) {
.dashboard__item-delete {
opacity: 1;
visibility: visible;
}
}
.dashboard__item-delete:hover {
background: var(--failure-3);
border-color: var(--failure-7);
color: var(--failure-11);
box-shadow: var(--shadow-2);
transform: translateY(-50%) scale(1.05);
}
.dashboard__item-delete svg {
width: 16px;
height: 16px;
}
.dashboard__item-title {
font-size: var(--font-size-3);
font-weight: var(--font-weight-medium);
color: var(--secondary-12);
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
margin-right: var(--space-4);
}
.dashboard__item-date {
font-size: var(--font-size-2);
color: var(--secondary-11);
text-align: right;
white-space: nowrap;
flex-shrink: 0;
}
/* Skeleton Loading States */
.dashboard__item--skeleton {
background: var(--secondary-3);
border: 1px solid var(--secondary-5);
cursor: default;
pointer-events: none;
}
.dashboard__item--skeleton .dashboard__item-title,
.dashboard__item--skeleton .dashboard__item-date {
background: var(--secondary-4);
border-radius: var(--radius-3);
color: transparent;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.dashboard__item--skeleton .dashboard__item-title {
width: 60%;
height: var(--space-4);
}
.dashboard__item--skeleton .dashboard__item-date {
width: 80px;
height: var(--space-3);
}
@keyframes skeleton-pulse {
0%,
100% {
opacity: 0.8;
}
50% {
opacity: 0.4;
}
}
/* Empty State */
.dashboard__empty-state {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-4);
text-align: center;
}
.dashboard__empty-state p {
color: var(--secondary-11);
font-size: var(--font-size-3);
margin: 0;
}
/* Modern Empty State Styles */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-8) var(--space-4);
min-height: 400px;
width: 100%;
}
.empty-state--compact {
min-height: 200px;
padding: var(--space-6) var(--space-4);
}
.empty-state__icon {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
background: var(--secondary-2);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
margin-bottom: var(--space-4);
box-shadow: var(--shadow-1);
}
.empty-state__icon--small {
width: 80px;
height: 80px;
margin-bottom: var(--space-3);
}
.empty-state__icon svg {
width: 64px;
height: 64px;
opacity: 0.5;
}
.empty-state__icon--small svg {
width: 48px;
height: 48px;
}
.empty-state__title {
font-size: var(--font-size-4);
font-weight: var(--font-weight-medium);
color: var(--secondary-12);
margin: 0 0 var(--space-2) 0;
}
.empty-state__title--small {
font-size: var(--font-size-3);
}
.empty-state__description {
font-size: var(--font-size-3);
color: var(--secondary-11);
line-height: 1.5;
max-width: 400px;
margin: 0 0 var(--space-4) 0;
}
.empty-state__description--small {
font-size: var(--font-size-2);
margin-bottom: var(--space-3);
}
.empty-state__cta {
margin-bottom: var(--space-3);
}
.empty-state__actions {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
}
.empty-state__actions .empty-state__cta {
margin-bottom: 0;
}
.empty-state__hint {
font-size: var(--font-size-2);
color: var(--secondary-9);
margin: 0;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.dashboard {
padding: var(--space-6) var(--space-3);
}
.dashboard__tabs {
gap: 0;
}
.dashboard__tab {
flex: 1;
justify-content: center;
padding: var(--space-3) var(--space-2);
font-size: var(--font-size-2-half);
}
.dashboard__item-wrapper {
position: relative;
}
.dashboard__item {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding-right: var(--space-8);
/* Make room for delete button */
}
.dashboard__item-delete {
right: var(--space-2);
}
.dashboard__item-title {
margin-right: 0;
width: 100%;
}
.dashboard__item-date {
text-align: left;
width: 100%;
}
}
/* /css/components/dialog.css */
.dialog__backdrop {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(var(--space-1));
-webkit-backdrop-filter: blur(var(--space-1));
z-index: var(--z-index-9);
background-color: var(--dialog-backdrop);
}
.dialog__backdrop--hidden {
display: none;
}
dialog:not(.toolbar-dialog):not(.dialog):not(.ai-copilot-dialog):not(.team-dialog):not(.settings-dialog):not(.pricing-dialog):not(.free-tier-unlock-dialog) {
padding: 0;
margin: 0;
border: none;
display: none;
}
dialog[open]:not(.toolbar-dialog):not(.dialog):not(.ai-copilot-dialog):not(.team-dialog):not(.settings-dialog):not(.pricing-dialog):not(.free-tier-unlock-dialog) {
display: block;
}
dialog.free-tier-unlock-dialog {
width: min(560px, calc(100vw - var(--space-6)));
max-height: min(760px, calc(100svh - var(--space-6)));
margin: auto;
padding: 0;
border: 1px solid var(--border-color);
border-radius: var(--radius-4);
background: var(--secondary-1);
color: var(--secondary-12);
box-shadow: var(--shadow-10);
overflow-y: auto;
overflow-x: hidden;
}
dialog.free-tier-unlock-dialog::backdrop {
background: transparent;
}
.free-tier-unlock-dialog__header {
padding: var(--space-5) var(--space-5) var(--space-3);
text-align: left;
}
.free-tier-unlock-dialog__header h2 {
margin: 0;
color: var(--secondary-12);
font-size: var(--font-size-6);
line-height: 1.1;
}
.free-tier-unlock-dialog__header p {
margin: var(--space-3) 0 0;
color: var(--secondary-10);
font-size: var(--font-size-3);
line-height: 1.45;
}
.free-tier-unlock-dialog__body {
padding: 0 var(--space-5) var(--space-5);
}
.free-tier-unlock-dialog__summary,
.free-tier-unlock-dialog__secure-card {
border: 1px solid var(--border-color);
border-radius: var(--radius-3);
background: var(--color-bg-subtle, #f8fafc);
overflow: hidden;
}
.free-tier-unlock-dialog__summary {
margin-bottom: var(--space-3);
}
.free-tier-unlock-dialog__summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3);
}
.free-tier-unlock-dialog__summary-row + .free-tier-unlock-dialog__summary-row {
border-top: 1px solid var(--border-color);
}
.free-tier-unlock-dialog__summary-row strong {
white-space: nowrap;
}
.free-tier-unlock-dialog__secure-card {
padding: var(--space-3);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.free-tier-unlock-dialog__secure-heading {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
font-weight: 600;
}
.free-tier-unlock-dialog__label {
display: block;
margin-bottom: var(--space-2);
}
.free-tier-unlock-dialog__card-element {
min-height: 44px;
padding: var(--space-3);
border: 1px solid var(--border-color);
border-radius: var(--radius-3);
background: var(--color-bg, #fff);
}
.free-tier-unlock-dialog__helper-text,
.free-tier-unlock-dialog__support {
color: var(--color-text-muted, #64748b);
font-size: 0.875rem;
line-height: 1.45;
}
.free-tier-unlock-dialog__helper-text {
margin: var(--space-2) 0 0;
}
.free-tier-unlock-dialog__helper-text--compact {
margin-top: var(--space-1);
}
.free-tier-unlock-dialog__error {
margin: var(--space-2) 0 0;
color: var(--color-danger);
}
.free-tier-unlock-dialog__success {
margin: var(--space-2) 0 0;
}
.free-tier-unlock-dialog__primary-action {
margin-top: var(--space-3);
}
.free-tier-unlock-dialog__secondary-action {
margin-top: var(--space-2);
}
.free-tier-unlock-dialog__support {
margin: var(--space-3) 0 0;
text-align: center;
}
@media (max-width: 640px) {
.dialog__backdrop:has(.free-tier-unlock-dialog) {
align-items: stretch;
padding: var(--space-2);
}
dialog.free-tier-unlock-dialog {
width: calc(100vw - var(--space-4));
max-height: calc(100svh - var(--space-4));
border-radius: var(--radius-3);
}
.free-tier-unlock-dialog__header {
padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) var(--space-3);
}
.free-tier-unlock-dialog__header h2 {
font-size: var(--font-size-5);
}
.free-tier-unlock-dialog__body {
padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
}
.free-tier-unlock-dialog__summary-row {
align-items: flex-start;
padding: var(--space-3);
}
}
.dialog {
background: var(--primary-1);
border: none;
border-radius: var(--radius-3);
padding: var(--space-6);
box-shadow: var(--shadow-8);
max-width: 500px;
width: 90%;
margin: 0 auto;
position: relative;
}
.dialog__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-4);
}
.dialog__title {
margin: 0;
font-size: var(--font-size-5);
font-weight: 600;
color: var(--secondary-12);
}
.dialog__close {
background: none;
border: none;
font-size: var(--font-size-4);
cursor: pointer;
padding: var(--space-1);
color: var(--secondary-11);
transition: color 0.2s ease;
}
.dialog__close:hover {
color: var(--secondary-12);
}
.dialog__body {
margin-bottom: var(--space-5);
}
.dialog__description {
margin: 0 0 var(--space-3) 0;
color: var(--secondary-11);
font-size: var(--font-size-3);
}
.dialog__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
margin-top: var(--space-5);
}
.ai-editor-dialog {
border-radius: var(--radius-3);
position: relative;
}
@media (max-width: 768px) {
.ai-editor-dialog {
display: none;
}
}
.dialog-close-btn {
position: absolute;
top: var(--space-2);
right: var(--space-2);
background: none;
border: none;
font-size: var(--font-size-4);
cursor: pointer;
color: var(--secondary-12);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: calc(var(--space-6) + var(--space-3));
min-height: calc(var(--space-6) + var(--space-3));
border-radius: var(--radius-round);
}
.dialog-close-btn:hover {
color: var(--primary-9);
}
.ai-copilot-dialog {
font-size: var(--font-size-4);
padding: var(--space-2) var(--space-3);
box-shadow: var(--shadow-9);
border-radius: var(--radius-3);
max-width: calc(var(--container-2) - var(--space-4));
width: 100%;
border: none;
}
.ai-copilot-dialog .form-row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.ai-copilot-dialog .form-row textarea {
flex-grow: 1;
resize: vertical;
min-height: var(--space-9);
}
@media (max-width: 768px) {
.ai-copilot-dialog {
max-width: 90%;
max-height: 90%;
}
.ai-copilot-dialog--idle {
min-width: 100vw;
}
.ai-copilot-dialog .form-row textarea {
min-width: 70vw;
}
}
.ai-copilot-dialog textarea {
padding: var(--space-3);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
box-sizing: border-box;
background-color: var(--primary-1);
color: var(--secondary-12);
margin-top: var(--space-1);
max-width: calc(var(--container-2) - var(--space-8));
width: 100%;
font-size: var(--font-size-3);
box-shadow: var(--shadow-1);
&:focus {
outline: none;
border-color: var(--primary-9);
box-shadow: none;
}
&:where(.command__custom-role) {
width: 60%;
min-width: var(--container-narrow-1);
max-width: var(--container-1);
background-color: var(--secondary-4);
border: 1px solid var(--secondary-5);
border-radius: var(--radius-3);
box-sizing: border-box;
padding: var(--space-2);
resize: none;
&:focus {
outline: none;
border-color: var(--secondary-6);
}
}
}
.ai-copilot-dialog .select-block {
max-width: var(--container-0);
}
.ai-copilot-dialog__content {
display: flex;
align-items: center;
justify-content: center;
}
.ai-copilot-dialog__status {
display: flex;
align-items: center;
gap: var(--space-2);
}
.ai-copilot-dialog__status--text {
margin-right: var(--space-3);
font-size: var(--font-size-4);
}
.ai-copilot-dialog__status--icon {
width: var(--font-size-4);
height: var(--font-size-4);
}
.ai-copilot-dialog__search-phrases {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: var(--container-3);
gap: var(--space-1);
}
.ai-copilot-dialog__search-phrase {
display: flex;
padding: var(--space-1) var(--space-2);
margin-bottom: var(--space-1);
background-color: var(--primary-5);
color: var(--secondary-12);
border-radius: var(--radius-3);
font-size: var(--font-size-3);
}
.dialog-close-btn {
position: absolute;
top: var(--space-2);
right: var(--space-2);
background: none;
border: none;
font-size: var(--font-size-4);
cursor: pointer;
color: var(--secondary-12);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: calc(var(--space-6) + var(--space-3));
min-height: calc(var(--space-6) + var(--space-3));
border-radius: var(--radius-round);
z-index: 10; /* Ensure it's above other content */
padding: var(--space-1);
transition: color 0.2s;
}
.dialog-close-btn:hover {
color: var(--primary-9);
}
.ai-copilot-dialog button {
&:where(.command__add-domain) {
align-items: center;
padding: var(--space-3);
background-color: var(--secondary-9);
color: var(--secondary-1);
border: none;
cursor: pointer;
&:hover {
background-color: var(--secondary-11);
}
}
}
.link-panel__dialog {
padding: var(--space-3);
border-radius: var(--radius-3);
background-color: var(--secondary-2);
max-width: var(--container-3);
margin: 0 auto;
box-shadow: var(--shadow-6);
font-size: var(--font-size-4);
}
.desktop-only-dialog {
display: none;
position: fixed;
/* Same layer as toasts: above every modal on the shared scale. */
z-index: var(--z-index-modal);
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.desktop-only-dialog .dialog-content {
background-color: var(--primary-1);
margin: 15% auto;
padding: 20px;
border: 1px solid var(--secondary-3);
width: 80%;
text-align: center;
}
/* tablets and small screens */
@media (max-width: 768px) {
.desktop-only-dialog {
display: block; /* Show the dialog on mobile devices */
}
}
.dialog-footer {
padding: var(--space-4);
text-align: center;
background-color: var(--secondary-1);
color: var(--secondary-11);
border-top: 1px solid var(--secondary-3);
position: absolute;
bottom: 0;
width: 100%;
box-sizing: border-box; /* Include padding in width calculation */
}
@media (max-width: 768px) {
.dialog-footer {
width: calc(100% - var(--space-2)); /* Account for dialog padding */
padding: var(--space-2);
left: var(--space-1);
right: var(--space-1);
font-size: var(--font-size-3);
color: var(--secondary-12);
}
}
/* Bulk Delete Dialog Styles */
.bulk-delete-dialog {
background: var(--primary-1);
border: none;
border-radius: var(--radius-3);
padding: var(--space-6);
box-shadow: var(--shadow-8);
max-width: 500px;
width: 90%;
margin: 0 auto;
position: relative;
}
.bulk-delete-dialog__content {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.bulk-delete-dialog__header {
margin-bottom: var(--space-2);
}
.bulk-delete-dialog__header h2 {
margin: 0 0 var(--space-2) 0;
font-size: var(--font-size-5);
font-weight: 600;
color: var(--secondary-12);
}
.bulk-delete-dialog__header p {
margin: 0;
color: var(--secondary-11);
font-size: var(--font-size-3);
line-height: 1.5;
}
.bulk-delete-dialog__form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.bulk-delete-dialog__form .form-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bulk-delete-dialog__form .form-field label {
font-weight: 500;
color: var(--secondary-12);
font-size: var(--font-size-3);
}
.bulk-delete-dialog__form .form-field input {
background: var(--secondary-1);
border: 1px solid var(--secondary-7);
border-radius: var(--radius-2);
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-3);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
color: var(--secondary-12);
}
.bulk-delete-dialog__form .form-field input:focus {
outline: none;
border-color: var(--primary-9);
box-shadow: 0 0 0 2px rgba(var(--primary-9-rgb), 0.1);
}
.bulk-delete-dialog__form .form-field input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.bulk-delete-dialog__form .form-field small {
color: var(--secondary-10);
font-size: var(--font-size-2);
margin-top: var(--space-1);
}
.bulk-delete-dialog__checkbox-section {
padding: var(--space-3);
background: var(--secondary-1);
border-radius: var(--radius-2);
border: 1px solid var(--secondary-3);
}
.bulk-delete-dialog__confirmation {
margin: var(--space-2) 0;
}
.bulk-delete-dialog__error {
margin: var(--space-2) 0;
}
.bulk-delete-dialog__actions {
display: flex;
gap: var(--space-3);
justify-content: flex-end;
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--secondary-3);
}
.bulk-delete-dialog__actions .btn {
min-width: 120px;
}
/* Alert styles within bulk delete dialog */
.bulk-delete-dialog .alert {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3);
border-radius: var(--radius-2);
margin: 0;
}
.bulk-delete-dialog .alert--warning {
background: var(--yellow-2);
border: 1px solid var(--yellow-4);
color: var(--yellow-11);
}
.bulk-delete-dialog .alert--error {
background: var(--failure-2);
border: 1px solid var(--failure-4);
color: var(--failure-11);
}
.bulk-delete-dialog .alert__icon {
flex-shrink: 0;
margin-top: 1px;
}
.bulk-delete-dialog .alert__text {
margin: 0;
font-size: var(--font-size-3);
line-height: 1.4;
}
.bulk-delete-dialog .alert__text strong {
font-weight: 600;
}
/* Responsive design */
@media (max-width: 768px) {
.bulk-delete-dialog {
max-width: 95%;
padding: var(--space-4);
}
.bulk-delete-dialog__actions {
flex-direction: column;
gap: var(--space-2);
}
.bulk-delete-dialog__actions .btn {
width: 100%;
min-width: auto;
}
}
/* AI Personality Dialog specific animations (moved from inline) */
.ai-personality-dialog[open] {
animation: slideIn 0.2s ease-out;
}
.ai-personality-dialog-backdrop {
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translate(-50%, -48%) scale(0.96);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
/* Share dialog email input */
.share-dialog-email-input::placeholder {
color: var(--secondary-8);
}
/* /css/components/flow-generate-dialog.css */
/* ===== Generate Skill Dialog ===== */
.generate-dialog {
background: var(--secondary-1);
border: 1px solid var(--secondary-3);
border-radius: var(--radius-3);
padding: 0;
box-shadow: var(--shadow-8);
max-width: 900px;
width: max(60%, calc(100% - var(--space-8)));
min-width: 600px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: var(--z-index-9);
margin: 0;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.generate-dialog[open] {
display: flex;
}
.generate-dialog__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--secondary-3);
gap: var(--space-3);
}
.generate-dialog__title {
margin: 0;
font-size: var(--font-size-4);
font-weight: 600;
color: var(--secondary-12);
display: flex;
align-items: center;
gap: var(--space-2);
}
.generate-dialog__subtitle {
margin: var(--space-1) 0 0 0;
font-size: var(--font-size-2);
color: var(--secondary-9);
line-height: var(--line-height-5);
}
.generate-dialog__close {
background: none;
border: none;
font-size: var(--font-size-4);
cursor: pointer;
padding: var(--space-1);
color: var(--secondary-9);
border-radius: var(--radius-2);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
line-height: 1;
}
.generate-dialog__close:hover {
background: var(--secondary-3);
color: var(--secondary-12);
}
.generate-dialog__body {
padding: var(--space-5);
flex: 1;
overflow-y: auto;
min-height: 0;
}
.generate-dialog__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--secondary-3);
background: var(--secondary-2);
border-radius: 0 0 var(--radius-3) var(--radius-3);
}
.generate-dialog__footer--three-btn {
justify-content: space-between;
}
.generate-dialog__footer .btn-group {
display: flex;
gap: var(--space-3);
}
/* Numbered step wrapper */
.upload-step {
margin-bottom: var(--space-4);
}
.upload-step:last-child {
margin-bottom: 0;
}
.upload-step__header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--space-2);
}
.upload-step__label {
font-size: var(--font-size-2);
font-weight: var(--font-weight-medium);
color: var(--secondary-12);
}
.upload-step__hint {
font-size: var(--font-size-2);
color: var(--secondary-9);
}
/* Upload Zone */
.upload-zone {
border: 2px dashed var(--secondary-5);
border-radius: var(--radius-3);
padding: var(--space-6) var(--space-4);
text-align: center;
background: var(--secondary-2);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}
.upload-zone:hover,
.upload-zone.drag-over {
border-color: var(--primary-7);
background: var(--secondary-3);
}
.upload-zone.has-file {
padding: var(--space-4);
}
.upload-zone__icon {
color: var(--secondary-9);
margin-bottom: var(--space-2);
}
.upload-zone__text {
font-size: var(--font-size-2);
color: var(--secondary-11);
margin: 0 0 var(--space-1) 0;
}
.upload-zone__browse {
color: var(--info-11);
font-weight: var(--font-weight-medium);
}
.upload-zone__hint {
font-size: var(--font-size-1);
color: var(--secondary-9);
margin: 0;
}
/* File List */
.file-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-3);
max-height: 240px;
overflow-y: auto;
}
/* Budget bar */
.budget-bar {
height: 6px;
background: var(--secondary-4);
border-radius: var(--radius-1);
overflow: hidden;
}
.budget-bar__fill {
height: 100%;
border-radius: var(--radius-1);
transition: width 0.3s ease, background 0.3s ease;
}
.budget-bar__label {
margin: var(--space-1) 0 0 0;
font-size: var(--font-size-2);
color: var(--secondary-9);
}
.file-preview {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
background: var(--secondary-2);
border-radius: var(--radius-2);
border: 1px solid var(--secondary-4);
}
.file-preview__thumb {
width: 40px;
height: 40px;
border-radius: var(--radius-2);
background: var(--secondary-3);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-5);
flex-shrink: 0;
}
.file-preview__info {
flex: 1;
min-width: 0;
}
.file-preview__name {
font-size: var(--font-size-3);
color: var(--secondary-12);
font-weight: 500;
margin: 0 0 var(--space-1) 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-preview__size {
font-size: var(--font-size-2);
color: var(--secondary-9);
margin: 0;
}
.file-preview__remove {
background: none;
border: none;
color: var(--secondary-9);
cursor: pointer;
padding: var(--space-2);
border-radius: var(--radius-2);
font-size: var(--font-size-3);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
flex-shrink: 0;
}
.file-preview__remove:hover {
background: var(--failure-3);
color: var(--failure-9);
}
/* Context / Instructions Field */
.context-field__input {
width: 100%;
padding: var(--space-3);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-2);
font-size: var(--font-size-3);
color: var(--secondary-12);
background: var(--secondary-1);
resize: none;
font-family: inherit;
}
.context-field__input::placeholder {
color: var(--secondary-7);
}
.context-field__input:focus {
outline: none;
border-color: var(--primary-7);
}
/* Loading State */
.loading-state {
text-align: center;
padding: var(--space-8) 0;
}
.loading-state__spinner {
width: 48px;
height: 48px;
border: 3px solid var(--secondary-4);
border-top-color: var(--primary-9);
border-radius: 50%;
animation: generateSpin 1s linear infinite;
margin: 0 auto var(--space-4) auto;
}
@keyframes generateSpin {
to { transform: rotate(360deg); }
}
.loading-state__text {
font-size: var(--font-size-3);
color: var(--secondary-11);
margin: 0 0 var(--space-2) 0;
}
.loading-state__hint {
font-size: var(--font-size-2);
color: var(--secondary-9);
margin: 0;
}
/* Error State */
.error-state {
text-align: center;
padding: var(--space-6) 0;
}
.error-state__icon {
font-size: var(--font-size-9);
margin-bottom: var(--space-3);
}
.error-state__text {
font-size: var(--font-size-3);
color: var(--failure-11);
margin: 0 0 var(--space-2) 0;
}
.error-state__hint {
font-size: var(--font-size-2);
color: var(--secondary-9);
margin: 0;
}
/* Preview State */
.preview-state {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Preview Editor Styling */
.preview-state .preview-editor {
display: block;
}
.preview-state .preview-editor .ProseMirror {
max-height: 50vh;
min-height: 200px;
overflow-y: auto;
background: var(--secondary-1);
border: 1px solid var(--secondary-4);
}
.preview-state .preview-editor .ProseMirror:focus {
outline: none;
border-color: var(--primary-7);
}
.preview-hint {
font-size: var(--font-size-2);
color: var(--secondary-9);
margin: var(--space-2) 0 0 0;
text-align: center;
}
/* Feedback Section */
.feedback-section {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--secondary-3);
}
.feedback-section__label {
display: block;
font-size: var(--font-size-2);
color: var(--secondary-11);
margin-bottom: var(--space-2);
font-weight: 500;
}
.feedback-section__input-row {
display: flex;
gap: var(--space-2);
align-items: stretch;
}
.feedback-section__input {
flex: 1;
padding: var(--space-3);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-2);
font-size: var(--font-size-3);
color: var(--secondary-12);
background: var(--secondary-1);
font-family: inherit;
height: 44px;
}
.feedback-section__input::placeholder {
color: var(--secondary-7);
}
.feedback-section__input:focus {
outline: none;
border-color: var(--primary-7);
}
.feedback-section__btn {
flex-shrink: 0;
height: 44px;
}
/* Responsive for Generate Dialog */
@media (max-width: 768px) {
.generate-dialog {
width: calc(100% - var(--space-4));
min-width: unset;
max-width: unset;
top: 50%;
transform: translate(-50%, -50%);
max-height: 96vh;
}
.preview-state .preview-editor .ProseMirror {
max-height: 30vh;
}
.generate-dialog__footer--three-btn {
flex-direction: column;
gap: var(--space-2);
}
.generate-dialog__footer--three-btn .btn-group {
width: 100%;
justify-content: stretch;
}
.generate-dialog__footer--three-btn .btn-group .btn {
flex: 1;
}
.feedback-section__input-row {
flex-direction: column;
}
.feedback-section__input {
height: 44px;
}
.feedback-section__btn {
width: 100%;
}
}
/* /css/components/documents.css */
.document-list {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
overflow-y: auto;
height: 100%;
}
@media (max-width: 768px) {
.document-list {
flex-grow: 1;
height: 100%;
}
}
.document-list li {
background-color: var(--primary-1);
margin-bottom: var(--space-2);
margin-top: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-3);
box-shadow: var(--shadow-2);
font-size: var(--font-size-2);
border: 1px solid var(--secondary-5);
&:hover {
box-shadow: var(--shadow-3);
}
&:active {
box-shadow: var(--shadow-1);
}
}
.document-list a {
text-decoration: none;
color: var(--secondary-12);
display: block;
}
.document-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3);
}
.document-item.skeleton {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: linear-gradient(to right, var(--secondary-5) 8%, var(--secondary-3) 18%, var(--secondary-5) 33%);
background-size: 80rem 100%;
height: var(--space-6);
margin-bottom: 10px;
border-radius: var(--radius-3);
box-shadow: none;
}
.document-link {
text-decoration: none;
display: flex;
align-items: center;
gap: var(--space-2);
}
.document-content {
display: flex;
align-items: center;
}
.document-title {
margin-right: 10px;
padding-top: 5px;
}
.document-icon--delete {
cursor: pointer;
color: var(--secondary-9);
display: flex;
align-items: center;
&:hover {
color: var(--failure-9);
&::before {
content: 'Delete';
font-size: var(--font-size-2);
margin-right: var(--space-1);
}
}
}
/* File Item Styles for Documents Index */
.file-item {
display: flex;
flex-direction: column;
padding: var(--space-4);
background: var(--secondary-2);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
position: relative;
}
.file-item__edit {
background: none;
border: 1px solid var(--secondary-7);
padding: var(--space-2);
border-radius: var(--radius-1);
cursor: pointer;
color: var(--secondary-12);
opacity: 0.8;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.file-item__edit:hover {
opacity: 1;
background: var(--primary-4);
border-color: var(--primary-8);
color: var(--primary-11);
}
.file-item__edit svg {
flex-shrink: 0;
}
.file-item__delete {
background: none;
border: 1px solid var(--secondary-7);
padding: var(--space-2);
border-radius: var(--radius-1);
cursor: pointer;
color: var(--secondary-12);
opacity: 0.8;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.file-item__delete:hover {
opacity: 1;
background: var(--failure-4);
border-color: var(--failure-8);
color: var(--failure-11);
}
.file-item__delete svg {
color: currentColor;
flex-shrink: 0;
}
.file-item__pin {
background: none;
border: 1px solid var(--secondary-7);
padding: var(--space-2);
border-radius: var(--radius-1);
cursor: pointer;
color: var(--secondary-12);
opacity: 0.8;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.file-item__pin:hover:not(:disabled) {
opacity: 1;
background: var(--primary-4);
border-color: var(--primary-8);
color: var(--primary-11);
}
.file-item__pin:disabled {
opacity: 0.4;
cursor: not-allowed;
background: var(--secondary-3);
border-color: var(--secondary-5);
color: var(--secondary-8);
}
.file-item__pin svg {
flex-shrink: 0;
}
.file-item__title {
font-size: var(--font-size-3);
font-weight: var(--font-weight-medium);
color: var(--secondary-12);
margin-bottom: var(--space-2);
text-align: left;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-item__date {
font-size: var(--font-size-2);
color: var(--secondary-11);
text-align: left;
width: 100%;
margin-bottom: var(--space-2);
}
/* Document Index Tabs - Soft UI Design */
.tabs {
display: flex;
border-bottom: 1px solid var(--secondary-6);
margin-bottom: var(--space-3);
gap: var(--space-1);
}
.tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-3) var(--space-2);
background: none;
border: none;
color: var(--secondary-11);
font-size: var(--font-size-3);
font-weight: var(--font-weight-regular);
cursor: pointer;
border-radius: var(--radius-3) var(--radius-3) 0 0;
transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic);
position: relative;
}
.tab:hover {
color: var(--secondary-12);
background-color: var(--secondary-2);
}
.tab--active {
color: var(--primary-11);
background-color: var(--primary-3);
font-weight: var(--font-weight-medium);
}
.tab--active:hover {
background-color: var(--primary-4);
}
.tab--active:active {
background-color: var(--primary-5);
}
.tab--active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: var(--primary-9);
border-radius: var(--radius-1);
}
/* /css/components/spreadsheets.css */
.chat-nav-sidebar__spreadsheets-panel {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 0;
}
/* Make the custom element transparent in the sidebar flex layout chain. */
spreadsheets-sidebar-panel {
display: contents;
}
/* One header row: the spreadsheet picker and its document actions. The
editor below keeps its own command row, so this row has no band of its own. */
.spreadsheets-toolbar {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-2) 0;
flex-shrink: 0;
}
.spreadsheets-toolbar__select {
flex: 1;
min-width: 0;
position: relative;
}
.spreadsheets-toolbar__select::after {
content: '';
position: absolute;
right: var(--space-2);
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
pointer-events: none;
background-color: var(--secondary-9);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
-webkit-mask-size: 12px 12px;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
mask-size: 12px 12px;
mask-position: center;
mask-repeat: no-repeat;
}
.spreadsheets-toolbar__select select {
width: 100%;
padding: var(--space-2) calc(var(--space-3) + 18px) var(--space-2) var(--space-3);
border: 1px solid var(--secondary-6);
border-radius: var(--radius-2);
background: var(--secondary-1);
color: var(--secondary-12);
font-size: var(--font-size-2);
line-height: 1.2;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
max-height: min(40vh, 320px);
overflow-y: auto;
}
.spreadsheets-toolbar__actions {
display: flex;
align-items: center;
gap: var(--space-1);
}
.spreadsheets-toolbar__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-2);
border: 1px solid var(--secondary-6);
background: var(--secondary-1);
color: var(--secondary-11);
font-size: var(--font-size-1);
cursor: pointer;
}
.spreadsheets-toolbar__button:hover {
background: var(--secondary-2);
}
.spreadsheets-toolbar__button--active,
.spreadsheets-toolbar__button--active:hover {
border-color: var(--primary-7);
background: var(--primary-3);
color: var(--primary-11);
}
.spreadsheets-toolbar__button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.spreadsheets-toolbar__button--icon {
flex-shrink: 0;
width: 32px;
height: 32px;
padding: 0;
}
/* "Draft · v12" opens the version history, as the JetSlides badge does. The
dot says whether the head holds every edit. */
.spreadsheets-toolbar__draft {
flex-shrink: 0;
height: 32px;
padding: 0 var(--space-2);
gap: 6px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.spreadsheets-toolbar__dot {
flex-shrink: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--secondary-7);
}
.spreadsheets-toolbar__draft--saved .spreadsheets-toolbar__dot {
background: var(--success-9);
}
.spreadsheets-toolbar__draft--unsaved .spreadsheets-toolbar__dot {
background: var(--warning-11);
}
.spreadsheets-toolbar__draft--error .spreadsheets-toolbar__dot {
background: var(--danger-9);
}
.spreadsheets-toolbar__divider {
flex-shrink: 0;
width: 1px;
height: 20px;
margin: 0 var(--space-1);
background: var(--secondary-5);
}
/* The download menu opens in the top layer. placeUnderTrigger sets top and
right; display stays with the browser so a closed popover stays hidden. */
.spreadsheets-menu {
position: fixed;
inset: auto;
min-width: 220px;
margin: 0;
padding: var(--space-1);
border: 1px solid var(--secondary-6);
border-radius: var(--radius-3);
background: var(--secondary-1);
box-shadow: var(--shadow-6);
color: var(--secondary-12);
}
.spreadsheets-menu button {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
width: 100%;
padding: var(--space-2) var(--space-3);
border: 0;
border-radius: var(--radius-2);
background: transparent;
color: inherit;
font-size: var(--font-size-2);
text-align: left;
cursor: pointer;
}
.spreadsheets-menu button:hover,
.spreadsheets-menu button:focus-visible {
background: var(--secondary-3);
}
.spreadsheets-menu small {
color: var(--secondary-9);
font-size: var(--font-size-1);
}
.spreadsheets-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.spreadsheets-toolbar__button--primary {
background: var(--primary-9);
color: #fff;
border-color: var(--primary-9);
}
.spreadsheets-toolbar__button--primary:hover {
background: var(--primary-10);
}
.spreadsheets-toolbar__button--danger {
border-color: var(--secondary-5);
color: var(--secondary-10);
}
.spreadsheets-toolbar__button--danger:hover {
background: var(--secondary-2);
color: var(--secondary-12);
}
.chat-nav-sidebar__spreadsheets-viewer {
position: relative;
flex: 1;
min-height: 0;
overflow: auto;
padding: var(--space-2);
}
.spreadsheets-sheet-container {
min-height: 420px;
height: 100%;
width: 100%;
background: var(--secondary-1);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-2);
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.spreadsheets-editor-host {
flex: 1;
min-height: 0;
width: 100%;
}
/* Keep the real mount host in place under the scaffold. Progress updates must
never detach the editor or restart its request. */
.spreadsheets-loading {
position: absolute;
inset: var(--space-2);
z-index: 2;
overflow: hidden;
border: 1px solid var(--secondary-4);
border-radius: var(--radius-2);
background: var(--secondary-1);
color: var(--secondary-11);
display: grid;
place-items: center;
}
.spreadsheets-loading__scaffold {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0.65;
pointer-events: none;
}
.spreadsheets-loading__toolbar {
display: flex;
align-items: center;
gap: 18px;
height: 48px;
padding: 0 20px;
border-bottom: 1px solid var(--secondary-4);
flex-shrink: 0;
}
.spreadsheets-loading__toolbar span,
.spreadsheets-loading__tabs span {
width: 42px;
height: 10px;
border-radius: 3px;
background: var(--secondary-4);
}
.spreadsheets-loading__formula {
display: flex;
gap: 24px;
align-items: center;
height: 40px;
padding: 0 22px;
border-bottom: 1px solid var(--secondary-4);
color: var(--secondary-8);
flex-shrink: 0;
}
.spreadsheets-loading__formula i {
width: 20%;
height: 8px;
border-radius: 3px;
background: var(--secondary-3);
}
.spreadsheets-loading__columns,
.spreadsheets-loading__row {
display: grid;
grid-template-columns: 42px repeat(6, minmax(70px, 1fr));
}
.spreadsheets-loading__columns {
background: var(--secondary-2);
height: 30px;
flex-shrink: 0;
}
.spreadsheets-loading__columns span,
.spreadsheets-loading__row > span {
display: grid;
place-items: center;
color: var(--secondary-9);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.spreadsheets-loading__columns span,
.spreadsheets-loading__row > * {
border-right: 1px solid var(--secondary-4);
border-bottom: 1px solid var(--secondary-4);
}
.spreadsheets-loading__grid {
flex: 1;
overflow: hidden;
mask-image: linear-gradient(black, transparent 90%);
}
.spreadsheets-loading__row {
height: 34px;
}
.spreadsheets-loading__row > span {
background: var(--secondary-2);
}
.spreadsheets-loading__tabs {
display: flex;
gap: 20px;
align-items: center;
height: 40px;
padding: 0 20px;
border-top: 1px solid var(--secondary-4);
flex-shrink: 0;
}
.spreadsheets-loading__tabs span {
width: 70px;
}
.spreadsheets-loading__card {
position: relative;
width: min(380px, calc(100% - 48px));
box-sizing: border-box;
padding: 22px;
border: 1px solid var(--secondary-4);
border-radius: 10px;
background: var(--secondary-1);
box-shadow: 0 4px 24px color-mix(in srgb, var(--secondary-12) 6%, transparent);
}
.spreadsheets-loading__heading {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.spreadsheets-loading__heading > div {
min-width: 0;
flex: 1;
}
.spreadsheets-loading__heading strong {
display: block;
color: var(--secondary-12);
font-size: var(--font-size-3);
font-weight: 600;
}
.spreadsheets-loading__icon {
color: var(--primary-9);
background: var(--primary-2);
border: 1px solid var(--primary-4);
border-radius: 8px;
width: 36px;
height: 36px;
flex-shrink: 0;
display: grid;
place-items: center;
}
.spreadsheets-loading__name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 3px;
font-size: var(--font-size-1);
color: var(--secondary-10);
}
.spreadsheets-loading__percent {
font-size: var(--font-size-2);
font-variant-numeric: tabular-nums;
color: var(--secondary-11);
}
.spreadsheets-loading__progress {
overflow: hidden;
height: 4px;
border-radius: 4px;
background: var(--secondary-3);
}
.spreadsheets-loading__progress > span {
display: block;
height: 100%;
background: var(--primary-9);
border-radius: inherit;
transform-origin: left;
transition: transform 120ms linear;
}
.spreadsheets-loading__progress--indeterminate > span {
width: 30%;
animation: spreadsheet-load-progress 1.5s ease-in-out infinite;
}
@keyframes spreadsheet-load-progress {
0% { transform: translateX(-110%); }
100% { transform: translateX(440%); }
}
.spreadsheets-loading__detail {
color: var(--secondary-10);
font-size: var(--font-size-1);
line-height: 1.5;
margin: 10px 0 0;
overflow-wrap: anywhere;
}
.spreadsheets-loading__steps {
display: flex;
gap: 22px;
margin-top: 20px;
padding-top: 14px;
border-top: 1px solid var(--secondary-3);
font-size: var(--font-size-1);
color: var(--secondary-8);
}
.spreadsheets-loading__step--active { color: var(--primary-10); }
.spreadsheets-loading__step--done { color: var(--secondary-11); }
.spreadsheets-loading__card > button { margin-top: 16px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
.spreadsheets-loading__progress > span {
animation: none;
transition: none;
}
.spreadsheets-loading__progress--indeterminate > span {
width: 100%;
opacity: 0.35;
}
}
/* The editor fills the card. Its stylesheet sizes jetexcel-editor to the
viewport on narrow screens, which only suits the standalone page. */
.spreadsheets-editor-mount-root,
.spreadsheets-editor-mount-root > jetexcel-editor {
height: 100%;
}
/* The scoped editor stylesheet puts the standalone Inter stack on the editor
element. Embedded in Jetdraft, the editor keeps the app typeface. */
.spreadsheets-editor-mount-root > jetexcel-editor {
font-family: inherit;
}
.spreadsheets-status {
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-2);
color: var(--secondary-9);
}
.spreadsheets-status--error {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
color: var(--danger-9);
}
.spreadsheets-status--notice {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
color: var(--secondary-11);
}
/* Version history: a modal drawer at the right edge, laid out like the
JetSlides one. The dialog sits in the top layer, so the sidebar's overflow
and stacking cannot clip it.
dialog.css gives every other open dialog display: block, margin: 0 and
border: none through seven :not() classes, which outranks these selectors.
So display uses !important (as sidebars.css does), the edge line is a
box-shadow, and the preview is centered with top/left instead of margin. */
.spreadsheets-versions[open] {
position: fixed;
inset: 0 0 0 auto;
display: grid !important;
grid-template-rows: auto auto minmax(0, 1fr) auto;
width: min(410px, calc(100vw - 40px));
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: 0;
background: var(--secondary-2);
box-shadow:
-1px 0 0 var(--secondary-5),
-24px 0 70px rgb(18 27 48 / 24%);
color: var(--secondary-12);
}
.spreadsheets-versions::backdrop,
.spreadsheets-version-preview::backdrop {
background: rgb(17 25 43 / 38%);
}
.spreadsheets-versions__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) var(--space-5) var(--space-4);
border-bottom: 1px solid var(--secondary-4);
background: var(--secondary-1);
}
.spreadsheets-versions__eyebrow {
display: block;
margin-bottom: 5px;
color: var(--secondary-9);
font-size: var(--font-size-1-half);
font-weight: var(--font-weight-medium);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.spreadsheets-versions__header h2 {
margin: 0;
font-size: var(--font-size-5);
letter-spacing: -0.025em;
}
.spreadsheets-versions__summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
border-bottom: 1px solid var(--secondary-4);
background: var(--secondary-4);
}
.spreadsheets-versions__summary span {
display: grid;
gap: 3px;
padding: var(--space-3) var(--space-5);
background: var(--secondary-1);
color: var(--secondary-9);
font-size: var(--font-size-1);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
.spreadsheets-versions__summary strong {
color: var(--secondary-12);
font-size: var(--font-size-4);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
text-transform: none;
}
.spreadsheets-versions__body {
display: grid;
align-content: start;
gap: 10px;
padding: var(--space-4);
overflow: auto;
overscroll-behavior: contain;
}
.spreadsheets-versions__note {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin: 0;
color: var(--secondary-10);
font-size: var(--font-size-2);
}
.spreadsheets-versions__note--error {
color: var(--danger-9);
}
.spreadsheets-versions__list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.spreadsheets-version {
padding: 14px;
border: 1px solid var(--secondary-5);
border-radius: 12px;
background: var(--secondary-1);
box-shadow: 0 2px 8px rgb(24 32 53 / 4%);
}
.spreadsheets-version--head {
border-color: var(--primary-7);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-9) 10%, transparent);
}
.spreadsheets-version__heading {
display: flex;
align-items: center;
gap: 7px;
}
.spreadsheets-version__heading > strong {
font-size: var(--font-size-3);
font-variant-numeric: tabular-nums;
}
.spreadsheets-version__kind,
.spreadsheets-version__marker {
padding: 4px 6px;
border-radius: 5px;
background: var(--secondary-3);
color: var(--secondary-10);
font-size: var(--font-size-half);
font-weight: var(--font-weight-bold);
letter-spacing: 0.07em;
line-height: 1;
text-transform: uppercase;
}
.spreadsheets-version__marker {
margin-left: auto;
background: var(--primary-3);
color: var(--primary-11);
}
.spreadsheets-version p {
margin: 9px 0 3px;
color: var(--secondary-11);
font-size: var(--font-size-2);
}
.spreadsheets-version time {
color: var(--secondary-9);
font-size: var(--font-size-1-half);
font-variant-numeric: tabular-nums;
}
.spreadsheets-version__actions {
display: flex;
gap: 7px;
margin-top: 12px;
}
.spreadsheets-version__actions button {
min-height: 31px;
padding: 0 10px;
border: 1px solid var(--secondary-6);
border-radius: 7px;
background: var(--secondary-1);
color: var(--secondary-11);
font-size: var(--font-size-1-half);
font-weight: var(--font-weight-medium);
cursor: pointer;
}
.spreadsheets-version__actions button:hover:not(:disabled) {
background: var(--secondary-3);
}
.spreadsheets-version__actions .spreadsheets-version__restore {
border-color: var(--primary-9);
background: var(--primary-9);
color: #fff;
}
.spreadsheets-version__actions .spreadsheets-version__restore:hover:not(:disabled) {
background: var(--primary-10);
}
.spreadsheets-version__actions button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.spreadsheets-versions__more {
justify-self: center;
}
.spreadsheets-versions__footer {
padding: 13px var(--space-5);
border-top: 1px solid var(--secondary-4);
background: var(--secondary-1);
}
.spreadsheets-versions__footer p {
margin: 0;
color: var(--secondary-10);
font-size: var(--font-size-1-half);
line-height: 1.45;
}
/* The preview of one version: a read-only editor over the drawer. No
transform for centering: it would make this dialog the containing block of
the editor's position: fixed popovers. */
.spreadsheets-version-preview[open] {
--version-preview-width: min(1100px, calc(100vw - 32px));
--version-preview-height: min(760px, calc(100dvh - 32px));
position: fixed;
top: calc((100dvh - var(--version-preview-height)) / 2);
left: calc((100vw - var(--version-preview-width)) / 2);
display: flex !important;
flex-direction: column;
width: var(--version-preview-width);
max-width: none;
height: var(--version-preview-height);
max-height: none;
padding: 0;
border-radius: var(--radius-4);
background: var(--secondary-1);
box-shadow:
0 0 0 1px var(--secondary-5),
var(--shadow-6);
color: var(--secondary-12);
overflow: hidden;
}
.spreadsheets-version-preview__bar {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--secondary-4);
}
.spreadsheets-version-preview__title {
display: grid;
flex: 1;
min-width: 0;
gap: 2px;
}
.spreadsheets-version-preview__title strong {
font-size: var(--font-size-3);
font-variant-numeric: tabular-nums;
}
.spreadsheets-version-preview__title span {
overflow: hidden;
color: var(--secondary-10);
font-size: var(--font-size-1-half);
text-overflow: ellipsis;
white-space: nowrap;
}
.spreadsheets-version-preview__bar .spreadsheets-toolbar__button--primary {
height: 32px;
padding: 0 var(--space-3);
white-space: nowrap;
}
.spreadsheets-version-preview__body {
position: relative;
flex: 1;
min-height: 0;
}
.spreadsheets-version-preview__loading {
margin: 0;
padding: var(--space-3) var(--space-4);
color: var(--secondary-9);
font-size: var(--font-size-2);
}
/* The editor covers the loading line once it has mounted. */
.spreadsheets-version-preview__host {
position: absolute;
inset: 0;
}
.spreadsheets-version-preview__host:not(:empty) {
background: var(--secondary-1);
}
.spreadsheets-empty-actions {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-3);
}
.spreadsheets-file-input {
display: none;
}
@media (max-width: 768px) {
/* --- Top toolbar: keep select full-width, scroll the action lane --- */
.spreadsheets-toolbar {
flex-wrap: wrap;
align-items: stretch;
}
.spreadsheets-toolbar__select {
flex-basis: 100%;
}
.spreadsheets-toolbar__actions {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: var(--space-1);
}
.spreadsheets-toolbar__actions > * {
flex: 0 0 auto;
}
/* --- Touch-friendly minimum sizes --- */
.spreadsheets-toolbar__button,
.spreadsheets-toolbar__select select {
min-height: var(--mobile-touch-target-min-size);
}
.spreadsheets-toolbar__button {
min-width: var(--mobile-touch-target-min-size);
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-2);
white-space: nowrap;
}
.spreadsheets-toolbar__button--icon {
padding: 0;
}
.spreadsheets-toolbar__select select {
font-size: var(--font-size-3);
}
.spreadsheets-status .spreadsheets-toolbar__button,
.spreadsheets-version__actions button {
min-height: var(--mobile-touch-target-min-size);
}
.spreadsheets-version-preview[open] {
--version-preview-width: 100vw;
--version-preview-height: 100dvh;
border-radius: 0;
box-shadow: none;
}
}
/* /css/components/editor-and-content.css */
[data-editor-scroll-container] {
overflow-y: auto;
}
#editor {
border-radius: var(--radius-3);
padding: var(--space-2);
width: 100%;
max-width: 1024px;
min-width: 0;
margin: 0 auto;
display: flex;
height: 86vh;
height: 86svh;
}
body:has(document-conversations) #editor {
max-width: none;
width: 100%;
}
#editor:focus + .editor-menu-bar,
#editor:active + .editor-menu-bar,
.editor-menu-bar--wrapper:focus-within .editor-menu-bar,
.editor-menu-bar--wrapper:active .editor-menu-bar {
display: flex;
}
.editor-menu-bar {
width: 100%;
background-color: var(--secondary-4);
align-items: center;
justify-content: flex-start;
position: sticky;
top: 0;
z-index: var(--z-index-1);
}
.editor-menu-bar::-webkit-scrollbar {
display: none;
}
@media (max-width: 768px) {
.editor-menu-bar {
margin-top: var(--space-4);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.editor-menu-bar--wrapper {
flex-wrap: nowrap;
}
}
.content__top-row {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
align-items: center;
}
.editor-menu-bar--wrapper,
.content__title-wrapper,
.content__body {
width: 100%;
max-width: 1024px;
min-width: 0;
margin: 0 auto;
}
body:has(document-conversations) .content__body,
body:has(document-conversations) .editor-menu-bar--wrapper {
max-width: none;
width: 100%;
}
/* When right sidebar is expanded, use full width */
.panels-row:has(.sidebar--expanded) .editor-menu-bar--wrapper,
.panels-row:has(.sidebar--expanded) .content__title-wrapper,
.panels-row:has(.sidebar--expanded) .content__body,
.panels-row:has(.sidebar--expanded) #editor {
max-width: none;
}
.editor-menu-bar--wrapper {
width: 100%;
display: flex;
justify-content: flex-start;
overflow-y: hidden;
}
.content__title--upgrade-btn {
display: inline-flex;
gap: var(--space-2);
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
background-color: var(--success-3);
color: var(--success-11);
font-size: var(--font-size-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-3);
&:hover {
background-color: var(--success-5);
color: var(--success-12);
}
&:active {
background-color: var(--success-6);
color: var(--success-12);
}
}
.main__nav--upgrade-btn {
display: none;
}
.main__nav--plan-name {
color: var(--secondary-12);
font-weight: 500;
font-size: var(--font-size-2);
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
}
@media (max-width: 768px) {
.content__title--upgrade-btn {
display: none;
}
.main__nav--upgrade-btn {
display: inline-flex;
gap: var(--space-2);
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
background-color: var(--success-3);
color: var(--success-11);
font-size: var(--font-size-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-3);
&:hover {
background-color: var(--success-5);
color: var(--success-12);
}
&:active {
background-color: var(--success-6);
color: var(--success-12);
}
}
.content__title-wrapper,
.content__body {
max-width: 100vw;
}
.editor-menu-bar--wrapper {
display: flex;
align-items: center;
padding: var(--space-2);
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
height: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.editor-menu-bar--wrapper::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.editor-menu-bar--wrapper {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.content__title-wrapper {
flex-direction: column;
align-items: flex-start;
}
}
.content__title-form {
container-type: inline-size;
padding: var(--space-2) var(--space-4);
display: inline-flex;
gap: var(--space-2);
flex-direction: column;
width: 100%;
border: 1px solid var(--secondary-7);
background-color: var(--secondary-1);
border-radius: var(--radius-3);
font-size: var(--font-size-3);
}
.content__title-form input[type="text"] {
font-size: var(--font-size-4);
padding: var(--space-2) var(--space-1);
border: none;
border-bottom: 1px solid var(--secondary-11);
box-sizing: border-box;
background-color: var(--secondary-1);
color: var(--secondary-12);
margin-top: var(--space-1);
}
.content__title--plan-wrapper {
display: inline-flex;
align-items: center;
flex-direction: row;
}
.content__title-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: var(--space-2);
width: 100%;
max-width: 1024px;
margin: 0 auto;
padding: var(--space-2);
}
@media (min-width: 768px) {
.content__title-wrapper {
grid-column: 1 / -1;
overflow-y: hidden;
}
}
.content__title-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
@media (min-width: 768px) {
.content__title-wrapper .content__title-row,
.editor-menu-bar,
.content__body {
}
}
@media (max-width: 768px) {
.content__body {
padding-left: calc(var(--space-1) / 2);
}
}
@media (max-width: 768px) {
.content__title--plan-wrapper {
display: none;
}
}
.content__title--plan-name {
color: var(--primary-12);
margin: 0 var(--space-4) 0 0;
}
@media (max-width: 768px) {
.content__title-form input[type="text"] {
width: var(--container-narrow-1);
font-size: var(--font-size-3);
}
.content__title-form {
font-size: var(--font-size-2);
}
}
.content__title-form input[type="text"]:focus {
outline: none;
border-color: var(--primary-8);
}
[data-document-title-status] {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-2);
}
.editor-menu-bar--wrapper {
width: 100%;
display: flex;
justify-content: flex-start;
}
.menu-button {
background: none;
border: none;
font-size: var(--font-size-3);
cursor: pointer;
margin: 0 var(--space-2);
padding: var(--space-2);
&:hover {
background-color: var(--secondary-5);
}
&:active {
background-color: var(--secondary-6);
}
}
.menu-divider {
border-left: 1px solid var(--secondary-6);
height: var(--space-7);
margin: 0 10px;
}
.content--wrapper--hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
opacity: 0;
pointer-events: none;
user-select: none;
visibility: hidden;
z-index: -1;
display: block;
}
/* /css/components/error-block.css */
/* Error Block Component Styles */
/* Following Soft UI Design System Guidelines */
.error-block {
background: var(--failure-2);
border: 1px solid var(--failure-4);
border-radius: var(--radius-2);
padding: var(--space-3);
margin: var(--space-2) 0;
box-shadow: var(--shadow-1);
}
.error-block__label {
color: var(--failure-11);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-2);
margin-bottom: var(--space-1);
}
.error-block__message {
color: var(--failure-11);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-3);
font-size: var(--font-size-3);
white-space: pre-line; /* Preserves line breaks but collapses other whitespace */
}
.error-block__support {
color: var(--failure-10); /* Slightly lighter for secondary info */
font-size: var(--font-size-1);
margin-top: var(--space-3);
line-height: var(--line-height-2);
}
.error-block__actions {
margin-top: var(--space-3);
display: flex;
gap: var(--space-2);
}
.error-block__retry-button {
appearance: none;
border: 1px solid var(--failure-6);
background: var(--surface-1);
color: var(--failure-11);
border-radius: var(--radius-1);
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-2);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.error-block__retry-button:hover:not(:disabled) {
background: var(--failure-3);
border-color: var(--failure-5);
}
.error-block__retry-button:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.error-block__retry-button:disabled {
cursor: not-allowed;
opacity: 0.65;
}
/* /css/components/exportDialog.css */
.export-options {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: var(--space-4) 0;
max-height: 400px;
overflow-y: auto;
padding-right: var(--space-2);
}
.export-option {
display: block;
cursor: pointer;
position: relative;
}
/* Button variant for Copy to Clipboard */
.export-option--button {
width: 100%;
background: none;
border: none;
padding: 0;
font: inherit;
text-align: left;
}
.export-option--button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.export-option--button:disabled .export-option__content {
pointer-events: none;
}
.export-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.export-option__content {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border: 2px solid var(--secondary-6);
border-radius: var(--radius-3);
}
.export-option:hover .export-option__content {
border-color: var(--secondary-8);
background: var(--secondary-2);
}
.export-option:active .export-option__content {
border-color: var(--secondary-6);
background: var(--secondary-1);
}
.export-option input[type="radio"]:checked + .export-option__content {
border-color: var(--primary-9);
background: var(--primary-1);
}
.export-option input[type="radio"]:disabled + .export-option__content {
opacity: 0.6;
cursor: not-allowed;
}
.export-option__icon {
flex-shrink: 0;
color: var(--secondary-11);
margin-top: var(--space-1);
}
.export-option input[type="radio"]:checked + .export-option__content .export-option__icon {
color: var(--primary-11);
}
.export-option h4 {
margin: 0 0 var(--space-1) 0;
font-size: var(--font-size-3);
font-weight: 600;
color: var(--secondary-12);
}
.export-option p {
margin: 0;
font-size: var(--font-size-2);
color: var(--secondary-11);
line-height: 1.5;
}
.export-metadata {
margin-top: var(--space-4);
padding: var(--space-3);
background: var(--secondary-2);
border: 1px solid var(--secondary-6);
border-radius: var(--radius-3);
}
.export-metadata__toggle {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
user-select: none;
}
.export-metadata__toggle input[type="checkbox"] {
margin: 0;
cursor: pointer;
flex-shrink: 0;
}
.export-metadata__toggle span {
font-size: var(--font-size-3);
font-weight: 500;
color: var(--secondary-12);
}
.export-metadata__hint {
margin: var(--space-2) 0 0 0;
padding-left: calc(var(--space-2) + 16px);
font-size: var(--font-size-1);
color: var(--secondary-11);
line-height: 1.4;
text-align: left;
}
.export-metadata__toggle input[type="checkbox"]:disabled + span,
.export-metadata__hint {
opacity: 0.7;
}
.export-citations {
margin-top: var(--space-3);
padding: var(--space-3);
background: var(--secondary-2);
border: 1px solid var(--secondary-6);
border-radius: var(--radius-3);
}
.export-citations__toggle {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
user-select: none;
}
.export-citations__toggle input[type="checkbox"] {
margin: 0;
cursor: pointer;
flex-shrink: 0;
}
.export-citations__toggle span {
font-size: var(--font-size-3);
font-weight: 500;
color: var(--secondary-12);
}
.export-citations__hint {
margin: var(--space-2) 0 0 0;
padding-left: calc(var(--space-2) + 16px);
font-size: var(--font-size-1);
color: var(--secondary-11);
line-height: 1.4;
text-align: left;
}
.export-citations__toggle input[type="checkbox"]:disabled + span,
.export-citations__hint {
opacity: 0.7;
}
.dialog__error {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3);
background: var(--red-2);
border: 1px solid var(--red-6);
border-radius: var(--radius-3);
color: var(--red-11);
font-size: var(--font-size-2);
margin-top: var(--space-3);
}
.dialog__error svg {
flex-shrink: 0;
}
.btn__loader {
display: inline-flex;
gap: 3px;
margin-right: var(--space-2);
}
.btn__loader span {
width: 4px;
height: 4px;
background: currentColor;
border-radius: 50%;
animation: btn-loader 1.4s ease-in-out infinite;
}
.btn__loader span:nth-child(1) {
animation-delay: -0.32s;
}
.btn__loader span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes btn-loader {
0%,
80%,
100% {
opacity: 0.25;
transform: scale(0.8);
}
40% {
opacity: 1;
transform: scale(1);
}
}
/* /css/components/importDialog.css */
/* Import Dialog - Dropzone */
.import-dropzone {
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
margin: var(--space-4) 0;
padding: var(--space-4);
border: 2px dashed var(--secondary-6);
border-radius: var(--radius-3);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
background: var(--secondary-2);
}
.import-dropzone:hover {
border-color: var(--primary-7);
background: var(--primary-1);
}
.import-dropzone--dragging {
border-color: var(--primary-9);
background: var(--primary-2);
border-style: solid;
}
.import-dropzone--has-file {
cursor: default;
border-style: solid;
border-color: var(--secondary-6);
background: var(--secondary-1);
min-height: auto;
}
.import-dropzone--has-file:hover {
border-color: var(--secondary-6);
background: var(--secondary-1);
}
/* Dropzone content (empty state) */
.import-dropzone-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-2);
}
.import-dropzone-icon {
color: var(--secondary-9);
margin-bottom: var(--space-2);
}
.import-dropzone--dragging .import-dropzone-icon {
color: var(--primary-9);
}
.import-dropzone-text {
margin: 0;
font-size: var(--font-size-3);
color: var(--secondary-11);
}
.import-dropzone-text--primary {
color: var(--primary-11);
font-weight: 600;
cursor: pointer;
}
.import-dropzone-text--primary:hover {
text-decoration: underline;
}
.import-dropzone-formats {
margin: 0;
font-size: var(--font-size-1);
color: var(--secondary-9);
}
/* File info (when file selected) */
.import-file-info {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-2);
}
.import-file-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--secondary-3);
border-radius: var(--radius-2);
color: var(--secondary-11);
}
.import-file-details {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.import-file-name {
font-size: var(--font-size-3);
font-weight: 500;
color: var(--secondary-12);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.import-file-size {
font-size: var(--font-size-1);
color: var(--secondary-9);
}
.import-file-remove {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
background: transparent;
border-radius: var(--radius-2);
color: var(--secondary-9);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease;
}
.import-file-remove:hover {
background: var(--secondary-4);
color: var(--secondary-12);
}
.import-file-remove:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Title field */
.import-title-field {
margin-bottom: var(--space-3);
}
.import-title-label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--font-size-2);
font-weight: 500;
color: var(--secondary-11);
}
.import-title-input {
width: 100%;
padding: var(--space-3);
border: 1px solid var(--secondary-6);
border-radius: var(--radius-2);
font-size: var(--font-size-3);
color: var(--secondary-12);
background: var(--secondary-1);
transition: border-color 0.15s ease;
}
.import-title-input:focus {
outline: none;
border-color: var(--primary-9);
}
.import-title-input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.import-title-input::placeholder {
color: var(--secondary-9);
}
/* Progress bar */
.import-progress {
margin: var(--space-4) 0;
}
.import-progress-bar {
width: 100%;
height: 8px;
background: var(--secondary-4);
border-radius: var(--radius-2);
overflow: hidden;
}
.import-progress-fill {
height: 100%;
background: var(--primary-9);
border-radius: var(--radius-2);
transition: width 0.2s ease;
}
.import-progress-text {
display: block;
margin-top: var(--space-2);
font-size: var(--font-size-2);
color: var(--secondary-11);
text-align: center;
}
/* Warning message */
.import-warning {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3);
background: var(--warning-2);
border: 1px solid var(--warning-6);
border-radius: var(--radius-3);
margin-top: var(--space-3);
}
.import-warning svg {
flex-shrink: 0;
color: var(--warning-11);
margin-top: 1px;
}
.import-warning span {
font-size: var(--font-size-2);
color: var(--warning-11);
line-height: 1.5;
}
/* Bulk Import Dialog */
.bulk-import-limit {
margin: 0;
font-size: var(--font-size-1);
color: var(--secondary-9);
}
.bulk-import-error {
margin: var(--space-2) 0;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-2);
background: var(--danger-2);
color: var(--danger-11);
font-size: var(--font-size-2);
}
.bulk-import-files {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-3);
max-height: 320px;
overflow-y: auto;
}
.bulk-import-file {
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
padding: var(--space-3);
background: var(--secondary-1);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.bulk-import-file-header {
display: flex;
align-items: center;
gap: var(--space-2);
}
.bulk-import-file-details {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bulk-import-file-name {
font-size: var(--font-size-2);
font-weight: 600;
color: var(--secondary-12);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bulk-import-file-meta {
font-size: var(--font-size-1);
color: var(--secondary-9);
}
.bulk-import-status {
font-size: var(--font-size-1);
padding: 2px 8px;
border-radius: var(--radius-2);
background: var(--secondary-3);
color: var(--secondary-11);
text-transform: capitalize;
}
.bulk-import-status--success {
background: var(--success-2);
color: var(--success-11);
}
.bulk-import-status--error {
background: var(--danger-2);
color: var(--danger-11);
}
.bulk-import-status--uploading,
.bulk-import-status--converting {
background: var(--primary-2);
color: var(--primary-11);
}
.bulk-import-title-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bulk-import-progress {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bulk-import-progress-bar {
width: 100%;
height: 6px;
border-radius: var(--radius-2);
background: var(--secondary-4);
overflow: hidden;
}
.bulk-import-progress-fill {
height: 100%;
background: var(--primary-9);
transition: width 0.2s ease;
}
.bulk-import-progress-text {
font-size: var(--font-size-1);
color: var(--secondary-9);
}
.bulk-import-file-error {
font-size: var(--font-size-1);
color: var(--danger-11);
}
.bulk-import-summary {
margin-top: var(--space-2);
font-size: var(--font-size-2);
color: var(--secondary-11);
}
/* /css/components/intro-tour.css */
.intro-tour__overlay {
position: fixed;
inset: 0;
z-index: var(--z-index-9, 900);
}
.intro-tour__backdrop {
position: fixed;
inset: 0;
}
.intro-tour__spotlight {
position: fixed;
border: 2px solid var(--primary-9, #4c6fff);
border-radius: var(--radius-4, 12px);
box-shadow: 0 0 0 9999px rgba(7, 10, 16, 0.65);
pointer-events: none;
transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.15s ease-out, transform 0.15s ease-out, fill 0.15s ease-out, stroke 0.15s ease-out;
}
.intro-tour__tooltip {
position: fixed;
max-width: 360px;
min-width: 240px;
background: var(--secondary-1, #101725);
color: var(--secondary-12, #eef1f5);
border: 1px solid var(--secondary-4, #23304a);
border-radius: var(--radius-4, 12px);
box-shadow: var(--shadow-3, 0 12px 30px rgba(5, 12, 24, 0.45));
padding: var(--space-4, 16px);
display: flex;
flex-direction: column;
gap: var(--space-3, 12px);
pointer-events: auto;
}
.intro-tour__tooltip-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-2, 8px);
}
.intro-tour__tooltip-title {
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-4, 18px);
color: var(--secondary-12, #eef1f5);
}
.intro-tour__tooltip-close {
border: none;
background: transparent;
color: var(--secondary-9, #b6c2d6);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.intro-tour__tooltip-body {
font-size: var(--font-size-3, 14px);
line-height: 1.5;
color: var(--secondary-11, #d3dbe7);
white-space: pre-line;
}
.intro-tour__tooltip-card {
border: 1px solid var(--secondary-4, #23304a);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-3, 10px);
padding: var(--space-2, 8px);
}
.intro-tour__tooltip-card-image {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-3, 10px);
}
.intro-tour__tooltip-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3, 12px);
}
.intro-tour__tooltip-progress {
font-size: var(--font-size-2, 12px);
color: var(--secondary-8, #98a3b8);
}
.intro-tour__tooltip-actions {
display: flex;
gap: var(--space-2, 8px);
}
.intro-tour__button {
border-radius: var(--radius-3, 10px);
font-size: var(--font-size-2, 12px);
padding: var(--space-2, 8px) var(--space-3, 12px);
cursor: pointer;
border: 1px solid transparent;
}
.intro-tour__button--primary {
background: var(--primary-9, #4c6fff);
color: var(--primary-1, #f7f9ff);
border-color: var(--primary-9, #4c6fff);
}
.intro-tour__button--secondary {
background: transparent;
color: var(--secondary-11, #d3dbe7);
border-color: var(--secondary-6, #3a4a6a);
}
.intro-tour__hints {
position: fixed;
inset: 0;
z-index: var(--z-index-8, 850);
pointer-events: none;
}
.intro-tour__hint-marker {
position: fixed;
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--primary-9, #4c6fff);
border: 2px solid var(--secondary-1, #101725);
box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
cursor: pointer;
padding: 0;
pointer-events: auto;
}
.intro-tour__hint-marker.is-active {
background: var(--primary-7, #6f8bff);
}
.intro-tour__hint-marker-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--primary-1, #f7f9ff);
}
.intro-tour__hint-tooltip {
position: fixed;
max-width: 260px;
min-width: 180px;
background: var(--secondary-1, #101725);
color: var(--secondary-12, #eef1f5);
border: 1px solid var(--secondary-4, #23304a);
border-radius: var(--radius-4, 12px);
box-shadow: var(--shadow-3, 0 12px 30px rgba(5, 12, 24, 0.45));
padding: var(--space-3, 12px);
display: grid;
gap: var(--space-2, 8px);
pointer-events: auto;
}
.intro-tour__hint-tooltip-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2, 8px);
}
.intro-tour__hint-tooltip-title {
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-3, 14px);
color: var(--secondary-12, #eef1f5);
}
.intro-tour__hint-tooltip-close {
border: none;
background: transparent;
color: var(--secondary-9, #b6c2d6);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.intro-tour__hint-tooltip-body {
font-size: var(--font-size-2, 12px);
line-height: 1.5;
color: var(--secondary-11, #d3dbe7);
}
/* /css/components/files.css */
files-index {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
width: 100%;
position: relative;
overflow: hidden;
}
.main-panel files-index {
max-width: 1024px;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
padding: var(--space-4);
border: none;
background-color: transparent;
border-radius: var(--radius-3);
margin-top: var(--space-2);
margin-bottom: var(--space-2);
max-height: 98vh;
max-height: 98svh;
}
/* Mobile: Reduce padding for index pages */
@media (max-width: 768px) {
.main-panel files-index,
.main-panel chats-index,
.main-panel documents-index,
.main-panel apps-index,
.main-panel spreadsheets-index,
.main-panel workspaces-index,
.main-panel workspace-shell,
.main-panel flows-index {
padding: var(--space-2);
margin-top: 0;
margin-bottom: 0;
}
/* Override inline padding on sections */
files-index section,
chats-index section,
documents-index section,
apps-index section,
spreadsheets-index section,
workspaces-index section,
workspace-shell section,
custom-prompts-index section,
flows-index section {
padding: var(--space-1) var(--space-2) !important;
}
/* Override inline padding on containers */
files-index .files__container,
chats-index .files__container,
documents-index .files__container,
apps-index .files__container,
spreadsheets-index .files__container,
workspaces-index .files__container,
workspace-shell .files__container,
custom-prompts-index .files__container,
flows-index .files__container {
padding: var(--space-1) var(--space-2) !important;
}
/* Reduce tabs padding */
files-index .tabs,
chats-index .tabs,
documents-index .tabs,
apps-index .tabs,
spreadsheets-index .tabs,
workspaces-index .tabs,
workspace-shell .tabs,
custom-prompts-index .tabs,
flows-index .tabs {
padding: 0 var(--space-2) var(--space-1) !important;
}
}
.files__container {
max-height: calc(100vh - 250px);
overflow-y: auto;
}
.files__container--drag {
max-height: min(60vh, 800px);
}
workspaces-index .workspace-index__create-row {
align-items: stretch;
gap: var(--space-3);
flex-wrap: wrap;
}
workspaces-index .workspace-index__name-input {
margin: 0;
width: min(360px, 100%);
min-height: 44px;
height: 44px;
border: 1px solid var(--secondary-7);
background-color: var(--secondary-1);
color: var(--secondary-12);
border-radius: var(--radius-2);
padding: 0 var(--space-3);
font-size: var(--font-size-2);
line-height: 1.2;
}
workspaces-index .workspace-index__name-input::placeholder {
color: var(--secondary-9);
}
workspaces-index .workspace-index__create-button {
min-height: 44px;
padding-inline: var(--space-5);
}
workspaces-index .workspace-index__name-error {
color: var(--failure-10);
margin-top: var(--space-2);
margin-bottom: 0;
font-size: var(--font-size-2-half);
}
workspace-shell .workspace-shell__composer-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
workspace-shell .workspace-shell__title {
margin: 0;
text-align: left;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
workspace-shell .workspace-shell__title-row {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
flex: 1 1 auto;
}
workspace-shell .workspace-shell__title-edit-row {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
flex: 1 1 auto;
}
workspace-shell .workspace-shell__title-input {
min-height: 36px;
max-width: min(460px, 64vw);
width: 100%;
border: 1px solid var(--secondary-6);
background: var(--secondary-1);
color: var(--secondary-12);
}
workspace-shell .workspace-shell__title-edit-button {
width: 14px;
height: 14px;
border: none;
background: transparent;
color: var(--secondary-10);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
line-height: 1;
flex-shrink: 0;
}
workspace-shell .workspace-shell__title-edit-button:hover {
background: transparent;
color: var(--secondary-12);
}
workspace-shell .workspace-shell__title-edit-button:focus-visible {
outline: 2px solid var(--primary-8);
outline-offset: 2px;
border-radius: var(--radius-1);
}
workspace-shell .workspace-shell__controls {
gap: var(--space-2);
}
workspace-shell .workspace-shell__control-button {
min-height: 40px;
display: inline-flex;
align-items: center;
gap: var(--space-2);
white-space: nowrap;
}
workspace-shell .workspace-shell__control-indicator {
width: 18px;
height: 18px;
border-radius: var(--radius-6);
border: 1px solid var(--secondary-6);
background: var(--secondary-3);
color: var(--secondary-10);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-1-half);
line-height: 1;
flex-shrink: 0;
}
workspace-shell .workspace-shell__control-indicator--set {
border-color: var(--success-8);
background: var(--success-3);
color: var(--success-11);
}
workspace-shell .workspace-shell__control-indicator--empty {
border-color: var(--secondary-6);
background: var(--secondary-3);
color: var(--secondary-10);
}
workspace-shell .workspace-shell__count-badge {
min-width: 22px;
height: 18px;
border-radius: var(--radius-6);
background: var(--secondary-4);
color: var(--secondary-12);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-1-half);
font-size: var(--font-size-1-half);
line-height: 1;
font-weight: 600;
flex-shrink: 0;
}
workspace-shell .workspace-shell__count-badge--empty {
background: var(--secondary-3);
color: var(--secondary-10);
}
workspace-shell .workspace-shell__artifact-tabs {
display: flex;
justify-content: flex-start;
gap: var(--space-2);
}
workspace-shell .workspace-shell__artifact-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
justify-content: flex-start;
}
workspace-shell .file-item__name {
width: 100%;
margin-bottom: var(--space-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
workspace-shell .workspace-shell__artifact-empty {
text-align: center;
color: var(--secondary-10);
margin: var(--space-4) auto;
}
.workspace-shell__dialog {
width: min(760px, 92vw);
max-width: 92vw;
border: 1px solid var(--secondary-4);
border-radius: var(--radius-4);
box-shadow: var(--shadow-8);
background: var(--primary-1);
}
.workspace-shell__dialog[open] {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.workspace-shell__dialog::backdrop {
background-color: var(--dialog-backdrop);
backdrop-filter: blur(var(--space-1));
-webkit-backdrop-filter: blur(var(--space-1));
}
.workspace-shell__dialog-body {
min-width: min(640px, 92vw);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.workspace-shell__dialog-title {
margin: 0;
}
.workspace-shell__dialog-description {
margin: 0;
color: var(--secondary-10);
font-size: var(--font-size-3);
}
.workspace-shell__instructions-textarea {
border: 1px solid var(--secondary-7);
border-radius: var(--radius-2);
background: var(--secondary-1);
color: var(--secondary-12);
padding: var(--space-2);
font-size: var(--font-size-3);
line-height: 1.4;
}
.workspace-shell__instructions-textarea::placeholder {
color: var(--secondary-9);
}
.workspace-shell__memories-list {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: var(--space-2);
}
.workspace-shell__memories-empty {
color: var(--secondary-9);
font-size: var(--font-size-3);
text-align: center;
padding: var(--space-3) 0;
}
.workspace-shell__memory-row {
border: 1px solid var(--secondary-5);
border-radius: var(--radius-2);
overflow: hidden;
}
.workspace-shell__memory-row--expanded {
border-color: var(--secondary-7);
}
.workspace-shell__memory-collapsed {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-3);
cursor: pointer;
background: var(--secondary-2);
transition: background-color 0.1s ease;
}
.workspace-shell__memory-collapsed:hover {
background: var(--secondary-3);
}
.workspace-shell__memory-title {
font-size: var(--font-size-3);
font-weight: 500;
color: var(--secondary-12);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.workspace-shell__memory-expanded {
padding: var(--space-2);
background: var(--secondary-1);
}
.workspace-shell__memory-header {
display: flex;
align-items: center;
gap: var(--space-1);
margin-bottom: var(--space-1);
}
.workspace-shell__memory-title-input {
flex: 1;
background: var(--secondary-2);
color: var(--secondary-12);
border: 1px solid var(--secondary-7);
border-radius: var(--radius-3);
padding: 4px 8px;
font-size: var(--font-size-3);
&::placeholder {
color: var(--secondary-8);
}
}
.workspace-shell__dialog-actions {
display: flex;
justify-content: flex-end;
margin-top: var(--space-2);
}
.workspace-shell__selected-sources {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-2);
background: var(--secondary-2);
min-height: 44px;
padding: var(--space-2);
}
.workspace-shell__selected-sources-empty {
margin: 0;
color: var(--secondary-10);
font-size: var(--font-size-2-half);
}
.workspace-shell__source-pill {
border: 1px solid var(--secondary-5);
border-radius: var(--radius-6);
background: var(--secondary-1);
color: var(--secondary-12);
font-size: var(--font-size-2-half);
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
}
.workspace-shell__source-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 20px;
padding: 0 3px;
border-radius: var(--radius-1);
font-size: 9px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1;
flex-shrink: 0;
}
.workspace-shell__source-pill-label {
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.workspace-shell__source-remove {
border: none;
background: transparent;
color: var(--secondary-11);
cursor: pointer;
width: 18px;
height: 18px;
border-radius: var(--radius-6);
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0;
flex-shrink: 0;
}
.workspace-shell__source-remove:hover {
background: var(--secondary-3);
color: var(--secondary-12);
}
.workspace-shell__sources-picker .files-search-menu {
border: none;
padding: var(--space-3);
background: var(--secondary-1);
}
@media (max-width: 768px) {
.files__container--drag {
max-height: min(60vh, 600px);
}
workspaces-index .workspace-index__name-input,
workspaces-index .workspace-index__create-button {
width: 100%;
}
workspace-shell .workspace-shell__composer-header {
flex-direction: column;
}
workspace-shell .workspace-shell__title-edit-row {
width: 100%;
flex-wrap: wrap;
}
workspace-shell .workspace-shell__title-input {
max-width: none;
}
workspace-shell .workspace-shell__controls {
width: 100%;
}
workspace-shell .workspace-shell__artifact-grid {
grid-template-columns: 1fr;
}
.workspace-shell__dialog {
width: calc(100vw - var(--space-4));
max-width: calc(100vw - var(--space-4));
}
.workspace-shell__dialog-body {
min-width: auto;
padding: var(--space-3);
}
}
.files__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
align-items: start;
}
@media (max-width: 768px) {
.files__grid {
grid-template-columns: 1fr;
}
}
.file-item {
display: flex;
flex-direction: column;
padding: var(--space-4);
background: var(--secondary-2);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
position: relative;
}
.chat-run-loader {
display: inline-flex;
align-items: center;
gap: var(--space-1-half);
margin-bottom: var(--space-2);
color: var(--secondary-11);
font-size: var(--font-size-1-half);
line-height: 1;
width: fit-content;
}
.chat-run-loader__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-9);
animation: chat-run-loader-pulse 1s ease-in-out infinite;
}
.chat-run-loader__text {
font-weight: 600;
letter-spacing: 0.01em;
}
@keyframes chat-run-loader-pulse {
0%,
100% {
opacity: 0.4;
transform: scale(0.88);
}
50% {
opacity: 1;
transform: scale(1);
}
}
.file-item__edit {
background: none;
border: 1px solid var(--secondary-7);
padding: var(--space-2);
border-radius: var(--radius-1);
cursor: pointer;
color: var(--secondary-12);
opacity: 0.8;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.file-item__edit:hover {
opacity: 1;
background: var(--primary-4);
border-color: var(--primary-8);
color: var(--primary-11);
}
.file-item__edit svg {
flex-shrink: 0;
}
.file-item__view {
background: none;
border: 1px solid var(--secondary-7);
padding: var(--space-2);
border-radius: var(--radius-1);
cursor: pointer;
color: var(--secondary-12);
opacity: 0.8;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.file-item__view:hover {
opacity: 1;
background: var(--secondary-4);
border-color: var(--secondary-8);
color: var(--secondary-12);
}
.file-item__view svg {
flex-shrink: 0;
}
.file-item__delete {
background: none;
border: 1px solid var(--secondary-7);
padding: var(--space-2);
border-radius: var(--radius-1);
cursor: pointer;
color: var(--secondary-12);
opacity: 0.8;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.file-item__delete:hover {
opacity: 1;
background: var(--failure-4);
border-color: var(--failure-8);
color: var(--failure-11);
}
.file-item__delete svg {
color: currentColor;
}
.file-item__delete svg {
flex-shrink: 0;
}
.file-item__rename {
background: none;
border: 1px solid var(--secondary-7);
padding: var(--space-2);
border-radius: var(--radius-1);
cursor: pointer;
color: var(--secondary-12);
opacity: 0.8;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.file-item__rename:hover {
opacity: 1;
background: var(--secondary-4);
border-color: var(--secondary-8);
color: var(--secondary-12);
}
.file-item__rename svg {
flex-shrink: 0;
}
.file-item__pin {
background: none;
border: 1px solid var(--secondary-7);
padding: var(--space-2);
border-radius: var(--radius-1);
cursor: pointer;
color: var(--secondary-12);
opacity: 0.8;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.file-item__pin:hover:not(:disabled) {
opacity: 1;
background: var(--primary-4);
border-color: var(--primary-8);
color: var(--primary-11);
}
.file-item__pin:disabled {
opacity: 0.4;
cursor: not-allowed;
background: var(--secondary-3);
border-color: var(--secondary-5);
color: var(--secondary-8);
}
.file-item__pin svg {
flex-shrink: 0;
}
.file-item__share {
background: none;
border: 1px solid var(--secondary-7);
padding: var(--space-2);
border-radius: var(--radius-1);
cursor: pointer;
color: var(--secondary-12);
opacity: 0.8;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.file-item__share:hover:not(:disabled) {
opacity: 1;
background: var(--secondary-4);
border-color: var(--secondary-8);
color: var(--secondary-11);
}
.file-item__share svg {
flex-shrink: 0;
}
.file-item__title {
font-size: var(--font-size-3);
font-weight: var(--font-weight-medium);
color: var(--secondary-12);
margin-bottom: var(--space-2);
text-align: left;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-item__date {
font-size: var(--font-size-2);
color: var(--secondary-11);
text-align: left;
width: 100%;
margin-bottom: var(--space-2);
}
.file-item__meta {
display: flex;
flex-direction: column;
gap: var(--space-1);
font-size: var(--font-size-2);
color: var(--secondary-11);
}
.file-item__meta .error {
color: var(--error-9);
}
@media (max-width: 768px) {
.files__grid {
grid-template-columns: 1fr;
}
}
/* Skeleton Loader Styles */
.file-item--skeleton {
pointer-events: none;
cursor: default;
}
.file-item--skeleton .skeleton-title {
height: calc(var(--font-size-3) * 1.2);
width: 70%;
background: linear-gradient(
to right,
var(--secondary-5) 8%,
var(--secondary-3) 18%,
var(--secondary-5) 33%
);
background-size: 80rem 100%;
animation: shimmer 1.5s infinite linear;
border-radius: var(--radius-1);
margin-bottom: var(--space-2);
}
.file-item--skeleton .skeleton-date {
height: calc(var(--font-size-2) * 1.2);
width: 50%;
background: linear-gradient(
to right,
var(--secondary-5) 8%,
var(--secondary-3) 18%,
var(--secondary-5) 33%
);
background-size: 80rem 100%;
animation: shimmer 1.5s infinite linear;
border-radius: var(--radius-1);
margin-bottom: var(--space-2);
}
.file-item--skeleton .skeleton-actions {
display: flex;
gap: var(--space-2);
margin-top: var(--space-2);
justify-content: space-between;
}
.file-item--skeleton .skeleton-button {
width: 40px;
height: 40px;
background: linear-gradient(
to right,
var(--secondary-5) 8%,
var(--secondary-3) 18%,
var(--secondary-5) 33%
);
background-size: 80rem 100%;
animation: shimmer 1.5s infinite linear;
border-radius: var(--radius-1);
}
/* Additional skeleton styles for file-item metadata */
.file-item--skeleton .skeleton-status,
.file-item--skeleton .skeleton-pages {
height: calc(var(--font-size-2) * 1.2);
width: 40%;
background: linear-gradient(
to right,
var(--secondary-5) 8%,
var(--secondary-3) 18%,
var(--secondary-5) 33%
);
background-size: 80rem 100%;
animation: shimmer 1.5s infinite linear;
border-radius: var(--radius-1);
margin-bottom: var(--space-1);
}
.file-item--skeleton .skeleton-pages {
width: 30%;
}
/* Shimmer animation keyframes */
@keyframes shimmer {
0% {
background-position: -80rem 0;
}
100% {
background-position: 80rem 0;
}
}
/* Chat skeleton container for individual chat views - constrained width */
.chat-skeleton-container {
padding: var(--space-2) var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Inherit responsive width constraints from loaders.css */
.chat-skeleton-container .loading-item.skeleton {
}
/* Restore full-width grid for chats-index layout */
.files__container .files__grid {
}
files-search {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
position: relative;
overflow: auto;
}
.main-panel files-search {
max-width: 1024px;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
padding: var(--space-4);
border: 1px solid var(--secondary-7);
background-color: var(--secondary-1);
border-radius: var(--radius-3);
margin-top: var(--space-2);
margin-bottom: var(--space-2);
max-height: 98vh;
max-height: 98svh;
}
/* Chat Index Tabs - Soft UI Design */
.tabs {
display: flex;
border-bottom: 1px solid var(--secondary-6);
margin-bottom: var(--space-3);
gap: var(--space-1);
}
.tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: none;
border: none;
color: var(--secondary-11);
font-size: var(--font-size-3);
font-weight: var(--font-weight-regular);
cursor: pointer;
border-radius: var(--radius-3) var(--radius-3) 0 0;
transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic);
position: relative;
}
.tab:hover {
color: var(--secondary-12);
background-color: var(--secondary-2);
}
.tab--active {
color: var(--primary-11);
background-color: var(--primary-3);
font-weight: var(--font-weight-medium);
}
.tab--active:hover {
background-color: var(--primary-4);
}
.tab--active:active {
background-color: var(--primary-5);
}
.tab--active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: var(--primary-9);
border-radius: var(--radius-1);
}
/* /css/components/file-picker.css */
/* ==========================================================================
File Picker (fp-*) — Command-palette-style file search & attach
Used by: files-search-menu, cowriter-files-search-menu, unified-input dropdown
========================================================================== */
/* Container — no padding here; each context (dialog, dropdown) provides its own */
.fp-container {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Heading — kept for backward compat, prefer fp-section-label */
.fp-heading {
margin: 0;
padding: 0;
font-size: var(--font-size-1);
font-weight: var(--font-weight-medium);
color: var(--secondary-10);
letter-spacing: 0.05em;
text-transform: uppercase;
user-select: none;
}
/* Search field — override globals that constrain width */
.fp-search-field {
margin: 0;
margin-bottom: 0;
}
.fp-search-field .input-with-icon {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.fp-search-field .input-with-icon .icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
pointer-events: none;
}
.fp-container .fp-search-input {
width: 100%;
max-width: 100%;
min-height: 40px;
padding: var(--space-2) var(--space-3);
padding-left: calc(var(--space-3) + 18px + var(--space-2));
margin: 0;
border: 1px solid var(--secondary-6);
border-radius: var(--radius-2);
background: var(--secondary-1);
color: var(--secondary-12);
font-size: var(--font-size-2-half);
box-sizing: border-box;
}
.fp-container .fp-search-input::placeholder {
color: var(--secondary-9);
font-size: var(--font-size-2-half);
}
.fp-container .fp-search-input:focus {
outline: none;
border-color: var(--primary-8);
box-shadow: 0 0 0 1px var(--primary-8);
}
/* ---- Pinned upload row ---- */
.fp-upload-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 1px dashed var(--secondary-6);
border-radius: var(--radius-2);
background: transparent;
cursor: var(--cursor-link);
transition: background 0.15s var(--ease-out-cubic), border-color 0.15s var(--ease-out-cubic);
text-align: left;
width: 100%;
}
.fp-upload-row:hover {
background: var(--secondary-2);
border-color: var(--secondary-8);
}
.fp-upload-row--dragging,
.fp-upload-row[data-dragging='true'] {
background: var(--primary-2);
border-color: var(--primary-8);
border-style: solid;
}
.fp-upload-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 2px dashed var(--secondary-7);
border-radius: var(--radius-2);
flex-shrink: 0;
color: var(--primary-11);
}
.fp-upload-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.fp-upload-primary {
font-size: var(--font-size-2-half);
font-weight: var(--font-weight-medium);
color: var(--primary-11);
}
.fp-upload-secondary {
font-size: var(--font-size-2);
color: var(--secondary-10);
}
/* ---- File list ---- */
.fp-file-list {
display: flex;
flex-direction: column;
max-height: 280px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--secondary-6) transparent;
border-top: 1px solid var(--secondary-4);
padding-top: var(--space-1);
}
/* ---- Section label ---- */
.fp-section-label {
display: block;
padding: var(--space-2) var(--space-1) var(--space-1);
font-size: var(--font-size-1);
font-weight: var(--font-weight-medium);
color: var(--secondary-10);
letter-spacing: 0.05em;
text-transform: uppercase;
user-select: none;
}
/* ---- File row ---- */
.fp-file-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2-half, var(--space-2)) var(--space-2);
border: none;
border-radius: var(--radius-2);
background: transparent;
cursor: var(--cursor-link);
transition: background 0.12s var(--ease-out-cubic);
text-align: left;
width: 100%;
}
.fp-file-row:hover:not(:disabled) {
background: var(--secondary-3);
}
.fp-file-row:focus-visible {
outline: 2px solid var(--primary-8);
outline-offset: -2px;
}
.fp-file-row:disabled {
cursor: default;
}
.fp-file-row--attached {
opacity: 0.55;
}
.fp-file-row--attached:hover {
background: transparent;
}
/* ---- File type badge ---- */
.fp-file-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 32px;
padding: 0 var(--space-1-half, 6px);
border-radius: var(--radius-2);
font-size: 10px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.03em;
text-transform: uppercase;
flex-shrink: 0;
line-height: 1;
}
/* ---- File info (name + meta) ---- */
.fp-file-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.fp-file-name {
font-size: var(--font-size-2-half);
color: var(--secondary-12);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.fp-file-name strong {
font-weight: var(--font-weight-bold);
color: var(--primary-11);
}
.fp-file-meta {
font-size: var(--font-size-2);
color: var(--secondary-10);
line-height: 1.3;
}
/* ---- Action icon (+ or checkmark) ---- */
.fp-file-action {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 24px;
height: 24px;
}
/* ---- Loading / empty states ---- */
.fp-loading {
padding: var(--space-4) var(--space-3);
text-align: center;
color: var(--secondary-10);
font-size: var(--font-size-2-half);
}
.fp-no-results {
padding: var(--space-4) var(--space-2);
text-align: center;
color: var(--secondary-10);
font-size: var(--font-size-2-half);
}
/* ---- Show more ---- */
.fp-show-more {
display: block;
width: 100%;
padding: var(--space-2) var(--space-2);
margin-top: var(--space-1);
border: none;
border-top: 1px solid var(--secondary-4);
background: transparent;
color: var(--primary-11);
font-size: var(--font-size-2);
cursor: var(--cursor-link);
text-align: center;
}
.fp-show-more:hover {
background: var(--secondary-2);
}
/* ---- Context: standalone file picker in workspace sources dialog ---- */
/* Border, padding, background provided by .workspace-shell__sources-picker .files-search-menu in files.css */
/* ---- Context: dropdown in unified input ---- */
.dropdown-menu.fp-dropdown {
min-width: var(--container-0-3q);
}
/* Override container padding for dropdown (already has its own) */
.dropdown-menu.fp-dropdown.fp-container {
padding: var(--space-3);
}
.dropdown-menu.fp-dropdown .fp-file-list {
max-height: 320px;
}
/* ---- Mobile ---- */
@media (max-width: 768px) {
.fp-container {
gap: var(--space-2);
}
.fp-file-list {
max-height: 200px;
}
.fp-file-badge {
min-width: 34px;
height: 28px;
font-size: 9px;
}
.fp-upload-row {
padding: var(--space-2);
gap: var(--space-2);
}
.fp-upload-icon {
width: 32px;
height: 32px;
}
.fp-search-input {
min-height: 38px;
font-size: var(--font-size-2);
}
}
/* /css/components/forms.css */
.input-with-icon {
position: relative;
display: flex;
align-items: center;
}
.input-with-icon .icon {
position: absolute;
left: var(--space-3-half);
width: var(--space-4);
top: var(--space-2);
height: var(--space-4);
fill: var(--primary-9);
}
.form-field {
margin-bottom: var(--space-2);
}
.form-field input,
.form-field textarea,
.select-block__select {
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
box-sizing: border-box;
background-color: var(--primary-1);
color: var(--secondary-12);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-3);
line-height: var(--line-height-3);
}
.form-field input {
box-shadow: var(--shadow-1);
&:focus {
box-shadow: none;
}
}
.form-field--inline {
display: flex;
align-items: center;
gap: var(--space-1);
}
.form-field--inline input {
flex-grow: 1;
margin-right: 0;
}
.form-field--inline .reference-btn {
flex-shrink: 0;
}
.form-field--chat {
margin: 0;
}
.form-field .reference-input {
padding: var(--space-1) var(--space-2);
border: 0.5px solid var(--secondary-7);
border-radius: var(--radius-3);
margin-right: 0;
max-width: var(--container-0);
margin-top: 0;
font-size: var(--font-size-1-half);
}
.form-field .reference-input::placeholder {
font-size: var(--font-size-1-half);
}
/* Keyboard Hint */
.keyboard-hint {
font-size: var(--font-size-1-half);
color: var(--secondary-11);
font-weight: var(--font-weight-regular);
opacity: 0;
transform: scale(0.95) translateX(-4px);
transition:
opacity var(--duration-quick) var(--ease-out-cubic),
transform var(--duration-quick) var(--ease-out-cubic);
margin-right: var(--space-3);
white-space: nowrap;
display: flex;
align-items: center;
height: 100%;
}
.chat-buttons-wrapper .keyboard-hint {
opacity: 1;
transform: scale(1) translateX(0);
}
/* Submit Section */
.submit-section {
display: flex;
align-items: center;
gap: var(--space-3);
}
.form-field .reference-file-upload {
padding: var(--space-2) var(--space-3);
border: 0.5px solid var(--secondary-7);
border-radius: var(--radius-1);
margin-right: 0;
max-width: var(--container-1);
font-size: var(--font-size-3);
margin-top: 0;
}
.form-field .reference-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
background-color: var(--primary-1);
color: var(--primary-9);
border: 0.5px solid var(--primary-9);
cursor: pointer;
font-size: var(--font-size-3);
border-radius: var(--radius-1);
font-weight: var(--font-weight-medium);
&:hover {
background-color: var(--primary-3);
color: var(--primary-10);
border: 0.5px solid var(--primary-10);
}
}
.form-field .template-input {
padding-left: var(--space-6);
border: 0.5px solid var(--secondary-7);
border-radius: var(--radius-3);
margin-right: 0;
margin-left: var(--space-1);
max-width: var(--container-0);
font-size: var(--font-size-3);
margin-top: 0;
&::placeholder {
font-size: var(--font-size-3);
}
}
.password-input-wrapper {
position: relative;
}
.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
width: 100%;
margin-right: 0;
/* Reserve room for the eye toggle button inside the input. */
padding-right: calc(var(--space-8) + var(--space-2));
}
.password-toggle {
position: absolute;
right: var(--space-2);
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--primary-9);
border-radius: var(--radius-3);
cursor: pointer;
font-size: var(--font-size-3);
padding: var(--space-1);
min-width: var(--space-6);
max-width: var(--space-6);
}
/* Ensure the boolean `hidden` attribute actually hides inline SVG icons. */
.password-toggle svg[hidden] {
display: none;
}
.password-toggle:hover {
background: var(--secondary-2);
text-decoration: none;
}
.password-toggle svg {
display: block;
}
.quota-edit {
display: flex;
align-items: center;
gap: var(--space-1);
}
.quota-edit__input-wrapper {
position: relative;
display: inline-flex;
align-items: center;
margin-right: var(--space-1);
}
.quota-edit__input {
width: var(--space-9);
padding: var(--space-1);
padding-right: var(--space-5);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
min-height: var(--space-4);
}
.quota-edit__input-wrapper::after {
content: '%';
position: absolute;
right: var(--space-2);
top: 50%;
transform: translateY(-50%);
color: var(--secondary-11);
pointer-events: none;
}
.quota-edit__buttons {
display: flex;
gap: var(--space-1);
}
.model__select {
margin-left: var(--space-1);
}
.form-field textarea {
padding-top: var(--space-3);
padding-bottom: var(--space-3);
box-shadow: var(--shadow-1);
&:focus {
box-shadow: none;
}
resize: vertical;
min-height: var(--space-9);
}
.form-field.skeleton {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: linear-gradient(to right, var(--secondary-5) 8%, var(--secondary-3) 18%, var(--secondary-5) 33%);
background-size: 80rem 100%;
height: var(--space-6);
margin-bottom: var(--space-2);
border-radius: var(--radius-3);
box-shadow: none;
}
.select-block__select {
width: 100%;
padding: var(--space-2) var(--space-3);
padding-right: calc(var(--space-3) * 2 + 16px);
border: 1px solid var(--secondary-4);
border-radius: var(--radius-3);
box-sizing: border-box;
background-color: var(--primary-1);
color: var(--secondary-12);
font-weight: var(--font-weight-regular);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-block {
position: relative;
flex-grow: 1;
min-width: 0;
display: flex;
align-items: center;
}
.select-block__caret {
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.select-block--transparent {
background-color: transparent;
}
.select-block__select--transparent {
background-color: transparent;
border: none;
box-shadow: none;
padding-left: 0;
cursor: pointer;
font-size: var(--font-size-3);
}
.select-block__select--transparent:focus {
outline: none;
}
.select-block__caret--visible {
color: var(--secondary-11);
right: 0;
}
.form-field input:disabled {
background-color: var(--secondary-3);
color: var(--secondary-11);
cursor: not-allowed;
}
.form-field input::placeholder {
color: var(--secondary-10);
opacity: 1;
font-weight: var(--font-weight-light);
font-size: var(--font-size-3);
}
.form-field textarea::placeholder {
color: var(--secondary-10);
opacity: 1;
font-weight: var(--font-weight-light);
}
.form-field label {
display: block;
font-size: var(--font-size-3);
color: var(--secondary-11);
}
/* .sidebar textarea,
.sidebar input {
width: 100%;
padding: var(--space-3);
border: 1px solid var(--secondary-11);
border-radius: var(--radius-3);
box-sizing: border-box;
background-color: var(--primary-1);
color: var(--secondary-12);
margin-top: var(--space-1);
&:focus {
outline: none;
border-color: var(--primary-8);
}
} */
/* .sidebar textarea::placeholder,
.sidebar input::placeholder {
color: var(--secondary-10);
opacity: 1;
font-weight: var(--font-weight-regular);
} */
.support-form .select-block {
width: min(100%, 80vw);
max-width: 100%;
}
.support-form .select-block__select {
width: 100%;
}
/* /css/components/letters.css */
.letter {
font-size: var(--font-size-5);
line-height: var(--line-height-3);
box-shadow: var(--shadow-4);
padding: var(--space-5);
border-radius: var(--radius-3);
min-width: var(--container-3);
background-color: var(--primary-1);
&:where(.letter__email) {
background-color: var(--primary-4);
color: var(--primary-12);
box-shadow: var(--shadow-2);
border: none;
line-height: var(--line-height-2);
}
}
@media (max-width: 768px) {
.letter {
min-width: 80vw;
margin-left: 10vw;
margin-right: 10vw;
}
}
/* /css/components/loaders.css */
.loading-list {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
overflow-y: auto;
}
.skeleton {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: linear-gradient(
to right,
var(--secondary-5) 8%,
var(--secondary-3) 18%,
var(--secondary-5) 33%
);
background-size: 80rem 100%;
border-radius: var(--radius-3);
}
.loading-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3);
}
.loading-item.skeleton {
height: var(--space-6);
margin-bottom: 10px;
box-shadow: none;
/* Match chat message width constraints */
max-width: min(
var(--thread-max-width),
calc(100vw - var(--nav-rail-width, 144px) - var(--right-sidebar-width, 0px))
);
margin: 0 auto 10px auto;
}
.chat-skeleton {
display: flex;
flex-direction: column;
gap: var(--space-6);
width: 100%;
max-width: min(
var(--thread-max-width),
calc(100vw - var(--nav-rail-width, 144px) - var(--right-sidebar-width, 0px))
);
margin: 0 auto;
}
.chat-skeleton__group {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.chat-skeleton__message {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.chat-skeleton__message--user {
align-items: flex-end;
}
.chat-skeleton__message--ai {
align-items: flex-start;
}
.chat-skeleton__line {
height: var(--space-3);
width: 100%;
}
.chat-skeleton__line--wide {
width: 80%;
}
.chat-skeleton__line--medium {
width: 60%;
}
.chat-skeleton__message--user .chat-skeleton__line {
max-width: min(70%, 520px);
}
.chat-skeleton__badge {
width: 160px;
height: var(--space-4);
border-radius: var(--radius-9);
}
.chat-skeleton__card {
width: 100%;
max-width: min(100%, 720px);
padding: var(--space-3);
border-radius: var(--radius-4);
border: 1px solid var(--secondary-4);
background: var(--secondary-2);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.chat-skeleton__card-title {
width: 45%;
height: var(--space-2-half);
}
.chat-skeleton__card-row {
width: 100%;
height: var(--space-2-half);
}
/* Responsive constraints for skeleton loading items - mirror message styles */
/* When nav-rail is present */
body:has(.nav-rail) .loading-item.skeleton {
max-width: min(
var(--thread-max-width),
calc(100vw - var(--nav-rail-width, 144px))
);
}
/* When right-sidebar is present */
body:has(.right-sidebar) .loading-item.skeleton {
max-width: min(
var(--thread-max-width),
calc(100vw - var(--right-sidebar-width, 0px))
);
}
/* When both nav-rail and right-sidebar are present */
body:has(.nav-rail):has(.right-sidebar) .loading-item.skeleton {
max-width: min(
var(--thread-max-width),
calc(100vw - var(--nav-rail-width, 144px) - var(--right-sidebar-width, 0px))
);
}
/* Safety constraint for collapsed right sidebar */
body:has(.nav-rail):has(.right-sidebar .sidebar--collapsed) .loading-item.skeleton {
max-width: min(
var(--thread-max-width),
calc(100vw - var(--nav-rail-width, 144px) - var(--right-sidebar-collapsed-width, 0px))
);
}
body:has(.nav-rail) .chat-skeleton {
max-width: min(
var(--thread-max-width),
calc(100vw - var(--nav-rail-width, 144px))
);
}
body:has(.right-sidebar) .chat-skeleton {
max-width: min(
var(--thread-max-width),
calc(100vw - var(--right-sidebar-width, 0px))
);
}
body:has(.nav-rail):has(.right-sidebar) .chat-skeleton {
max-width: min(
var(--thread-max-width),
calc(100vw - var(--nav-rail-width, 144px) - var(--right-sidebar-width, 0px))
);
}
body:has(.nav-rail):has(.right-sidebar .sidebar--collapsed) .chat-skeleton {
max-width: min(
var(--thread-max-width),
calc(100vw - var(--nav-rail-width, 144px) - var(--right-sidebar-collapsed-width, 0px))
);
}
.loading__text {
font-size: var(--font-size-4);
color: var(--secondary-11);
position: relative;
display: inline-block;
}
.loading__text--small {
font-size: var(--font-size-3);
color: var(--secondary-11);
}
.loading__text::after,
.loading__text--small::after {
display: inline;
content: "...";
animation: movingEllipsis 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
white-space: nowrap;
opacity: 1;
position: relative;
overflow: hidden;
}
.loading__text--shimmer::after {
background: linear-gradient(
90deg,
var(--secondary-11) 0%,
var(--secondary-12) 35%,
var(--secondary-11) 65%,
var(--secondary-12) 100%
);
background-size: 250% 100%;
animation: shimmerEllipsis 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.loading__text--shimmer {
background: linear-gradient(
90deg,
var(--secondary-11) 0%,
var(--secondary-11) 15%,
var(--secondary-12) 30%,
var(--secondary-10) 45%,
var(--secondary-9) 50%,
var(--secondary-10) 55%,
var(--secondary-12) 70%,
var(--secondary-11) 85%,
var(--secondary-11) 100%
);
background-size: 350% 100%;
animation: shimmer 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes shimmer {
0% {
background-position: 350% 0;
}
100% {
background-position: 0% 0;
}
}
@keyframes shimmerEllipsis {
0% {
background-position: 250% 0;
}
100% {
background-position: 0% 0;
}
}
.loading__backdrop {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(var(--space-1));
z-index: var(--z-index-9);
}
.loading__center--text {
color: var(--primary-12);
font-size: var(--font-size-6);
opacity: 0;
transition: opacity 1s;
}
.loading__text--payment {
font-size: var(--font-size-4);
color: var(--primary-12);
}
.loader__submitting {
display: flex;
position: relative;
width: var(--space-4);
height: var(--space-4);
}
.loader__submitting.hidden {
display: none;
}
.loader__submitting div {
position: absolute;
top: 0px;
left: 0px;
width: var(--space-4);
height: var(--space-4);
border: 2.75px solid var(--primary-7);
border-radius: 50%;
}
.loader__submitting div:nth-child(2) {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 20%);
animation: loader__submitting_spin 1.2s infinite;
animation-timing-function: var(--ease-in-out-quad);
border: 2.75px solid var(--primary-1);
}
.loader__submitting--secondary {
display: flex;
position: relative;
width: var(--space-4);
height: var(--space-4);
}
.loader__submitting--secondary.hidden {
display: none;
}
.loader__submitting--secondary div {
position: absolute;
top: 0px;
left: 0px;
width: var(--space-4);
height: var(--space-4);
border: 2.75px solid var(--primary-7);
border-radius: 50%;
}
.loader__submitting--secondary div:nth-child(2) {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 20%);
animation: loader__submitting_spin 1.2s infinite;
animation-timing-function: var(--ease-in-out-quad);
border: 2.75px solid var(--primary-1);
}
.loader__exporter-wrapper {
display: none;
}
.loader__exporter {
display: flex;
position: relative;
width: 16px;
height: 4px;
}
.loader__exporter div {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--primary-9);
top: 0px;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader__exporter div:nth-child(1) {
left: 0px;
animation: loader__exporter_scale_up 0.6s infinite;
}
.loader__exporter div:nth-child(2) {
left: 0px;
animation: loader__exporter_translate 0.6s infinite;
}
.loader__exporter div:nth-child(3) {
left: 6px;
animation: loader__exporter_translate 0.6s infinite;
}
.loader__exporter div:nth-child(4) {
left: 12px;
animation: loader__exporter_scale_down 0.6s infinite;
}
.loader__saver-wrapper {
display: none;
}
.loader__saver {
display: flex;
position: relative;
width: 16px;
height: 4px;
}
.loader__saver div {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--primary-9);
top: 0px;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader__saver div:nth-child(1) {
left: 0px;
animation: loader__saver_scale_up 0.6s infinite;
}
.loader__saver div:nth-child(2) {
left: 0px;
animation: loader__saver_translate 0.6s infinite;
}
.loader__saver div:nth-child(3) {
left: 6px;
animation: loader__saver_translate 0.6s infinite;
}
.loader__saver div:nth-child(4) {
left: 12px;
animation: loader__saver_scale_down 0.6s infinite;
}
.loader__payment {
display: flex;
position: relative;
width: 95px;
height: 95px;
}
.loader__payment div {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--primary-9);
animation:
loader__payment_fade 1.2s linear infinite,
loader__payment_scale 1.2s linear infinite;
}
.loader__payment div:nth-child(1) {
animation-delay: -0.44s;
top: 0px;
left: 0px;
}
.loader__payment div:nth-child(2) {
animation-delay: -1.01s;
top: 20px;
left: 0px;
}
.loader__payment div:nth-child(3) {
animation-delay: -0.33s;
top: 40px;
left: 0px;
}
.loader__payment div:nth-child(4) {
animation-delay: -0.67s;
top: 60px;
left: 0px;
}
.loader__payment div:nth-child(5) {
animation-delay: -0.65s;
top: 80px;
left: 0px;
}
.loader__payment div:nth-child(6) {
animation-delay: -0.1s;
top: 0px;
left: 20px;
}
.loader__payment div:nth-child(7) {
animation-delay: -0.03s;
top: 20px;
left: 20px;
}
.loader__payment div:nth-child(8) {
animation-delay: -0.74s;
top: 40px;
left: 20px;
}
.loader__payment div:nth-child(9) {
animation-delay: -0.8s;
top: 60px;
left: 20px;
}
.loader__payment div:nth-child(10) {
animation-delay: -0.87s;
top: 80px;
left: 20px;
}
.loader__payment div:nth-child(11) {
animation-delay: -1.01s;
top: 0px;
left: 40px;
}
.loader__payment div:nth-child(12) {
animation-delay: -0.73s;
top: 20px;
left: 40px;
}
.loader__payment div:nth-child(13) {
animation-delay: -0.92s;
top: 40px;
left: 40px;
}
.loader__payment div:nth-child(14) {
animation-delay: -0.9s;
top: 60px;
left: 40px;
}
.loader__payment div:nth-child(15) {
animation-delay: -0.75s;
top: 80px;
left: 40px;
}
.loader__payment div:nth-child(16) {
animation-delay: -1.14s;
top: 0px;
left: 60px;
}
.loader__payment div:nth-child(17) {
animation-delay: -0.95s;
top: 20px;
left: 60px;
}
.loader__payment div:nth-child(18) {
animation-delay: -1.2s;
top: 40px;
left: 60px;
}
.loader__payment div:nth-child(19) {
animation-delay: -0.82s;
top: 60px;
left: 60px;
}
.loader__payment div:nth-child(20) {
animation-delay: -0.54s;
top: 80px;
left: 60px;
}
.loader__payment div:nth-child(21) {
animation-delay: -0.72s;
top: 0px;
left: 80px;
}
.loader__payment div:nth-child(22) {
animation-delay: -0.03s;
top: 20px;
left: 80px;
}
.loader__payment div:nth-child(23) {
animation-delay: -0.57s;
top: 40px;
left: 80px;
}
.loader__payment div:nth-child(24) {
animation-delay: -0.13s;
top: 60px;
left: 80px;
}
.loader__payment div:nth-child(25) {
animation-delay: -1.12s;
top: 80px;
left: 80px;
}
/* =============================================================================
Document Editor Skeleton Loader
Renders inside ProseMirror as a decoration widget during document fetch.
============================================================================= */
.doc-skeleton {
padding: var(--space-4);
width: 100%;
box-sizing: border-box;
pointer-events: none; /* Non-interactive */
}
/* Base shimmer block - reuses existing shimmer animation */
.doc-skeleton-block {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: linear-gradient(
to right,
var(--secondary-4) 8%,
var(--secondary-2) 18%,
var(--secondary-4) 33%
);
background-size: 80rem 100%;
border-radius: var(--radius-2);
}
/* Heading 1 - document title */
.doc-skeleton-h1 {
height: 2rem;
width: 55%;
margin-bottom: var(--space-6);
}
/* Heading 2 - section title */
.doc-skeleton-h2 {
height: 1.5rem;
width: 35%;
margin-top: var(--space-6);
margin-bottom: var(--space-4);
}
/* Paragraph line */
.doc-skeleton-p {
height: 1rem;
margin-bottom: var(--space-3);
}
/* Stagger animation delays for visual interest */
.doc-skeleton-block:nth-child(2) { animation-delay: 0.1s; }
.doc-skeleton-block:nth-child(3) { animation-delay: 0.2s; }
.doc-skeleton-block:nth-child(4) { animation-delay: 0.3s; }
.doc-skeleton-block:nth-child(5) { animation-delay: 0.15s; }
.doc-skeleton-block:nth-child(6) { animation-delay: 0.25s; }
.doc-skeleton-block:nth-child(7) { animation-delay: 0.35s; }
/* List container */
.doc-skeleton-list {
margin-top: var(--space-4);
margin-bottom: var(--space-4);
padding-left: var(--space-4);
}
/* List item row */
.doc-skeleton-li {
display: flex;
align-items: center;
margin-bottom: var(--space-3);
}
/* Bullet point */
.doc-skeleton-bullet {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--secondary-5);
margin-right: var(--space-3);
flex-shrink: 0;
}
/* List item text */
.doc-skeleton-li-text {
height: 1rem;
flex: 1;
border-radius: var(--radius-2);
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: linear-gradient(
to right,
var(--secondary-4) 8%,
var(--secondary-2) 18%,
var(--secondary-4) 33%
);
background-size: 80rem 100%;
}
/* Stagger list item animations */
.doc-skeleton-li:nth-child(1) .doc-skeleton-li-text { animation-delay: 0.4s; }
.doc-skeleton-li:nth-child(2) .doc-skeleton-li-text { animation-delay: 0.5s; }
.doc-skeleton-li:nth-child(3) .doc-skeleton-li-text { animation-delay: 0.6s; }
/* /css/components/option-item.css */
/* Option Item Styles */
.option-item {
position: relative;
display: block;
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--secondary-3);
border-radius: var(--radius-3);
background: var(--secondary-1);
color: var(--secondary-12);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
text-align: left;
box-shadow: var(--shadow-1);
}
.option-item:hover {
background: var(--secondary-2);
border-color: var(--secondary-4);
box-shadow: var(--shadow-2);
}
.option-item:active {
background: var(--secondary-2);
border-color: var(--secondary-5);
box-shadow: var(--shadow-1);
}
.option-item:focus {
outline: none;
box-shadow: 0 0 0 2px var(--primary-2);
}
.option-item:focus:not(:focus-visible) {
box-shadow: none;
}
.option-content {
display: block;
}
.option-goal {
font-size: var(--font-size-3);
line-height: var(--line-height-3);
font-weight: var(--font-weight-regular);
}
@media (max-width: 768px) {
.option-item {
padding: var(--space-3) var(--space-4);
}
.option-goal {
font-size: var(--font-size-2-half);
}
}
/* /css/components/prosemirror.css */
.ProseMirror {
flex: 1;
position: relative;
word-wrap: break-word;
white-space: break-spaces;
-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
transition: box-shadow 0.3s ease;
overflow: auto;
padding: var(--space-4);
border: 1px solid var(--secondary-7);
background-color: var(--secondary-1);
border-radius: var(--radius-3);
}
/* Apply prose typography to ProseMirror content */
.ProseMirror.prose {
/* Prose class will handle font-size and line-height */
}
/* Default prose size for ProseMirror when no size variant specified */
.ProseMirror:not(.prose) {
font-size: var(--font-size-4);
}
/* Always show scrollbar when there's overflow (macOS hides by default) */
.ProseMirror::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.ProseMirror::-webkit-scrollbar-track {
background: transparent;
}
.ProseMirror::-webkit-scrollbar-thumb {
background: var(--secondary-7);
border-radius: 4px;
}
.ProseMirror::-webkit-scrollbar-thumb:hover {
background: var(--secondary-8);
}
@media (max-width: 768px) {
.ProseMirror {
min-height: 85vh;
max-height: 85vh;
min-height: 85svh;
max-height: 85svh;
font-size: var(--font-size-3);
}
}
.ProseMirror pre {
background-color: var(--secondary-3);
border-radius: var(--radius-3);
padding: var(--space-4);
font-family: var(--code-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
font-size: 0.875em;
line-height: 1.7;
overflow-x: auto;
}
/* Code block: reset inline code styles for code inside pre */
.ProseMirror pre > code {
background-color: transparent;
padding: 0;
border-radius: 0;
font-size: inherit;
color: var(--secondary-12);
}
/* Inline code only */
.ProseMirror code {
background-color: var(--secondary-2);
color: var(--secondary-12);
padding-left: var(--space-2);
padding-right: var(--space-2);
padding-top: var(--space-1);
padding-bottom: var(--space-1);
border-radius: var(--radius-3);
}
/* Highlight mark (==text== syntax) */
.ProseMirror .highlight {
background-color: var(--warning-4);
border-radius: 2px;
padding: 1px 2px;
}
/* Keep highlight visible while selected (Google Docs-style color blend) */
.ProseMirror .highlight::selection {
background-color: rgba(59, 130, 246, 0.42);
}
.ProseMirror .highlight::-moz-selection {
background-color: rgba(59, 130, 246, 0.42);
}
.ProseMirror a {
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
}
.ProseMirror li {
position: relative;
}
/* Hide list marker while preserving indentation (for backspace intermediate state) */
.ProseMirror li.no-marker {
list-style-type: none;
}
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
.ProseMirror [draggable][contenteditable=false] { user-select: text }
.ProseMirror-selectednode {
outline: 2px solid var(--primary-9);
}
.ProseMirror img {
max-width: 100%;
height: auto;
}
.pm-image-upload-placeholder {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 6px;
border-radius: 6px;
background-color: var(--secondary-3);
color: var(--secondary-11);
font-size: 0.75rem;
}
.pm-image-upload-placeholder::before {
content: "";
width: 10px;
height: 10px;
border-radius: 999px;
border: 2px solid var(--secondary-9);
border-top-color: transparent;
animation: pm-image-spin 0.9s linear infinite;
}
@keyframes pm-image-spin {
to {
transform: rotate(360deg);
}
}
/* Make sure li selections wrap around markers */
li.ProseMirror-selectednode {
outline: none;
}
li.ProseMirror-selectednode:after {
content: "";
position: absolute;
left: -32px;
right: -2px; top: -2px; bottom: -2px;
border: 2px solid var(--primary-9);
pointer-events: none;
}
/* Protect against generic img rules */
img.ProseMirror-separator {
display: inline !important;
border: none !important;
margin: 0 !important;
}
.ProseMirror-focused {
outline: none;
}
/* Used when the node is empty */
.empty-node {
position: relative;
}
.empty-node::before {
content: attr(data-placeholder);
color: gray;
pointer-events: none;
position: absolute;
left: 0;
top: 0;
/* Ensure the placeholder appears within the empty node */
}
/* Pending patch decoration for str_replace edits awaiting review */
.pending-patch-highlight {
background-color: rgba(255, 220, 100, 0.35);
border-bottom: 2px solid var(--warning-9, #f59e0b);
border-radius: 2px;
transition: background-color 0.2s ease;
cursor: pointer;
}
.pending-patch-highlight:hover {
background-color: rgba(255, 220, 100, 0.5);
}
/* Focused/selected pending patch */
.pending-patch-highlight.focused,
.ProseMirror .pending-patch-highlight:has(+ .ProseMirror-selection) {
background-color: rgba(255, 200, 50, 0.5);
border-bottom-color: var(--warning-10, #d97706);
}
/*
* Pending patch highlight + tables:
* For block-level patches that decorate a full table node, the highlight lands on
* the | ) have an opaque background, * which hides the yellow highlight. * * Keep the header look, but tint it yellow-ish by layering a translucent gradient * over the normal header background. */ .ProseMirror .pending-patch-highlight th, .ProseMirror th.pending-patch-highlight { background-image: linear-gradient(rgba(255, 220, 100, 0.22), rgba(255, 220, 100, 0.22)); } body.dark .ProseMirror .pending-patch-highlight th, body.dark .ProseMirror th.pending-patch-highlight { background-image: linear-gradient(rgba(255, 200, 50, 0.28), rgba(255, 200, 50, 0.28)); } /* ============================================================================ Widget Toolbar for Pending Patches (scrolls with content) ============================================================================ */ /* Wrapper around the widget, inserted via Decoration.widget */ .pm-patch-toolbar-wrapper { position: relative; display: inline-block; } /* Floating toolbar for a pending str_replace patch */ .pm-patch-toolbar { position: fixed; top: 0; left: 0; z-index: var(--z-index-9, 900); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 6px 10px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.15), 0 2px 6px -1px rgba(0, 0, 0, 0.1); font-size: 0.75rem; white-space: nowrap; } /* Label: "AI Edit (i/n)" */ .pm-patch-toolbar-label { color: var(--color-text-secondary, #6b7280); font-size: 0.7rem; margin-right: 4px; } /* Separator between button groups */ .pm-patch-toolbar-separator { display: inline-block; width: 1px; height: 16px; background: var(--color-border, #e5e7eb); } /* Base button styles */ .pm-patch-toolbar-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 4px; font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease; background: var(--color-surface-secondary, #f3f4f6); color: var(--color-text, #111); } .pm-patch-toolbar-btn:hover:not(:disabled) { background: var(--color-surface-tertiary, #e5e7eb); } .pm-patch-toolbar-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pm-patch-toolbar-btn svg { flex-shrink: 0; } /* Navigation buttons (prev/next) */ .pm-patch-toolbar-nav { padding: 4px 6px; } /* Accept button */ .pm-patch-toolbar-accept { background: var(--success-9, #10b981); color: white; border-color: var(--success-9, #10b981); } .pm-patch-toolbar-accept:hover:not(:disabled) { background: var(--success-10, #059669); border-color: var(--success-10, #059669); } /* Reject button */ .pm-patch-toolbar-reject { background: var(--danger-9, #ef4444); color: white; border-color: var(--danger-9, #ef4444); } .pm-patch-toolbar-reject:hover:not(:disabled) { background: var(--danger-10, #dc2626); border-color: var(--danger-10, #dc2626); } /* Diff toggle button */ .pm-patch-toolbar-diff { background: var(--color-surface-secondary, #f3f4f6); color: var(--color-text-secondary, #6b7280); } .pm-patch-toolbar-diff.active { background: var(--primary-3, #dbeafe); color: var(--primary-11, #1d4ed8); border-color: var(--primary-7, #93c5fd); } /* Bulk action buttons (Accept All / Reject All) */ .pm-patch-toolbar-bulk { background: transparent; color: var(--success-11, #059669); border-color: var(--success-7, #6ee7b7); } .pm-patch-toolbar-bulk:hover:not(:disabled) { background: rgba(16, 185, 129, 0.1); } .pm-patch-toolbar-bulk-reject { color: var(--danger-11, #dc2626); border-color: var(--danger-7, #fca5a5); } .pm-patch-toolbar-bulk-reject:hover:not(:disabled) { background: rgba(239, 68, 68, 0.1); } /* Diff preview inside widget toolbar - shown below the button row */ .pm-patch-toolbar .diff-preview { position: absolute; top: 0; left: 0; width: max-content; min-width: 300px; max-width: 450px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.15), 0 2px 6px -1px rgba(0, 0, 0, 0.1); padding: 8px; z-index: var(--z-index-9, 900); } /* ============================================================================ Diff Preview Styles (str_replace review toolbar) ============================================================================ */ /* Container for diff preview in review toolbar */ .diff-preview { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; } /* Individual diff blocks (Before/After) */ .diff-old-block, .diff-new-block { padding: 8px 10px; border-radius: 6px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace); font-size: 0.75rem; line-height: 1.5; } /* Before block (deletions) - red tinted */ .diff-old-block { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); } /* After block (additions) - green tinted */ .diff-new-block { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); } /* Block labels */ .diff-block-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 4px; } .diff-old-block .diff-block-label { color: var(--danger-11, #b91c1c); } .diff-new-block .diff-block-label { color: var(--success-11, #047857); } /* Block content */ .diff-block-content { word-break: break-word; } /* Added text in diff (green highlight) */ .diff-added { background-color: rgba(16, 185, 129, 0.25); color: var(--success-11, #047857); padding: 1px 2px; border-radius: 2px; } /* Removed text in diff (red highlight) */ .diff-removed { background-color: rgba(239, 68, 68, 0.25); color: var(--danger-11, #b91c1c); padding: 1px 2px; border-radius: 2px; } /* Dark mode adjustments */ body.dark .diff-old-block { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); } body.dark .diff-new-block { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.3); } body.dark .diff-old-block .diff-block-label { color: var(--danger-9, #ef4444); } body.dark .diff-new-block .diff-block-label { color: var(--success-9, #10b981); } body.dark .diff-added { background-color: rgba(16, 185, 129, 0.3); color: var(--success-9, #10b981); } body.dark .diff-removed { background-color: rgba(239, 68, 68, 0.3); color: var(--danger-9, #ef4444); } /* ============================================================================ * Selection Toolbar Plugin Styles (for "Add Selection" feature) * ============================================================================ */ /* Selection toolbar wrapper */ .pm-selection-toolbar-wrapper { position: relative; display: inline-block; } /* Selection toolbar floating above selection */ /* Position is set dynamically via JS using view.coordsAtPos() */ .pm-selection-toolbar { z-index: var(--z-index-9, 900); display: flex; flex-direction: row; align-items: center; font-size: 0.75rem; white-space: nowrap; } /* Add Selection button */ .pm-selection-toolbar-add { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--primary-7, #93c5fd); border-radius: 6px; font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease; background: var(--primary-3, #dbeafe); color: var(--primary-11, #1d4ed8); box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15), 0 1px 3px -1px rgba(0, 0, 0, 0.1); } .pm-selection-toolbar-add:hover { background: var(--primary-4, #bfdbfe); border-color: var(--primary-8, #60a5fa); } .pm-selection-toolbar-add svg { flex-shrink: 0; } /* Empty line widget wrapper */ .pm-empty-line-widget-wrapper { position: relative; display: inline-block; } /* Empty line widget */ .pm-empty-line-widget { display: inline-flex; align-items: center; } /* Empty line "Insert text with Cowriter" button */ .pm-empty-line-widget-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed var(--secondary-7, #d1d5db); border-radius: 4px; font-size: 0.75rem; font-weight: 400; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease; background: transparent; color: var(--secondary-11, #6b7280); } .pm-empty-line-widget-btn:hover { background: var(--secondary-2, #f9fafb); border-color: var(--secondary-8, #9ca3af); color: var(--secondary-12, #374151); } .pm-empty-line-widget-btn svg { flex-shrink: 0; opacity: 0.7; } /* Dark mode adjustments for selection toolbar */ body.dark .pm-selection-toolbar-add { background: var(--primary-3, #1e3a5f); border-color: var(--primary-7, #2563eb); color: var(--primary-11, #60a5fa); } body.dark .pm-selection-toolbar-add:hover { background: var(--primary-4, #1e40af); } body.dark .pm-empty-line-widget-btn { border-color: var(--secondary-7, #374151); color: var(--secondary-11, #9ca3af); } body.dark .pm-empty-line-widget-btn:hover { background: var(--secondary-3, #374151); color: var(--secondary-12, #e5e7eb); } /* Table Grid Picker */ .chat-nav-sidebar__toolbar-dropdown { position: relative; display: inline-flex; flex-shrink: 0; } .table-grid-picker { position: absolute; top: 100%; left: 0; margin-top: var(--space-1, 4px); padding: var(--space-2, 8px); background: var(--color-background, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-2, 6px); box-shadow: var(--shadow-3, 0 4px 12px rgba(0, 0, 0, 0.15)); z-index: 100; } .table-grid { display: grid; gap: 2px; } .table-grid-cell { width: 18px; height: 18px; border: 1px solid var(--secondary-6, #d1d5db); border-radius: 2px; cursor: pointer; transition: background-color 0.1s ease, border-color 0.1s ease; } .table-grid-cell:hover, .table-grid-cell--highlighted { background-color: var(--primary-4, #bfdbfe); border-color: var(--primary-7, #3b82f6); } .table-grid-label { text-align: center; margin-top: var(--space-2, 8px); font-size: var(--font-size-1, 0.75rem); color: var(--secondary-11, #6b7280); font-variant-numeric: tabular-nums; } /* Table Context Menu */ .table-menu { position: absolute; top: 100%; left: 0; margin-top: var(--space-1, 4px); min-width: 180px; padding: var(--space-1, 4px) 0; background: var(--color-background, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-2, 6px); box-shadow: var(--shadow-3, 0 4px 12px rgba(0, 0, 0, 0.15)); z-index: 100; } .table-menu-section { padding: var(--space-1, 4px) 0; } .table-menu-label { padding: var(--space-1, 4px) var(--space-3, 12px); font-size: var(--font-size-1, 0.75rem); font-weight: var(--font-weight-medium, 500); color: var(--secondary-10, #9ca3af); text-transform: uppercase; letter-spacing: 0.05em; } .table-menu-item { display: block; width: 100%; padding: var(--space-2, 8px) var(--space-3, 12px); text-align: left; background: none; border: none; font-size: var(--font-size-2, 0.875rem); color: var(--secondary-12, #374151); cursor: pointer; transition: background-color 0.1s ease; } .table-menu-item:hover { background-color: var(--secondary-3, #f3f4f6); } .table-menu-item--danger { color: var(--danger-9, #ef4444); } .table-menu-item--danger:hover { background-color: var(--danger-3, #fee2e2); } .table-menu-divider { height: 1px; margin: var(--space-1, 4px) 0; background-color: var(--secondary-6, #e5e7eb); } /* Table Editing States */ .ProseMirror .selectedCell::after { z-index: 2; position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: rgba(59, 130, 246, 0.15); pointer-events: none; } .ProseMirror td, .ProseMirror th { position: relative; vertical-align: top; min-width: 160px; } /* Scrollable wrapper around table nodes — scrollbar appears directly below the table */ .ProseMirror .pm-table-scroll { overflow-x: auto; max-width: 100%; margin: var(--space-4, 16px) 0; } .ProseMirror .pm-table-scroll::-webkit-scrollbar { height: 8px; } .ProseMirror .pm-table-scroll::-webkit-scrollbar-track { background: transparent; } .ProseMirror .pm-table-scroll::-webkit-scrollbar-thumb { background: var(--secondary-7); border-radius: 4px; } .ProseMirror .pm-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--secondary-8); } .ProseMirror table { border-collapse: collapse; table-layout: auto; width: 100%; } /* * Prevent global zebra striping (public/css/globals/elements.css: tr:nth-child(even)) * from affecting tables rendered inside the ProseMirror editor. * * This is particularly important for pending str_replace patch highlights, which use * semi-transparent yellow backgrounds and can look like alternating “not-yellow” rows * when zebra striping bleeds through. */ .ProseMirror table tr:nth-child(even) { background-color: transparent; } .ProseMirror td, .ProseMirror th { border: 1px solid var(--secondary-6, #d1d5db); padding: var(--space-1, 4px) var(--space-2, 8px); } /* Remove paragraph margins inside table cells */ .ProseMirror td p, .ProseMirror th p { margin-top: 0; margin-bottom: 0; } .ProseMirror th { font-weight: var(--font-weight-medium, 500); background-color: var(--secondary-2, #f9fafb); text-align: left; } /* Column resize handle (for future column resizing) */ .ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background-color: var(--primary-7, #3b82f6); pointer-events: none; } /* Resize cursor */ .ProseMirror.resize-cursor { cursor: ew-resize; cursor: col-resize; } /* Dark mode table adjustments */ body.dark .table-grid-picker { background: var(--secondary-2, #1f2937); border-color: var(--secondary-7, #374151); } body.dark .table-grid-cell { border-color: var(--secondary-7, #4b5563); } body.dark .table-grid-cell:hover, body.dark .table-grid-cell--highlighted { background-color: var(--primary-4, #1e40af); border-color: var(--primary-7, #2563eb); } body.dark .table-menu { background: var(--secondary-2, #1f2937); border-color: var(--secondary-7, #374151); } body.dark .table-menu-item { color: var(--secondary-12, #e5e7eb); } body.dark .table-menu-item:hover { background-color: var(--secondary-4, #374151); } body.dark .table-menu-item--danger:hover { background-color: var(--danger-4, #450a0a); } body.dark .ProseMirror th { background-color: var(--secondary-3, #374151); } body.dark .ProseMirror td, body.dark .ProseMirror th { border-color: var(--secondary-7, #4b5563); } /* Table Floating Toolbar */ .pm-table-toolbar-wrapper { position: relative; display: block; height: 0; overflow: visible; } .pm-table-toolbar { position: fixed; top: 0; left: 0; z-index: var(--z-index-9, 900); display: inline-flex; flex-direction: row; align-items: center; gap: 2px; padding: 4px 6px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15), 0 1px 3px -1px rgba(0, 0, 0, 0.1); font-size: 0.75rem; white-space: nowrap; } .pm-table-toolbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--secondary-11, #374151); cursor: pointer; transition: background-color 0.1s ease, color 0.1s ease; position: relative; } .pm-table-toolbar-btn:hover { background-color: var(--secondary-3, #f3f4f6); } .pm-table-toolbar-btn--danger { color: var(--danger-9, #ef4444); } .pm-table-toolbar-btn--danger:hover { background-color: var(--danger-3, #fee2e2); } .pm-table-toolbar-btn svg { width: 14px; height: 14px; } .pm-table-toolbar-separator { display: inline-block; width: 1px; height: 16px; margin: 0 4px; background-color: var(--secondary-6, #e5e7eb); } /* Collapsed state: single trigger button */ .pm-table-toolbar--collapsed { padding: 2px; } /* Expanded state */ .pm-table-toolbar--expanded { padding: 2px 4px; animation: pm-toolbar-expand 0.15s ease-out; } @keyframes pm-toolbar-expand { from { opacity: 0; transform: scale(0.95) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Dark mode */ body.dark .pm-table-toolbar { background: var(--secondary-2, #1f2937); border-color: var(--secondary-7, #374151); } body.dark .pm-table-toolbar-btn { color: var(--secondary-11, #d1d5db); } body.dark .pm-table-toolbar-btn:hover { background-color: var(--secondary-4, #374151); } body.dark .pm-table-toolbar-btn--danger { color: var(--danger-9, #f87171); } body.dark .pm-table-toolbar-btn--danger:hover { background-color: var(--danger-4, #450a0a); } body.dark .pm-table-toolbar-separator { background-color: var(--secondary-7, #4b5563); } /* /css/components/pricing.css */ .pricing-dialog { position: fixed; inset: 0; display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100svh; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; color: var(--secondary-12); background: radial-gradient(circle at 50% -12rem, var(--primary-3), transparent 46rem), var(--secondary-1); border: 0; border-radius: 0; box-shadow: none; } .pricing-topbar { position: sticky; top: 0; z-index: 12; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-height: calc(var(--space-7) + var(--space-3)); padding: var(--space-2) max(var(--space-4), calc((100vw - var(--container-5)) / 2)); background: color-mix(in srgb, var(--secondary-1) 92%, transparent); border-bottom: 1px solid var(--secondary-3); backdrop-filter: blur(16px); } .pricing-topbar__logo { display: block; width: auto; height: calc(var(--space-5) + var(--space-1)); } .pricing-close-btn.dialog-close-btn { position: static; min-width: var(--space-7); min-height: var(--space-7); padding: var(--space-1); border: 1px solid var(--secondary-4); background: var(--secondary-1); box-shadow: var(--shadow-1); } .pricing-close-btn.dialog-close-btn:hover { color: var(--primary-10); background: var(--primary-2); } .pricing-close-btn.dialog-close-btn:focus-visible, .pricing-cycle-control__option:focus-visible, .pricing-faq summary:focus-visible { outline: 2px solid var(--primary-9); outline-offset: 2px; } .pricing-page { width: min(100%, calc(var(--container-5) + var(--space-8))); margin: 0 auto; padding: var(--space-7) var(--space-4) var(--space-8); } .pricing-hero { display: flex; flex-direction: column; align-items: center; max-width: var(--container-5); margin: 0 auto; text-align: center; } .pricing-hero__eyebrow, .pricing-section-heading__eyebrow, .pricing--card__eyebrow { margin: 0 0 var(--space-2); color: var(--primary-10); font-size: var(--font-size-1-half); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; } .pricing-hero h1 { max-width: 880px; margin: 0; color: var(--secondary-12); font-size: clamp(var(--font-size-8), 4.4vw, 3.65rem); font-weight: var(--font-weight-bold); letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; } .pricing-hero__lead { max-width: 720px; margin: var(--space-4) auto 0; color: var(--secondary-11); font-size: var(--font-size-4); line-height: 1.55; text-wrap: balance; } .pricing-trust-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); padding: 0; margin: var(--space-5) 0 0; list-style: none; } .pricing-trust-list li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--secondary-11); font-size: var(--font-size-2-half); } .pricing-trust-list li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: var(--space-4); height: var(--space-4); color: var(--green-11); font-size: var(--font-size-1); font-weight: var(--font-weight-bold); background: var(--green-3); border-radius: var(--radius-round); } .pricing-current-plan { margin: var(--space-3) 0 0; color: var(--secondary-10); font-size: var(--font-size-2-half); } .pricing-current-plan strong { color: var(--secondary-12); } .pricing-cycle-control { display: grid; grid-template-columns: 1fr 1.25fr; width: min(100%, 460px); padding: var(--space-1); margin: var(--space-5) auto 0; background: var(--secondary-3); border: 1px solid var(--secondary-4); border-radius: var(--radius-4); box-shadow: inset 0 1px 1px color-mix(in srgb, var(--secondary-12) 8%, transparent); } .pricing-cycle-control__option { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: calc(var(--space-7) + var(--space-1)); padding: var(--space-2) var(--space-3); color: var(--secondary-11); font: inherit; font-size: var(--font-size-3); font-weight: var(--font-weight-medium); cursor: pointer; background: transparent; border: 0; border-radius: var(--radius-3); transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .pricing-cycle-control__option--active { color: var(--secondary-12); background: var(--secondary-1); box-shadow: var(--shadow-2); } .pricing-save-badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); color: var(--green-11); font-size: var(--font-size-1); font-weight: var(--font-weight-bold); line-height: 1; background: var(--green-3); border-radius: var(--radius-round); } .pricing-container { width: 100%; max-width: var(--container-5); margin: var(--space-7) auto 0; } .pricing-content--simplified { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--space-4); max-width: 920px; margin-inline: auto; } .pricing--card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-5); overflow: hidden; color: var(--secondary-12); background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-4); box-shadow: var(--shadow-4); } .pricing--card--featured { border-color: var(--primary-8); box-shadow: var(--shadow-7); } .pricing--card--business { padding-top: calc(var(--space-7) + var(--space-4)); background: linear-gradient(155deg, var(--primary-2) 0%, var(--secondary-1) 46%), var(--secondary-1); } .pricing--card__enterprise-band { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--space-7) + var(--space-1)); padding: var(--space-2) var(--space-4); color: var(--primary-1); font-size: var(--font-size-1-half); font-weight: var(--font-weight-bold); background: var(--primary-9); } .pricing--card__enterprise-band span:last-child { font-weight: var(--font-weight-medium); opacity: 0.9; } .pricing--card__name { margin: 0; color: var(--secondary-12); font-size: var(--font-size-8); font-weight: var(--font-weight-bold); letter-spacing: -0.025em; } .pricing--card__description { min-height: 4.2em; margin: var(--space-2) 0 var(--space-4); color: var(--secondary-11); font-size: var(--font-size-3); line-height: 1.5; } .pricing--card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); } .pricing--card__amount { color: var(--secondary-12); font-size: clamp(var(--font-size-8), 3.2vw, 2.75rem); font-weight: var(--font-weight-bold); letter-spacing: -0.04em; line-height: 1; } .pricing--card__period { color: var(--secondary-10); font-size: var(--font-size-2-half); } .pricing--card__billing { min-height: 3.2em; margin: var(--space-2) 0 0; color: var(--secondary-10); font-size: var(--font-size-2); line-height: 1.45; } .pricing--card__benchmark { min-height: 3.2em; margin: var(--space-3) 0 0; color: var(--green-11); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); line-height: 1.45; } .pricing--card__spacer { visibility: hidden; pointer-events: none; user-select: none; } .pricing--card__cta { margin-top: var(--space-4); } .pricing--card__features { flex: 1; padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--secondary-4); } .pricing--card__features h4 { margin: 0 0 var(--space-2); color: var(--secondary-11); font-size: var(--font-size-1-half); font-weight: var(--font-weight-bold); letter-spacing: 0.05em; text-transform: uppercase; } .pricing--card__features ul { padding: 0; margin: 0; list-style: none; } .pricing--card__features li { position: relative; padding: var(--space-2) 0 var(--space-2) calc(var(--space-4) + var(--space-1)); color: var(--secondary-11); font-size: var(--font-size-2-half); line-height: 1.45; } .pricing--card__features li::before { content: "✓"; position: absolute; top: var(--space-2); left: 0; color: var(--green-11); font-weight: var(--font-weight-bold); } .pricing--card__payment { margin: var(--space-3) 0 0; color: var(--secondary-9); font-size: var(--font-size-2); } .pricing-comparison, .pricing-faq { max-width: var(--container-5); margin: var(--space-8) auto 0; } .pricing-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-4); } .pricing-section-heading h2, .pricing-data-care h2 { margin: 0; color: var(--secondary-12); font-size: var(--font-size-7); letter-spacing: -0.03em; } .pricing-section-heading > p { max-width: 360px; margin: 0; color: var(--secondary-10); font-size: var(--font-size-3); text-align: right; } .pricing-comparison__scroll { overflow-x: auto; background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-4); box-shadow: var(--shadow-2); } .pricing-comparison__table { width: 100%; min-width: 640px; border-spacing: 0; border-collapse: separate; } .pricing-comparison__table th, .pricing-comparison__table td { padding: var(--space-3) var(--space-4); color: var(--secondary-11); font-size: var(--font-size-2-half); line-height: 1.45; text-align: left; vertical-align: top; border-bottom: 1px solid var(--secondary-3); } .pricing-comparison__table thead th { color: var(--secondary-12); font-weight: var(--font-weight-bold); background: var(--secondary-2); } .pricing-comparison__table tbody th { width: 18%; color: var(--secondary-12); font-weight: var(--font-weight-medium); } .pricing-comparison__table tr:last-child th, .pricing-comparison__table tr:last-child td { border-bottom: 0; } .pricing-comparison-mobile { display: none; } .pricing-data-care { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-7); max-width: var(--container-5); padding: var(--space-6); margin: var(--space-8) auto 0; background: var(--primary-3); border: 1px solid var(--primary-6); border-radius: var(--radius-4); } .pricing-data-care p:last-child { margin: 0; color: var(--secondary-11); font-size: var(--font-size-3); line-height: 1.65; } .pricing-faq__list { overflow: hidden; background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-4); } .pricing-faq details { border-bottom: 1px solid var(--secondary-4); } .pricing-faq details:last-child { border-bottom: 0; } .pricing-faq summary { position: relative; padding: var(--space-4) calc(var(--space-7) + var(--space-3)) var(--space-4) var(--space-4); color: var(--secondary-12); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); cursor: pointer; list-style: none; } .pricing-faq summary::-webkit-details-marker { display: none; } .pricing-faq summary::after { content: "+"; position: absolute; top: 50%; right: var(--space-4); color: var(--primary-10); font-size: var(--font-size-5); font-weight: var(--font-weight-medium); transform: translateY(-50%); } .pricing-faq details[open] summary::after { content: "−"; } .pricing-faq details p { max-width: 780px; padding: 0 var(--space-4) var(--space-4); margin: 0; color: var(--secondary-10); font-size: var(--font-size-2-half); line-height: 1.6; } /* -------------------------------------------------------------------------- */ /* Global pricing upsell bubble */ /* -------------------------------------------------------------------------- */ .pricing-upsell-floating { position: fixed; top: calc(env(safe-area-inset-top) + var(--space-3)); left: var(--pricing-upsell-left, 50%); z-index: var(--z-index-8); display: inline-flex; gap: var(--space-1-half); align-items: center; justify-content: center; max-width: calc(100vw - (var(--space-3) * 2)); padding: var(--space-2) var(--space-3); color: #fff; font-family: inherit; font-size: var(--font-size-2); font-weight: var(--font-weight-medium); line-height: 1.25; white-space: nowrap; cursor: pointer; background: var(--primary-9); border: 0; border-radius: var(--radius-2); box-shadow: var(--shadow-2); transform: translateX(-50%); transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .pricing-upsell-floating svg { flex: 0 0 auto; } .pricing-upsell-floating:hover { background: var(--primary-10); box-shadow: var(--shadow-3); transform: translateX(-50%) translateY(-1px); } .pricing-upsell-floating:active { background: var(--primary-10); box-shadow: var(--shadow-2); transform: translateX(-50%); } .pricing-upsell-floating:focus-visible { outline: 2px solid var(--primary-9); outline-offset: 2px; } @media (max-width: 1024px) { .pricing-page { padding-inline: var(--space-5); } .pricing-content--simplified { max-width: 820px; } } @media (max-width: 768px) { .pricing-topbar { min-height: calc(var(--space-7) + var(--space-2)); padding-inline: var(--space-3); } .pricing-topbar__logo { height: var(--space-5); } .pricing-page { padding: var(--space-6) var(--space-3) var(--space-7); } .pricing-hero { align-items: stretch; text-align: left; } .pricing-hero h1 { font-size: clamp(var(--font-size-8), 11vw, 2.8rem); } .pricing-hero__lead { margin-inline: 0; font-size: var(--font-size-3); } .pricing-trust-list { flex-direction: column; align-items: flex-start; } .pricing-cycle-control { width: 100%; margin-inline: 0; } .pricing-cycle-control__option { flex-direction: column; gap: var(--space-1); } .pricing-content--simplified { grid-template-columns: 1fr; } .pricing--card { padding: var(--space-4); } .pricing--card--business { padding-top: calc(var(--space-7) + var(--space-4)); } .pricing--card__description, .pricing--card__billing, .pricing--card__benchmark { min-height: 0; } .pricing--card__enterprise-band { padding-inline: var(--space-3); font-size: var(--font-size-1); } .pricing-section-heading { display: block; } .pricing-section-heading > p { margin-top: var(--space-2); text-align: left; } .pricing-comparison__scroll { display: none; } .pricing-comparison-mobile { display: grid; gap: var(--space-3); } .pricing-comparison-mobile__plan { overflow: hidden; background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-4); box-shadow: var(--shadow-2); } .pricing-comparison-mobile__plan--business { border-color: var(--primary-7); } .pricing-comparison-mobile__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--secondary-2); border-bottom: 1px solid var(--secondary-4); } .pricing-comparison-mobile__plan--business .pricing-comparison-mobile__header { background: var(--primary-3); border-color: var(--primary-6); } .pricing-comparison-mobile__header p { margin: 0; color: var(--primary-10); font-size: var(--font-size-1); font-weight: var(--font-weight-bold); letter-spacing: 0.05em; text-transform: uppercase; } .pricing-comparison-mobile__header h3 { margin: 0; color: var(--secondary-12); font-size: var(--font-size-5); } .pricing-comparison-mobile__lead { padding: var(--space-4) var(--space-4) var(--space-3); margin: 0; color: var(--secondary-12); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); line-height: 1.45; } .pricing-comparison-mobile dl { padding: 0 var(--space-4) var(--space-3); margin: 0; } .pricing-comparison-mobile dl > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--secondary-3); } .pricing-comparison-mobile dt { color: var(--secondary-10); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); line-height: 1.4; } .pricing-comparison-mobile dd { margin: 0; color: var(--secondary-12); font-size: var(--font-size-2); line-height: 1.4; } .pricing-data-care { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); } .pricing-upsell-floating { min-height: var(--space-7); } } @media (prefers-reduced-motion: reduce) { .pricing-cycle-control__option, .pricing-upsell-floating { transition: none; } } /* /css/components/settings.css */ .settings-dialog { background-color: var(--secondary-1); color: var(--secondary-12); border-radius: var(--radius-3); max-width: var(--container-3); min-width: var(--container-3); min-height: var(--container-2); margin: 0 auto; box-shadow: var(--shadow-9); border: none; } @media (max-width: 768px) { .settings-dialog { min-width: 100vw; max-width: 100vw; min-width: 100svw; max-width: 100svw; height: 100vh; height: 100svh; border-radius: 0; margin: 0; overflow: hidden; } } .settings-header { padding: var(--space-1) var(--space-4); } @media (max-width: 768px) { .settings-header { padding: var(--space-2); } } .settings-container { display: flex; height: 100%; padding: var(--space-1) var(--space-4); } .settings-status--success { display: flex; align-items: center; color: var(--success-10); gap: var(--space-2); } @media (max-width: 768px) { .settings-container { flex-direction: column; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0; } } .settings-sidebar { flex: 1; } .settings-sidebar ul { list-style: none; padding: 0; display: flex; flex-direction: column; height: 100%; gap: var(--space-1); } .settings-sidebar li { padding: var(--space-2) var(--space-3); cursor: pointer; display: flex; align-items: center; border-radius: var(--radius-3); } /* Bottom CTA items (guest/pro) */ .settings-sidebar__bottomStart { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--secondary-4); } .settings-sidebar__upgradePill { display: flex; gap: var(--space-2); align-items: center; border: 1px solid var(--secondary-5); border-radius: 999px; background: var(--secondary-2); color: var(--secondary-12); font-weight: var(--font-weight-medium); transition: background-color 0.15s ease, border-color 0.15s ease; } .settings-sidebar__upgradePill:hover { background: var(--secondary-3); border-color: var(--secondary-6); } .settings-sidebar__upgradeIcon { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary-9); } .settings-sidebar__createTeamLi { font-weight: var(--font-weight-regular); } .settings-sidebar li.active { background-color: var(--primary-3); color: var(--primary-11); } @media (max-width: 768px) { .settings-sidebar { display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: var(--space-2); padding: 0 var(--space-3); flex: none; border-bottom: 1px solid var(--secondary-4); } .settings-sidebar ul { display: flex; flex-direction: row; gap: var(--space-1); padding: 0; margin: 0; flex-wrap: nowrap; height: auto; } .settings-sidebar li { white-space: nowrap; padding: var(--space-2) var(--space-3); margin: 0; border-radius: 0; line-height: 1.2; font-size: var(--font-size-2); min-height: 44px; display: flex; align-items: center; border: none; border-bottom: 2px solid transparent; background-color: transparent; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease; } .settings-sidebar li.active { background-color: transparent; color: var(--primary-11); border-bottom-color: var(--primary-9); font-weight: var(--font-weight-medium); box-shadow: none; } .settings-sidebar li:hover { background-color: transparent; border-bottom-color: var(--secondary-6); } .settings-sidebar li.active:hover { background-color: transparent; border-bottom-color: var(--primary-9); } .settings-sidebar__bottomStart { margin-top: 0; padding-top: 0; border-top: none; } } .settings-content { flex: 3; padding: var(--space-1) var(--space-6); } @media (max-width: 768px) { .settings-content { padding: var(--space-2) var(--space-3); padding-bottom: var(--space-4); flex: 1; overflow-y: visible; overflow-x: hidden; font-size: var(--font-size-3); } } .setting { margin-bottom: var(--space-4); } .setting label { display: block; margin-bottom: var(--space-1); } .setting button { margin-right: var(--space-2); } .setting .danger { background-color: var(--danger); color: white; } /* /css/components/settings-sections.css */ /* Settings Sections - Soft UI Design */ /* Common section styles */ .billing-section, .model-section, .profile-section, .usage-section, .keybindings-section { max-width: 600px; } /* Section Cards */ .settings-section-card { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-4); margin-bottom: var(--space-4); } /* Section Headers */ .settings-section-header { margin-bottom: var(--space-4); } .settings-section-title { font-size: var(--font-size-5); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0 0 var(--space-2) 0; } .settings-section-subtitle { font-size: var(--font-size-3); color: var(--secondary-10); line-height: 1.5; margin: 0; } /* Billing Section Specific */ .billing-status { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--space-3); margin-bottom: var(--space-4); } .billing-status strong { color: var(--secondary-12); font-weight: var(--font-weight-medium); } .billing-plan-badge { display: inline-flex; align-items: center; background: var(--primary-3); color: var(--primary-11); padding: var(--space-1) var(--space-2); border-radius: var(--radius-2); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); margin-left: var(--space-2); } .billing-confirmation-badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-2); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); margin-left: var(--space-2); } .billing-confirmation-badge.confirmed { background: var(--success-3); color: var(--success-11); } .billing-confirmation-badge.unconfirmed { background: var(--warning-3); color: var(--warning-11); } .billing-note { background: var(--secondary-3); color: var(--secondary-11); padding: var(--space-3); border-radius: var(--radius-2); margin-bottom: var(--space-3); font-size: var(--font-size-3); line-height: 1.5; border: 1px solid var(--secondary-4); } .billing-special-plan { background: linear-gradient(135deg, var(--primary-3), var(--secondary-3)); border: 1px solid var(--primary-4); border-radius: var(--radius-3); padding: var(--space-4); text-align: center; box-shadow: var(--shadow-3); } .billing-special-plan p { color: var(--primary-11); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); margin: 0; } /* Billing Portal Action Card */ .billing-portal-card { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); padding: var(--space-4); margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .billing-portal-card__header { display: flex; align-items: flex-start; gap: var(--space-3); } .billing-portal-card__icon { flex-shrink: 0; width: 36px; height: 36px; background: var(--primary-3); border: 1px solid var(--primary-4); border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; color: var(--primary-11); margin-top: 2px; } .billing-portal-card__title { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0 0 var(--space-1) 0; } .billing-portal-card__desc { font-size: var(--font-size-2); color: var(--secondary-10); margin: 0; line-height: 1.5; } .billing-portal-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-half); } .billing-portal-card__list li { font-size: var(--font-size-2); color: var(--secondary-10); padding-left: var(--space-4); position: relative; } .billing-portal-card__list li::before { content: '→'; position: absolute; left: 0; color: var(--primary-9); font-size: var(--font-size-2); } .billing-portal-card__btn { align-self: flex-start; margin-top: var(--space-1); text-decoration: none; } /* Model Section Specific */ .model-selector-wrapper { margin-bottom: var(--space-4); } .model-info-card { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--space-3); margin-top: var(--space-3); } .model-status-indicator { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .model-status-indicator svg { width: 20px; height: 20px; } .model-loading { display: flex; align-items: center; gap: var(--space-2); color: var(--secondary-10); } .model-success { color: var(--success-10); font-weight: var(--font-weight-medium); } .model-error { color: var(--failure-10); font-weight: var(--font-weight-medium); } .model-pending { color: var(--secondary-10); font-size: var(--font-size-2); font-style: italic; } .model-description { font-size: var(--font-size-3); color: var(--secondary-10); line-height: 1.5; margin-top: var(--space-2); } /* Profile Section Specific */ .profile-form-wrapper { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--space-4); box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.05); } .profile-form-field { margin-bottom: var(--space-4); } .profile-form-field label { display: block; font-size: var(--font-size-2); font-weight: var(--font-weight-medium); color: var(--secondary-11); margin-bottom: var(--space-1); } .profile-form-field input { width: 100%; background: var(--secondary-1); border: 1px solid var(--secondary-7); border-radius: var(--radius-2); padding: var(--space-2) var(--space-3); font-size: var(--font-size-3); color: var(--secondary-12); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .profile-form-field input:focus { border-color: var(--primary-11); outline: none; box-shadow: 0 0 0 2px var(--primary-3), inset 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .profile-form-field input:hover:not(:focus) { border-color: var(--secondary-8); } .profile-form-field input::placeholder { color: var(--secondary-9); } .profile-form-field input[type="password"] { letter-spacing: 0.1em; } .profile-form-field input[type="password"]::placeholder { letter-spacing: normal; } .profile-form-actions { display: flex; justify-content: flex-end; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--secondary-4); } .profile-form-actions .btn--primary { min-width: 150px; } /* Keybindings Section Specific */ .keybindings-selector-wrapper { margin-bottom: var(--space-4); } .radio-group { display: flex; flex-direction: column; gap: var(--space-3); } .radio-option { display: block; cursor: pointer; position: relative; } .radio-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .radio-option__content { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 2px solid var(--secondary-6); border-radius: var(--radius-2); background: var(--secondary-1); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .radio-option:hover .radio-option__content { border-color: var(--secondary-8); background: var(--secondary-2); } .radio-option input[type="radio"]:checked + .radio-option__content { border-color: var(--primary-9); background: var(--primary-1); } .radio-title { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); } .radio-description { font-size: var(--font-size-2); color: var(--secondary-10); line-height: 1.4; } .keybinding-info-card { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--space-3); margin-top: var(--space-3); } .keybinding-status-indicator { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .keybinding-status-indicator svg { width: 20px; height: 20px; } .keybinding-loading { display: flex; align-items: center; gap: var(--space-2); color: var(--secondary-10); } .keybinding-success { color: var(--success-10); font-weight: var(--font-weight-medium); } .keybinding-error { color: var(--failure-10); font-weight: var(--font-weight-medium); } .keybinding-description { font-size: var(--font-size-3); color: var(--secondary-10); line-height: 1.5; } .keybinding-description p { margin: 0 0 var(--space-2) 0; } .keybinding-description p:last-child { margin-bottom: 0; } /* Usage Section Specific */ .usage-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); } .usage-stat-card { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--space-3); text-align: center; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .usage-stat-card:hover { box-shadow: var(--shadow-3); transform: translateY(-1px); } .usage-stat-value { font-size: var(--font-size-6); font-weight: var(--font-weight-bold); color: var(--primary-11); margin: 0; } .usage-stat-value--pooled { color: var(--accent-9); font-style: italic; } .usage-stat-quota { font-size: var(--font-size-1); color: var(--secondary-9); margin: var(--space-1) 0 0 0; font-weight: var(--font-weight-normal); } .usage-stat-label { font-size: var(--font-size-2); color: var(--secondary-10); margin: var(--space-1) 0 0 0; } .usage-plan-info { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--space-3); margin-bottom: var(--space-3); } .usage-plan-info p { margin: 0 0 var(--space-2) 0; font-size: var(--font-size-3); color: var(--secondary-11); } .usage-plan-info p:last-child { margin-bottom: 0; } .usage-reset-info { background: var(--primary-3); color: var(--primary-11); padding: var(--space-3); border-radius: var(--radius-2); font-size: var(--font-size-2); line-height: 1.5; text-align: center; } /* Responsive adjustments */ @media (max-width: 768px) { .settings-section-card { border-radius: 6px; padding: var(--space-3); } .usage-stats-grid { grid-template-columns: 1fr; } .billing-plan-badge, .billing-confirmation-badge { font-size: var(--font-size-1); padding: 2px var(--space-1); } } /* Animations */ .settings-section-card { animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* /css/components/source-actions.css */ /* Source action review, QNE workbench, and Team permissions. */ /* Same frame as the Team panel dialog: fixed width, 90svh tall, internal scroll. */ .qne-source-backdrop { z-index: var(--z-index-9, 9000); padding: var(--space-4); } .qne-source-dialog { position: relative; width: var(--container-5); max-width: 100%; height: 90vh; height: 90svh; max-height: 90svh; margin: 0 auto; padding: 0; border: 0; border-radius: var(--radius-3); background: var(--secondary-1); box-shadow: var(--shadow-9); color: var(--secondary-12); overflow: hidden; overscroll-behavior: contain; } .qne-source-dialog[open] { display: grid; grid-template-rows: auto auto 1fr; } .qne-source-dialog__header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-height: 56px; padding: var(--space-2) calc(var(--space-8) + var(--space-6)) var(--space-2) var(--space-4); } .qne-source-dialog__title { margin: 0; font-size: var(--font-size-5); font-weight: var(--font-weight-medium); color: var(--secondary-12); } .qne-source-dialog .qne-source-dialog__tabs { gap: var(--space-2); padding: 0 var(--space-4); border-bottom: 1px solid var(--secondary-4); } /* Keep the long safety and team explanations available without displacing data. */ /* The prepared result replaces the tabs, so it carries the empty panel space. */ .qne-source-dialog .source-actions-tab { min-height: var(--space-7); padding: var(--space-2) var(--space-3); font-size: var(--font-size-3); } .qne-source-dialog #qne-source-content { min-width: 0; min-height: 0; padding: var(--space-4); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } qne-source-workbench, source-permissions-panel { display: block; min-width: 0; } /* Let the table use the space left by the actual controls, rather than a viewport-height estimate that clips its bottom edge on narrow screens. The column fills the panel when the parts fit and scrolls when the minimum heights do not, so no part is ever cut off. */ .qne-source-dialog[data-view='data'] #qne-source-content { display: flex; flex-direction: column; } .qne-source-dialog[data-view='data'] :is(qne-source-workbench, .qne-source-workbench__content, .source-actions-section) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; } .qne-source-dialog[data-view='data'] .source-actions-section > :not(.source-actions-tablewrap) { flex-shrink: 0; } .qne-source-dialog[data-view='data'] .source-actions-tablewrap { flex: 1 1 auto; min-height: 120px; max-height: none; } /* The recent list yields height to the table on short dialogs. Only the list itself shrinks: the wrapper keeps its own height so its heading and notes are never squeezed below their text and painted over each other. */ .source-permissions-controls { border: 0; padding: 0; margin: 0; min-width: 0; } .source-permissions-controls > legend { margin-bottom: var(--space-2); } .qne-source-dialog .source-actions-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } @media (max-width: 768px) { .qne-source-backdrop { padding: 0; } .qne-source-dialog { min-width: 100vw; max-width: 100vw; min-width: 100svw; max-width: 100svw; height: 100vh; height: 100svh; max-height: 100svh; border-radius: 0; margin: 0; } .qne-source-dialog__header { padding-left: var(--space-3); } .qne-source-dialog .qne-source-dialog__tabs { padding: 0 var(--space-3); } .qne-source-dialog #qne-source-content { padding: var(--space-3); } } .source-actions-panel { width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); } .source-actions-heading { display: flex; flex-direction: column; gap: var(--space-2); } .source-actions-heading h1 { margin: 0; font-size: var(--font-size-7); color: var(--secondary-12); } .source-actions-heading p { margin: 0; color: var(--secondary-11); line-height: 1.5; max-width: var(--measure); } .source-actions-heading__links { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .source-actions-section { border: 1px solid var(--secondary-4); border-radius: var(--radius-4); background: var(--secondary-1); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .source-actions-section h2 { margin: 0; font-size: var(--font-size-5); color: var(--secondary-12); } .source-actions-section h3 { margin: 0 0 var(--space-1); font-size: var(--font-size-3); color: var(--secondary-11); } .source-actions-section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .source-actions-note { margin: 0; color: var(--secondary-11); font-size: var(--font-size-2); line-height: 1.5; } .source-actions-note--warning { color: var(--warning-12, var(--secondary-12)); background: var(--warning-3, transparent); border-left: 3px solid var(--warning-12, var(--secondary-12)); border-radius: var(--radius-1); padding: var(--space-1) var(--space-2); } .source-actions-note--error { color: var(--red-11, var(--secondary-12)); } /* Outcomes are announced through a persistent live region. The visible copy stays where the action happened, so the region itself stays out of the way. */ .source-actions-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .source-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); } .source-actions-card { border: 1px solid var(--secondary-4); border-radius: var(--radius-3); background: var(--secondary-2); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .source-actions-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .source-actions-card__header h3 { margin: 0; font-size: var(--font-size-4); color: var(--secondary-12); } .source-actions-card__actions { display: flex; gap: var(--space-2); } .source-actions-card__status { margin: 0; color: var(--secondary-11); font-size: var(--font-size-2); } /* Troubleshooting facts stay one click away, not on the card face. */ .source-actions-card__details > summary { width: fit-content; color: var(--secondary-10); font-size: var(--font-size-1); cursor: pointer; } .source-actions-card__details[open] > summary { margin-bottom: var(--space-2); } .source-actions-section__header--end { justify-content: flex-end; } .source-actions-audit__trail { margin: 0; color: var(--secondary-11); font-size: var(--font-size-2); overflow-wrap: anywhere; } .source-actions-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--secondary-6); background: var(--secondary-3); color: var(--secondary-11); font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .source-actions-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); } .source-actions-facts div { min-width: 0; } .source-actions-facts dt { color: var(--secondary-10); font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: 0.04em; } .source-actions-facts dd { margin: 0; color: var(--secondary-12); font-size: var(--font-size-2); overflow-wrap: anywhere; } .source-actions-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 var(--space-3); border-radius: var(--radius-3); border: 1px solid var(--secondary-6); background: var(--secondary-2); color: var(--secondary-12); font-size: var(--font-size-2); cursor: pointer; } .source-actions-button:hover:not(:disabled) { background: var(--secondary-3); } .source-actions-button:focus-visible, .source-actions-chip:focus-visible, .source-actions-tab:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } .source-actions-button:disabled, .source-actions-chip:disabled { opacity: 0.55; cursor: not-allowed; } .source-actions-button--primary { background: var(--secondary-12); border-color: var(--secondary-12); color: var(--secondary-1); } .source-actions-button--primary:hover:not(:disabled) { background: var(--secondary-11); } .source-actions-button--warning { border-color: var(--yellow-7, var(--secondary-6)); } .source-actions-button--ghost { background: transparent; } .source-actions-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; border-bottom: 1px solid var(--secondary-4); padding-bottom: var(--space-1); } .source-actions-tab { border: none; background: transparent; color: var(--secondary-11); padding: var(--space-1) var(--space-2); border-radius: var(--radius-2); cursor: pointer; font-size: var(--font-size-2); } .source-actions-tab--active { background: var(--secondary-3); color: var(--secondary-12); } .source-actions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .source-actions-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); background: var(--secondary-2); } .source-actions-row__main { flex: 1 1 auto; min-width: 0; } .source-actions-row__title { margin: 0; color: var(--secondary-12); font-size: var(--font-size-3); overflow-wrap: anywhere; } .source-actions-row__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--secondary-10); font-size: var(--font-size-1); } .source-actions-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--secondary-6); background: var(--secondary-3); color: var(--secondary-11); font-size: var(--font-size-1); white-space: nowrap; } .source-actions-status--succeeded { border-color: var(--green-7, var(--secondary-6)); } .source-actions-status--awaiting_approval { border-color: var(--yellow-7, var(--secondary-6)); } .source-actions-status--failed, .source-actions-status--reconciling, .source-actions-status--permission_changed, .source-actions-status--blocked { border-color: var(--red-7, var(--secondary-6)); } /* Chat receipt card: one filed request, drawn from its phase. Follows the ask_user card: 12px radius, primary tint while it waits on the reader, neutral once settled. The tone class comes from the phase. */ source-action-receipt { display: block; } .source-action-card { --card-border: var(--secondary-5); --card-bg: var(--secondary-1); --pill-bg: var(--secondary-3); --pill-fg: var(--secondary-11); box-sizing: border-box; display: grid; /* minmax(0, …): without it the lines table sets the column width and nothing wraps. */ grid-template-columns: minmax(0, 1fr); gap: var(--space-3); max-width: 44rem; margin: var(--space-2) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg); color: var(--secondary-12); font-size: var(--font-size-1-half); line-height: 1.5; } /* Same specificity as `.chat-messages p`, loaded later: the card keeps its own type. */ .source-action-card p { margin: 0; font-size: inherit; line-height: inherit; } .source-action-card--action { --card-border: var(--primary-6); --card-bg: var(--primary-2); --pill-bg: var(--primary-10); --pill-fg: var(--secondary-1); } .source-action-card--progress { --card-border: var(--primary-5); --card-bg: var(--primary-1); --pill-bg: var(--primary-3); --pill-fg: var(--primary-11); } .source-action-card--warning { --card-border: var(--warning-6); --card-bg: var(--warning-1); --pill-bg: var(--warning-3); --pill-fg: var(--warning-11); } .source-action-card--success { --pill-bg: var(--success-3); --pill-fg: var(--success-11); } .source-action-card--closed { --card-border: var(--secondary-4); } .source-action-card--danger { --card-border: var(--danger-6); --card-bg: var(--danger-1); --pill-bg: var(--danger-3); --pill-fg: var(--danger-11); } .source-action-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } /* The title is the way into the full review, so it reads as a link. */ .source-action-card__title { min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--secondary-12); font: inherit; font-size: var(--font-size-2); font-weight: var(--font-weight-medium); line-height: 1.35; text-align: left; overflow-wrap: anywhere; cursor: pointer; } .source-action-card__title:hover { text-decoration: underline; text-underline-offset: 3px; } .source-action-card__title:focus-visible { outline: 2px solid var(--primary-8); outline-offset: 2px; border-radius: 2px; } .source-action-card--closed .source-action-card__title { color: var(--secondary-11); } .source-action-card .source-action-card__meta { margin-top: calc(var(--space-2) * -1); color: var(--secondary-10); font-size: var(--font-size-1); overflow-wrap: anywhere; } .source-action-card__pill { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--pill-bg); color: var(--pill-fg); font-size: var(--font-size-1); font-weight: var(--font-weight-medium); white-space: nowrap; } .source-action-card__status { color: var(--secondary-12); } .source-action-card--closed .source-action-card__status { color: var(--secondary-11); } .source-action-card__delta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--secondary-5); border-radius: var(--radius-3); background: var(--secondary-1); } .source-action-card__delta div { display: contents; } .source-action-card__delta dt { color: var(--secondary-10); font-size: var(--font-size-1); line-height: 1.7; } .source-action-card__delta dd { margin: 0; } /* The chat's markdown table rules (block display, bottom margin, header fill) are for prose tables; the card's line list stays a plain table. */ .source-action-card .source-action-card__lines { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: var(--font-size-1); font-variant-numeric: tabular-nums; } .source-action-card .source-action-card__lines th { background: none; padding: 0 var(--space-2) var(--space-1); border-bottom: 1px solid var(--secondary-5); color: var(--secondary-10); font-weight: var(--font-weight-medium); text-align: left; } .source-action-card .source-action-card__lines tr { background: none; } /* chat.css gives mobile markdown cells min-width: 45vw; four of those overflow the card. */ .source-action-card .source-action-card__lines th, .source-action-card .source-action-card__lines td { min-width: 0; max-width: none; } .source-action-card .source-action-card__lines td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--secondary-4); vertical-align: top; } .source-action-card__lines tr:last-child td { border-bottom: 0; } .source-action-card .source-action-card__lines code { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: anywhere; } .source-action-card__qty { text-align: right; width: 3.5em; } .source-action-card .source-action-card__error { color: var(--danger-11); font-size: var(--font-size-1); } .source-action-card__details { display: grid; gap: var(--space-2); } .source-action-card__details > summary { width: fit-content; color: var(--secondary-11); font-size: var(--font-size-1); cursor: pointer; } .source-action-card__details[open] > summary { margin-bottom: var(--space-2); } .source-action-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .source-action-card__actions .source-actions-button { min-height: 34px; font-size: var(--font-size-1-half); } @media (max-width: 768px) { .source-action-card { padding: var(--space-3); } .source-action-card__delta { grid-template-columns: minmax(0, 1fr); gap: 0; } .source-action-card__delta dd + dt, .source-action-card__delta div + div dt { margin-top: var(--space-2); } .source-action-card__actions .source-actions-button { min-height: 44px; } } /* Review */ .source-actions-review { display: flex; flex-direction: column; gap: var(--space-3); } .source-actions-review__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .source-actions-review__title { margin: 0 0 var(--space-1); font-size: var(--font-size-5); color: var(--secondary-12); } .source-actions-review__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--secondary-10); font-size: var(--font-size-2); } .source-actions-review__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); } .source-actions-review__facts div { min-width: 0; } .source-actions-review__facts dt { color: var(--secondary-10); font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: 0.04em; } .source-actions-review__facts dd { margin: 0; color: var(--secondary-12); overflow-wrap: anywhere; } .source-actions-hash { font-size: var(--font-size-1); overflow-wrap: anywhere; } .source-actions-review__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .source-actions-review__consequence { flex-basis: 100%; margin: 0 0 var(--space-1); color: var(--secondary-11); font-size: var(--font-size-2); line-height: 1.5; } /* * The decision point stays on screen. The review is long, so Approve and Reject * must not sit below the fold: the bar sticks to the bottom of the viewport while * the review is in view, and scrolls away with it when the review ends. */ .source-actions-review__decisionbar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding: var(--space-3); background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); box-shadow: var(--surface-raised-shadow, 0 6px 16px -12px rgba(0, 0, 0, 0.35)); } .source-actions-review__state { margin: 0; color: var(--secondary-12); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); line-height: 1.5; } .source-actions-review__delta { margin: 0; display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 2px var(--space-3); font-size: var(--font-size-2); } .source-actions-review__delta dt { color: var(--secondary-10); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--font-size-1); } .source-actions-review__delta dd { margin: 0; color: var(--secondary-12); line-height: 1.5; overflow-wrap: anywhere; } @media (max-width: 640px) { .source-actions-review__delta { grid-template-columns: 1fr; } } /* The request as a scannable change table: labels first, exact values second. */ .source-actions-review__change { margin: 0 0 var(--space-3); display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 2px var(--space-3); } .source-actions-review__change dt { color: var(--secondary-10); overflow-wrap: anywhere; } .source-actions-review__change dd { margin: 0; color: var(--secondary-12); overflow-wrap: anywhere; } .source-actions-review__lines { width: 100%; border-collapse: collapse; font-size: var(--font-size-2); } .source-actions-review__lines caption { text-align: left; color: var(--secondary-10); font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: var(--space-1); } .source-actions-review__lines th, .source-actions-review__lines td { border-bottom: 1px solid var(--secondary-4); padding: var(--space-1) var(--space-2); text-align: left; vertical-align: top; overflow-wrap: anywhere; } .source-actions-review__lines th { color: var(--secondary-10); font-weight: var(--font-weight-medium); } .source-actions-review__sections { display: flex; flex-direction: column; gap: var(--space-2); } .source-actions-review__section { border: 1px solid var(--secondary-4); border-radius: var(--radius-3); background: var(--secondary-2); padding: var(--space-2) var(--space-3); } .source-actions-review__section > summary { cursor: pointer; color: var(--secondary-12); font-size: var(--font-size-3); } .source-actions-json { padding: var(--space-2) 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-2); color: var(--secondary-12); } .source-actions-json__map { margin: 0; display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 2px var(--space-3); } .source-actions-json__map dt { color: var(--secondary-10); overflow-wrap: anywhere; } .source-actions-json__map dd { margin: 0; min-width: 0; } .source-actions-json__list { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: 2px; } .source-actions-json__string { background: none; color: var(--secondary-12); padding: 0; overflow-wrap: anywhere; } .source-actions-json__number { color: var(--blue-11, var(--secondary-12)); } .source-actions-json__boolean { color: var(--purple-11, var(--secondary-12)); } .source-actions-json__null, .source-actions-json__missing, .source-actions-json__empty { color: var(--secondary-9); font-style: italic; } .source-actions-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .source-actions-events__item { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; padding: var(--space-1) 0; border-bottom: 1px dashed var(--secondary-4); } .source-actions-events__kind { color: var(--secondary-12); font-weight: 600; } .source-actions-events__actor, .source-actions-events time { color: var(--secondary-10); font-size: var(--font-size-1); } .source-actions-events__summary { margin: 0; flex-basis: 100%; color: var(--secondary-11); font-size: var(--font-size-2); } /* Data */ .source-actions-tablepicker { max-width: 440px; } .source-actions-tablepicker__control { position: relative; display: flex; flex-direction: column; } .source-actions-field .source-actions-tablepicker__control input { padding-right: 40px; font-family: var(--font-mono, ui-monospace, monospace); } .source-actions-tablepicker__toggle { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: transparent; color: var(--secondary-10); cursor: pointer; } .source-actions-tablepicker__toggle[aria-expanded='true'] svg { transform: rotate(180deg); } .source-actions-tablepicker__popup { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: min(320px, 50dvh); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--secondary-6); border-radius: var(--radius-3); background: var(--secondary-1); box-shadow: var(--surface-raised-shadow, 0 6px 16px -12px rgba(0, 0, 0, 0.35)); } .source-actions-tablepicker__popup[hidden], .source-actions-tablepicker__popup [role='listbox'][hidden] { display: none; } .source-actions-tablepicker__group { position: sticky; top: -4px; padding: 8px 8px 4px; background: var(--secondary-1); color: var(--secondary-10); font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: 0.04em; } .source-actions-tablepicker__option { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 4px 8px; border-radius: var(--radius-2); color: var(--secondary-12); font-size: var(--font-size-2); cursor: pointer; /* Keeps a scrolled-to option below the sticky connection header. */ scroll-margin-top: 40px; } .source-actions-tablepicker__option:hover { background: var(--secondary-3); } .source-actions-tablepicker__option--active, .source-actions-tablepicker__option--active:hover { background: var(--secondary-4); } .source-actions-tablepicker__option--current .source-actions-tablepicker__name { font-weight: 600; } .source-actions-tablepicker__name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono, ui-monospace, monospace); } .source-actions-tablepicker__name mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .source-actions-tablepicker__meta { color: var(--secondary-10); font-size: var(--font-size-1); } .source-actions-tablepicker__empty { margin: 0; padding: 8px; color: var(--secondary-10); font-size: var(--font-size-2); } .source-actions-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); } .source-actions-chip { border: 1px solid var(--secondary-6); background: var(--secondary-2); color: var(--secondary-11); border-radius: 999px; padding: 4px 10px; font-size: var(--font-size-1); cursor: pointer; font-family: var(--font-mono, ui-monospace, monospace); } .source-actions-chip--active { background: var(--secondary-12); border-color: var(--secondary-12); color: var(--secondary-1); } .source-actions-tablemeta { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--secondary-10); font-size: var(--font-size-1); font-family: var(--font-mono, ui-monospace, monospace); } .source-actions-tablewrap { min-width: 0; max-width: 100%; max-height: min(420px, 45dvh); padding-bottom: var(--space-2); overflow: auto; overscroll-behavior: contain; isolation: isolate; border: 1px solid var(--secondary-4); border-radius: var(--radius-3); } .source-actions-tablewrap:focus-visible { outline: 2px solid var(--primary-8); outline-offset: 2px; } .source-actions-table { border-collapse: collapse; width: 100%; font-size: var(--font-size-2); } .source-actions-table th, .source-actions-table td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--secondary-4); vertical-align: top; white-space: nowrap; } /* Bounded cells: showing exact values is the point of this view, so wrap very long values instead of clipping them against the dialog frame. Short values stay on one line so rows remain compact and scannable. */ .source-actions-table td { white-space: nowrap; } .source-actions-cell--wide { display: inline-block; min-width: 180px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; vertical-align: top; } .source-actions-table th { position: sticky; top: 0; z-index: 1; background: var(--secondary-2); color: var(--secondary-11); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-1); } .source-actions-table__index { width: 1%; color: var(--secondary-9); font-variant-numeric: tabular-nums; text-align: right; } /* The row the latest write named. Colour carries the mark, and the badge text beside the matched value repeats it for readers who cannot see colour. */ /* The marked cell holds the value and its text badge, so it may wrap. */ .source-actions-tabletools { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); } .source-actions-cell { color: var(--secondary-12); } .source-actions-cell--null, .source-actions-cell--missing, .source-actions-cell--empty { color: var(--secondary-9); font-style: italic; } /* Recent writes and audit */ /* One request's decision record on the History tab. */ .source-actions-history { margin: var(--space-1) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; } .source-actions-history__item { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); color: var(--secondary-11); font-size: var(--font-size-2); } .source-actions-history__kind { color: var(--secondary-12); font-weight: var(--font-weight-medium); } /* One write's own control, so any listed write can be found in the table. */ /* The request an audit row belongs to, so the row identifies itself. */ /* The patch: what one write changed */ .source-actions-audit__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); } /* The undo outcome stays where the undo was requested. */ .source-actions-audit__notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--green-7, var(--secondary-6)); border-radius: var(--radius-2); background: var(--secondary-2); } .source-actions-audit__notice p { margin: 0; color: var(--secondary-12); font-size: var(--font-size-2); line-height: 1.5; } .source-actions-audit__more { display: flex; justify-content: center; } /* Forms */ .source-actions-form { display: flex; flex-direction: column; gap: var(--space-3); } .source-actions-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); } .source-actions-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .source-actions-field--wide { grid-column: 1 / -1; } .source-actions-field label { color: var(--secondary-11); font-size: var(--font-size-1); } .source-actions-field input, .source-actions-field select { height: 38px; border-radius: var(--radius-3); border: 1px solid var(--secondary-6); background: var(--secondary-1); color: var(--secondary-12); padding: 0 var(--space-2); font-size: var(--font-size-2); } .source-actions-field input:focus-visible, .source-actions-field select:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; } .source-actions-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .source-actions-settings { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--secondary-4); } .source-actions-settings input { min-width: 0; width: 100%; } /* Grants */ .source-actions-grants { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .source-actions-grant { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: var(--space-3); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); background: var(--secondary-2); padding: var(--space-3); } .source-actions-grant__identity { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .source-actions-grant__name { margin: 0; color: var(--secondary-12); display: flex; align-items: center; gap: var(--space-2); } .source-actions-grant__email { margin: 0; color: var(--secondary-10); font-size: var(--font-size-1); overflow-wrap: anywhere; } .source-actions-grant__controls { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; } .source-actions-grant__group { border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--space-1) var(--space-2); margin: 0; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .source-actions-grant__group legend { color: var(--secondary-10); font-size: var(--font-size-1); padding: 0 4px; } .source-actions-check { display: inline-flex; align-items: center; gap: 6px; color: var(--secondary-12); font-size: var(--font-size-2); min-height: 32px; } .source-actions-check input { width: 16px; height: 16px; } /* Reports: coverage, filters, visible warnings, and the aggregate table. */ @media (max-width: 768px) { .source-actions-panel { padding: var(--space-4) var(--space-3); } .source-actions-grant { grid-template-columns: 1fr; } .source-actions-row { flex-wrap: wrap; } .source-actions-row .source-actions-button { min-height: 44px; } .source-actions-button { min-height: 44px; } .source-actions-field input, .source-actions-field select { height: 44px; font-size: max(16px, var(--font-size-2)); } .source-actions-tablepicker { max-width: none; } .source-actions-tablepicker__toggle { width: 44px; height: 44px; } .source-actions-tablepicker__option { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .source-actions-panel * { animation: none !important; transition: none !important; } } /* Meta changeset review: a campaign → ad set → ad tree, field changes with their before and after values, and per-step run states. */ .source-actions-meta__summary { margin: 0; color: var(--secondary-11); font-size: var(--font-size-2); line-height: 1.5; } .source-actions-meta__tree { margin: var(--space-1) 0 0; padding: 0 0 0 var(--space-3); list-style: none; border-left: 1px solid var(--secondary-4); } .source-actions-meta__tree--root { padding-left: 0; border-left: 0; } .source-actions-meta__node { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0; min-width: 0; overflow-wrap: anywhere; } .source-actions-meta__node > details { flex: 1 1 100%; min-width: 0; } .source-actions-meta__node summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); cursor: pointer; } .source-actions-meta__kind { color: var(--secondary-10); font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: 0.04em; } .source-actions-meta__detail { color: var(--secondary-10); font-size: var(--font-size-1); } .source-actions-meta__targeting, .source-actions-meta__findings { margin: var(--space-1) 0; padding-left: var(--space-4); color: var(--secondary-11); font-size: var(--font-size-1); } .source-actions-meta__findings { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); } .source-actions-meta__updates, .source-actions-meta__steps { margin: var(--space-2) 0; padding: 0; list-style: none; } .source-actions-meta__update { padding: var(--space-2) 0; border-top: 1px solid var(--secondary-4); } .source-actions-meta__changes { margin: var(--space-1) 0 0; display: grid; gap: var(--space-1); } .source-actions-meta__changes div { display: grid; grid-template-columns: minmax(96px, 140px) 1fr; gap: var(--space-2); } .source-actions-meta__changes dt { color: var(--secondary-10); font-size: var(--font-size-1); } .source-actions-meta__changes dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); overflow-wrap: anywhere; } .source-actions-meta__before { color: var(--secondary-10); text-decoration: line-through; text-decoration-color: var(--secondary-7); } .source-actions-meta__after { color: var(--secondary-12); } .source-actions-meta__progress { width: 100%; height: 8px; accent-color: var(--primary-9, currentColor); } .source-actions-status--applied, .source-actions-status--verifying { border-color: var(--green-7, var(--secondary-6)); } .source-actions-status--skipped, .source-actions-status--executing, .source-actions-status--approved { border-color: var(--yellow-7, var(--secondary-6)); } .source-actions-status--needs_recovery { border-color: var(--red-7, var(--secondary-6)); } @media (max-width: 640px) { .source-actions-meta__changes div { grid-template-columns: 1fr; gap: 0; } } /* /css/components/simplified-guide-system.css */ /* Shared animation system for simplified guide components */ /* Animation keyframes */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes simpleFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-15px); max-height: 0; } to { opacity: 1; transform: translateY(0); max-height: 500px; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* /css/components/simplified-guide-container.css */ /* Simplified Guide Container Styles — Horizontal Pills Variant */ .simplified-guide-container { /* Match dashboard unified-input width (see AppElement styles). */ max-width: var(--container-4); margin: 0 auto; padding: var(--space-4); } .simplified-guide-container--thread { padding-top: var(--space-3); } .simplified-guide-container--dashboard { padding: var(--space-3) 0; } /* Header */ .guide-header { text-align: center; margin-bottom: var(--space-5); } .guide-title { font-size: var(--font-size-5); font-weight: var(--font-weight-bold); color: var(--secondary-12); margin: 0 0 var(--space-2) 0; line-height: var(--line-height-5); } .guide-description { font-size: var(--font-size-3); color: var(--secondary-11); margin: 0; line-height: var(--line-height-4); } /* Horizontal scrolling pills */ .pills-scroll { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) 0; margin-bottom: var(--space-4); /* Show a horizontal scrollbar when categories overflow. */ scrollbar-width: thin; scrollbar-color: var(--secondary-6) transparent; } .pills-scroll::-webkit-scrollbar { height: 6px; } .pills-scroll::-webkit-scrollbar-track { background: transparent; } .pills-scroll::-webkit-scrollbar-thumb { background: var(--secondary-6); border-radius: 999px; } .category-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); font-family: var(--default-font-family); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); color: var(--secondary-11); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background-color 0.12s var(--ease-out-cubic), border-color 0.12s var(--ease-out-cubic), color 0.12s var(--ease-out-cubic), box-shadow 0.12s var(--ease-out-cubic), opacity 0.12s var(--ease-out-cubic), transform 0.12s var(--ease-out-cubic), fill 0.12s var(--ease-out-cubic), stroke 0.12s var(--ease-out-cubic); } .category-pill:hover { background: var(--secondary-3); border-color: var(--secondary-6); color: var(--secondary-12); } .category-pill:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-3); border-color: var(--primary-9); } .category-pill.active { background: var(--primary-3); border-color: var(--primary-9); color: var(--primary-10); } .pill-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pill-icon svg { width: 100%; height: 100%; } .pill-label { line-height: 1; } /* Options popover */ .options-popover { padding: var(--space-4); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); animation: fadeInUp 0.2s var(--ease-out-cubic); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); } /* Dashboard specific adjustments */ .simplified-guide-container--dashboard .options-popover { margin-top: var(--space-2); } .simplified-guide-container--dashboard .options-grid { grid-template-columns: repeat(2, 1fr); } /* Thread specific adjustments */ .simplified-guide-container--thread .options-grid { grid-template-columns: 1fr; } .simplified-guide-container--thread option-item { padding: var(--space-3); } /* Mobile adjustments */ @media (max-width: 768px) { .simplified-guide-container { padding: var(--space-3); } .simplified-guide-container--dashboard { padding: var(--space-2) 0; } .guide-title { font-size: var(--font-size-4); } .guide-description { font-size: var(--font-size-2); } .pills-scroll { gap: var(--space-2); padding: var(--space-2) var(--space-1); margin: 0 calc(-1 * var(--space-3)) var(--space-3); padding-left: var(--space-3); padding-right: var(--space-3); } .category-pill { padding: var(--space-2) var(--space-3); font-size: var(--font-size-2); } .options-popover { padding: var(--space-3); } .options-grid { grid-template-columns: 1fr; gap: var(--space-2); } .simplified-guide-container--dashboard .options-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .guide-title { font-size: var(--font-size-3); } .category-pill { padding: var(--space-1-half) var(--space-2); font-size: var(--font-size-1); } .pill-icon { width: 14px; height: 14px; } } /* /css/components/memory-settings.css */ /* Memory Settings Component Styles */ .memory-section { max-width: 600px; } /* Section Header */ .memory-section-header { margin-bottom: var(--space-6); } .memory-section-header h3 { font-size: var(--font-size-5); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0 0 var(--space-2) 0; } .memory-section-header p { font-size: var(--font-size-3); color: var(--secondary-10); line-height: 1.5; margin: 0; } /* Memory Card */ .memory-card { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); box-shadow: var(--shadow-2); overflow: hidden; margin-bottom: var(--space-4); } /* Mobile responsive border radius */ @media (max-width: 768px) { .memory-card { border-radius: 6px; } } .memory-card-content { padding: var(--space-4); } .memory-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3); } .memory-card-header h4 { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0; } /* Edit button */ .memory-edit-btn { padding: var(--space-1) var(--space-2); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); border-radius: var(--radius-1); background: var(--secondary-3); border: 1px solid var(--secondary-4); color: var(--secondary-11); box-shadow: var(--shadow-1); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } @media (max-width: 768px) { .memory-edit-btn { border-radius: 4px; } } .memory-edit-btn:hover { background: var(--secondary-4); box-shadow: var(--shadow-2); } /* Memory display box */ .memory-display { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-1); padding: var(--space-3); font-size: var(--font-size-3); color: var(--secondary-11); line-height: 1.5; } @media (max-width: 768px) { .memory-display { border-radius: 3px; } } /* Empty state */ .memory-empty-state { padding: var(--space-6); text-align: center; } .memory-empty-icon { width: 48px; height: 48px; background: var(--secondary-3); border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-3) auto; } @media (max-width: 768px) { .memory-empty-icon { border-radius: 6px; } } .memory-empty-icon svg { color: var(--secondary-10); } .memory-empty-state h4 { font-size: var(--font-size-4); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0 0 var(--space-2) 0; } .memory-empty-state p { font-size: var(--font-size-3); color: var(--secondary-10); margin: 0 0 var(--space-4) 0; line-height: 1.5; } /* Create context button */ .memory-create-btn { background: var(--primary-11); color: var(--secondary-2); border: none; border-radius: var(--radius-2); padding: var(--space-2) var(--space-4); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-2); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } @media (max-width: 768px) { .memory-create-btn { border-radius: 6px; } } .memory-create-btn:hover { background: var(--primary-10); box-shadow: var(--shadow-4); transform: translateY(-1px); } /* Edit form */ .memory-edit-card { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); box-shadow: var(--shadow-2); padding: var(--space-4); margin-bottom: var(--space-4); } @media (max-width: 768px) { .memory-edit-card { border-radius: 6px; } } .memory-edit-header { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0 0 var(--space-3) 0; } .memory-textarea { width: 100%; background: var(--secondary-1); border: 1px solid var(--secondary-7); border-radius: var(--radius-2); padding: var(--space-3); font-size: var(--font-size-3); color: var(--secondary-12); line-height: 1.5; resize: vertical; min-height: 120px; font-family: inherit; } @media (max-width: 768px) { .memory-textarea { border-radius: 6px; } } .memory-form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); } .memory-cancel-btn { background: var(--secondary-3); border: 1px solid var(--secondary-4); color: var(--secondary-11); padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); font-size: var(--font-size-3); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } @media (max-width: 768px) { .memory-cancel-btn { border-radius: 4px; } } .memory-cancel-btn:hover { background: var(--secondary-4); } .memory-save-btn { background: var(--primary-11); color: var(--secondary-2); border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-2); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } @media (max-width: 768px) { .memory-save-btn { border-radius: 6px; } } .memory-save-btn:hover { background: var(--primary-10); box-shadow: var(--shadow-4); transform: translateY(-1px); } /* Organization Context */ .organization-context-card { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); box-shadow: var(--shadow-1); padding: var(--space-4); margin-bottom: var(--space-4); } @media (max-width: 768px) { .organization-context-card { border-radius: 6px; } } .organization-context-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .organization-context-icon { width: 32px; height: 32px; background: var(--secondary-4); border-radius: var(--radius-1); display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .organization-context-icon { border-radius: 3px; } } .organization-context-icon svg { color: var(--secondary-10); } .organization-context-header h4 { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0; } .organization-context-display { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-1); padding: var(--space-3); font-size: var(--font-size-3); color: var(--secondary-11); line-height: 1.5; margin-bottom: var(--space-2); } @media (max-width: 768px) { .organization-context-display { border-radius: 3px; } } .organization-context-note { font-size: var(--font-size-2); color: var(--secondary-10); margin: 0; line-height: 1.4; } /* ChatGPT Import Section */ .chatgpt-import-section { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); box-shadow: var(--shadow-1); overflow: hidden; } @media (max-width: 768px) { .chatgpt-import-section { border-radius: 6px; } } .chatgpt-import-header { cursor: pointer; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); transition: background-color 0.2s ease; } .chatgpt-import-header.expanded { background: var(--secondary-3); } .chatgpt-import-chevron { transition: transform 0.2s ease; color: var(--secondary-10); } .chatgpt-import-chevron.expanded { transform: rotate(90deg); } .chatgpt-import-title { margin: 0; font-weight: var(--font-weight-medium); font-size: var(--font-size-3); color: var(--secondary-12); } .chatgpt-import-content { padding: var(--space-4); border-top: 1px solid var(--secondary-4); } .chatgpt-import-intro { font-size: var(--font-size-3); color: var(--secondary-11); margin: 0 0 var(--space-4) 0; line-height: 1.5; } /* Import steps */ .import-step { margin-bottom: var(--space-3); } .import-step:first-of-type { margin-bottom: var(--space-4); } .import-step-container { display: flex; align-items: flex-start; gap: var(--space-3); } .import-step-number { width: 24px; height: 24px; background: var(--primary-3); color: var(--primary-10); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2); font-weight: var(--font-weight-medium); flex-shrink: 0; } .import-step-content { flex: 1; } .import-step-title { font-size: var(--font-size-3); color: var(--secondary-12); margin: 0; font-weight: var(--font-weight-medium); } /* Code block for step 1 */ .chatgpt-prompt-block { background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-1); padding: var(--space-3); position: relative; font-family: 'SF Mono', Monaco, monospace; font-size: var(--font-size-2); line-height: 1.5; color: var(--secondary-11); margin-top: var(--space-2); white-space: pre-line; word-wrap: break-word; text-align: left; } @media (max-width: 768px) { .chatgpt-prompt-block { border-radius: 3px; } } .chatgpt-copy-btn { position: absolute; top: var(--space-2); right: var(--space-2); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-1); padding: var(--space-1); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--secondary-10); box-shadow: var(--shadow-1); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } @media (max-width: 768px) { .chatgpt-copy-btn { border-radius: 3px; } } .chatgpt-copy-btn:hover { background: var(--secondary-3); box-shadow: var(--shadow-2); } /* /css/components/compaction.css */ /* Compaction warning banner and modal */ .compaction-banner { display: flex; align-items: center; gap: 6px; padding: 4px 12px; width: 100%; box-sizing: border-box; margin: 0 0 -1px 0; background: var(--secondary-1); border: 1px solid var(--secondary-6); border-bottom: none; border-radius: 11.55px 11.55px 0 0; font-size: 12px; color: var(--secondary-11); line-height: 1.4; } .compaction-banner__icon { font-size: 13px; flex-shrink: 0; } .compaction-banner__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .compaction-banner__compress-btn, .compaction-banner__handoff-btn { background: none; border: none; color: var(--secondary-11); cursor: pointer; text-decoration: underline; font-size: 12px; font-weight: 500; padding: 0; } .compaction-modal-overlay { position: fixed; inset: 0; background: var(--black-5); display: flex; align-items: center; justify-content: center; z-index: var(--z-index-9); } .compaction-modal { background: var(--secondary-1); border-radius: 12px; padding: 24px; max-width: 480px; width: 90%; box-shadow: 0 8px 32px var(--black-3); border: 1px solid var(--secondary-6); } .compaction-modal__title { font-size: 16px; font-weight: 600; margin: 0 0 8px 0; color: var(--secondary-12); } .compaction-modal__help { font-size: 14px; color: var(--secondary-11); margin: 0 0 16px 0; } .compaction-modal__input { width: 100%; padding: 8px 12px; border: 1px solid var(--secondary-6); border-radius: 8px; font-size: 14px; box-sizing: border-box; background: var(--secondary-2); color: var(--secondary-12); } .compaction-modal__input::placeholder { color: var(--secondary-10); } .compaction-modal__input:focus { outline: none; border-color: var(--secondary-8); } .compaction-modal__error { color: #d32f2f; font-size: 13px; margin: 8px 0; } .compaction-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .compaction-modal__btn { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; } .compaction-modal__btn--cancel { background: var(--secondary-3); color: var(--secondary-11); } .compaction-modal__btn--submit { background: var(--secondary-12); color: var(--secondary-1); } .compaction-modal__btn--submit:disabled { opacity: 0.5; cursor: not-allowed; } .handoff-ask-modal__textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--secondary-6); border-radius: 8px; font-size: 14px; box-sizing: border-box; background: var(--secondary-2); color: var(--secondary-12); resize: vertical; font-family: inherit; line-height: 1.5; } .handoff-ask-modal__textarea::placeholder { color: var(--secondary-10); } .handoff-ask-modal__textarea:focus { outline: none; border-color: var(--secondary-8); } /* Handoff loading state */ .handoff-loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-2); text-align: center; } .handoff-loading__spinner { width: 32px; height: 32px; border: 3px solid var(--secondary-4); border-top-color: var(--secondary-11); border-radius: 50%; animation: handoff-spin 0.8s linear infinite; } .handoff-loading__text { margin: 0; font-size: 13px; color: var(--secondary-10); line-height: 1.5; max-width: 340px; } @keyframes handoff-spin { to { transform: rotate(360deg); } } /* Handoff review modal */ .handoff-review-modal { background: var(--secondary-1); border-radius: 12px; padding: 24px; max-width: 720px; width: 92%; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 32px var(--black-3); border: 1px solid var(--secondary-6); } .handoff-review-modal__editor { border: 1px solid var(--secondary-6); border-radius: 8px; margin: 12px 0; min-height: 200px; max-height: 400px; overflow-y: auto; } .handoff-review-modal__destination { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; padding: 12px; background: var(--secondary-2); border-radius: 8px; } .handoff-review-modal__radio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--secondary-12); cursor: pointer; } .handoff-review-modal__workspace-select { padding: 6px 10px; border: 1px solid var(--secondary-6); border-radius: 6px; background: var(--secondary-1); color: var(--secondary-12); font-size: 14px; margin-left: 24px; } .handoff-review-modal__field-label { display: block; font-size: 13px; font-weight: 500; color: var(--secondary-11); margin-bottom: 4px; } .handoff-review-modal__title-section { margin: 8px 0 4px; } .handoff-review-modal__title-input { width: 100%; padding: 6px 10px; background: var(--secondary-2); color: var(--secondary-12); border: 1px solid var(--secondary-7); border-radius: var(--radius-3); font-size: var(--font-size-3); &::placeholder { color: var(--secondary-8); } } .handoff-review-modal__editor minimal-markdown-editor { display: block; min-height: 200px; } .handoff-review-modal__sources { margin: 12px 0; } .handoff-review-modal__sources-label { font-size: 13px; font-weight: 500; color: var(--secondary-11); margin-bottom: 8px; } .handoff-review-modal__chips { display: flex; flex-wrap: wrap; gap: 8px; } .handoff-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 16px; border: 1px solid var(--secondary-6); background: var(--secondary-2); color: var(--secondary-11); font-size: 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .handoff-chip--selected { background: var(--secondary-11); color: var(--secondary-1); border-color: var(--secondary-11); } .handoff-chip__kind { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; background: var(--secondary-4); color: var(--secondary-10); margin-right: 6px; } .handoff-chip--selected .handoff-chip__kind { background: rgba(255, 255, 255, 0.2); color: var(--secondary-1); } /* Marker divider in message list */ .compaction-marker-divider { display: flex; align-items: center; gap: 12px; padding: 12px 0; margin: 8px 0; color: var(--secondary-10); font-size: 12px; } .compaction-marker-divider__line { flex: 1; height: 1px; background: var(--secondary-6); } /* /css/components/sidebars.css */ base-source-cards { display: flex; flex-direction: column; height: 100%; overflow-y: auto; } /* its parents are flex containers and this manually cascades the flex properties down */ cami-desktop-documents, cami-chats-panel { flex: 1; display: flex; } .source-cards__content { display: flex; flex-wrap: wrap; gap: var(--space-3); overflow-y: auto; } .source-cards__content>p:first-child { flex-basis: 100%; } .source-cards__content>.card__source { flex-basis: calc(50% - var(--space-3)); min-width: var(--container-narrow-1); max-width: 100%; } .source-cards__grid { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; overflow-y: auto; } .source-cards__grid>.card__source { flex-basis: calc(50% - var(--space-3)); min-width: var(--space-15); max-width: 100%; } .source-card--link-list { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--secondary-6); } .source-card--link-list ul { padding-inline: var(--space-3); margin: var(--space-2); } .source-card--link { font-size: var(--font-size-2); } .source-header { display: inline-flex; align-items: center; padding: var(--space-1); user-select: none; font-size: var(--font-size-2); border-radius: var(--radius-3); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .source-header span { display: flex; align-items: center; } .caret-icon { display: flex; align-items: center; } .caret-icon svg { vertical-align: middle; } .left-sidebar { grid-area: left-sidebar; display: flex; flex-direction: column; align-items: center; } .right-sidebar { grid-area: right-sidebar; overflow: hidden; display: flex; flex-direction: column; height: 100%; width: var(--right-sidebar-width, 100%); max-width: none; } .right-sidebar__resizer { display: none; } /* Tablet-specific max-width for right sidebar */ @media (max-width: 1280px) { .right-sidebar { width: var(--right-sidebar-width, 100%); max-width: none; } } /* ───────────────────────────────────────────────────────── Theme Toggle Icons - 2 state (dark/light) Icon visibility based on user PREFERENCE (data-theme-preference), not the resolved theme (body.dark/light) ───────────────────────────────────────────────────────── */ .sidebar__button--theme .sidebar__icon { display: inline-flex; align-items: center; justify-content: center; gap: 0; } /* Hide all theme icons by default */ .sidebar__button--theme [data-theme-icon] { display: none; } /* Show icon matching current preference */ [data-theme-preference="dark"] .sidebar__button--theme [data-theme-icon="moon"] { display: inline; } [data-theme-preference="light"] .sidebar__button--theme [data-theme-icon="sun"] { display: inline; } /* Desktop: Fix right-sidebar to viewport */ @media (min-width: 769px) { .right-sidebar { position: fixed; right: 0; top: 0; width: var(--right-sidebar-width); height: 100vh; height: 100svh; overflow-y: auto; display: flex; flex-direction: column; background-color: var(--secondary-2); border-left: 1px solid var(--secondary-3); z-index: var(--z-index-5); transition: width var(--duration-slow) var(--ease-out-strong); } body.is-resizing-sidebar .right-sidebar { transition: none; } .right-sidebar__resizer { display: block; position: absolute; top: 0; left: -4px; width: 8px; height: 100%; cursor: col-resize; touch-action: none; z-index: var(--z-index-10); } /* ============================================================================ Doc-First Layout: Sidebar anchored to LEFT instead of RIGHT ============================================================================ */ .container--doc-first .right-sidebar { right: auto; left: var(--nav-rail-width); border-left: none; border-right: 1px solid var(--secondary-3); } /* Move resizer to the RIGHT edge of the left-anchored sidebar */ .container--doc-first .right-sidebar__resizer { left: auto; right: -4px; } .right-sidebar__resizer::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 32px; border-radius: var(--radius-2); background-color: var(--secondary-5); transform: translate(-50%, -50%); } .right-sidebar__resizer:hover::after, body.is-resizing-sidebar .right-sidebar__resizer::after { background-color: var(--primary-8); } } /* REMOVED: desktop-document-sidebar and document-conversations - documents now use chat sidebar */ .sidebar__content, sidebar-threads, sidebar-sourcecards, .right-sidebar base-thread, .right-sidebar base-source-cards, aside { display: flex; flex-direction: column; flex: 1 1 auto; overflow: hidden; min-height: 0; } @media (min-width: 769px) { .sidebar { font-size: var(--font-size-3); padding: var(--space-2) var(--space-4); width: var(--container-narrow-3); background-color: var(--secondary-2); /* Paint-only: `all` also animated width, padding and border, which relayouts the sidebar on every hover and selection change. */ transition: background-color var(--duration-slow) var(--ease-out-strong), border-color var(--duration-slow) var(--ease-out-strong), color var(--duration-slow) var(--ease-out-strong); border: 1px solid var(--secondary-2); flex: 1; } .sidebar__right { font-size: var(--font-size-2); width: var(--right-sidebar-width, var(--container-1)); background-color: var(--secondary-2); transition: transform 0.3s ease-in-out, display 0s 0.3s; border-left: 1px solid var(--secondary-3); border-top: 1px solid var(--secondary-3); padding: var(--space-2) var(--space-2-half); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .sidebar__right:not(.sidebar--collapsed) { min-width: var(--sidebar-min-width, 240px); } .sidebar__right.sidebar--expanded { width: var(--right-sidebar-width, var(--container-1)); } .sidebar__header { margin-bottom: var(--space-1); padding: 0 var(--space-1); display: flex; justify-content: center; align-items: center; width: 100%; } .sidebar__logo { width: 40px; height: 40px; } .sidebar__logo svg { width: 100%; height: 100%; } .sidebar__tabs { display: flex; align-items: center; flex-grow: 1; justify-content: flex-start; min-height: calc(var(--space-6) + var(--space-2)); } .sidebar__tab { flex: 0 1 auto; padding: var(--space-2) var(--space-3); border: none; background: none; cursor: pointer; font-size: var(--font-size-2); white-space: nowrap; color: var(--primary-12); border-radius: var(--radius-3) var(--radius-3) 0 0; transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); position: relative; } .sidebar__tab.tab--active { background-color: var(--primary-3); font-weight: var(--font-weight-medium); color: var(--primary-11); } .sidebar__tab.tab--active:hover { background-color: var(--primary-4); } .sidebar__tab.tab--active:active { background-color: var(--primary-5); } .sidebar__tab.tab--active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--primary-9); border-radius: var(--radius-1); } .sidebar__collapse-btn { background: none; border: none; cursor: pointer; padding: var(--space-2); display: flex; align-items: center; justify-content: center; } .sidebar__content { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; height: 100%; padding: var(--space-3) 0; } .sidebar--chat { height: 100vh; height: 100svh; display: flex; flex-direction: column; } .sidebar--chat base-thread { display: flex; flex-direction: column; } .sidebar--chat base-thread-2 { display: flex; flex-direction: column; height: 100%; } .sidebar.sidebar--chat { padding: var(--space-1); } .sidebar--sub-menu { padding-left: var(--space-4); padding-right: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); background-color: transparent; width: var(--container-0); } .sidebar__menu { list-style: none; } .sidebar__button { display: flex; align-items: center; justify-content: flex-start; background-color: transparent; border: none; color: var(--primary-12); text-align: left; width: 100%; cursor: var(--cursor-link); font-weight: var(--font-weight-regular); transition: background-color 0.3s; border-radius: var(--radius-3); padding: var(--space-1); } .sidebar__button:hover { background-color: var(--primary-9); } .sidebar__button:active { background-color: var(--primary-8); } .sidebar__icon { margin-top: var(--space-4); margin-left: var(--space-3); margin-right: var(--space-6); margin-bottom: var(--space-4); border: none; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: center; stroke: var(--primary-1); } .sidebar__button--active path { stroke: var(--primary-11); } .sidebar__button--active .sidebar__text { color: var(--primary-11); } .sidebar__icon--logo path { fill: var(--primary-1); fill-rule: evenodd; } .sidebar__icon--fill path { fill: var(--primary-1); stroke: none; } .sidebar__button--active .sidebar__icon--fill path { fill: var(--primary-11); } .sidebar__text { font-size: var(--font-size-2); color: var(--primary-1); } .sidebar__header { margin-bottom: var(--space-2); padding: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; gap: var(--space-2); position: relative; } .sidebar__header.chat-nav-sidebar__header { padding: 0 var(--space-2); } .sidebar__header--documents { padding: 0 var(--space-2-half); } .sidebar__link--signout { font-size: var(--font-size-3); color: var(--secondary-11); text-decoration: none; } .sidebar__link--signout:hover { color: var(--primary-9); } .sidebar--narrow { display: flex; flex-direction: column; height: 100%; width: var(--nav-rail-width); padding: var(--space-2) var(--space-2); background-color: var(--secondary-2); gap: var(--space-1); border: 1px solid var(--secondary-4); box-shadow: var(--shadow-2); /* Must match .nav-rail--collapsed.sidebar--narrow and the container grid. The collapsed rule is class-based, so an unmatched baseline here made the rail expand on 0.2s ease-out while the grid took 0.28s ease-out-strong, which left the rail trailing the content column mid-expand. */ transition: width var(--duration-slow) var(--ease-out-strong), padding var(--duration-slow) var(--ease-out-strong); overflow: visible; /* allow collapse button to extend to the right */ } .sidebar--narrow .sidebar__bottom-group { margin-top: auto; } .sidebar--narrow .sidebar__icon { margin: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; border: none; cursor: pointer; background-repeat: no-repeat; background-position: center; color: currentColor; stroke: currentColor; transition: stroke 0.3s ease; } .sidebar--narrow > .sidebar__button { display: flex; align-items: center; flex-direction: row; justify-content: flex-start; width: 100%; border: none; font-size: var(--font-size-3); color: var(--secondary-11); background-color: transparent; gap: var(--space-2); transition: background-color 0.3s ease, color 0.3s ease; padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); } .sidebar--narrow > .sidebar__button:hover { background-color: var(--secondary-3); color: var(--secondary-10); } .sidebar--narrow > .sidebar__button:hover .sidebar__icon { stroke: currentColor; } .sidebar--narrow .sidebar__text { color: currentColor; flex: 1; display: inline-flex; align-items: center; line-height: 1.2; min-width: 0; white-space: nowrap; } .sidebar--narrow .sidebar__plan-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; height: 14px; padding: 0 calc(var(--space-1) * 0.75); border-radius: 999px; border: 1px solid var(--secondary-5); background: var(--secondary-3); color: var(--secondary-11); font-size: var(--font-size-0); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-1); line-height: 1; text-transform: uppercase; } .sidebar--narrow .sidebar__plan-badge--guest { background: var(--warning-4); border-color: var(--warning-6); color: var(--warning-11); } .sidebar--narrow .sidebar__plan-badge--pro { background: var(--success-4); border-color: var(--success-6); color: var(--success-11); } .sidebar--narrow .sidebar__plan-badge--team { background: var(--primary-4); border-color: var(--primary-6); color: var(--primary-11); } .nav-rail--collapsed.sidebar--narrow .sidebar__plan-badge { display: none; } .sidebar--narrow > .sidebar__button--active { background-color: var(--primary-3); color: var(--primary-11); box-shadow: var(--shadow-2); } .sidebar--narrow > .sidebar__button--active .sidebar__icon { stroke: currentColor; } .nav-rail--collapsed.sidebar--narrow { padding: var(--space-2); transition: width var(--duration-slow) var(--ease-out-strong); } .nav-rail--collapsed.sidebar--narrow > .sidebar__button { justify-content: center; padding: var(--space-2); } .nav-rail--collapsed.sidebar--narrow .sidebar__header { justify-content: center; padding-inline: 0; } .nav-rail--collapsed.sidebar--narrow .sidebar__header .sidebar__logo { transition: opacity 0.2s ease; } .nav-rail--collapsed.sidebar--narrow .sidebar__header .sidebar__collapse-btn { position: absolute; inset: 0; margin: auto; display: flex; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1; } .nav-rail--collapsed.sidebar--narrow .sidebar__header:hover .sidebar__collapse-btn, .nav-rail--collapsed.sidebar--narrow .sidebar__header:focus-within .sidebar__collapse-btn { opacity: 1; pointer-events: auto; } .nav-rail--collapsed.sidebar--narrow .sidebar__header:hover .sidebar__logo { opacity: 0; pointer-events: none; } .nav-rail--collapsed.sidebar--narrow .sidebar__icon { margin: 0; } .nav-rail--collapsed.sidebar--narrow .sidebar__text { display: none; } /* With the labels hidden, the approvals count sits on the icon's corner. */ .nav-rail--collapsed.sidebar--narrow > .sidebar__button:has(.sidebar__count) { position: relative; } .nav-rail--collapsed.sidebar--narrow .sidebar__count { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px var(--secondary-1); } /* Ensure icons inherit current color (override generic rules that set white) */ .sidebar--narrow .sidebar__icon svg, .sidebar--narrow .sidebar__icon svg path, .sidebar--narrow > .sidebar__button svg path { stroke: currentColor !important; } .sidebar--narrow .sidebar__header { padding: var(--space-2); } } @media (max-width: 768px) { .sidebar { top: 0; left: 0; right: 0; bottom: 0; font-size: var(--font-size-3); width: 100%; max-width: 100%; background-color: var(--secondary-3); height: 100vh; height: 100svh; max-height: 100vh; max-height: 100svh; float: none; position: fixed; overflow-y: auto; transition: transform 0.3s ease-in-out, display 0s 0.3s; border: none; display: flex; flex-direction: column; padding: var(--space-1) var(--space-4); } .sidebar.sidebar--chat { padding: var(--space-1); } .sidebar--sub-menu { padding-left: var(--space-4); padding-right: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); background-color: transparent; width: var(--container-0); } .sidebar__menu { list-style: none; } .sidebar__button { display: flex; align-items: center; justify-content: flex-start; background-color: transparent; border: none; color: var(--primary-1); text-align: left; width: 100%; cursor: var(--cursor-link); font-weight: var(--font-weight-regular); transition: background-color 0.3s; border-radius: var(--radius-3); padding: var(--space-1); } .sidebar__button:hover { background-color: var(--primary-1); } .sidebar__button:active { background-color: var(--primary-1); } .sidebar__icon { margin-top: var(--space-4); margin-left: var(--space-3); margin-right: var(--space-6); margin-bottom: var(--space-4); border: none; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: center; stroke: var(--primary-1); } .sidebar__button--active path { stroke: var(--primary-11); } .sidebar__text--active .sidebar__text { color: var(--primary-11); } .sidebar__icon--logo path { fill: var(--primary-1); fill-rule: evenodd; } .sidebar__icon--fill path { fill: var(--primary-1); stroke: none; } .sidebar__button--active .sidebar__icon--fill path { fill: var(--primary-11); } .sidebar__text { font-size: var(--font-size-2); color: var(--primary-1); } .sidebar__header { display: flex; align-items: center; } .sidebar__link--signout { font-size: var(--font-size-3); color: var(--secondary-11); text-decoration: none; } .sidebar__link--signout:hover { color: var(--primary-1); } .sidebar--narrow { display: none; } } .sidebar--expanded { width: var(--right-sidebar-width, 100%); } /* Requests waiting for the reader's approval, beside Approvals in the rail and mobile menu. */ .sidebar__count { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary-9); color: var(--primary-1); font-size: var(--font-size-0, 11px); font-weight: var(--font-weight-medium, 600); font-variant-numeric: tabular-nums; line-height: 1; } .sidebar--collapsed { width: 100%; /* Take full width of parent, parent will be narrow */ } .sidebar__right.sidebar--collapsed { display: block; padding: var(--space-2); } /* Desktop: Adjust right-sidebar width when collapsed */ @media (min-width: 769px) { .right-sidebar:has(.sidebar--collapsed) { width: var(--right-sidebar-collapsed-width); min-width: var(--right-sidebar-collapsed-width); } } .sidebar__rail { height: 100%; display: flex; flex-direction: column; align-items: center; } .sidebar__collapse-btn { background-color: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: var(--z-index-9); padding: var(--space-2); color: var(--secondary-11); /* The glyph is 12px; the button has to be big enough to hit without aiming. 32px keeps the icon visually small while the target is real. */ min-width: 32px; min-height: 32px; border-radius: var(--radius-2); transition: background-color var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic); } .sidebar__collapse-btn:hover { background-color: var(--secondary-4); color: var(--secondary-12); } .sidebar__collapse-btn:active { transform: scale(0.96); } .sidebar__collapse-btn svg { width: 12px; height: 12px; } .nav-rail--collapsed.sidebar--narrow .sidebar__header .sidebar__collapse-btn { background-color: var(--secondary-2); border: 1px solid var(--secondary-5); border-radius: var(--radius-2); padding: var(--space-1); } /* ========================== ACTION CENTER EMPTY STATES ========================== */ .action-empty-state { display: flex; flex-direction: column; padding: var(--space-4); gap: var(--space-4); height: 100%; overflow-y: auto; color: var(--secondary-11); } .action-card { background: var(--primary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); padding: var(--space-4); } .action-card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font-weight: var(--font-weight-medium); color: var(--secondary-12); } .action-card-icon { width: 32px; height: 32px; background: var(--primary-3); color: var(--primary-11); border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; } .action-card-icon svg { width: 18px; height: 18px; } .quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .quick-action-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-pill); color: var(--secondary-11); font-size: var(--font-size-2); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .quick-action-btn:hover { background: var(--primary-2); border-color: var(--primary-5); color: var(--primary-11); } .quick-action-btn svg { width: 14px; height: 14px; } /* Suggestions List */ .suggestions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .suggestion-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); color: var(--secondary-11); font-size: var(--font-size-2); cursor: pointer; transition: background 0.2s ease; } .suggestion-item:hover { background: var(--secondary-3); color: var(--secondary-12); } .suggestion-item svg { width: 14px; height: 14px; color: var(--secondary-9); } /* Document Creation Form */ .doc-create-form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--primary-1); border: 2px dashed var(--secondary-5); border-radius: var(--radius-3); transition: border-color 0.2s ease, background 0.2s ease; } .doc-create-form:focus-within { border-color: var(--primary-5); background: var(--primary-2); } .form-row { display: flex; flex-direction: column; gap: var(--space-1); } .form-label { font-size: var(--font-size-1); font-weight: var(--font-weight-medium); color: var(--secondary-11); } .form-input { padding: var(--space-2); border: 1px solid var(--secondary-5); border-radius: var(--radius-2); font-size: var(--font-size-2); background: var(--primary-1); color: var(--secondary-12); } .form-input:focus { outline: none; border-color: var(--primary-7); box-shadow: 0 0 0 2px var(--primary-3); } .form-textarea { min-height: 80px; resize: vertical; font-family: inherit; } .form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-1); } .btn-primary { background: var(--primary-9); color: white; border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); font-weight: var(--font-weight-medium); cursor: pointer; font-size: var(--font-size-2); } .btn-primary:hover { background: var(--primary-10); } .btn-secondary { background: transparent; color: var(--secondary-11); border: 1px solid var(--secondary-5); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); cursor: pointer; font-size: var(--font-size-2); } .btn-secondary:hover { background: var(--secondary-3); } .sidebar-hint { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--secondary-4); display: flex; align-items: center; gap: var(--space-2); color: var(--secondary-9); font-size: var(--font-size-1); } .sidebar-hint svg { width: 14px; height: 14px; flex-shrink: 0; } /* ========================== MOBILE DOCUMENTS OVERLAY ========================== */ .sidebar--mobile-documents, .sidebar--mobile-spreadsheets, .sidebar--mobile-apps { padding: 0; height: 100vh; max-height: 100svh; width: 100%; max-width: 100%; } /* Override dialog[open] display:block to enable flex layout for proper height constraints. Uses !important because dialog.css has higher specificity with multiple :not() selectors. */ .sidebar--mobile-documents[open], .sidebar--mobile-spreadsheets[open], .sidebar--mobile-apps[open] { display: flex !important; flex-direction: column; } .mobile-documents__header { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--secondary-3); display: flex; align-items: center; flex-shrink: 0; background-color: var(--secondary-2); gap: var(--space-3); } .mobile-documents__back-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: none; border: none; color: var(--primary-9); font-size: var(--font-size-2); cursor: pointer; border-radius: var(--radius-2); transition: background-color 0.2s ease; } @media (max-width: 768px) { .mobile-documents__back-btn { min-height: var(--mobile-touch-target-min-size); min-width: var(--mobile-touch-target-min-size); padding: var(--space-2) var(--space-3); font-size: var(--font-size-3); } } .mobile-documents__back-btn:hover { background-color: var(--primary-2); } .mobile-documents__back-btn:active { background-color: var(--primary-3); } .mobile-documents__title { margin: 0; font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); } .mobile-documents__content { flex: 1; min-height: 0; /* Critical: allows flex child to shrink below content size */ overflow: hidden; /* Don't scroll here - let the viewer scroll */ display: flex; flex-direction: column; } /* Ensure the documents panel fills the mobile overlay */ .mobile-documents__content documents-sidebar-panel, .mobile-documents__content spreadsheets-sidebar-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; } .mobile-documents__content .chat-nav-sidebar__documents-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--space-2); } /* Mobile only: Sticky controls - fixed at top, not scrollable */ @media (max-width: 768px) { .mobile-documents__content .mobile-documents__sticky-controls { flex-shrink: 0; /* Don't compress */ z-index: var(--z-index-5); background-color: var(--secondary-3); padding: var(--space-2); border-bottom: 1px solid var(--secondary-4); } } .mobile-documents__content .chat-nav-sidebar__documents-viewer, .mobile-documents__content .chat-nav-sidebar__spreadsheets-viewer { flex: 1; min-height: 0; overflow-y: auto; } /* Mobile only: Override inline height:100% from ProseMirrorSidebarStore */ @media (max-width: 768px) { .mobile-documents__content .chat-nav-sidebar__documents-viewer, .mobile-documents__content .chat-nav-sidebar__spreadsheets-viewer { height: auto !important; /* Override inline height:100% to respect flex layout */ } /* The ProseMirror editor should size naturally within the scroll container */ .mobile-documents__content .chat-nav-sidebar__documents-viewer .ProseMirror { min-height: 300px; height: auto; } } /* Mobile toolbar adjustments - keep a single horizontal lane instead of a busy wrap */ @media (max-width: 768px) { .mobile-documents__content .chat-nav-sidebar__documents-toolbar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: var(--space-1); } .mobile-documents__content .chat-nav-sidebar__documents-toolbar > * { flex: 0 0 auto; } .mobile-documents__content .chat-nav-sidebar__toolbar-button, .mobile-documents__content .chat-nav-sidebar__toolbar-divider, .mobile-documents__content .chat-nav-sidebar__toolbar-dropdown { flex-shrink: 0; } } /* ========================== MOBILE FAB (Documents -> Chat) ========================== */ @media (max-width: 768px) { .mobile-fab { position: fixed; /* iOS safe-area support (constant() for older iOS, env() for modern) */ right: calc(var(--space-4) + constant(safe-area-inset-right)); right: calc(var(--space-4) + env(safe-area-inset-right, 0px)); bottom: calc(var(--space-4) + constant(safe-area-inset-bottom)); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-index-10, 1000); display: flex; align-items: flex-end; justify-content: flex-end; /* Don't block underlying scroll/taps except on the FAB itself */ pointer-events: none; /* Smooth state changes */ transition: left 0.22s var(--ease-out-cubic, ease), right 0.22s var(--ease-out-cubic, ease), bottom 0.22s var(--ease-out-cubic, ease), padding 0.22s var(--ease-out-cubic, ease), transform 0.22s var(--ease-out-cubic, ease), opacity 0.22s var(--ease-out-cubic, ease); transform: translateZ(0); /* helps iOS Safari compositing */ } .mobile-fab, .mobile-fab * { pointer-events: auto; } /* The blanket auto above re-enables chat-input's invisible dropzone overlay, which sits over the send button and swallows taps. Keep it inert unless a drag is actually in progress. */ .mobile-fab .dropzone-overlay, .mobile-fab .dropzone-overlay * { pointer-events: none; } .mobile-fab .dropzone-overlay.active, .mobile-fab .dropzone-overlay.active * { pointer-events: auto; } /* Collapsed circular button */ .mobile-fab__button { width: 56px; height: 56px; min-width: 44px; min-height: 44px; border: 0; border-radius: 9999px; background-color: var(--primary-9); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-3); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.18s var(--ease-out-cubic, ease), box-shadow 0.18s ease, background-color 0.18s ease; } .mobile-fab__button:hover { background-color: var(--primary-10); box-shadow: var(--shadow-4); } .mobile-fab__button:active { transform: scale(0.97); } .mobile-fab__button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-4), var(--shadow-3); } /* Expanded: tray spans the viewport width (with safe-area padding) */ .mobile-fab.mobile-fab--expanded { left: 0; right: 0; padding-left: calc(var(--space-3) + constant(safe-area-inset-left)); padding-left: calc(var(--space-3) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--space-3) + constant(safe-area-inset-right)); padding-right: calc(var(--space-3) + env(safe-area-inset-right, 0px)); bottom: calc(var(--space-3) + constant(safe-area-inset-bottom)); bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); justify-content: center; } .mobile-fab__input-wrapper { position: relative; /* Anchor for close tab */ width: 100%; max-width: 720px; display: flex; align-items: flex-end; background-color: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); padding: var(--space-2); box-shadow: var(--shadow-3); transform: translateZ(0); } /* Tab-style close button positioned above input wrapper */ .mobile-fab__close-tab { position: absolute; left: var(--space-2); bottom: calc(100% - 1px); /* Overlap 1px to hide border seam */ /* Tab dimensions */ width: 40px; height: 28px; padding: 0; background-color: var(--secondary-2); border: 1px solid var(--secondary-4); border-bottom: none; border-radius: var(--radius-2) var(--radius-2) 0 0; color: var(--secondary-11); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.18s ease, color 0.18s ease; } .mobile-fab__close-tab:hover { background-color: var(--secondary-3); color: var(--secondary-12); } .mobile-fab__close-tab:active { background-color: var(--secondary-4); } /* Explicit stroke color for Safari compatibility */ .mobile-fab__close-icon path { stroke: var(--secondary-11); transition: stroke 0.18s ease; } .mobile-fab__close-tab:hover .mobile-fab__close-icon path { stroke: var(--secondary-12); } /* Let the chat input fill full width */ .mobile-fab__input-wrapper chat-input { flex: 1 1 auto; min-width: 0; } @media (prefers-reduced-motion: reduce) { .mobile-fab, .mobile-fab__button, .mobile-fab__close-tab { transition: none; } } } /* /css/components/team.css */ /* Soft UI Design System Implementation for Team Panel */ /* Status Pills - Following Soft UI Design */ .status__pill { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-2); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); text-transform: capitalize; box-shadow: var(--shadow-1); } .status__pill--success { background: var(--success-3); color: var(--success-11); border: 1px solid var(--success-4); } .status__pill--warning { background: var(--yellow-3); color: var(--yellow-11); border: 1px solid var(--yellow-4); } .status__pill--error { background: var(--failure-3); color: var(--failure-11); border: 1px solid var(--failure-4); } .status__pill--owner { background: var(--primary-3); color: var(--primary-11); border: 1px solid var(--primary-4); } /* Form Elements following soft UI principles */ .team-member-input { color: var(--secondary-12); background: var(--secondary-1); border: 1px solid var(--secondary-7); border-radius: var(--radius-2); padding: var(--space-2) var(--space-3); font-size: var(--font-size-3); flex: 1; min-width: 0; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .team-member-input:focus { border-color: var(--primary-11); outline: none; box-shadow: 0 0 0 2px var(--primary-3); } .team-member-input::placeholder { color: var(--secondary-9); font-size: var(--font-size-3); } .team-member-btn { background: var(--primary-11); color: var(--secondary-2); border: none; border-radius: var(--radius-2); padding: var(--space-2) var(--space-3); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-2); min-width: var(--space-9); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .team-member-btn:hover { background: var(--primary-10); box-shadow: var(--shadow-5); transform: translateY(-1px); } .team-member-container { display: flex; gap: var(--space-1); align-items: center; margin-bottom: var(--space-4); width: 100%; } /* Textarea styles for employee context */ .team-member-textarea { resize: vertical; min-height: 80px; font-family: var(--default-font-family); line-height: 1.5; } .team-member-textarea::placeholder { color: var(--secondary-9); font-size: var(--font-size-3); } /* Team member cards */ .team-member-cards { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); } .team-member-card { display: flex; justify-content: space-between; align-items: flex-start; background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--space-3); box-shadow: var(--shadow-1); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .team-member-card:hover { box-shadow: var(--shadow-2); border-color: var(--secondary-7); } .team-member-card__content { flex: 1; min-width: 0; } .team-member-card__email { font-weight: var(--font-weight-medium); color: var(--secondary-12); margin-bottom: var(--space-1); font-size: var(--font-size-3); } .team-member-card__context { color: var(--secondary-10); font-size: var(--font-size-2); line-height: 1.4; word-break: break-word; } .team-member-card__remove { background: transparent; border: none; color: var(--secondary-9); cursor: pointer; padding: var(--space-1); margin-left: var(--space-2); border-radius: var(--radius-2); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; display: flex; align-items: center; justify-content: center; } .team-member-card__remove:hover { background: var(--failure-3); color: var(--failure-11); } .text-muted { font-style: italic; opacity: 0.7; } /* team panel */ .team-dialog { background-color: var(--secondary-1); color: var(--secondary-12); border-radius: var(--radius-3); max-width: var(--container-5); min-width: var(--container-5); height: 90vh; height: 90svh; margin: 0 auto; box-shadow: var(--shadow-9); border: none; padding: 0; overflow: hidden; /* Prevent external scrolling */ display: grid; grid-template-rows: auto auto 1fr auto; grid-template-areas: "header" "divider" "container" "footer"; } /* Sales page: one shared gutter so stamps, tabs, content, and footer stay aligned. */ .team-dialog:has(.team-sales-carousel) { --team-sales-gutter: clamp(var(--space-4), 4vw, var(--space-8)); --team-conversion-content-max-width: var(--container-4-3q, 1024px); /* Shared spacing primitives for the sales page so cards feel consistent. */ --team-sales-box-padding: var(--space-3); --team-sales-box-padding-tight: var(--space-2); --team-sales-content-pad-y: var(--space-2); } @media (max-width: 768px) { .team-dialog:has(.team-sales-carousel) { --team-sales-gutter: var(--space-4); } } @media (max-width: 768px) { .team-dialog { min-width: 100vw; max-width: 100vw; min-width: 100svw; max-width: 100svw; height: 100vh; height: 100svh; border-radius: 0; margin: 0; /* Override browser's default overflow: hidden on dialog elements */ overflow: visible; } /* Allow inner container to handle overflow for table scrolling */ .team-container { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; overflow-x: hidden; /* Prevent horizontal page scroll, tables scroll internally */ } .team-sidebar { /* Styled as horizontal scrollable tabs in later mobile block */ } } .team-header { grid-area: header; padding: var(--space-1) var(--space-4); } /* Sales page header: always use the shared gutter so mobile cannot overflow. */ .team-dialog:has(.team-sales-carousel) .team-header { padding-left: var(--team-sales-gutter); padding-right: var(--team-sales-gutter); } .team-dialog hr { grid-area: divider; margin: 0; } @media (max-width: 768px) { .team-header { padding: var(--space-2) var(--space-3); font-size: var(--font-size-2); } .team-header h2, .team-header h3 { margin: 0; font-size: var(--font-size-3); line-height: 1.2; } .team-header p { font-size: var(--font-size-2); margin-top: var(--space-1); margin-bottom: 0; } } .team-container { grid-area: container; display: grid; /* Wide enough for the longest nav label ("Source Engine Permissions") to sit on one line. Wrapped labels made a single nav row taller than its siblings. */ grid-template-columns: 240px 1fr; gap: var(--space-4); overflow: hidden; padding: var(--space-1) var(--space-4); } /* Sales page: slightly wider gutters so the content doesn't feel edge-to-edge */ .team-container:has(.team-sales-carousel) { padding-top: var(--space-1); padding-bottom: var(--space-2); padding-left: var(--team-sales-gutter); padding-right: var(--team-sales-gutter); overflow-x: hidden; } @media (min-width: 769px) { /* Sales page: align to the same centered conversion container as create page. */ .team-container:has(.team-sales-carousel) { justify-self: center; width: 100%; max-width: var(--team-conversion-content-max-width); margin-left: auto; margin-right: auto; } } @media (min-width: 769px) { /* Keep header padding aligned with the sales page gutters. */ .team-dialog:has(.team-sales-carousel) .team-header { justify-self: center; width: 100%; max-width: var(--team-conversion-content-max-width); margin-left: auto; margin-right: auto; padding-top: var(--space-2); padding-left: var(--team-sales-gutter); padding-right: var(--team-sales-gutter); } /* Let the hero copy breathe on wide screens (avoid the narrow centered column). */ .team-dialog:has(.team-sales-carousel) .team-header__content { max-width: min(900px, 100%); } /* Reduce hero padding so it doesn't feel like a giant empty block. */ .team-dialog:has(.team-sales-carousel) .team-header--modern { padding: var(--space-3); margin-bottom: var(--space-2); margin-left: 0; margin-right: 0; } } @media (max-width: 768px) { .team-sales-stamps { display: none !important; } .team-container:has(.team-sales-carousel) { padding-left: var(--space-4); padding-right: var(--space-4); } /* Mobile sales page: full-screen dialog takeover */ .team-dialog:has(.team-sales-carousel) { min-width: 100vw; max-width: 100vw; width: 100vw; height: 100vh; height: 100svh; border-radius: 0; margin: 0; } /* Mobile sales page: keep tabs + progress visible while scrolling */ .team-dialog:has(.team-sales-carousel) .team-sales-carousel__header { position: sticky; top: 0; z-index: 10; background: var(--secondary-1); padding-top: var(--space-2); border-bottom: 1px solid var(--secondary-4); } /* Mobile: allow tab row horizontal scrolling when labels overflow. */ .team-dialog:has(.team-sales-carousel) .team-sales-carousel__tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; } .team-dialog:has(.team-sales-carousel) .team-sales-carousel__tab { flex: 0 0 auto; min-width: max-content; font-size: var(--font-size-1-half); } /* Sales mobile hardening: prevent any child from forcing horizontal page overflow. */ .team-dialog:has(.team-sales-carousel) { overflow-x: hidden; } .team-dialog:has(.team-sales-carousel) .team-header, .team-dialog:has(.team-sales-carousel) .team-container, .team-dialog:has(.team-sales-carousel) .team-content, .team-dialog:has(.team-sales-carousel) .team-sales-carousel, .team-dialog:has(.team-sales-carousel) .team-sales-carousel__body, .team-dialog:has(.team-sales-carousel) .team-sales-carousel__slide, .team-dialog:has(.team-sales-carousel) .team-sales-carousel__row, .team-dialog:has(.team-sales-carousel) .team-sales-carousel__text, .team-dialog:has(.team-sales-carousel) .team-sales-carousel__demo { min-width: 0; max-width: 100%; } .team-dialog:has(.team-sales-carousel) .team-header__subtitle, .team-dialog:has(.team-sales-carousel) .team-sales-carousel__text p, .team-dialog:has(.team-sales-carousel) .team-sales-carousel__list, .team-dialog:has(.team-sales-carousel) .team-sales-carousel__list li, .team-dialog:has(.team-sales-carousel) .team-sales-demo-table th, .team-dialog:has(.team-sales-carousel) .team-sales-demo-table td { overflow-wrap: anywhere; word-break: break-word; } .team-dialog:has(.team-sales-carousel) .team-sales-demo-card__body { overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; } .team-dialog:has(.team-sales-carousel) .team-sales-demo-table { table-layout: fixed; } /* Note: slide content scrolls inside `.team-sales-carousel__slide`. Avoid forcing overflow visible here; it breaks mobile scrolling. */ /* Keep sales stamps compact without forcing one-column vertical stacks. */ .team-dialog:has(.team-sales-carousel) .team-sales-stamps__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow-x: visible; padding-bottom: 0; } .team-dialog:has(.team-sales-carousel) .team-sales-stamps .feature-card { flex: initial; aspect-ratio: auto; padding: var(--space-2); align-items: flex-start; text-align: left; } .team-dialog:has(.team-sales-carousel) .team-sales-stamps .feature-card__description { display: block; } .team-dialog:has(.team-sales-carousel) .team-sales-cta-footer { position: relative; z-index: 20; } } .dialog-footer { grid-area: footer; } /* Team dialogs use CSS grid to place the footer; override the global absolute footer rule. */ .team-dialog .dialog-footer { position: static; bottom: auto; left: auto; right: auto; width: 100%; } .team-sidebar { overflow-y: auto; padding-right: var(--space-2); } .team-content { overflow-y: auto; padding-bottom: 10vh; } /* Sales page specific styles */ .team-container:has(.team-features) { display: block; overflow: hidden; grid-template-columns: 1fr; } /* Sales carousel: use flex so the body can size against the dialog grid cell, and the slide can become the single vertical scroll container. */ .team-container:has(.team-sales-carousel) { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; } .team-container:has(.team-features) .team-content, .team-container:has(.team-sales-carousel) .team-content { padding-right: 0; max-width: 100%; } /* Sales page: header is fixed (grid header), CTA is fixed (grid footer). The central content is the only scroll surface. */ .team-container:has(.team-sales-carousel) .team-content { flex: 1 1 auto; min-height: 0; /* iOS: prefer a single, explicit scroll container within the carousel slide. Otherwise tall slide content can overflow without being scrollable. */ overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; } .team-container:has(.team-sales-carousel) .team-sales-carousel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 0; } .team-content__table { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); box-shadow: var(--shadow-2); overflow-y: auto; margin-bottom: var(--space-4); } .team-content__table table { width: 100%; border-collapse: collapse; } .team-content__table tr { border-bottom: 1px solid var(--secondary-4); transition: background-color 0.2s ease; } .team-content__table tr:hover { background-color: var(--secondary-3); } .team-content__table tr:last-child { border-bottom: none; } .team-content__table td, .team-content__table th { padding: var(--space-3) var(--space-3); text-align: left; font-size: var(--font-size-3); } .team-content__table th { background: var(--secondary-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); border-bottom: 2px solid var(--secondary-4); position: sticky; top: 0; z-index: 1; } .team-content__table td { color: var(--secondary-11); } .team-content__table a { color: var(--primary-11); text-decoration: none; font-weight: var(--font-weight-medium); transition: color 0.2s ease; } .team-content__table a:hover { color: var(--primary-10); text-decoration: underline; } /* CSV Preview Table - Following Soft UI Design */ .csv-preview-table { width: 100%; border-collapse: collapse; background: var(--secondary-2); } .csv-preview-table thead { background: var(--secondary-3); position: sticky; top: 0; z-index: 1; } .csv-preview-table th { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 2px solid var(--secondary-4); font-weight: var(--font-weight-medium); color: var(--secondary-12); font-size: var(--font-size-3); } .csv-preview-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--secondary-4); color: var(--secondary-11); font-size: var(--font-size-3); } .csv-preview-table tr:hover { background-color: var(--secondary-3); } .csv-preview-container { overflow-y: auto; border: 1px solid var(--secondary-4); border-radius: var(--radius-2); margin-bottom: var(--space-4); box-shadow: var(--shadow-2); max-height: 400px; } /* Team member upload options */ .team-member-upload-options { margin-bottom: var(--space-4); } .team-member-upload-buttons { display: flex; gap: var(--space-2); margin-top: var(--space-2); align-items: center; } /* Section headers */ .team-content__section { overflow-y: auto; } .team-content h3, .team-content__section h3 { margin-top: 0; padding-top: 0; margin-bottom: var(--space-2); color: var(--secondary-12); font-weight: var(--font-weight-medium); font-size: var(--font-size-4); } /* Section description */ .section-description { color: var(--secondary-11); font-size: var(--font-size-3); margin-bottom: var(--space-4); line-height: 1.5; } /* Status pill cell padding adjustment */ .team-content__table td.status-cell { padding-top: var(--space-2); } /* CSV upload empty state */ .csv-upload-empty { text-align: center; padding: var(--space-4) 0; } /* CSV preview info text */ .csv-preview-info { margin-bottom: var(--space-3); color: var(--secondary-11); font-size: var(--font-size-3); } /* Text utilities */ .text-muted { color: var(--secondary-9); font-style: italic; } /* File input hidden */ .file-input-hidden { display: none; } /* Tooltip wrapper */ .tooltip-wrapper { display: inline-flex; align-items: center; } /* Help icon button */ .help-icon { width: 20px; height: 20px; border-radius: 50%; background: var(--secondary-3); border: 1px solid var(--secondary-7); color: var(--secondary-11); font-size: 12px; font-weight: var(--font-weight-medium); cursor: help; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: var(--shadow-1); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .help-icon:hover { background: var(--secondary-4); transform: scale(1.1); } /* Alert boxes following Soft UI Design */ .alert-box { border-radius: var(--radius-2); padding: var(--space-3); margin-bottom: var(--space-4); box-shadow: var(--shadow-2); } .alert-box--warning { background: var(--yellow-3); border: 1px solid var(--yellow-6); } .alert-box--warning p { margin: 0; color: var(--yellow-11); } .alert-box--error { background: var(--failure-3); border: 1px solid var(--failure-6); } .alert-box--error p { margin: 0; color: var(--failure-11); } .alert-box--error p:not(:last-child) { margin-bottom: var(--space-2); } .alert-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); } /* Team Content Wrapper - Consistent styling for all team sections */ .team-content-wrapper { background: var(--secondary-2); border: 1px solid var(--secondary-3); border-radius: var(--radius-2); padding: var(--space-4); margin-top: var(--space-4); box-shadow: var(--shadow-1); } .team-content-wrapper h3 { margin: 0 0 var(--space-3) 0; font-size: var(--font-size-4); color: var(--secondary-12); font-weight: var(--font-weight-medium); } .team-content-wrapper .section-description { color: var(--secondary-11); font-size: var(--font-size-3); margin-bottom: var(--space-4); line-height: 1.5; } .team-billing-page { display: flex; flex-direction: column; gap: var(--space-4); } .team-billing-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } .team-billing-page__subtitle { margin: 0; color: var(--secondary-11); font-size: var(--font-size-3); } .team-billing-page__renewal { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); text-align: right; } .team-billing-page__renewalLabel { color: var(--secondary-10); font-size: var(--font-size-2); text-transform: uppercase; letter-spacing: 0.04em; } .team-billing-page__section { display: flex; flex-direction: column; gap: var(--space-3); } .team-billing-page__section--action { padding-top: var(--space-1); } .team-billing-page__section h4 { margin: 0; color: var(--secondary-12); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); } .team-billing-page__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .team-billing-page__metric { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); background: var(--secondary-1); } .team-billing-page__metric span { color: var(--secondary-11); font-size: var(--font-size-2); } .team-billing-page__metric strong { color: var(--secondary-12); font-size: var(--font-size-6); line-height: 1; } .team-billing-page__metric--active strong { color: var(--primary-10); } .team-billing-page__metric--pending strong { color: var(--warning-11); } .team-billing-page__metric--open strong { color: var(--success-10); } .team-billing-page__usageHeader, .team-billing-page__previewRow, .team-billing-page__stepperRow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .team-billing-page__usageHeader span, .team-billing-page__copy, .team-billing-page__previewNote, .team-billing-page__downgradeNote, .team-billing-page__capNote { color: var(--secondary-11); font-size: var(--font-size-3); } .team-billing-page__copy, .team-billing-page__previewNote, .team-billing-page__downgradeNote, .team-billing-page__capNote, .team-billing-page__footerLinkWrap { margin: 0; } .team-billing-page__usageHeader strong, .team-billing-page__previewRow strong, .team-billing-page__newTotal strong { color: var(--secondary-12); } .team-billing-page__usageBar { display: flex; gap: 1px; height: 10px; width: 100%; overflow: hidden; border-radius: 999px; background: var(--secondary-4); } .team-billing-page__usageSeg { display: block; min-width: 0; height: 100%; } .team-billing-page__usageSeg--active { background: var(--primary-9); } .team-billing-page__usageSeg--pending { background: var(--warning-5); } .team-billing-page__usageSeg--open { background: var(--success-9); } .team-billing-page__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--secondary-11); font-size: var(--font-size-2); } .team-billing-page__stepperWrap { display: flex; align-items: center; gap: var(--space-3); } .team-billing-page__stepper { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); background: var(--secondary-1); } .team-billing-page__stepper button { width: 32px; height: 32px; border: none; border-radius: var(--radius-1); background: var(--secondary-3); color: var(--secondary-12); font-size: var(--font-size-4); line-height: 1; cursor: pointer; } .team-billing-page__stepper button:hover:not(:disabled) { background: var(--secondary-4); } .team-billing-page__stepper button:disabled { opacity: 0.5; cursor: not-allowed; } .team-billing-page__stepper [role='spinbutton'] { min-width: 40px; text-align: center; color: var(--secondary-12); font-weight: var(--font-weight-medium); } .team-billing-page__newTotal { color: var(--secondary-11); white-space: nowrap; } .team-billing-page__preview { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); background: var(--secondary-1); } .team-billing-page__preview hr, .team-billing-page__footerRule { width: 100%; height: 1px; border: none; margin: 0; background: var(--secondary-4); } .team-billing-page__banner { margin: 0; padding: var(--space-3); border-radius: var(--radius-2); font-size: var(--font-size-3); line-height: 1.5; } .team-billing-page__banner--info { background: var(--primary-3); border: 1px solid var(--primary-5); color: var(--primary-11); } .team-billing-page__banner--success { background: var(--success-3); border: 1px solid var(--success-5); color: var(--success-11); } .team-billing-page__banner--error { background: var(--failure-3); border: 1px solid var(--failure-5); color: var(--failure-11); } .team-billing-page__cta { align-self: flex-start; } .team-billing-page__downgradeNote a, .team-billing-page__capNote a, .team-billing-page__footerLink { color: var(--primary-10); text-decoration: none; } .team-billing-page__downgradeNote a:hover, .team-billing-page__capNote a:hover, .team-billing-page__footerLink:hover { text-decoration: underline; } .team-billing-page__footerLinkWrap { display: flex; } @media (max-width: 768px) { .team-billing-page__header, .team-billing-page__usageHeader, .team-billing-page__previewRow, .team-billing-page__stepperRow, .team-billing-page__stepperWrap { flex-direction: column; align-items: stretch; } .team-billing-page__renewal { align-items: flex-start; text-align: left; } .team-billing-page__metrics { grid-template-columns: 1fr; } .team-billing-page__cta { align-self: stretch; } } /* Segmented Control */ .segmented-control { display: inline-flex; background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--space-1); margin: var(--space-3) 0; box-shadow: var(--shadow-1); } .segmented-control__button { background: transparent; border: none; color: var(--secondary-11); padding: var(--space-2) var(--space-4); font-size: var(--font-size-3); font-weight: var(--font-weight-regular); cursor: pointer; border-radius: var(--radius-2); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; white-space: nowrap; } .segmented-control__button:hover:not(.segmented-control__button--active) { background: var(--secondary-3); color: var(--secondary-12); } .segmented-control__button--active { background: var(--secondary-1); color: var(--primary-11); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-1); border: 1px solid var(--secondary-4); } /* Mobile: full-width segmented control with evenly sized buttons */ @media (max-width: 768px) { .segmented-control { width: 100%; } .segmented-control__button { flex: 1; text-align: center; padding: var(--space-2) var(--space-3); font-size: var(--font-size-2); white-space: normal; min-width: 0; } } /* Team Memory CSV Steps - matching bulk-csv-step styles */ .team-memory-csv-steps { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); } .team-memory-csv-step { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); box-shadow: var(--shadow-1); } .team-memory-csv-step__number { width: 40px; height: 40px; flex-shrink: 0; background: var(--primary-11); color: var(--secondary-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-4); font-weight: var(--font-weight-bold); } .team-memory-csv-step__content { flex: 1; } .team-memory-csv-step__content h4 { margin: 0 0 var(--space-2) 0; color: var(--secondary-12); font-size: var(--font-size-4); font-weight: var(--font-weight-medium); } .team-memory-csv-step__content p { margin: 0 0 var(--space-3) 0; color: var(--secondary-11); font-size: var(--font-size-3); } .team-memory-content { margin-top: var(--space-4); } /* Example tables for CSV format guides */ .example-table-container { margin: var(--space-3) 0; border: 1px solid var(--secondary-4); border-radius: var(--radius-2); overflow: hidden; } .example-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-2); } .example-table thead { background: var(--secondary-3); } .example-table th { padding: var(--space-2) var(--space-3); text-align: left; font-weight: var(--font-weight-medium); color: var(--secondary-12); border-bottom: 1px solid var(--secondary-4); } .example-table td { padding: var(--space-2) var(--space-3); color: var(--secondary-11); border-bottom: 1px solid var(--secondary-3); } .example-table tbody tr:last-child td { border-bottom: none; } .example-table tbody tr:hover { background: var(--secondary-2); } /* Team Memory Actions */ .team-memory-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); align-items: center; } /* Align form field inline properly */ .form-field--inline { margin-bottom: 0; display: flex; align-items: center; } .form-field--inline .input-with-icon { position: relative; width: 100%; display: flex; align-items: center; } .form-field--inline .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--secondary-9); z-index: 1; } /* Add Members Choice Section */ .add-members-choice__buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); } .add-members-choice__option { background: var(--secondary-2); border: 2px solid var(--secondary-4); border-radius: var(--radius-3); padding: var(--space-6); text-align: center; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease; box-shadow: var(--shadow-2); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .add-members-choice__option:hover { border-color: var(--primary-11); box-shadow: var(--shadow-5); transform: translateY(-2px); background: var(--secondary-3); } .add-members-choice__option:active { transform: translateY(0); box-shadow: var(--shadow-2); } .add-members-choice__icon { color: var(--primary-11); flex-shrink: 0; } .add-members-choice__option h4 { margin: 0; color: var(--secondary-12); font-size: var(--font-size-4); font-weight: var(--font-weight-medium); } .add-members-choice__option p { margin: 0; color: var(--secondary-11); font-size: var(--font-size-3); line-height: 1.5; } /* Bulk CSV Steps */ .bulk-csv-steps { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); } .bulk-csv-step { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); box-shadow: var(--shadow-1); } .bulk-csv-step__number { width: 40px; height: 40px; flex-shrink: 0; background: var(--primary-11); color: var(--secondary-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-4); font-weight: var(--font-weight-bold); } .bulk-csv-step__content { flex: 1; } .bulk-csv-step__content h4 { margin: 0 0 var(--space-2) 0; color: var(--secondary-12); font-size: var(--font-size-4); font-weight: var(--font-weight-medium); } .bulk-csv-step__content p { margin: 0 0 var(--space-3) 0; color: var(--secondary-11); font-size: var(--font-size-3); } @media (max-width: 768px) { /* ============================================ MOBILE TABLE RESPONSIVENESS Supports: Team Management, Usage & Quotas, Audit Log Strategy: Horizontal scroll with contained overflow ============================================ */ .team-content__table { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-4); margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); width: calc(100% + var(--space-6)); max-width: none; /* Visual indicator for horizontal scroll */ border-right: 2px solid var(--secondary-4); box-shadow: inset -6px 0 6px -6px var(--secondary-3); padding-left: var(--space-3); padding-right: var(--space-3); /* Ensure scrollbar is visible on iOS */ scrollbar-width: thin; scrollbar-color: var(--secondary-6) transparent; } /* Webkit scrollbar styling */ .team-content__table::-webkit-scrollbar { height: 6px; } .team-content__table::-webkit-scrollbar-track { background: var(--secondary-2); border-radius: var(--radius-1); } .team-content__table::-webkit-scrollbar-thumb { background: var(--secondary-6); border-radius: var(--radius-1); } .team-content__table::-webkit-scrollbar-thumb:hover { background: var(--secondary-8); } .team-content__table table { /* Min-width ensures horizontal scroll for multi-column tables */ min-width: 100%; width: auto; border-collapse: separate; border-spacing: 0; } /* Dynamic min-widths based on column count */ /* 3-column tables (Team Management): allow natural width but ensure readability */ .team-content__table:has(th:nth-child(3):last-child) table { min-width: 100%; } /* 4-column tables (Audit Log): minimum 480px for readability */ .team-content__table:has(th:nth-child(4):last-child) table { min-width: 480px; } /* 6+ column tables (Usage & Quotas): minimum 680px for all columns */ .team-content__table:has(th:nth-child(6)) table, .team-content__table:has(th:nth-child(7)) table, .team-content__table:has(th:nth-child(8)) table { min-width: 680px; } .team-content__table th { padding: var(--space-2) var(--space-3); font-size: var(--font-size-2); white-space: nowrap; background: var(--secondary-3); position: sticky; top: 0; z-index: 1; } .team-content__table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--secondary-4); font-size: var(--font-size-2); vertical-align: middle; } /* Email column handling: allow truncation with ellipsis */ .team-content__table td:nth-child(2), .team-content__table th:nth-child(2) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rank column (Usage & Quotas): keep compact */ .team-content__table td:first-child, .team-content__table th:first-child { white-space: nowrap; width: auto; min-width: 48px; text-align: center; } /* Message column (Audit Log): allow wrapping for readability */ .team-content__table td:first-child { max-width: 200px; white-space: normal; overflow-wrap: break-word; line-height: 1.4; } /* Recorded/Date column: prevent wrapping */ .team-content__table td:last-child, .team-content__table th:last-child { white-space: nowrap; } /* Status pills in tables: ensure visibility */ .team-content__table .status__pill { font-size: var(--font-size-1); padding: 2px var(--space-2); display: inline-block; white-space: nowrap; } /* Improve action link touch targets to 44x44px minimum */ .team-content__table .team-content__table--actions a, .team-content__table td a { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3); min-height: 44px; min-width: 44px; line-height: 1; text-align: center; font-size: var(--font-size-2); } /* Quota edit controls: ensure they fit */ .team-content__table .quota-edit { display: flex; align-items: center; gap: var(--space-1); flex-wrap: nowrap; } .team-content__table .quota-edit__input { width: 60px; min-width: 60px; } .team-content__table .btn--small { padding: var(--space-1) var(--space-2); font-size: var(--font-size-1); min-height: 36px; } /* Domain management section mobile styles */ .team-content div[style*="display: flex; gap: var(--space-2)"] { flex-direction: column !important; gap: var(--space-2) !important; } .team-content div[style*="display: flex; gap: var(--space-2)"] input { width: 100% !important; margin-bottom: var(--space-2) !important; } .team-content div[style*="display: flex; gap: var(--space-2)"] button { width: 100% !important; justify-content: center !important; white-space: nowrap !important; } /* General form controls in team content */ .team-content .form-field { margin-bottom: var(--space-3); } .team-content .form-field input { width: 100%; box-sizing: border-box; } .team-content .btn { width: 100%; justify-content: center; padding: var(--space-2) var(--space-3); font-size: var(--font-size-2); } /* Specifically target the toolbar buttons */ .team-members__toolbar .btn { padding: var(--space-2) var(--space-3); font-size: var(--font-size-2); } /* Pagination controls: ensure proper spacing */ .team-content div[style*="justify-content: space-between"] { flex-direction: column; gap: var(--space-3); align-items: flex-start !important; } .team-content div[style*="justify-content: space-between"] > div { width: 100%; } } .team-content__table--actions { display: inline-flex; flex-direction: row; gap: 0.5rem; justify-content: flex-end; } /* Team Memory Context Table Styles */ .team-memory-context-table { table-layout: fixed; width: 100%; } .team-memory-context-table colgroup col:nth-child(1) { width: 30%; } .team-memory-context-table colgroup col:nth-child(2) { width: 50%; } .team-memory-context-table colgroup col:nth-child(3) { width: 20%; } .team-memory-context-table thead th { text-align: left; } .team-memory-context-table thead th:last-child { text-align: right; } .team-memory-context-table tbody td { vertical-align: top; } .team-memory-context-table tbody td:last-child { text-align: right; } .team-memory-context-table__sort-button { background: none; border: none; padding: 0; display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; font: inherit; cursor: pointer; font-weight: var(--font-weight-medium); transition: color 0.2s ease; } .team-memory-context-table__sort-button:hover { color: var(--primary-11); } .team-memory-context-table__textarea { width: 100%; resize: vertical; background: var(--secondary-1); border: 1px solid var(--secondary-7); border-radius: var(--radius-2); padding: var(--space-2) var(--space-3); font-size: var(--font-size-3); font-family: var(--default-font-family); color: var(--secondary-12); line-height: 1.5; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .team-memory-context-table__textarea:focus { border-color: var(--primary-11); outline: none; box-shadow: 0 0 0 2px var(--primary-3); } .team-memory-context-table__textarea::placeholder { color: var(--secondary-9); font-size: var(--font-size-3); } /* Team System Message: one organization-wide instruction block per team */ .team-system-message__field { display: flex; flex-direction: column; gap: var(--space-2); } .team-system-message__textarea { width: 100%; min-height: 220px; resize: vertical; background: var(--secondary-1); border: 1px solid var(--secondary-7); border-radius: var(--radius-2); padding: var(--space-2) var(--space-3); font-family: var(--default-font-family); font-size: var(--font-size-3); color: var(--secondary-12); line-height: 1.5; } .team-system-message__textarea:focus { border-color: var(--primary-11); outline: none; box-shadow: 0 0 0 2px var(--primary-3); } .team-system-message__textarea::placeholder { color: var(--secondary-9); font-size: var(--font-size-3); } .team-system-message__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .team-system-message__hint, .team-system-message__count { color: var(--secondary-11); font-size: var(--font-size-2); } .team-system-message__count { font-variant-numeric: tabular-nums; } .team-system-message__count--over { color: var(--failure-11); } .team-system-message__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); } /* Sortable Table Headers */ .team-content__table__sortable-header { cursor: pointer; user-select: none; transition: color 0.2s ease; } .team-content__table__sortable-header:hover { color: var(--primary-11); } .team-content__table__sort-indicator { display: inline-block; font-size: 0.75rem; margin-left: 0.25rem; } /* Quota editing styles following Soft UI */ .quota-edit { display: flex; align-items: center; gap: var(--space-1); } .quota-edit__input-wrapper { position: relative; } .quota-edit__input { width: 80px; padding: var(--space-1) var(--space-2); color: var(--secondary-12); background: var(--secondary-1); border: 1px solid var(--secondary-7); border-radius: var(--radius-2); font-size: var(--font-size-2); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .quota-edit__input:focus { border-color: var(--primary-11); outline: none; box-shadow: 0 0 0 2px var(--primary-3); } .team-content input, .team-content__email-verification { max-width: 100%; } .team-content-quota { display: flex; align-items: center; padding: var(--space-2) var(--space-3); background: var(--primary-3); border-radius: var(--radius-2); color: var(--primary-11); font-weight: var(--font-weight-medium); font-size: var(--font-size-3); } .team-members__toolbar { display: flex; flex-direction: row; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); padding: var(--space-3); background: var(--secondary-2); border-radius: var(--radius-2); border: 1px solid var(--secondary-4); box-shadow: var(--shadow-1); } .team-members__toolbar > section:first-child { flex: 1; display: flex; align-items: center; } .team-members__toolbar .form-field { margin-bottom: 0; width: 100%; } .team-members__toolbar .input-with-icon { width: 100%; display: flex; align-items: center; position: relative; } .team-members__toolbar .btn--dialog { margin-bottom: 0; flex-shrink: 0; } @media (max-width: 768px) { .team-members__toolbar { flex-direction: column; gap: var(--space-2); align-items: stretch; } .team-members__toolbar section { width: 100%; } .team-members__toolbar .form-field { width: 100%; } .team-members__toolbar .input-with-icon { width: 100%; } .team-members__toolbar .team-members-search__input { width: 100%; max-width: none; } } .team-members__list { padding-inline: 0; } .form-field .team-members-search__input { padding-left: calc(var(--space-6) + var(--space-1)); padding-right: var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); color: var(--secondary-12); background: var(--secondary-1); border: 1px solid var(--secondary-7); border-radius: var(--radius-2); margin-right: 0; margin-left: 0; width: 100%; font-size: var(--font-size-3); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; &::placeholder { font-size: var(--font-size-3); color: var(--secondary-9); } &:focus { border-color: var(--primary-11); outline: none; box-shadow: 0 0 0 2px var(--primary-3); } } .team-order-summary { flex: 1; margin-left: var(--space-4); background-color: var(--secondary-2); border: 1px solid var(--secondary-4); padding: var(--space-4); border-radius: var(--radius-2); box-shadow: var(--shadow-2); } .team-order-summary h4 { margin: 0; margin-bottom: var(--space-4); padding: 0; } .order-summary-item { display: flex; justify-content: space-between; margin-bottom: var(--space-2); } .order-summary-label { font-weight: var(--font-weight-light); color: var(--secondary-11); } .order-summary-value { font-weight: var(--font-weight-regular); color: var(--secondary-12); } .team-order-summary button { margin-top: var(--space-4); width: 100%; } @media (max-width: 768px) { .team-order-summary { margin-left: 0; border-left: none; margin-top: var(--space-4); } } .team-sidebar ul { list-style: none; padding: 0; margin: 0; } .team-sidebar h3 { margin-bottom: var(--space-2); } .team-sidebar ul { list-style: none; padding: 0; } .team-sidebar li { padding: var(--space-2) var(--space-3); cursor: pointer; display: flex; align-items: center; border-radius: var(--radius-2); margin-bottom: var(--space-1); font-size: var(--font-size-3); font-weight: var(--font-weight-regular); color: var(--secondary-11); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; background: transparent; } .team-sidebar li:hover { background: var(--secondary-3); color: var(--secondary-12); transform: translateX(2px); } .team-sidebar li.active { background: var(--primary-3); color: var(--primary-11); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-2); } .team-subnav { display: flex; gap: 0; padding: 0; border-bottom: 1px solid var(--secondary-4); position: relative; z-index: 1; } .team-subnav__item { font-size: var(--font-size-3); font-weight: var(--font-weight-regular); color: var(--secondary-10); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-bottom: none; border-radius: var(--radius-3) var(--radius-3) 0 0; cursor: pointer; padding: var(--space-2) var(--space-4); margin-right: -1px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; min-height: 36px; display: flex; align-items: center; } .team-subnav__item:hover { background: var(--secondary-3); color: var(--secondary-12); } .team-subnav__item--active { background: var(--secondary-1); color: var(--secondary-12); font-weight: var(--font-weight-medium); border-color: var(--secondary-4); border-bottom: 1px solid var(--secondary-1); margin-bottom: -1px; cursor: default; position: relative; z-index: 2; } @media (max-width: 768px) { .team-subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding: 0; border-bottom: 1px solid var(--secondary-4); } .team-subnav::-webkit-scrollbar { display: none; } .team-subnav__item { font-size: var(--font-size-3); padding: var(--space-2) var(--space-3); min-height: 44px; display: flex; align-items: center; } } /* Team toggle settings (used in Sharing Settings) */ .team-settings-list { display: flex; flex-direction: column; gap: var(--space-3); } .toggle-setting { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); background: var(--secondary-1); border: 1px solid var(--secondary-3); border-radius: var(--radius-2); cursor: pointer; transition: background-color 0.2s; } .toggle-setting:hover { background: var(--secondary-2); } .toggle-setting__input { margin-top: var(--space-1); cursor: pointer; width: 16px; height: 16px; } .toggle-setting__content { flex: 1; } .toggle-setting__label { display: block; font-size: var(--font-size-3); font-weight: 500; margin-bottom: var(--space-1); } .toggle-setting__help { margin: 0; font-size: var(--font-size-2); color: var(--secondary-11); line-height: 1.5; } .team-settings-section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--secondary-3); } .team-settings-section h4 { margin: 0 0 var(--space-2) 0; font-size: var(--font-size-3); } .team-settings-section p { color: var(--secondary-11); font-size: var(--font-size-2); margin-bottom: var(--space-3); } .team-domain-input-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); } .team-domain-input-row input { flex: 1; padding: var(--space-2); border: 1px solid var(--secondary-3); border-radius: var(--radius-2); font-size: var(--font-size-2); box-sizing: border-box; } .team-domain-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); } .team-domain-pill { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--primary-2); border: 1px solid var(--primary-3); border-radius: var(--radius-2); font-size: var(--font-size-2); } .team-domain-pill button { background: none; border: none; cursor: pointer; color: var(--primary-11); font-size: var(--font-size-1); padding: 0; display: flex; align-items: center; } .team-settings-empty { color: var(--secondary-11); font-size: var(--font-size-2); font-style: italic; } .team-settings-loading { margin-top: var(--space-3); text-align: center; color: var(--secondary-11); font-size: var(--font-size-2); } @media (max-width: 768px) { .team-sidebar { display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 0; padding: 0 var(--space-3); flex: none; border-bottom: 1px solid var(--secondary-4); } .team-sidebar ul { display: flex; gap: var(--space-1); padding: 0; margin: 0; flex-wrap: nowrap; } .team-sidebar li { white-space: nowrap; padding: var(--space-2) var(--space-3); margin: 0; border-radius: 0; line-height: 1.2; font-size: var(--font-size-3); min-height: 44px; display: flex; align-items: center; border: none; border-bottom: 2px solid transparent; background-color: transparent; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease; } .team-sidebar li.active { background-color: transparent; color: var(--primary-11); border-bottom-color: var(--primary-9); font-weight: var(--font-weight-medium); } .team-sidebar li:hover { background-color: transparent; border-bottom-color: var(--secondary-6); transform: none; } .team-sidebar li.active:hover { background-color: transparent; border-bottom-color: var(--primary-9); } .team-container { height: 100%; overflow-y: auto; overflow-x: visible; /* Allow inner tables to scroll horizontally */ display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; padding: 0; } .team-content { padding: var(--space-2) var(--space-3); padding-bottom: var(--space-4); flex: 1; overflow-y: visible; overflow-x: visible; /* Allow inner tables to scroll horizontally */ font-size: var(--font-size-3); } .team-order-summary { margin-left: 0; border-left: none; margin-top: var(--space-4); } .team-content, .team-order-summary { flex-shrink: 0; } } .team-size__input input { width: fit-content; } .team-size__error { color: var(--failure-11); margin-left: var(--space-2); } .team-order__error-container { display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; } .team-order__error { color: var(--failure-11); } .team { margin-bottom: var(--space-4); } .team label { display: block; margin-bottom: var(--space-1); } .team button { margin-right: var(--space-2); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; } .team .danger { background-color: var(--danger); color: white; } .team__form-field { display: flex; justify-content: center; margin-top: var(--space-4); } .team__form-field button { width: auto; } /* Support Form */ .team-support-view { max-width: var(--container-2); margin: 0 auto; padding: var(--space-4); padding-top: 0; } .team-support-view h2 { font-size: var(--font-size-5); color: var(--primary-11); margin-bottom: var(--space-2); } .support-subtext { font-size: var(--font-size-3); color: var(--secondary-11); margin-bottom: var(--space-4); } .support-form { display: flex; flex-direction: column; } .support-form .form-field { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; } .support-form label { font-size: var(--font-size-3); color: var(--secondary-12); } .support-form .input, .support-form .textarea { width: 100%; border: 1px solid var(--secondary-7); border-radius: var(--radius-3); font-size: var(--font-size-3); } .support-form .textarea { resize: vertical; } .support-response-note { margin-top: var(--space-4); font-size: var(--font-size-3); color: var(--secondary-10); text-align: center; } /* AI Usage Display Styles */ .usage-display { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-2); line-height: 1.2; } .usage-item { display: flex; align-items: center; gap: var(--space-1); } .usage-label { font-weight: 500; color: var(--secondary-11); min-width: 4rem; } .usage-value { font-family: var(--font-mono); font-weight: 600; padding: 1px 4px; border-radius: var(--radius-1); font-size: var(--font-size-1); } .usage-low { background-color: var(--green-3); color: var(--green-11); } .usage-medium { background-color: var(--yellow-3); color: var(--yellow-11); } .usage-high { background-color: var(--red-3); color: var(--red-11); } .usage-none { color: var(--secondary-9); font-style: italic; } /* Modern Team Sales Page Styles */ .team-header--modern { text-align: center; padding: var(--space-4); background: var(--secondary-2); border-radius: var(--radius-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--secondary-4); } /* Sales page: prevent hero from overflowing the dialog on small viewports. */ .team-dialog:has(.team-sales-carousel) .team-header--modern { margin-left: 0; margin-right: 0; } .team-header__content { max-width: var(--container-2); margin: 0 auto; } .team-header__title { font-size: var(--font-size-5); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin-bottom: var(--space-2); display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .team-header__icon { width: 32px; height: 32px; flex-shrink: 0; } .team-header__subtitle { font-size: var(--font-size-3); color: var(--secondary-11); margin: 0; line-height: 1.5; } /* Feature Grid Styles */ .team-features { margin-bottom: var(--space-3); } .team-features__title { font-size: var(--font-size-4); color: var(--secondary-12); text-align: center; margin-bottom: var(--space-3); font-weight: var(--font-weight-medium); } .team-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); } @media (max-width: 768px) { .team-features__grid { grid-template-columns: 1fr; gap: var(--space-3); } .team-header--modern { padding: var(--space-4) var(--space-3); margin-bottom: var(--space-4); } .team-header__title { font-size: var(--font-size-5); } .team-header__subtitle { font-size: var(--font-size-3); } } /* Feature Card Styles */ .feature-card { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); padding: var(--team-sales-box-padding, var(--space-3)); display: flex; align-items: flex-start; gap: var(--space-2); box-shadow: var(--shadow-2); } .feature-card__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--primary-3); border-radius: var(--radius-3); color: var(--primary-11); } .feature-card__icon svg { width: 20px; height: 20px; } .feature-card__content { flex: 1; } .feature-card__title { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0 0 var(--space-1) 0; } .feature-card__description { font-size: var(--font-size-2); color: var(--secondary-10); margin: 0; line-height: 1.4; } /* Modern CTA Section */ .team-cta { text-align: center; padding: var(--space-4) 0; margin-top: var(--space-2); } /* Sales header stamps (value props) */ .team-sales-stamps { margin: var(--space-2) 0; } .team-sales-stamps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); } @media (max-width: 1200px) { .team-sales-stamps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .team-sales-stamps__grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { /* Mobile: stamps should be compact, near-square tiles in a single row. If they don't fit, allow horizontal scroll rather than vertical stacking. */ .team-sales-stamps__grid { display: flex !important; flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-1); grid-template-columns: none !important; } .team-sales-stamps .feature-card { flex: 0 0 clamp(120px, 34vw, 160px); aspect-ratio: 1 / 1; padding: var(--space-2); flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-1); } .team-sales-stamps .feature-card__icon { width: 36px; height: 36px; } .team-sales-stamps .feature-card__icon svg { width: 18px; height: 18px; } .team-sales-stamps .feature-card__title { font-size: var(--font-size-2); margin: 0; } .team-sales-stamps .feature-card__description { display: none; } /* Mobile create header: keep the hero card tighter too. */ .team-header--modern { padding: var(--space-3); margin-bottom: var(--space-2); } } @media (max-width: 1024px) { /* Create Team header stamps: force compact one-row tiles on tablet/mobile. Scoped to create flow so we don't disturb sales page behavior. */ .team-dialog:has(.team-create-v4) .team-sales-stamps { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-1); } .team-dialog:has(.team-create-v4) .team-sales-stamps__grid { display: flex !important; flex-wrap: nowrap; width: max-content; min-width: 100%; grid-template-columns: none !important; } .team-dialog:has(.team-create-v4) .team-sales-stamps .feature-card { flex: 0 0 clamp(112px, 24vw, 148px); aspect-ratio: 1 / 1; padding: var(--space-2); flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-1); } .team-dialog:has(.team-create-v4) .team-sales-stamps .feature-card__description { display: none; } } /* Sales CTA: pinned in the dialog footer (grid area), not inside the scrollable content. */ .team-sales-cta-footer { display: flex; justify-content: center; padding: var(--space-3) var(--team-sales-gutter) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--secondary-4); background: var(--secondary-1); } /* Sales CTA: match the create flow CTA (keep it strong, but not oversized). */ .team-sales-cta-footer .btn--upgrade { font-size: var(--font-size-4); padding: var(--space-3) var(--space-4); min-height: 48px; width: 100%; max-width: min(560px, 100%); min-width: 0; box-shadow: var(--shadow-3); transition: background-color 0.2s ease; } /* Keep the CTA stable on hover (avoid bounce/slide effects). The create flow CTA only changes color. */ .team-sales-cta-footer .btn--upgrade:hover { transform: none; box-shadow: var(--shadow-3); } .team-sales-cta-footer .btn--upgrade:active { transform: none; } .team-sales-cta-footer .btn--upgrade svg { transform: none !important; width: 16px; height: 16px; } @media (max-width: 768px) { .team-sales-cta-footer { padding: var(--space-3) var(--space-4); } .team-sales-cta-footer .btn--upgrade { width: 100%; min-width: 0; } } .btn--upgrade { background: var(--primary-11); color: var(--secondary-2); border: none; padding: var(--space-2) var(--space-4); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); border-radius: var(--radius-3); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 200px; justify-content: center; box-shadow: var(--shadow-2); } .btn--upgrade:hover { transform: translateY(-1px); box-shadow: var(--shadow-5); background: var(--primary-10); } .btn--upgrade:active { transform: translateY(0); } .btn--upgrade svg { transition: transform 0.2s ease; } .btn--upgrade:hover svg { transform: translateX(2px); } /* ───────────────────────────────────────────────────────────────────────── Team Sales Carousel (Tabs + Timed Indicator) Used by TEAM_SALES_PAGE in javascripts/elements/team-panel.ts ───────────────────────────────────────────────────────────────────────── */ .team-sales-carousel { margin-bottom: var(--space-3); } .team-sales-carousel__header { width: 100%; margin-top: var(--space-1); } .team-sales-carousel__tabs { display: flex; gap: var(--space-1); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); padding: var(--space-1); width: 100%; overflow-x: hidden; } .team-sales-carousel__tab { appearance: none; border: none; background: transparent; color: var(--secondary-11); font-size: var(--font-size-2); font-weight: var(--font-weight-regular); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); cursor: pointer; white-space: nowrap; position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .team-sales-carousel__tab:hover { background: var(--secondary-3); } .team-sales-carousel__tab.active { color: var(--primary-9); font-weight: var(--font-weight-medium); } /* Tabs are just “active state” controls (not a progress tracker). Show only an underline on the active tab (no grey segments for inactive). */ .team-sales-carousel__tab.active::after { content: ''; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0; height: 3px; background: var(--primary-9); border-radius: 999px; } .team-sales-carousel__progress { display: flex; gap: var(--space-1); width: 100%; padding: 0 var(--space-1) var(--space-1); background: transparent; } .team-sales-carousel__segment { appearance: none; border: none; background: var(--secondary-4); height: 4px; border-radius: 2px; flex: 1; cursor: pointer; overflow: hidden; padding: 0; } .team-sales-carousel__segmentFill { display: block; height: 100%; width: 0; background: var(--primary-9); border-radius: 2px; } .team-sales-carousel__segment.done .team-sales-carousel__segmentFill { width: 100%; } .team-sales-carousel__segment.active .team-sales-carousel__segmentFill.animating { animation: team-sales-carousel-fill linear forwards; } /* When the user clicks a tab, the carousel pauses. In that paused window, hide the progress fill entirely so the indicator doesn't look like it's still “counting down”. */ .team-sales-carousel--paused .team-sales-carousel__segmentFill { width: 0 !important; animation: none !important; } @keyframes team-sales-carousel-fill { from { width: 0; } to { width: 100%; } } .team-sales-carousel__body { margin-top: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; } .team-sales-carousel__slide { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-top: var(--team-sales-content-pad-y, var(--space-2)); padding-bottom: calc(var(--team-sales-content-pad-y, var(--space-2)) * 2); } .team-sales-carousel__row { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-3); align-items: start; width: 100%; } .team-sales-carousel__text h3 { margin: 0 0 var(--space-2) 0; font-size: var(--font-size-4); font-weight: var(--font-weight-medium); color: var(--secondary-12); } .team-sales-carousel__text p { margin: 0 0 var(--space-3) 0; color: var(--secondary-11); font-size: var(--font-size-2); line-height: 1.6; } .team-sales-carousel__list { margin: 0; padding-left: 18px; color: var(--secondary-11); font-size: var(--font-size-2); line-height: 1.6; } .team-sales-carousel__list li { margin-bottom: var(--space-1); } .team-sales-demo-card { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); box-shadow: var(--shadow-2); overflow: hidden; display: flex; flex-direction: column; } .team-sales-demo-card__header { padding: var(--team-sales-box-padding-tight, var(--space-2)) var(--team-sales-box-padding, var(--space-3)); background: var(--secondary-2); border-bottom: 1px solid var(--secondary-4); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); color: var(--secondary-12); } .team-sales-demo-card__body { padding: var(--team-sales-box-padding, var(--space-3)); background: var(--secondary-1); } /* Tighten demo stacking spacing (overrides inline margin-top on some children). */ .team-sales-carousel__demo > * + * { margin-top: var(--space-2) !important; } /* Sales stamps: keep these quiet (supporting info), so CTAs + form inputs stay primary. */ .team-sales-stamps .feature-card { background: var(--secondary-1); border-color: var(--secondary-5); box-shadow: none; padding: var(--space-2); gap: var(--space-1); } .team-sales-stamps .feature-card__icon { background: var(--secondary-3); color: var(--secondary-10); } .team-sales-stamps .feature-card__title { font-size: var(--font-size-2); color: var(--secondary-11); } .team-sales-stamps .feature-card__description { font-size: var(--font-size-1); color: var(--secondary-10); line-height: 1.35; } .team-sales-demo-card__action { color: var(--primary-9); font-size: var(--font-size-2); } .team-sales-demo-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-2); } .team-sales-demo-table th { text-align: left; color: var(--secondary-9); font-size: var(--font-size-1-half); font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--secondary-4); } .team-sales-demo-table td { padding: var(--space-2); border-bottom: 1px solid var(--secondary-3); color: var(--secondary-11); vertical-align: top; } .team-sales-pill { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-2); font-size: var(--font-size-1-half); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .team-sales-pill--danger { background: var(--failure-3); color: var(--failure-11); } .team-sales-pill--success { background: var(--success-3); color: var(--success-11); } .team-sales-audit-entry { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); padding: var(--team-sales-box-padding, var(--space-3)); } .team-sales-audit-entry__top { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-1-half); color: var(--secondary-9); margin-bottom: var(--space-1); } .team-sales-audit-entry__email { font-weight: var(--font-weight-medium); color: var(--secondary-12); } .team-sales-audit-entry__content { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: var(--font-size-2); background: var(--secondary-1); padding: var(--team-sales-box-padding, var(--space-3)); border-radius: var(--radius-2); color: var(--secondary-11); } .team-sales-inline-redacted { background: var(--failure-3); color: var(--failure-11); padding: 0 var(--space-1); border-radius: 2px; } .team-sales-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .team-sales-compare__panel { border: 1px solid var(--secondary-4); border-radius: var(--radius-3); overflow: hidden; background: var(--secondary-1); } .team-sales-compare__panel--after { border-color: var(--primary-7); } .team-sales-compare__header { padding: var(--team-sales-box-padding-tight, var(--space-2)) var(--team-sales-box-padding, var(--space-3)); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); background: var(--secondary-2); color: var(--secondary-11); border-bottom: 1px solid var(--secondary-4); } .team-sales-compare__header--after { background: var(--primary-9); color: var(--secondary-1); } .team-sales-compare__body { padding: var(--team-sales-box-padding, var(--space-3)); } .team-sales-chat-role { font-size: var(--font-size-1-half); color: var(--secondary-9); margin-bottom: var(--space-1); } .team-sales-chat-bubble { padding: var(--space-2); border-radius: var(--radius-2); font-size: var(--font-size-2); line-height: 1.5; margin-bottom: var(--space-2); } .team-sales-chat-bubble:last-child { margin-bottom: 0; } .team-sales-chat-bubble--user { background: var(--primary-3); color: var(--primary-12); } .team-sales-chat-bubble--ai { background: var(--secondary-2); color: var(--secondary-12); } .team-sales-chat-bubble--ai2 { background: var(--primary-2); border: 1px solid var(--primary-4); color: var(--secondary-12); } .team-sales-highlight { background: var(--warning-3); padding: 0 3px; border-radius: 2px; } .team-sales-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .team-sales-flow-card { background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); padding: var(--team-sales-box-padding-tight, var(--space-2)) var(--team-sales-box-padding, var(--space-3)); } .team-sales-flow-trigger { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: var(--font-size-1-half); background: var(--primary-3); color: var(--primary-11); padding: 2px var(--space-2); border-radius: var(--radius-2); margin-bottom: var(--space-1); } .team-sales-flow-title { font-size: var(--font-size-2-half); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin-bottom: 2px; } .team-sales-flow-desc { font-size: var(--font-size-2); color: var(--secondary-11); line-height: 1.4; } @media (max-width: 768px) { .team-sales-carousel__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; touch-action: auto; } .team-sales-carousel__tab { min-height: calc(var(--space-6) + var(--space-3)); display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; } .team-sales-carousel__row { grid-template-columns: 1fr; } .team-sales-compare { grid-template-columns: 1fr; } .team-sales-flow-grid { grid-template-columns: 1fr; } } /* Current user row styling for leaderboard */ .current-user-row { background-color: var(--primary-3) !important; border-left: 3px solid var(--primary-11); } .current-user-row td { color: var(--primary-11) !important; font-weight: var(--font-weight-medium); } /* ══════════════════════════════════════════════════════════════════════════ Team Create v4 (Idea A: Classic Checkout Structure) Used by TEAM_CREATION_PAGE in javascripts/elements/team-panel.ts ══════════════════════════════════════════════════════════════════════════ */ /* Override the dialog grid so the creation page uses the full width (no empty sidebar column). */ .team-container:has(.team-create-v4) { /* Allow vertically centering the create flow on tall viewports (reduces bottom-heavy feel). */ display: flex; flex-direction: column; /* Important: stretch to fill the grid row; otherwise the grid leaves an empty “dead zone” above the fixed footer (shows up as a white bar on mobile). */ height: 100%; min-height: 0; overflow-y: auto; grid-template-columns: 1fr; padding-top: var(--space-2); padding-bottom: 0; padding-left: var(--team-create-gutter); padding-right: var(--team-create-gutter); overflow-x: hidden; } /* Center the create content within the available dialog body height (when there's room). Avoid this on mobile — it creates a large empty bar above the footer CTA. */ @media (min-width: 769px) { .team-container:has(.team-create-v4) .team-content.team-create-v4 { margin-top: auto; margin-bottom: auto; } } /* Create flow: avoid nested scrolling + excessive bottom whitespace. The container scrolls; the content should size naturally. */ .team-container:has(.team-create-v4) .team-content { overflow-y: visible; padding-bottom: var(--space-4); } /* Team create is a conversion-focused flow: use a full-screen takeover on desktop too. */ .team-dialog:has(.team-create-v4) { /* Match the sales page gutters so both conversion flows feel consistent. */ --team-sales-gutter: clamp(var(--space-4), 4vw, var(--space-8)); --team-create-gutter: var(--team-sales-gutter); --team-conversion-content-max-width: var(--container-4-3q, 1024px); position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; min-width: 100vw; max-width: 100vw; max-height: 100svh; border-radius: 0; margin: 0; box-shadow: none; } /* Create flow header: add comfortable vertical padding so it doesn't feel stuck to the top. */ .team-dialog:has(.team-create-v4) .team-header { padding-top: var(--space-6); padding-bottom: var(--space-5); } @media (max-width: 768px) { .team-dialog:has(.team-create-v4) .team-header { /* Mobile: keep the header compact so content stays above-the-fold. */ padding-top: var(--space-3); padding-bottom: var(--space-2); } } /* Create Team: top-left back button (absolute, like the dialog close X). */ .team-dialog__back-btn { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; } /* Create Team: footer CTA pinned in the dialog footer (like sales page). */ .team-create-cta-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--team-sales-gutter) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--secondary-4); background: var(--secondary-1); } .team-create-cta-footer .team-create-v4__cta { margin-top: 0; width: 100%; max-width: min(560px, 100%); } .team-create-cta-footer .team-create-v4__legal { margin-top: 0; text-align: center; max-width: 70ch; } @media (min-width: 769px) { /* Align the footer to the same 1024px conversion container as header/content. */ .team-sales-cta-footer, .team-create-cta-footer { justify-self: center; width: 100%; max-width: var(--team-conversion-content-max-width); margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { .team-dialog:has(.team-create-v4) { --team-sales-gutter: var(--space-4); } } @media (min-width: 769px) { /* Create flow: match the sales page sizing (full-width takeover + shared gutter). */ .team-container:has(.team-create-v4) { justify-self: center; width: 100%; max-width: var(--team-conversion-content-max-width); margin-left: auto; margin-right: auto; } .team-dialog:has(.team-create-v4) .team-header { padding-top: var(--space-2); padding-bottom: var(--space-2); padding-left: var(--team-sales-gutter); padding-right: var(--team-sales-gutter); justify-self: center; width: 100%; max-width: var(--team-conversion-content-max-width); margin-left: auto; margin-right: auto; } } /* Create flow header: reduce default H2/P margins so the page doesn't start with a giant gap. */ .team-dialog:has(.team-create-v4) .team-header h2 { margin: 0; } .team-dialog:has(.team-create-v4) .team-header p { margin: var(--space-1) 0 0 0; max-width: 60ch; color: var(--secondary-11); } /* Theory Sprints: stamps should support the conversion path, not compete with it. Keep them visually quiet so the form fields + footer CTA stay primary. */ .team-dialog:has(.team-create-v4) .team-sales-stamps { margin-top: var(--space-1); margin-bottom: var(--space-3); } .team-dialog:has(.team-create-v4) .team-sales-stamps .feature-card { background: var(--secondary-1); border-color: var(--secondary-5); box-shadow: none; padding: var(--space-2); gap: var(--space-1); } .team-dialog:has(.team-create-v4) .team-sales-stamps .feature-card__icon { border-radius: var(--radius-2); background: var(--secondary-3); color: var(--secondary-10); } .team-dialog:has(.team-create-v4) .team-sales-stamps .feature-card__title { font-size: var(--font-size-2); color: var(--secondary-11); } .team-dialog:has(.team-create-v4) .team-sales-stamps .feature-card__description { font-size: var(--font-size-1); color: var(--secondary-10); line-height: 1.35; } .team-create-v4 { padding-bottom: var(--space-4); } .team-create-v4__layout { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--space-6); align-items: start; justify-content: start; } .team-create-v4__section { margin-bottom: var(--space-6); } .team-create-v4__sectionTitle { font-size: var(--font-size-3); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); } .team-create-v4__field { margin-bottom: var(--space-4); } .team-create-v4__label { display: block; font-size: var(--font-size-2); font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); } .team-create-v4__hint { margin-top: var(--space-1); font-size: var(--font-size-1); color: var(--secondary-11); line-height: 1.5; } .team-create-v4__hint a { color: var(--primary-11); text-decoration: none; } .team-create-v4__hint a:hover { text-decoration: underline; } /* Inputs: the app doesn't have a global `.input` style, so we scope the v4 input styles here. */ .team-create-v4 .input { width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3); font-size: var(--font-size-3); border: 1px solid var(--secondary-6); border-radius: var(--radius-3); background: var(--secondary-1); color: var(--secondary-12); } .team-create-v4 .input::placeholder { color: var(--secondary-9); opacity: 1; } .team-create-v4 .input:disabled { background: var(--secondary-3); color: var(--secondary-9); } .team-create-v4 .input:focus { outline: none; border-color: var(--primary-11); box-shadow: 0 0 0 2px var(--primary-3); } /* Billing cards */ .team-create-v4__billing { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .team-create-v4__billingOpt { appearance: none; border: 2px solid var(--secondary-4); border-radius: var(--radius-3); background: var(--secondary-2); color: var(--secondary-12); padding: var(--space-3); cursor: pointer; position: relative; text-align: left; transition: border-color 0.15s, background-color 0.15s; } .team-create-v4__billingOpt:hover { border-color: var(--secondary-6); } .team-create-v4__billingOpt--on { border-color: var(--primary-9); background: var(--secondary-1); } .team-create-v4__billingTitle { font-weight: var(--font-weight-medium); font-size: var(--font-size-3); } .team-create-v4__billingSub { margin-top: 2px; color: var(--secondary-10); font-size: var(--font-size-2); } .team-create-v4__billingBadge { position: absolute; top: var(--space-2); right: var(--space-2); background: var(--success-9); color: white; font-size: 10px; font-weight: var(--font-weight-bold); padding: 2px 8px; border-radius: 999px; } /* Seats slider */ .team-create-v4__seatsRow { display: grid; grid-template-columns: 96px minmax(0, 560px); gap: var(--space-4); align-items: center; } .team-create-v4__seatsBig { text-align: center; } .team-create-v4__seatsNum { font-size: var(--font-size-6); font-weight: var(--font-weight-bold); line-height: 1.1; } .team-create-v4__seatsLbl { font-size: var(--font-size-1); color: var(--secondary-10); } .team-create-v4__slider { width: 100%; -webkit-appearance: none; height: 6px; background: var(--secondary-4); border-radius: 999px; outline: none; } .team-create-v4__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--primary-9); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-2); } .team-create-v4__slider::-moz-range-thumb { width: 20px; height: 20px; background: var(--primary-9); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-2); border: none; } .team-create-v4__error { color: var(--failure-11); margin: 0 0 var(--space-4) 0; } .team-create-v4__back { margin-top: var(--space-6); } /* Right summary card */ .team-create-v4__summary { position: sticky; top: var(--space-2); justify-self: end; width: 100%; max-width: 460px; background: var(--secondary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-4); padding: var(--space-4); box-shadow: var(--shadow-5); } .team-create-v4__summaryTitle { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-4); font-weight: var(--font-weight-bold); } .team-create-v4__summarySub { margin: 0 0 var(--space-3) 0; color: var(--secondary-11); font-size: var(--font-size-2); } .team-create-v4__features { list-style: none; padding: 0 0 var(--space-3) 0; margin: 0 0 var(--space-3) 0; border-bottom: 1px solid var(--secondary-4); display: flex; flex-direction: column; gap: var(--space-2); } .team-create-v4__features li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--font-size-2); color: var(--secondary-11); line-height: 1.4; } .team-create-v4__features svg { flex-shrink: 0; margin-top: 2px; color: var(--primary-9); } .team-create-v4__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-2); color: var(--secondary-11); padding: 4px 0; } .team-create-v4__rowRight { display: inline-flex; align-items: center; gap: var(--space-2); } .team-create-v4__stepper { display: inline-flex; align-items: center; border: 1px solid var(--secondary-6); border-radius: var(--radius-3); overflow: hidden; background: var(--secondary-1); height: 32px; } .team-create-v4__stepper button { width: 32px; height: 32px; border: none; background: var(--secondary-2); color: var(--secondary-12); cursor: pointer; font-size: 16px; line-height: 1; } .team-create-v4__stepper button:hover { background: var(--secondary-4); } .team-create-v4__stepper button:disabled { cursor: not-allowed; opacity: 0.6; } .team-create-v4__stepper input { width: 56px; height: 32px; border: none; text-align: center; font-size: var(--font-size-2); font-weight: var(--font-weight-medium); background: var(--secondary-1); color: var(--secondary-12); outline: none; border-left: 1px solid var(--secondary-6); border-right: 1px solid var(--secondary-6); } .team-create-v4__discountRow { color: var(--success-11); } .team-create-v4__rowTotal { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--secondary-4); font-size: var(--font-size-3); font-weight: var(--font-weight-bold); color: var(--secondary-12); } .team-create-v4__cta { width: 100%; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); min-height: 48px; border-radius: var(--radius-3); border: none; cursor: pointer; font-size: var(--font-size-4); font-weight: var(--font-weight-medium); background: var(--primary-11); color: var(--secondary-1); box-shadow: var(--shadow-3); } .team-create-v4__cta:hover { background: var(--primary-10); } .team-create-v4__cta--sales { background: var(--primary-9); } .team-create-v4__cta--sales:hover { background: var(--primary-10); } .team-create-v4__legal { margin-top: var(--space-3); font-size: var(--font-size-1); color: var(--secondary-11); line-height: 1.5; } @media (max-width: 900px) { .team-create-v4__layout { grid-template-columns: 1fr; /* Mobile: reduce vertical dead space between the form and the summary. This also removes the “white bar” right above the footer CTA. */ gap: var(--space-3); } .team-create-v4__section { margin-bottom: var(--space-4); } .team-create-v4__seatsRow { grid-template-columns: 96px 1fr; } .team-create-v4__summary { position: static; justify-self: stretch; max-width: none; } } /* ══════════════════════════════════════════════════════════════════════════ Team Configurator (Idea D: Card-Based Configurator) ══════════════════════════════════════════════════════════════════════════ */ /* Override grid to single-column when configurator is present */ .team-container:has(.team-configurator) { display: block; overflow-y: auto; grid-template-columns: 1fr; } /* Shrink dialog to fit content on the creation page */ .team-dialog:has(.team-configurator) { height: auto; max-height: 90vh; max-height: 90svh; } /* Sales page is conversion-focused: use a full-screen takeover on desktop too. The carousel body is scrollable so tab switches don't resize the dialog. */ .team-dialog:has(.team-sales-carousel) { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; min-width: 100vw; max-width: 100vw; max-height: 100svh; border-radius: 0; margin: 0; box-shadow: none; } .team-configurator { padding-bottom: var(--space-4); } .team-configurator__sections { display: flex; flex-direction: column; gap: var(--space-4); } .team-configurator__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } @media (max-width: 768px) { .team-configurator__row { grid-template-columns: 1fr; } } .team-configurator__basics-grid { display: flex; flex-direction: column; gap: var(--space-3); } .team-configurator__basics-grid .form-field { margin-bottom: 0; } /* Billing cycle cards */ .team-configurator__billing-cards { display: flex; flex-direction: column; gap: var(--space-2); } .team-configurator__billing-card { position: relative; background: var(--secondary-1); border: 2px solid var(--secondary-5); border-radius: var(--radius-3); padding: var(--space-4); padding-left: calc(var(--space-4) + 28px); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; } .team-configurator__billing-card:hover { border-color: var(--secondary-7); } .team-configurator__billing-card--selected { border-color: var(--primary-9); background: var(--primary-2); } .team-configurator__billing-card-title { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin-bottom: var(--space-1); } .team-configurator__billing-card-price { font-size: var(--font-size-2); color: var(--secondary-10); } .team-configurator__billing-card-badge { position: absolute; top: -10px; right: var(--space-3); background: var(--success-9); color: white; font-size: 10px; font-weight: var(--font-weight-bold); padding: 3px 10px; border-radius: 999px; } .team-configurator__radio { position: absolute; top: 50%; left: var(--space-3); transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid var(--secondary-6); border-radius: 50%; background: var(--secondary-1); } .team-configurator__billing-card--selected .team-configurator__radio { border-color: var(--primary-9); background: var(--primary-9); } .team-configurator__billing-card--selected .team-configurator__radio::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: white; border-radius: 50%; } /* Team size with slider */ .team-configurator__size-row { display: flex; align-items: center; gap: var(--space-4); } .team-configurator__size-display { min-width: 72px; text-align: center; } .team-configurator__size-number { font-size: var(--font-size-5); font-weight: var(--font-weight-bold); color: var(--secondary-12); } .team-configurator__size-label { font-size: var(--font-size-1); color: var(--secondary-9); } .team-configurator__size-slider { flex: 1; -webkit-appearance: none; height: 6px; background: var(--secondary-4); border-radius: 999px; outline: none; } .team-configurator__size-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--primary-9); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-2); transition: transform 0.1s; } .team-configurator__size-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .team-configurator__size-slider::-moz-range-thumb { width: 20px; height: 20px; background: var(--primary-9); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-2); border: none; } .team-configurator__size-note { font-size: var(--font-size-2); color: var(--secondary-9); margin-top: var(--space-2); } .team-configurator__size-note a { color: var(--primary-11); text-decoration: none; cursor: pointer; } .team-configurator__size-note a:hover { text-decoration: underline; } /* Price bar */ .team-configurator__price-bar { display: flex; align-items: center; justify-content: space-between; background: var(--secondary-12); color: white; padding: var(--space-4) var(--space-5); border-radius: var(--radius-3); margin-top: var(--space-4); } .team-configurator__price-left { display: flex; flex-direction: column; } .team-configurator__price-amount { font-size: var(--font-size-5); font-weight: var(--font-weight-bold); } .team-configurator__price-detail { font-size: var(--font-size-1); color: var(--secondary-8); } .team-configurator__price-bar .btn { background: white; color: var(--secondary-12); border: none; } .team-configurator__price-bar .btn:hover { background: var(--secondary-3); } /* Contact-us gate for 100+ seats */ .team-configurator__contact-bar { display: flex; align-items: center; justify-content: space-between; background: var(--primary-3); border: 1px solid var(--primary-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-3); margin-top: var(--space-4); } .team-configurator__contact-left { display: flex; flex-direction: column; } .team-configurator__contact-title { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--primary-12); } .team-configurator__contact-subtitle { font-size: var(--font-size-2); color: var(--primary-11); } .team-configurator__vat-note { font-size: var(--font-size-1); color: var(--secondary-9); text-align: center; margin-top: var(--space-3); } .team-configurator__error { font-size: var(--font-size-2); color: var(--failure-11); text-align: center; margin-top: var(--space-3); } .team-configurator__back-link { margin-top: var(--space-4); } @media (max-width: 768px) { .team-configurator__billing-cards { grid-template-columns: 1fr; } .team-configurator__size-row { flex-wrap: wrap; } .team-configurator__size-slider { width: 100%; order: 3; } .team-configurator__size-note { flex: 1; text-align: left; } .team-configurator__price-bar, .team-configurator__contact-bar { flex-direction: column; gap: var(--space-3); text-align: center; } } /* ─── Invite Flow ─── */ /* Entry row: email input + Add button */ .invite-entry-row { display: flex; gap: var(--space-2); align-items: center; } .invite-entry-row .team-member-input { flex: 1; min-width: 0; } .invite-entry-row .btn { flex-shrink: 0; } /* Mobile: stack input and button vertically */ @media (max-width: 480px) { .invite-entry-row { flex-direction: column; align-items: stretch; } .invite-entry-row .team-member-input { width: 100%; } .invite-entry-row .btn { width: 100%; } } /* Inline validation error below input */ .invite-validation-error { color: var(--error-text, var(--red-11, #dc3545)); font-size: var(--font-size-2); min-height: 1.25em; margin-top: var(--space-1); } .invite-validation-error:empty { display: none; } /* Invite list container */ .invite-list { margin-top: var(--space-4); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); background: var(--secondary-2); overflow: hidden; } /* List header */ .invite-list__header { font-size: var(--font-size-2); font-weight: var(--font-weight-medium); color: var(--secondary-10); letter-spacing: 0.05em; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--secondary-4); background: var(--secondary-3); } /* Individual invite row */ .invite-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--secondary-3); } .invite-row:last-child { border-bottom: none; } /* Avatar circle */ .invite-row__avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-3); color: var(--primary-11); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); flex-shrink: 0; text-transform: uppercase; } /* Info column */ .invite-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } .invite-row__email { font-size: var(--font-size-3); color: var(--secondary-12); font-weight: var(--font-weight-medium); word-break: break-all; } /* Context text (read-only display) */ .invite-row__context-text { font-size: var(--font-size-2); color: var(--secondary-10); line-height: 1.4; } /* Context editor area */ .invite-row__context-editor { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); } .invite-row__context-textarea { resize: vertical; min-height: 48px; font-size: var(--font-size-2); } .invite-row__context-actions { display: flex; gap: var(--space-2); align-items: center; } /* Remove button */ .invite-row__remove { flex-shrink: 0; background: none; border: none; color: var(--secondary-9); cursor: pointer; padding: var(--space-1); border-radius: var(--radius-1); display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s ease, background 0.15s ease; margin-top: var(--space-1); } .invite-row__remove:hover { color: var(--red-11, #dc3545); background: var(--red-3, rgba(220, 53, 69, 0.08)); } /* Send button spacing */ .invite-list + .btn--wide, .invite-list ~ .btn--wide { margin-top: var(--space-4); } /* Send button when list is empty (direct after form) */ .team-content-wrapper > .btn--wide:last-child { margin-top: var(--space-4); } /* Team panel dialog must sit above navrail and unified-input */ cami-team-panel .dialog__backdrop { z-index: var(--z-index-9); } cami-team-panel .team-dialog { position: relative; z-index: var(--z-index-9); } /* /css/components/toast.css */ /* Ensure the custom element doesn't interfere */ internet-toast { display: contents; } /* Toast Container */ .toast-container { position: fixed; top: var(--space-4); left: 50%; transform: translateX(-50%); /* Above modals: the toast must outlive any dialog that triggered it. Keep this on the shared scale instead of a magic number so the stacking order stays readable next to --z-index-1..9. */ z-index: var(--z-index-modal); pointer-events: none; display: flex; flex-direction: column; gap: var(--space-2); width: max-content; max-width: 90vw; } /* Individual Toast */ .toast { background-color: transparent; /* Default neutral background */ border: 1px solid var(--secondary-4); border-radius: var(--radius-3); box-shadow: var(--shadow-9); padding: var(--space-3); pointer-events: auto; cursor: pointer; transition: opacity 0.2s ease, box-shadow 0.2s ease; animation: fadeSlideIn 0.2s ease-out; min-width: 350px; max-width: 500px; position: relative; transform-origin: center; } .toast:hover { transform: translateY(-1px); box-shadow: var(--shadow-9); } /* Toast Content Layout */ .toast__content { display: flex; align-items: center; gap: var(--space-2); } /* Toast Icon */ .toast__icon { flex-shrink: 0; width: 16px; height: 16px; } /* Toast Message */ .toast__message { flex: 1; font-size: var(--font-size-2); color: var(--secondary-12); /* Default color, overridden by toast types */ line-height: 1.4; text-align: center; } /* Toast Close Button */ .toast__close { flex-shrink: 0; background: none; border: none; padding: 0; cursor: pointer; color: var(--secondary-10); opacity: 0.7; transition: opacity 0.2s ease; margin-left: var(--space-2); } .toast__close:hover { opacity: 1; } /* Toast Type Variants */ .toast--info { border-left: 4px solid var(--primary-8); background-color: var(--primary-1); } .toast--info .toast__icon { color: var(--primary-11); } .toast--info .toast__message { color: var(--primary-12); } .toast--info .toast__close { color: var(--primary-12); } .toast--success { border-left: 4px solid var(--success-8); background-color: var(--success-2); } .toast--success .toast__icon { color: var(--success-11); } .toast--success .toast__message { color: var(--success-12); } .toast--success .toast__close { color: var(--success-12); } .toast--warning { border-left: 4px solid var(--warning-8); background-color: var(--warning-2); } .toast--warning .toast__icon { color: var(--warning-11); } .toast--warning .toast__message { color: var(--warning-12); } .toast--warning .toast__close { color: var(--warning-12); } .toast--error { border-left: 4px solid var(--failure-8); background-color: var(--failure-2); } .toast--error .toast__icon { color: var(--failure-11); } .toast--error .toast__message { color: var(--failure-12); } .toast--error .toast__close { color: var(--failure-12); } /* Animations */ @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Mobile Adjustments */ @media (max-width: 768px) { .toast-container { top: var(--space-3); max-width: calc(100vw - var(--space-4)); } .toast { min-width: unset; width: 100%; } } /* /css/components/tooltips.css */ /* Labels belong to the tooltip runtime, and it decides per input type: a tap on a control never opens one, a tap on an informational trigger does. Do not hide every label here; that also removes the labels a tap is meant to read. */ .tooltip { position: fixed; background-color: var(--secondary-12); color: var(--secondary-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-3); font-size: var(--font-size-1); max-width: var(--container-0); word-wrap: break-word; z-index: var(--z-index-5); pointer-events: none; text-align: center; line-height: var(--default-line-height); opacity: 0; transition: opacity 0.2s var(--ease-out-cubic); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .tooltip.visible { opacity: 1; } .tooltip { /* Arrow removed for simpler positioning */ } /* /css/components/toolbar.css */ .ai-editor-dialog.toolbar-hidden { display: none !important; } .toolbar-dialog { background-color: var(--secondary-2); border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-1); display: flex !important; flex-direction: row; gap: var(--space-2); align-items: center; width: fit-content; border: none; margin: 0; } .toolbar-dialog.toolbar-hidden { display: none !important; } .toolbar-button { background: transparent; border: none; cursor: pointer; padding: var(--space-1); border-radius: var(--radius-3); transition: background-color 0.3s ease; display: flex; align-items: center; justify-content: center; } .toolbar-button svg { width: 18px; height: 18px; transition: stroke 0.3s ease; } .toolbar-button path { fill: var(--secondary-12); } .toolbar-button:hover path { fill: var(--primary-11); } .toolbar-button:hover { background-color: var(--secondary-3); } .toolbar-button:active { background-color: var(--secondary-4); } @media (max-width: 768px) { .toolbar-dialog { flex-wrap: wrap; justify-content: center; } } /* /css/components/unifiedInput.css */ .unified-input { width: min(100%, 80vw); max-width: var(--container-4); margin: 0 auto; padding: var(--space-7) var(--space-4) var(--space-5); box-sizing: border-box; } unified-input[data-workspace-mode='true'] .unified-input { width: 100%; max-width: none; margin: 0; padding: 0; } .unified-input__header { text-align: center; margin-bottom: var(--space-6); } .unified-input__title { font-size: var(--font-size-10); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin-bottom: var(--space-2); line-height: var(--line-height-9); } .unified-input__subtitle { font-size: var(--font-size-4); font-weight: var(--font-weight-regular); color: var(--secondary-10); margin-bottom: var(--space-5); line-height: var(--line-height-5); } /* Tablet viewport (768px-1024px) - smarter overflow handling */ @media (min-width: 768px) and (max-width: 1024px) { /* Container-constrained elements: respect container boundaries */ .unified-input { width: min(100%, 85vw); max-width: var(--container-4); margin: 0 auto; box-sizing: border-box; } .unified-input__container { max-width: 100%; box-sizing: border-box; } /* Viewport-constrained elements: respect viewport boundaries */ .dropdown-menu { width: min(100%, 85vw); max-width: var(--container-4); margin: 0 auto; box-sizing: border-box; } .unified-input .dropdown-menu.domain-menu, .unified-input .dropdown-menu.ai-model-menu, .unified-input .dropdown-menu.agent-menu, .unified-input .dropdown-menu.files-search-menu { width: min(100%, 85vw); max-width: var(--container-4); margin: 0 auto; left: 50%; transform: translateX(-50%); box-sizing: border-box; } /* Input fields and textareas: prevent horizontal overflow */ .unified-input__textarea, .domain-input, .file-pill { max-width: 100%; box-sizing: border-box; } } @media (max-width: 768px) { .unified-input__title { font-size: var(--font-size-8); } .unified-input__subtitle { font-size: var(--font-size-3); margin-bottom: var(--space-4); } .unified-input { width: min(100%, 90vw); max-width: 100%; padding: var(--space-5) 0; } .unified-input__container { padding: var(--space-3); } } .unified-input__container { position: relative; background-color: var(--secondary-1); border: 1px solid var(--secondary-6); border-radius: var(--radius-5); padding: var(--space-4); box-shadow: var(--shadow-4); transition: border-color 0.2s var(--ease-out-cubic); box-sizing: border-box; } .unified-input__container:focus-within { border-color: var(--primary-9); box-shadow: var(--shadow-5); transition: box-shadow 0.15s ease-in-out; } /* Dropzone Overlay Styles */ .dropzone-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(var(--primary-1-rgb), 0.95); border: 2px dashed var(--primary-9); border-radius: var(--radius-5); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease-out-cubic); z-index: var(--z-index-2); } .dropzone-overlay.active { opacity: 1; pointer-events: auto; } .dropzone-overlay p { text-align: center; color: var(--primary-11); font-size: var(--font-size-4); font-weight: var(--font-weight-medium); line-height: var(--line-height-5); margin: 0; } .unified-input__textarea { width: 100%; min-height: 104px; max-height: 400px; padding: var(--space-3) var(--space-4); border: none; background: transparent; color: var(--secondary-12); font-size: var(--font-size-3-half); line-height: var(--line-height-5); resize: none; outline: none; font-family: var(--default-font-family); } .unified-input__textarea::placeholder { color: var(--secondary-9); } .unified-input__textarea:disabled { opacity: 0.6; cursor: not-allowed; } /* Keyboard Hint */ .keyboard-hint { font-size: var(--font-size-1-half); color: var(--secondary-11); font-weight: var(--font-weight-regular); opacity: 0; transform: scale(0.95) translateX(-4px); transition: opacity var(--duration-quick) var(--ease-out-cubic), transform var(--duration-quick) var(--ease-out-cubic); margin-right: var(--space-3); white-space: nowrap; display: flex; align-items: center; height: 100%; } .unified-input__actions .keyboard-hint { opacity: 1; transform: scale(1) translateX(0); } /* Submit Section */ .submit-section { display: flex; align-items: center; gap: var(--space-3); } /* Selected Files Display */ .unified-input__files { padding: var(--space-1) var(--space-2); border-top: 1px solid var(--secondary-6); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .unified-input__domains { padding: var(--space-1) var(--space-2); border-top: 1px solid var(--secondary-6); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .domain-chip { display: inline-flex; align-items: center; gap: var(--space-half); padding: var(--space-1) var(--space-2); background-color: var(--secondary-3); border-radius: var(--radius-9); font-size: var(--font-size-2-half); color: var(--secondary-11); } .domain-chip--locked { background-color: var(--primary-3); color: var(--primary-11); } .domain-chip__pin { color: var(--primary-9); flex-shrink: 0; } .domain-chip__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .domain-chip__remove { background: none; border: none; color: var(--secondary-9); cursor: var(--cursor-link); padding: 0; margin-left: var(--space-1); font-size: var(--font-size-4); line-height: 1; width: var(--space-4-half); height: var(--space-4-half); display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); } .domain-chip__remove:hover { background-color: var(--secondary-4); color: var(--secondary-12); } .domain-input-container { flex: 1; min-width: 120px; } .domain-input { width: 100%; padding: var(--space-1) var(--space-2); border: none; background: transparent; color: var(--secondary-12); font-size: var(--font-size-2-half); outline: none; } .add-domain-btn { padding: var(--space-1) var(--space-3); background: none; border: 1px dashed var(--secondary-6); border-radius: var(--radius-9); color: var(--secondary-9); font-size: var(--font-size-2-half); cursor: var(--cursor-link); transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); } .add-domain-btn:hover { border-color: var(--primary-9); color: var(--primary-9); } .unified-input__actions { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-3) 0; border-top: 1px solid var(--secondary-6); } .unified-input__options { position: relative; display: flex; gap: var(--space-2); align-items: center; } .option-group { position: relative; display: flex; align-items: center; } .option-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 32px; min-width: 32px; padding: var(--space-1) var(--space-2-half); background: none; border: 1px solid var(--secondary-6); border-radius: var(--radius-3); color: var(--secondary-11); font-size: var(--font-size-2-half); cursor: var(--cursor-link); transition: background-color var(--duration-fast) var(--ease-out-cubic), border-color var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic); } .option-button:hover { border-color: var(--primary-9); color: var(--primary-9); } .option-button--active { background-color: var(--primary-3); border-color: var(--primary-9); color: var(--primary-9); } .option-button svg { width: 16px; height: 16px; } /* ZDR Badge */ .zdr-badge { display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px; background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary-3) 100%); border: 1px solid var(--primary-6); border-radius: 4px; font-size: 10px; font-weight: var(--font-weight-bold); color: var(--primary-11); letter-spacing: 0.02em; margin-left: var(--space-1); } .zdr-badge svg { width: 10px !important; height: 10px !important; margin-left: 0 !important; display: block; } .byok-badge { display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px; background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary-3) 100%); border: 1px solid var(--primary-6); border-radius: 4px; font-size: 10px; font-weight: var(--font-weight-bold); color: var(--primary-11); letter-spacing: 0.02em; margin-left: var(--space-1); } .byok-badge svg { width: 10px !important; height: 10px !important; margin-left: 0 !important; display: block; } .option-button.depth-toggle { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2-half); background-color: transparent; border-radius: var(--radius-3); color: var(--primary-11); transition: background-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic); } .option-button.depth-toggle.active { background-color: var(--secondary-2-half); color: var(--secondary-11); } .option-button.depth-toggle.other-menu-open { background-color: transparent; color: var(--secondary-11); } .depth-toggle__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; } .option-button.depth-toggle .depth-meter { display: inline-flex; align-items: center; gap: 2px; width: 20px; height: 12px; } .option-button.depth-toggle .depth-meter__block { flex: 1; height: 100%; border-radius: 2px; background-color: var(--primary-4); transition: background-color 0.2s var(--ease-out-cubic); } .option-button.depth-toggle .depth-meter__block--filled { background-color: var(--primary-9); } .option-button.depth-toggle .depth-toggle__label { margin-left: var(--space-1); font-size: var(--font-size-2); line-height: 1; color: var(--secondary-11); white-space: nowrap; } .option-button.mode-toggle { min-width: 92px; } .option-button.domain-toggle { padding: var(--space-1-half); margin-left: -1px; border-left: none; border-radius: 0 var(--radius-3) var(--radius-3) 0; } .option-button:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--secondary-4); color: var(--secondary-9); } .option-button:disabled:hover { border-color: var(--secondary-4); color: var(--secondary-9); background: transparent; } /* Dropdown Menus */ .dropdown-menu { position: absolute; top: calc(100% + var(--space-2)); left: 0; background: var(--secondary-1); border: 1px solid var(--secondary-6); border-radius: var(--radius-3); box-shadow: var(--shadow-6); min-width: var(--container-narrow-3); /* 320px scaled */ max-width: var(--container-0-half); /* 368px scaled */ z-index: var(--z-index-6); } .agent-menu { padding: var(--space-2); } .menu-option { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); cursor: var(--cursor-link); border-radius: var(--radius-3); transition: background-color 0.2s var(--ease-out-cubic); } .menu-option:hover { background-color: var(--secondary-3); } .menu-option input[type="radio"] { margin-top: var(--space-1); accent-color: var(--primary-9); } .menu-option-title { display: block; font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); } .menu-option-description { display: block; font-size: var(--font-size-2); color: var(--secondary-10); margin-top: var(--space-1); } /* Domain Menu */ .domain-menu { padding: var(--space-3); } /* More specific selector to override chat.css without !important */ .unified-input .dropdown-menu.domain-menu { background: var(--secondary-1); border: 1px solid var(--secondary-6); z-index: var(--z-index-9); /* Override the low z-index from chat.css */ min-width: var(--container-0-3q); /* 408px scaled - more space for domain input */ } .domain-menu-header { margin-bottom: var(--space-3); } .domain-menu-title { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0 0 var(--space-1) 0; } .domain-menu-description { font-size: var(--font-size-2); color: var(--secondary-10); margin: 0; } .domain-input-wrapper { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-2); border-radius: var(--radius-3); background: var(--secondary-2); border: 1px solid var(--secondary-4); } .depth-menu-header { margin-bottom: var(--space-2); } .depth-menu-title { margin: 0; font-size: var(--font-size-3); font-weight: var(--font-weight-semibold); color: var(--secondary-12); } .depth-models-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); } .depth-models-grid .model-card-dropdown-label { display: flex; flex-direction: column; gap: var(--space-2); } .depth-models-grid--chat { grid-template-columns: repeat(3, minmax(0, 1fr)); } .model-header .depth-meter-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-2); background-color: var(--primary-3); color: var(--primary-10); } .model-header .depth-meter-badge .depth-meter { display: flex; align-items: center; gap: 2px; width: 100%; height: 100%; } .model-header .depth-meter-badge .depth-meter__block { flex: 1; height: 100%; border-radius: 2px; background-color: var(--primary-4); transition: background-color 0.2s var(--ease-out-cubic); } .model-header .depth-meter-badge .depth-meter__block--filled { background-color: var(--primary-9); } .domain-input { flex: 1; padding: var(--space-2) var(--space-3); border: 1px solid var(--secondary-6); border-radius: var(--radius-3); background: var(--secondary-1); color: var(--secondary-12); font-size: var(--font-size-3); font-weight: var(--font-weight-regular); outline: none; transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); } .domain-input:focus { border-color: var(--primary-9); background: var(--secondary-1); box-shadow: 0 0 0 3px rgba(var(--primary-9-rgb), 0.1); } .domain-input::placeholder { color: var(--secondary-9); font-size: var(--font-size-2-half); } .add-domain-btn { padding: var(--space-2) var(--space-3); background: var(--primary-9); color: var(--primary-1); border: none; border-radius: var(--radius-3); font-size: var(--font-size-3); font-weight: var(--font-weight-medium); cursor: var(--cursor-link); transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); box-shadow: var(--shadow-2); min-width: 44px; } .add-domain-btn:hover { background-color: var(--primary-10); box-shadow: var(--shadow-4); transform: translateY(-1px); } .add-domain-btn:active { transform: translateY(0); box-shadow: var(--shadow-1); } .domain-error { color: var(--danger-11); font-size: var(--font-size-2); margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); background: rgba(var(--danger-3-rgb), 0.5); border-radius: var(--radius-3); border: 1px solid var(--danger-6); } .domain-list { border-top: 1px solid var(--secondary-4); padding-top: var(--space-3); margin-top: var(--space-3); } .domain-list-title { font-size: var(--font-size-2); font-weight: var(--font-weight-medium); color: var(--secondary-10); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.05em; } .domain-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); font-size: var(--font-size-3); font-weight: var(--font-weight-regular); transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); } .domain-item:hover { background: var(--secondary-3); border-color: var(--secondary-6); } .domain-item span { color: var(--secondary-12); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .domain-remove { background: none; border: none; color: var(--secondary-9); font-size: var(--font-size-5); cursor: var(--cursor-link); padding: var(--space-1) var(--space-2); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)); line-height: 1; transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .domain-remove:hover { color: var(--danger-11); background: rgba(var(--danger-3-rgb), 0.5); } .unified-input__submit { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-2) var(--space-5); background-color: var(--primary-9); color: var(--primary-1); border: none; border-radius: var(--radius-3); font-weight: var(--font-weight-regular); font-size: var(--font-size-2-half); cursor: var(--cursor-link); transition: background-color var(--duration-quick) var(--ease-out-cubic), box-shadow var(--duration-quick) var(--ease-out-cubic), transform var(--duration-quick) var(--ease-out-cubic); } .unified-input__submit:hover:not(:disabled) { background-color: var(--primary-10); transform: translateY(-1px); box-shadow: var(--shadow-5); } .unified-input__submit:disabled { background-color: var(--secondary-4); color: var(--secondary-11); cursor: not-allowed; } .shortcut { font-size: var(--font-size-1-half); opacity: 0.8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .mobile-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: var(--z-index-8); display: none; animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { .mobile-backdrop { display: block; } } @media (max-width: 768px) { .unified-input { padding: var(--space-5) 0; } .unified-input__container { padding: var(--space-4); } .unified-input__actions { flex-direction: column; gap: var(--space-4); align-items: stretch; } .unified-input__options { justify-content: center; } .option-group { position: static; } .dropdown-menu { position: fixed; top: auto; bottom: 0; left: 0; right: 0; max-width: none; width: min(100%, 90vw); margin: 0 auto; border-radius: var(--radius-3) var(--radius-3) 0 0; max-height: 80vh; overflow-y: auto; z-index: var(--z-index-9); animation: slideUp 0.2s ease-out; box-shadow: var(--shadow-9); } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .agent-menu, .domain-menu, .ai-model-menu, .files-search-menu { padding: var(--space-4); } /* Ensure all dropdown menus respect mobile width and position */ .unified-input .dropdown-menu.domain-menu, .unified-input .dropdown-menu.ai-model-menu, .unified-input .dropdown-menu.agent-menu, .unified-input .dropdown-menu.files-search-menu { width: min(100svw, 100vw); max-width: 100svw; min-width: auto; position: fixed; top: auto; bottom: 0; left: 50%; transform: translateX(-50%); max-width: none; border-radius: var(--radius-3) var(--radius-3) 0 0; max-height: 80vh; overflow-y: auto; z-index: var(--z-index-9); animation: slideUp 0.2s ease-out; box-shadow: var(--shadow-9); } .unified-input__submit { width: 100%; justify-content: center; } } /* File Search Menu Styles */ /* Base styles for standard dropdown menus */ /* .dropdown-menu:not(.files-search-menu) { */ /* padding: var(--space-3); */ /* min-width: var(--container-0-3q); */ /* } */ /* Styles for the combined case (element with both classes) */ .dropdown-menu.files-search-menu { padding: var(--space-3); min-width: var(--container-0-3q); /* 408px scaled - more space for file list */ } /* Styles for standalone files-search-menu (without dropdown-menu class) */ div.files-search-menu:not(.dropdown-menu) { padding: var(--space-3) 0; } .files-search-menu { display: flex; flex-direction: column; gap: var(--space-3); } .files-search-menu__title.command__suggestions-h4 { margin: 0; padding: 0; max-width: none; } .files-search-menu__search-field { margin: 0; } .files-search-menu__search-input { min-height: 42px; } .files-search-menu__loading { margin: 0; padding: var(--space-2); border: 1px dashed var(--secondary-5); border-radius: var(--radius-2); color: var(--secondary-10); } .files-search-menu__results.files-filter { margin: 0; padding: var(--space-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); background: var(--secondary-1); min-height: 52px; align-content: flex-start; } .files-search-menu__results .pill { max-width: 100%; } .files-search-menu__pagination { display: flex; flex-direction: column; gap: var(--space-1); } .files-search-menu__pagination .pagination { margin: 0; } .files-search-menu__page-indicator.pagination-current { margin: 0; padding-left: var(--space-1); } .files-search-menu__upload-btn.btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--font-size-2); background-color: var(--secondary-2); border: 1px solid var(--secondary-5); } .files-search-menu__upload-btn.btn:hover { background-color: var(--secondary-3); border-color: var(--secondary-7); } .file-loading, .file-no-results { padding: var(--space-3); text-align: center; color: var(--secondary-10); font-size: var(--font-size-2); } .file-list { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); } .file-pill { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); color: var(--secondary-12); font-size: var(--font-size-2-half); cursor: var(--cursor-link); transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); text-align: left; width: 100%; } .file-pill:hover { background: var(--secondary-3); border-color: var(--secondary-6); } .file-pill.active { background: var(--primary-3); border-color: var(--primary-6); color: var(--primary-12); } .file-pill svg { flex-shrink: 0; width: 12px; height: 12px; } .file-pagination { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--secondary-4); border-bottom: 1px solid var(--secondary-4); } .file-page-btn { padding: var(--space-1) var(--space-2); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); color: var(--secondary-11); font-size: var(--font-size-2); cursor: var(--cursor-link); transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); } .file-page-btn:hover:not(:disabled) { background: var(--secondary-3); border-color: var(--secondary-6); } .file-page-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pagination-current { font-size: var(--font-size-2); color: var(--secondary-10); } .file-upload-section { border-top: 1px solid var(--secondary-4); padding-top: var(--space-3); } .file-upload-btn { width: 100%; padding: var(--space-2) var(--space-3); background: var(--primary-9); color: var(--primary-1); border: none; border-radius: var(--radius-3); font-size: var(--font-size-2-half); font-weight: var(--font-weight-medium); cursor: var(--cursor-link); transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); } .file-upload-btn:hover { background: var(--primary-10); transform: translateY(-1px); box-shadow: var(--shadow-3); } .file-upload-btn:active { transform: translateY(0); box-shadow: var(--shadow-1); } /* Mobile file menu adjustments */ @media (max-width: 768px) { .files-search-menu { width: min(100%, 90vw); padding: var(--space-4); gap: var(--space-2); } .file-pagination { flex-direction: row; gap: var(--space-2); justify-content: space-between; align-items: center; } .file-page-btn { flex: 1; min-width: 80px; } .pagination-current { flex: 0 0 auto; text-align: center; } .files-search-menu__results.files-filter { padding: var(--space-1) var(--space-2); } .files-search-menu__upload-btn.btn { align-self: stretch; } } /* Model Accordion Toggle */ .model-accordion-toggle { display: flex; justify-content: flex-end; margin-top: var(--space-3); } /* CSV Restriction Notice */ .csv-restriction-notice { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); background-color: var(--warning-3); border: 1px solid var(--warning-6); border-radius: var(--radius-3); color: var(--warning-11); font-size: var(--font-size-2-half); } .csv-restriction-notice svg { flex-shrink: 0; width: 16px; height: 16px; } /* Image Restriction Notice */ .image-restriction-notice { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); background-color: var(--warning-3); border: 1px solid var(--warning-6); border-radius: var(--radius-3); color: var(--warning-11); font-size: var(--font-size-2-half); } .image-restriction-notice svg { flex-shrink: 0; width: 16px; height: 16px; } /* AI Model Menu */ .ai-model-menu { padding: var(--space-3); } @media (min-width: 769px) { .ai-model-menu { min-width: var(--container-0-3q); } } /* More specific selector to ensure proper styling */ .unified-input .dropdown-menu.ai-model-menu { background: var(--secondary-1); border: 1px solid var(--secondary-6); z-index: var(--z-index-9); } /* AI Models Grid for Dropdown Menu */ .ai-models-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); max-height: 50vh; overflow-y: auto; padding: var(--space-1) 0; } /* Dropdown menu is always single column - only adjust spacing and height */ @media (min-width: 768px) { .ai-models-grid { grid-template-columns: 1fr; gap: var(--space-1-half); max-height: 60vh; } .model-card-dropdown-label { padding: var(--space-2); } } @media (min-width: 1024px) { .ai-models-grid { grid-template-columns: 1fr; gap: var(--space-2); max-height: 55vh; } .model-card-dropdown-label { padding: var(--space-2-half); } } @media (min-width: 1280px) { .ai-models-grid { grid-template-columns: 1fr; gap: var(--space-2); max-height: 50vh; } .model-card-dropdown-label { padding: var(--space-2-half); } } /* Ultra-wide screens */ @media (min-width: 1536px) { .ai-models-grid { grid-template-columns: 1fr; gap: var(--space-2); max-height: 45vh; } .model-card-dropdown-label { padding: var(--space-2); } } .model-card-dropdown { position: relative; background-color: var(--secondary-2); border: 1px solid var(--secondary-5); border-radius: var(--radius-2); transition: background-color 0.15s var(--ease-out-cubic), border-color 0.15s var(--ease-out-cubic), color 0.15s var(--ease-out-cubic), box-shadow 0.15s var(--ease-out-cubic), opacity 0.15s var(--ease-out-cubic), transform 0.15s var(--ease-out-cubic), fill 0.15s var(--ease-out-cubic), stroke 0.15s var(--ease-out-cubic); overflow: hidden; } .model-card-dropdown-input { position: absolute; opacity: 0; pointer-events: none; } .model-card-dropdown-label { display: block; padding: var(--space-3); cursor: pointer; user-select: none; transition: background-color 0.15s var(--ease-out-cubic), border-color 0.15s var(--ease-out-cubic), color 0.15s var(--ease-out-cubic), box-shadow 0.15s var(--ease-out-cubic), opacity 0.15s var(--ease-out-cubic), transform 0.15s var(--ease-out-cubic), fill 0.15s var(--ease-out-cubic), stroke 0.15s var(--ease-out-cubic); text-align: left; } /* Dynamic compactness for smaller screens */ @media (max-width: 767px) { .ai-models-grid { grid-template-columns: 1fr; gap: var(--space-1); max-height: 60vh; } .model-card-dropdown { margin: 0; } .model-card-dropdown-label { padding: var(--space-2); } } @media (max-width: 480px) { .ai-models-grid { grid-template-columns: 1fr; gap: var(--space-1-half); max-height: 70vh; } .model-card-dropdown-label { padding: var(--space-1-half) var(--space-2); } } /* Ultra-compact for very small dropdowns */ @media (max-height: 600px) { .ai-models-grid { max-height: 40vh; gap: var(--space-1); } .model-card-dropdown-label { padding: var(--space-2); } } @media (max-height: 500px) { .ai-models-grid { max-height: 35vh; gap: var(--space-1-half); } .model-card-dropdown-label { padding: var(--space-1-half); } } .model-card-dropdown:hover { border-color: var(--secondary-6); transform: translateY(-1px); box-shadow: var(--shadow-2); } .model-card-dropdown:has(.model-card-dropdown-input:checked) { border-color: var(--primary-9); background-color: var(--primary-2); box-shadow: var(--shadow-3), 0 0 0 1px rgba(var(--primary-9-rgb), 0.15); } .model-card-dropdown:has(.model-card-dropdown-input:checked) .model-card-dropdown-label { background-color: transparent; } .model-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); justify-content: flex-start; } .model-name { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); line-height: 1.2; } .model-stats { display: grid; grid-template-columns: 100px 8px max-content; gap: var(--space-1); align-items: center; margin-bottom: var(--space-2); width: 100%; } /* Adjustments for tablet (3-column) */ @media (min-width: 768px) and (max-width: 1023px) { .model-header { gap: var(--space-1); margin-bottom: var(--space-1); } .model-name { font-size: var(--font-size-2); } .model-stats { grid-template-columns: 110px 8px max-content; gap: var(--space-1-half); margin-bottom: var(--space-1); width: 100%; } .stat-label { font-size: var(--font-size-1); } .stat-colon { font-size: var(--font-size-1); } .unified-input { width: min(100%, 80vw); max-width: var(--container-4); padding: var(--space-5) var(--space-3); } } /* Compact stats for smaller screens */ @media (max-width: 767px) { .model-header { gap: var(--space-1-half); margin-bottom: var(--space-1-half); } .model-name { font-size: var(--font-size-2-half); } .model-stats { gap: var(--space-1); margin-bottom: var(--space-1-half); } } @media (max-width: 480px) { .model-header { gap: var(--space-1); margin-bottom: var(--space-1); } .model-name { font-size: var(--font-size-2); } .model-stats { gap: var(--space-1-half); margin-bottom: var(--space-1); } } /* Ultra-compact for small heights */ @media (max-height: 600px) { .model-header { margin-bottom: var(--space-1-half); } .model-stats { gap: var(--space-1-half); margin-bottom: var(--space-1-half); } } @media (max-height: 500px) { .model-header { margin-bottom: var(--space-1); } .model-stats { gap: var(--space-1-half); margin-bottom: var(--space-1); } } .stat-label { font-size: var(--font-size-1-half); font-weight: var(--font-weight-regular); color: var(--secondary-11); opacity: 0.8; white-space: nowrap; line-height: 1.2; font-family: monospace; justify-self: start; text-align: left; overflow: hidden; text-overflow: ellipsis; } .stat-colon { font-size: var(--font-size-1-half); font-weight: var(--font-weight-regular); color: var(--secondary-11); opacity: 0.8; line-height: 1.2; font-family: monospace; justify-self: start; min-width: 8px; text-align: center; } /* Compact stat labels and colons for smaller screens */ @media (max-width: 768px) { .stat-label { font-size: var(--font-size-1); max-width: 110px; } .stat-colon { font-size: var(--font-size-1); } } @media (max-width: 480px) { .stat-label { font-size: var(--font-size-0); max-width: 90px; } .stat-colon { font-size: var(--font-size-0); } } @media (max-height: 600px) { .stat-label { font-size: var(--font-size-1); } .stat-colon { font-size: var(--font-size-1); } } @media (max-height: 500px) { .stat-label { font-size: var(--font-size-0); } .stat-colon { font-size: var(--font-size-0); } } /* Ultra-compact TUI block meter system */ .model-stat-meter { flex: 1; height: 8px; background-color: var(--secondary-4); border-radius: 1px; overflow: hidden; position: relative; display: flex; gap: 2px; align-items: center; padding: 1px; align-self: center; } .model-stat-meter .block { width: 6px; height: 6px; background-color: var(--secondary-12); border-radius: 0; position: relative; z-index: 1; transition: opacity 0.15s var(--ease-out-cubic); } .model-stat-meter .block.empty { background-color: var(--secondary-6); opacity: 0.8; } /* Enhanced states for checked cards */ .model-card-dropdown:has(.model-card-dropdown-input:checked) .model-stat-meter { background-color: var(--primary-4); } .model-card-dropdown:has(.model-card-dropdown-input:checked) .model-stat-meter .block { background-color: var(--primary-12); } .model-card-dropdown:has(.model-card-dropdown-input:checked) .model-stat-meter .block.empty { background-color: var(--primary-6); opacity: 0.8; } .model-card-dropdown:has(.model-card-dropdown-input:checked) .model-name { color: var(--primary-12); } .model-card-dropdown:has(.model-card-dropdown-input:checked) .stat-label { color: var(--primary-11); opacity: 1; } .model-description { font-size: var(--font-size-2); color: var(--secondary-10); line-height: 1.4; margin-top: var(--space-2); text-align: left; } /* Compact description for smaller screens */ @media (max-width: 768px) { .model-description { font-size: var(--font-size-1-half); margin-top: var(--space-1-half); line-height: 1.3; } } @media (max-width: 480px) { .model-description { font-size: var(--font-size-1); margin-top: var(--space-1); line-height: 1.2; } } /* Ultra-compact for small heights */ @media (max-height: 600px) { .model-description { margin-top: var(--space-1-half); line-height: 1.3; } } @media (max-height: 500px) { .model-description { margin-top: var(--space-1); line-height: 1.2; } /* Hide description on very small screens if needed */ .model-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } @media (max-height: 400px) { .model-description { display: none; } } /* Jetdraft Tools Microcopy */ .jetdraft-tools-microcopy { display: flex; align-items: center; gap: var(--space-1-half); margin-top: var(--space-4); margin-bottom: var(--space-3); padding: 0 var(--space-4); background: var(--secondary-1); border-radius: var(--radius-2); font-size: var(--font-size-1-half); color: var(--secondary-9); } .jetdraft-tools-label { white-space: nowrap; font-size: var(--font-size-half); } .jetdraft-tools-icons { display: flex; gap: var(--space-1-half); align-items: center; } .tool-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-1); background: var(--secondary-2); transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); cursor: help; opacity: 0.8; } .tool-icon:hover { background: var(--secondary-3); opacity: 1; } .tool-icon svg { width: 12px; height: 12px; } @media (max-width: 768px) { .jetdraft-tools-microcopy { flex-direction: row; gap: var(--space-1-half); text-align: left; align-items: center; } .jetdraft-tools-icons { gap: var(--space-1-half); } .tool-icon { width: 18px; height: 18px; } .tool-icon svg { width: 10px; height: 10px; } } /* Tool Quick Tips Dialog Styles */ .tool-quick-tips-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: var(--z-index-9); animation: fadeIn 0.2s var(--ease-out-cubic); } .tool-quick-tips-dialog { background: var(--secondary-1); border-radius: var(--radius-4); padding: var(--space-5); max-width: 400px; width: 90%; max-height: 80vh; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); border: 1px solid var(--secondary-3); animation: slideUp 0.2s var(--ease-out-cubic); display: flex; flex-direction: column; } .tool-quick-tips-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4); } .tool-quick-tips-title { font-size: var(--font-size-3-half); font-weight: var(--font-weight-medium); color: var(--secondary-12); margin: 0; line-height: 1.3; } .tool-quick-tips-close { background: none; border: none; padding: var(--space-1); border-radius: var(--radius-1); color: var(--secondary-9); cursor: pointer; transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); display: flex; align-items: center; justify-content: center; } .tool-quick-tips-close:hover { background: var(--secondary-3); color: var(--secondary-11); } .tool-quick-tips-content { flex: 1; margin-bottom: var(--space-5); color: var(--secondary-11); font-size: var(--font-size-2-half); line-height: 1.5; } .tool-quick-tips-content p { margin: 0; } .tool-quick-tips-preamble { margin-bottom: var(--space-3); padding: var(--space-3); background: var(--secondary-2); border-radius: var(--radius-2); border-left: 3px solid var(--primary-5); font-size: var(--font-size-2); color: var(--secondary-11); } .tool-quick-tips-preamble p { margin: 0; font-weight: var(--font-weight-medium); } .tool-quick-tips-instruction { margin-bottom: var(--space-4); padding: var(--space-3); background: var(--secondary-2); border-radius: var(--radius-2); border-left: 3px solid var(--primary-7); } .tool-quick-tips-instruction p { margin: 0; font-style: italic; } .tool-quick-tips-instruction strong { color: var(--secondary-12); } .tool-quick-tips-footer { display: flex; justify-content: center; align-items: center; gap: var(--space-3); } .tool-quick-tips-example-button { background: var(--primary-3); color: var(--primary-11); border: 1px solid var(--primary-7); padding: var(--space-2) var(--space-4); border-radius: var(--radius-2); font-size: var(--font-size-2); font-weight: var(--font-weight-medium); cursor: pointer; transition: background-color 0.2s var(--ease-out-cubic), border-color 0.2s var(--ease-out-cubic), color 0.2s var(--ease-out-cubic), box-shadow 0.2s var(--ease-out-cubic), opacity 0.2s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic), fill 0.2s var(--ease-out-cubic), stroke 0.2s var(--ease-out-cubic); } .tool-quick-tips-example-button:hover { background: var(--primary-4); transform: translateY(-1px); } .tool-quick-tips-example-button:active { transform: translateY(0); } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Mobile styles for dialog */ @media (max-width: 768px) { .tool-quick-tips-dialog { margin: var(--space-4); padding: var(--space-4); max-width: none; width: calc(100% - var(--space-8)); } .tool-quick-tips-title { font-size: var(--font-size-3); } .tool-quick-tips-content { font-size: var(--font-size-2); } } /* Source Engines display — inline SVG icons, no box backgrounds */ .unified-input__engines { display: flex; flex-wrap: wrap; gap: var(--space-1-half); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); align-items: center; } .unified-input__engines-label { font-size: var(--font-size-1-half); color: var(--secondary-11); white-space: nowrap; letter-spacing: 0.02em; } .unified-input__engine-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--secondary-11); cursor: default; line-height: 0; } .unified-input__engine-icon svg { display: block; width: 11px; height: 11px; } /* Tooltip for engine icons */ .unified-input__engine-icon svg, .unified-input__engine-icon[data-tooltip] svg { pointer-events: none; } .unified-input__engine-icon--gear { cursor: pointer; /* The glyph is 9px; the control still needs a target you can hit. */ width: 26px; min-width: 26px; height: 26px; margin-left: var(--space-1); border-radius: var(--radius-1); color: var(--secondary-11); background: transparent; border: none; padding: 0; transition: background-color var(--duration-fast) var(--ease-out-cubic), color var(--duration-fast) var(--ease-out-cubic); } .unified-input__engine-icon--gear:hover { color: var(--secondary-12); background: var(--secondary-4); } .unified-input__engine-icon--gear:active { transform: scale(0.94); } .unified-input__engine-icon--gear svg { width: 9px; height: 9px; } /* /css/components/versionPanel.css */ .versions-dialog { background-color: var(--secondary-1); font-size: var(--font-size-3); padding: var(--space-1); box-shadow: var(--shadow-9); border-radius: var(--radius-3); position: absolute; z-index: var(--z-index-8); max-width: var(--container-4); width: 94%; } @media (max-width: 768px) { .versions-dialog { width: 94%; height: 72%; top: 2%; left: 2%; } } .versions-dialog--body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); } .versions-dialog--status { display: flex; flex-direction: row; gap: var(--space-2); } .versions-dialog--content { display: block; flex: 1; display: flex; flex-direction: column; padding: var(--space-2); border-radius: var(--space-1); max-height: 100%; overflow-y: auto; } .versions-dialog--message.user { display: flex; flex-direction: column; flex: 1; align-items: flex-end; width: auto; max-height: fit-content; color: var(--secondary-12); border-radius: var(--radius-3); padding: var(--space-3); margin: var(--space-2); align-self: flex-end; text-align: right; } .expandable-text { position: relative; width: 100%; } .text-content { max-height: calc(var(--line-height-3) * 3); overflow: hidden; position: relative; } .text-content.expanded { max-height: none; } .text-content.expanded::after { content: none; } .expandable-text--short .text-content::after { display: none; } .text-content::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background: linear-gradient(transparent, var(--secondary-1)); pointer-events: none; } .expand-text-btn { background: none; border: none; color: var(--primary-9); cursor: pointer; padding: var(--space-1) 0; font-size: var(--font-size-2); font-weight: var(--font-weight-medium); display: block; } .expandable-text--short .expand-text-btn { display: none; } .expandable-text .expand-text-btn { display: block; } .expand-text-btn:hover { color: var(--primary-11); } .expandable-text--short { display: block; width: 100%; } .text-content--short { max-height: none; overflow: visible; } .versions-dialog--message.ai { display: flex; flex-direction: column; flex: 1; align-items: flex-start; width: auto; max-height: fit-content; background: var(--primary-1); color: var(--secondary-12); border-radius: var(--radius-3); padding: var(--space-3); margin: var(--space-2); transition: background-color 0.2s var(--ease-out-quad), border-color 0.2s var(--ease-out-quad), color 0.2s var(--ease-out-quad), box-shadow 0.2s var(--ease-out-quad), opacity 0.2s var(--ease-out-quad), transform 0.2s var(--ease-out-quad), fill 0.2s var(--ease-out-quad), stroke 0.2s var(--ease-out-quad); } .versions-dialog--message.ai > :nth-child(2) { margin-left: var(--space-1); } .versions-dialog--footer { display: flex; flex-direction: row; justify-content: space-between; padding: var(--space-4); border-top: 1px solid var(--secondary-2); } .versions-dialog--container { display: flex; flex-direction: column; height: 100%; } .versions-dialog--header { display: flex; justify-content: flex-end; padding: var(--space-2); } .versions-dialog-status { display: flex; align-items: center; gap: var(--space-2); } .versions-dialog-status-text { color: var(--secondary-11); } .versions-dialog-stop-btn { color: var(--failure-11); border: 1px solid var(--failure-6); transition: background-color 0.2s var(--ease-out-quad), border-color 0.2s var(--ease-out-quad), color 0.2s var(--ease-out-quad), box-shadow 0.2s var(--ease-out-quad), opacity 0.2s var(--ease-out-quad), transform 0.2s var(--ease-out-quad), fill 0.2s var(--ease-out-quad), stroke 0.2s var(--ease-out-quad); } .versions-dialog-content { background: var(--secondary-1); border: 1px solid var(--secondary-6); border-radius: var(--radius-3); transition: background-color 0.2s var(--ease-out-quad); max-height: 64vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--secondary-6) var(--secondary-2); } .versions-dialog-content::-webkit-scrollbar { width: 8px; } .versions-dialog-content::-webkit-scrollbar-track { background: var(--secondary-2); } .versions-dialog-content::-webkit-scrollbar-thumb { background-color: var(--secondary-6); border-radius: var(--radius-3); } .versions-dialog-message-before { color: var(--secondary-11); background-color: var(--secondary-2); margin: var(--space-2) 0; padding: var(--space-3) 0; border-radius: var(--radius-3); } .versions-dialog-message-before-label { font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); display: block; } .versions-dialog-message-before-text { color: var(--secondary-12); font-style: italic; line-height: var(--line-height-3); } .versions-dialog-message-after-label { font-weight: var(--font-weight-medium); color: var(--secondary-11); margin: var(--space-2) 0; display: block; } .versions-dialog-message-content { line-height: var(--line-height-3); margin: 0 } .versions-dialog-message-content p:first-child { margin-top: var(--space-2); } .versions-dialog-footer { background: var(--secondary-2); border-top: 1px solid var(--secondary-3); padding: var(--space-2); display: flex; justify-content: space-between; align-items: center; } .versions-dialog--header { position: relative; } .dialog-progress { width: 100%; } .dialog-progress.active { background: var(--secondary-3); } .dialog-progress.active.stopped { background: var(--secondary-3); } .dialog-progress.active.done { background: var(--success-3); } .dialog-progress-bar { transition: width 0.3s var(--ease-in-out-quad); } .dialog-progress-bar.primary { background: var(--primary-12); } .dialog-progress-bar.secondary { background: var(--secondary-11); } .dialog-progress-bar.success { background: var(--success-12); } .versions-dialog--status-text { color: var(--secondary-11); } .versions-dialog--message-before { color: var(--secondary-11); margin: var(--space-2); padding: var(--space-2); border-left: 2px solid var(--secondary-6); } .versions-dialog--message-before-text { color: var(--secondary-12); margin-top: var(--space-2); } .versions-dialog--message-after { color: var(--secondary-11); margin-bottom: var(--space-2); } .versions-dialog--message-content { line-height: var(--line-height-3); } .versions-dialog--search-phrases { margin-top: var(--space-1); margin-left: var(--space-2); } .btn-stop { color: var(--failure-11); border: 1px solid var(--failure-6); transition: background-color 0.2s var(--ease-out-quad), border-color 0.2s var(--ease-out-quad), color 0.2s var(--ease-out-quad), box-shadow 0.2s var(--ease-out-quad), opacity 0.2s var(--ease-out-quad), transform 0.2s var(--ease-out-quad), fill 0.2s var(--ease-out-quad), stroke 0.2s var(--ease-out-quad); } .btn-insert--primary { color: var(--primary-1); background: var(--primary-9); border: 1px solid var(--primary-9); transition: background-color 0.2s var(--ease-out-quad), border-color 0.2s var(--ease-out-quad), color 0.2s var(--ease-out-quad), box-shadow 0.2s var(--ease-out-quad), opacity 0.2s var(--ease-out-quad), transform 0.2s var(--ease-out-quad), fill 0.2s var(--ease-out-quad), stroke 0.2s var(--ease-out-quad); font-size: var(--font-size-3); padding: var(--space-1) var(--space-2); } .btn-insert--primary:hover:not(:disabled) { color: var(--primary-1); background: var(--primary-10); border-color: var(--primary-10); } .btn-insert--primary:active:not(:disabled) { color: var(--primary-1); background: var(--primary-11); } .btn-insert--secondary { color: var(--primary-11); background: var(--primary-1); border: 1px solid var(--primary-1); transition: background-color 0.2s var(--ease-out-quad), border-color 0.2s var(--ease-out-quad), color 0.2s var(--ease-out-quad), box-shadow 0.2s var(--ease-out-quad), opacity 0.2s var(--ease-out-quad), transform 0.2s var(--ease-out-quad), fill 0.2s var(--ease-out-quad), stroke 0.2s var(--ease-out-quad); font-size: var(--font-size-3); padding: var(--space-1) var(--space-2); } .btn-insert--secondary:hover:not(:disabled) { color: var(--primary-12); background: var(--primary-3); border-color: var(--primary-3); } .btn-insert--secondary:active:not(:disabled) { color: var(--primary-12); background: var(--primary-4); } .btn-insert--secondary:disabled { opacity: 0.5; cursor: not-allowed; } .model-and-sources-header { display: flex; flex-direction: column; gap: var(--space-2); } .model-info-section { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-2); } .source-links-section { display: flex; flex-direction: column; } /* /css/components/welcome.css */ .ai-copilot-dialog__welcome { width: 100%; max-width: var(--container-2); padding: var(--space-4); background-color: var(--primary-1); border-radius: var(--radius-3); box-shadow: var(--shadow-4); overflow-y: auto; } .ai-copilot-dialog__welcome-header { margin-bottom: var(--space-4); text-align: center; } .ai-copilot-dialog__welcome-title { font-size: var(--font-size-5); color: var(--primary-12); margin-bottom: var(--space-4); } .ai-copilot-dialog__welcome-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .ai-copilot-dialog__welcome-option { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--secondary-6); border-radius: var(--radius-3); padding: var(--space-3); transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, opacity 200ms ease, transform 200ms ease, fill 200ms ease, stroke 200ms ease; } .ai-copilot-dialog__welcome-option:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); } .ai-copilot-dialog__welcome-option-icon { width: calc(24px * var(--scaling)); height: calc(24px * var(--scaling)); border-radius: 50%; background-color: var(--primary-6); margin-bottom: var(--space-2); } .ai-copilot-dialog__welcome-option-text { font-size: var(--font-size-3); color: var(--primary-12); margin-bottom: var(--space-3); flex-grow: 1; } .ai-copilot-dialog__welcome-option-button { align-self: flex-end; padding: var(--space-2) var(--space-3); background-color: var(--primary-10); font-size: var(--font-size-2); color: var(--primary-1); border: none; border-radius: var(--radius-3); cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, opacity 200ms ease, transform 200ms ease, fill 200ms ease, stroke 200ms ease; width: 100%; } .ai-copilot-dialog__welcome-option-button:hover, .ai-copilot-dialog__welcome-option-button:focus { background-color: var(--primary-11); outline: none; } @media (max-width: 768px) { .ai-copilot-dialog__welcome { width: 90%; max-width: 100%; padding: var(--space-4); background-color: var(--primary-1); border-radius: var(--radius-3); box-shadow: var(--shadow-4); } .ai-copilot-dialog__welcome-options { grid-template-columns: 1fr; max-height: 50vh; max-height: 50svh; } } .dashboard__item, .dashboard__create-btn { min-width: 140px; min-height: 80px; max-width: 100%; overflow: hidden; } .dashboard__item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; } .dashboard__item.skeleton { animation: pulse 1.5s ease-in-out infinite; padding: var(--space-2); /* Add padding to match real items */ } .dashboard__item.skeleton .dashboard__item-title, .dashboard__item.skeleton .dashboard__item-date { background: var(--secondary-3); border-radius: var(--radius-3); color: transparent; height: 1.2em; /* Control height of skeleton lines */ } .dashboard__item.skeleton .dashboard__item-title { width: 70%; margin-bottom: var(--space-1); } .dashboard__item.skeleton .dashboard__item-date { width: 30%; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } /* /css/admin.css */ /* ── Admin Panel Styles ──────────────────────────────────────────────── */ /* Layout */ .admin-wrapper { min-height: 100vh; background: var(--secondary-1); width: 100%; } .admin-container { max-width: 1600px; margin: 0 auto; padding: var(--space-6); } /* Viewport fix: admin pages need normal scrolling (undo SPA shell lock) */ html.admin-page { overflow: auto !important; height: auto !important; } body.admin-page { overflow: auto !important; position: static !important; height: auto !important; max-height: none !important; } /* ── Top Navigation ──────────────────────────────────────────────── */ .admin-nav { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); padding: var(--space-2); background: var(--secondary-3); border-radius: var(--radius-3); overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; align-items: center; } .admin-nav__link { color: var(--secondary-11); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease; white-space: nowrap; flex-shrink: 0; } .admin-nav__link:hover { background: var(--primary-3); color: var(--primary-11); } .admin-nav__link--active { background: var(--primary-9); color: var(--primary-1); font-weight: var(--font-weight-semibold); } /* ── Theme Toggle Button ─────────────────────────────────────────── */ .admin-nav__theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: auto; padding: 0; border: none; border-radius: var(--radius-2); background: transparent; color: var(--secondary-11); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0; } .admin-nav__theme-btn:hover { background: var(--primary-3); color: var(--primary-11); } /* Hide all icons by default */ .admin-nav__theme-icon { display: none; } /* Dark icon shows when preference is dark */ [data-theme-preference="dark"] .admin-nav__theme-btn [data-theme-icon="moon"] { display: inline; } /* Light icon shows when preference is light */ [data-theme-preference="light"] .admin-nav__theme-btn [data-theme-icon="sun"] { display: inline; } /* ── Sub Navigation ──────────────────────────────────────────────── */ .admin-subnav { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); padding: var(--space-2) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .admin-subnav__link { text-decoration: none; color: var(--secondary-11); font-size: 0.875rem; white-space: nowrap; flex-shrink: 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-2); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease; } .admin-subnav__link:hover { color: var(--primary-9); background: var(--primary-3); } /* ── Form Grid ──────────────────────────────────────────────────────── */ .admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-4); } .admin-form-grid__full { grid-column: 1 / -1; } .admin-form-grid .form-field { margin-bottom: 0; } @media (max-width: 767px) { .admin-form-grid { grid-template-columns: 1fr; } } /* ── Table Scroll Wrapper ──────────────────────────────────────────────── */ .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--space-6)); padding: 0 var(--space-6); } @media (max-width: 767px) { .admin-table-wrap { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); } } /* ── Collapsible Sections (details/summary) ──────────────────────────── */ .admin-section { margin-bottom: var(--space-6); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); overflow: hidden; } .admin-section__summary { display: flex; align-items: center; gap: var(--space-2); font-size: 1.125rem; font-weight: var(--font-weight-semibold); padding: var(--space-4) var(--space-5); cursor: pointer; background: var(--secondary-2); list-style: none; user-select: none; transition: background 0.15s ease; } .admin-section__summary::-webkit-details-marker { display: none; } .admin-section__summary::before { content: '▸'; display: inline-block; transition: transform 0.2s ease; font-size: 0.75rem; color: var(--secondary-11); } .admin-section[open] > .admin-section__summary::before { transform: rotate(90deg); } .admin-section__summary:hover { background: var(--secondary-3); } .admin-section__body { padding: var(--space-5); } /* ── Badges ──────────────────────────────────────────────────────── */ .badge { padding: var(--space-1) var(--space-2); border-radius: var(--radius-2); font-size: 0.875rem; font-weight: var(--font-weight-medium); display: inline-block; } .badge--guest { background-color: var(--secondary-3); color: var(--secondary-11); } .badge--guest_plus { background-color: #fef3c7; color: #92400e; } .badge--starter { background-color: var(--primary-3); color: var(--primary-11); } .badge--pro { background-color: var(--success-3); color: var(--success-11); } .badge--business { background-color: #e9d5ff; color: #6b21a8; } .badge--none { background-color: var(--secondary-2); color: var(--secondary-9); } /* ── Buttons ──────────────────────────────────────────────────────── */ /* Reset native button appearance (critical for Safari iOS) */ .admin-wrapper button, .admin-wrapper input[type="submit"] { -webkit-appearance: none; appearance: none; font-family: inherit; font-size: inherit; line-height: 1; } .btn--small { padding: var(--space-1) var(--space-3); font-size: 0.875rem; } .btn--danger { background-color: var(--failure-9); color: white; border: none; cursor: pointer; } .btn--danger:hover { background-color: var(--failure-10); } /* ── Usage Display ──────────────────────────────────────────────── */ .usage-display { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.875rem; } .usage-item { display: flex; gap: var(--space-1); align-items: baseline; } .usage-label { color: var(--secondary-11); font-weight: var(--font-weight-medium); } .usage-value { font-weight: var(--font-weight-semibold); } .usage-value.usage-low { color: var(--success-11); } .usage-value.usage-medium { color: #92400e; } .usage-value.usage-high { color: var(--failure-9); } .usage-none { color: var(--secondary-9); font-size: 0.875rem; } /* ── Modal ──────────────────────────────────────────────────────── */ .admin-modal { display: none; position: fixed; z-index: var(--z-index-9); left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .admin-modal--open { display: flex; align-items: center; justify-content: center; } .admin-modal__content { background-color: var(--primary-1); margin: var(--space-6); padding: var(--space-6); border-radius: var(--radius-3); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .admin-modal__close { color: var(--secondary-9); float: right; font-size: 1.5rem; font-weight: var(--font-weight-bold); cursor: pointer; background: none; border: none; line-height: 1; } .admin-modal__close:hover, .admin-modal__close:focus { color: var(--primary-12); } /* ── Status Pills ──────────────────────────────────────────────── */ .status__pill { padding: var(--space-1) var(--space-2); border-radius: var(--radius-2); font-size: 0.75rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.025em; } .status__pill--success { background: var(--success-3); color: var(--success-11); } .status__pill--error { background: var(--failure-3); color: var(--failure-11); } /* ── Admin Cards ──────────────────────────────────────────────── */ .admin-card { background: var(--primary-1); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); } .admin-card h2, .admin-card h3 { margin: 0 0 var(--space-4) 0; font-size: 1.125rem; font-weight: var(--font-weight-semibold); } /* ── Current Info Card (modify subscription) ──────────────────────────── */ .admin-info-card { padding: var(--space-4); background: var(--secondary-2); border: 1px solid var(--secondary-4); border-radius: var(--radius-3); margin-bottom: var(--space-4); font-size: 0.875rem; line-height: 1.6; } .admin-info-card strong { display: block; margin-bottom: var(--space-2); color: var(--primary-12); } /* ── Admin Tabs (Cami component) ──────────────────────────────────────── */ .admin-tabs { width: 100%; } .admin-tabs__strip { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); padding: var(--space-2); background: var(--secondary-3); border-radius: var(--radius-3); overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .admin-tabs__tab { padding: var(--space-2) var(--space-4); border: none; background: transparent; color: var(--secondary-11); font-size: 0.875rem; font-weight: var(--font-weight-medium); cursor: pointer; border-radius: var(--radius-2); white-space: nowrap; flex-shrink: 0; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease; } .admin-tabs__tab:hover { background: var(--primary-3); color: var(--primary-11); } .admin-tabs__tab--active { background: var(--primary-9); color: var(--primary-1); font-weight: var(--font-weight-semibold); } .admin-tabs__panels { /* Panels inside get display:none from the component JS */ } /* ── Admin Team Select (Cami component) ──────────────────────────────── */ .admin-team-select { width: 100%; } /* ── Pagination ──────────────────────────────────────────────────── */ .admin-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); padding: var(--space-3) 0; } .admin-pagination__pages { display: flex; align-items: center; gap: var(--space-1); } .admin-pagination__btn { padding: var(--space-2) var(--space-3); border: 1px solid var(--secondary-4); border-radius: var(--radius-2); background: var(--primary-1); color: var(--primary-11); text-decoration: none; font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease; } .admin-pagination__btn:hover { background: var(--primary-3); border-color: var(--primary-7); } .admin-pagination__btn--disabled { opacity: 0.4; cursor: default; pointer-events: none; } .admin-pagination__page { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-2); background: transparent; color: var(--secondary-11); text-decoration: none; font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease, fill 0.15s ease, stroke 0.15s ease; } .admin-pagination__page:hover { background: var(--primary-3); color: var(--primary-11); } .admin-pagination__page--active { background: var(--primary-9); color: var(--primary-1); font-weight: var(--font-weight-semibold); border-color: var(--primary-9); pointer-events: none; } .admin-pagination__ellipsis { padding: 0 var(--space-1); color: var(--secondary-9); font-size: 0.875rem; } /* ── Mobile Responsive ──────────────────────────────────────────────── */ @media (max-width: 767px) { .admin-container { padding: var(--space-4); } .admin-card { padding: var(--space-4); } .admin-section__summary { padding: var(--space-3) var(--space-4); font-size: 1rem; } .admin-section__body { padding: var(--space-4); } /* Stack team-content tables on small screens */ .team-content__table th, .team-content__table td { padding: var(--space-2) var(--space-3); font-size: 0.8125rem; } /* Modal takes full width on mobile */ .admin-modal__content { margin: var(--space-4); width: calc(100% - 2 * var(--space-4)); max-height: 85vh; } } @media (max-width: 480px) { .admin-container { padding: var(--space-3); } .admin-card { padding: var(--space-3); } } /* /css/components/skeleton-motion.css */ /* * Skeleton motion — single source of truth for every placeholder sweep. * * Superseded by this file (left in place, no longer used by these selectors): * cards.css @keyframes shimmer -40rem -> 40rem * chat.css @keyframes shimmer -80rem -> 80rem * files.css @keyframes shimmer -80rem -> 80rem * loaders.css @keyframes shimmer 350% -> 0% * loaders.css @keyframes shimmerEllipsis 250% -> 0% * chat.css @keyframes d2-skeleton-shimmer 200% -> -200% * chat.css @keyframes chip-skeleton-shimmer 200% -> -200% * * Why the old setup looked janky (measured in the browser, 2026-09-12): * - All four `shimmer` definitions shared one name, so whichever file loaded * last (loaders.css) drove every element that referenced it. * - Every rule pinned `background-size: 80rem` (1260px at this app's 15.75px * root font). Against a fixed image, the sweep distance is * |element width - image width| * keyframe range, so the same animation * moved 2847px/s across a 40px skeleton button and 772px/s across a 929px * text line (3.7x difference). * - The highlight stayed a fixed 315px wide, wider than small placeholders, * so chips flashed for ~0.12s of each 1.5s cycle instead of sweeping. * - The loop restarted 3.39 tiles away from where it ended, which snapped the * gradient every 1.5s (background-size 1260px vs 4270px of travel). * * This file keeps every element's own gradient (it never sets background-image * or colour stops). It only fixes geometry and timing: * - image is 150% of the element -> highlight is ~3/8 of the element wide * - travel 300% -> 0% -> exactly one tile (1.5 x width), seamless * - one duration/timing -> same relative speed on every placeholder * * Geometry check: travel = (image - width) * range = (1.5w - w) * 3 = 1.5w, * which is exactly one tile, and the highlight (25% of the image = 0.375w) is * on screen for (w + 0.375w) / 1.5w = 92% of each cycle, so the sweep reads as * continuous instead of a blink with a long pause. */ @keyframes skeleton-sweep { from { background-position: 300% 0; } to { background-position: 0% 0; } } .skeleton, .card.skeleton, .card__source.skeleton, .document-item.skeleton, .form-field.skeleton, .file-item--skeleton .skeleton-title, .file-item--skeleton .skeleton-date, .file-item--skeleton .skeleton-button, .file-item--skeleton .skeleton-status, .file-item--skeleton .skeleton-pages, .doc-skeleton-block, .doc-skeleton-li-text, .source-card-skeleton .skeleton-line, .source-card-skeleton .citation-number-skeleton, .read-image-thumb-skeleton, .read-image-skeleton-line, .d2-skeleton-loader, .chip-skeleton-line { background-size: 150% 100%; background-repeat: repeat; /* Longhands only: per-element animation-delay staggers stay intact. */ animation-name: skeleton-sweep; animation-duration: 1.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: none; } /* Text shimmer sweeps at its own (slower, eased) pace but shares the geometry. */ .loading__text--shimmer, .loading__text--shimmer::after { background-size: 150% 100%; animation-name: skeleton-sweep; animation-duration: 3.5s; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); animation-iteration-count: infinite; animation-fill-mode: none; } /* Keep placeholders static and calm; no 0.01ms jump to a random gradient frame. */ @media (prefers-reduced-motion: reduce) { .skeleton, .card.skeleton, .card__source.skeleton, .document-item.skeleton, .form-field.skeleton, .file-item--skeleton .skeleton-title, .file-item--skeleton .skeleton-date, .file-item--skeleton .skeleton-button, .file-item--skeleton .skeleton-status, .file-item--skeleton .skeleton-pages, .doc-skeleton-block, .doc-skeleton-li-text, .source-card-skeleton .skeleton-line, .source-card-skeleton .citation-number-skeleton, .read-image-thumb-skeleton, .read-image-skeleton-line, .d2-skeleton-loader, .chip-skeleton-line, .loading__text--shimmer, .loading__text--shimmer::after { animation: none; } } /* /css/lib/jsuites.css */ :root { --jbutton-color: #298BA8; --jactive-color: #007aff; --jsafe-area-top: env(safe-area-inset-top); --jsafe-area-bottom: env(safe-area-inset-bottom); } [data-visible="false"], .row[data-visible="false"] { display: none; } div[data-before]:before { content: attr(data-before); } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jreadonly { pointer-events: none; } .jdragging { opacity:0.2; filter: alpha(opacity=20); } .jupload.input { position: relative; box-sizing: border-box; background-size: initial; height: 33px; min-height: initial; padding: 6px; padding-right: 30px; } .jupload.input:before { content: "save"; font-size: 18px; font-family: "Material Icons"; color: #000; position: absolute; right: 5px; } .jupload:empty:before { z-index: 0; } .jupload img { width: 100%; } .jupload.input img { width: initial; max-width: 100%; height: 100%; } .jupload[data-multiple] { padding: 10px; } .jupload[data-multiple] img { height: 70px; width: 100px; object-fit: cover; margin-right: 5px; margin-bottom: 5px; } .jupload { position: relative; border: 1px dotted #eee; cursor: pointer; box-sizing: border-box; width: 100%; max-width: 100%; max-height: 100%; min-height: 180px; } .jupload:not(.input):empty:before { content: "\e2c3"; font-family: "Material Icons"; font-size: 90px; color: #eee; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute; } .jupload-item { padding-right: 22px; border-radius: 1px; display: inline-block; position: relative; } .jphoto { position: relative; border: 1px dotted #eee; cursor: pointer; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: center; } .jphoto:empty:before { content: "\e2c3"; font-family: "Material Icons"; font-size: 90px; color: #eee; width: 100%; height: 100%; text-align: center; } .jremove { opacity: 0.2; filter: alpha(opacity=20); } .round img { border-radius: 1000px; } .jtooltip { position: fixed; top: 10px; left: 10px; z-index: 5; font-family: initial; font-size: 12px; color: #000; background-color: #fff; border: 1px solid black; padding: 8px; margin: 10px; display: block; animation: jfadeIn 0.5s; pointer-events: none; } .jtooltip:empty { display: none; } @keyframes jfadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .jpanel { position: absolute; box-sizing: border-box; z-index: 10; } .jpanel:focus { outline: 2px solid black; outline-offset: -1px; } .jpanel-action { position: absolute; width: 8px; height: 8px; background-color: white; border:1px solid black; box-sizing: border-box; pointer-events: auto; z-index: 1000; } .jpanel-action[data-position="n-resize"] { top: -4px; left: calc(50% - 4px); } .jpanel-action[data-position="ne-resize"] { top: -4px; left: calc(100% - 4px); } .jpanel-action[data-position="e-resize"] { top: calc(50% - 4px); left: calc(100% - 4px); } .jpanel-action[data-position="se-resize"] { top: calc(100% - 4px); left: calc(100% - 4px); } .jpanel-action[data-position="s-resize"] { top: calc(100% - 4px); left: calc(50% - 4px); } .jpanel-action[data-position="sw-resize"] { top: calc(100% - 4px); left: -4px; } .jpanel-action[data-position="w-resize"] { top: calc(50% - 4px); left: -4px; } .jpanel-action[data-position="nw-resize"] { top: -4px; left: -4px; } .jpanel-action[data-position="nw-resize"] { top: -4px; left: -4px; } .jpanel-action[data-action="rotate"] { top: -50px; left: calc(50% - 12px); width: 24px; height: 24px; border: 0; cursor: move; background-color: transparent; } .jpanel-action[data-action="rotate"]:before { content: 'refresh'; font-family: 'Material Icons'; font-size: 24px; } .jpanel-action[data-action="rotate"]:after { position: absolute; content: ''; bottom: -22px; left: calc(50%); width: 1px; height: 28px; background-color: black; } /** Loading */ .jloading { position:fixed; z-index:10001; width:100%; left:0; right:0; top:0; bottom:0; background-color: rgba(0,0,0,0.7); } .jloading::after { content:''; display:block; margin:0 auto; margin-top:50vh; width:40px; height:40px; border-style:solid; border-color:white; border-top-color:transparent; border-width:4px; border-radius:50%; -webkit-animation: jspin .8s linear infinite; animation: jspin .8s linear infinite; } .jloading.jspin { background-color:transparent; } .jloading.jspin::after { margin:0 auto; margin-top:80px; border-color:#aaa; border-top-color:transparent; } /** Animations **/ .jfade-in { animation: jfade-in 2s forwards; } .jfade-out { animation: jfade-out 1s forwards; } .jslide-left-in { position: relative; animation: jslide-left-in 0.4s forwards; } .jslide-left-out { position: relative; animation: jslide-left-out 0.4s forwards; } .jslide-right-in { position: relative; animation: jslide-right-in 0.4s forwards; } .jslide-right-out { position: relative; animation: jslide-right-out 0.4s forwards; } .jslide-top-in { position: relative; animation: jslide-top-in 0.4s forwards; } .jslide-top-out { position: relative; animation: jslide-top-out 0.2s forwards; } .jslide-bottom-in { position: relative; animation: jslide-bottom-in 0.4s forwards; } .jslide-bottom-out { position: relative; animation: jslide-bottom-out 0.1s forwards; } .jslide-left-in > div { -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); } .jslide-left-out > div { -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); } .jslide-right-in > div { -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); } .jslide-right-out > div { -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); } .jspin { animation: jspin 2s infinite linear; } /** Fadein and Fadeout **/ @keyframes jfade-in { 0% { opacity: 0; } 100% { opacity: 100; } } @-webkit-keyframes jfade-in { 0% { opacity: 0; } 100% { opacity: 100; } } @keyframes jfade-out { 0% { opacity: 100; } 100% { opacity: 0; } } @-webkit-keyframes jfade-out { 0% { opacity: 100; } 100% { opacity: 0; } } /** Keyframes Left to Right **/ @keyframes jslide-left-in { 0% { left: -100%; } 100% { left: 0%; } } @-webkit-keyframes jslide-left-in { 0% { left: -100%; } 100% { left: 0%; } } @keyframes jslide-left-out { 0% { left: 0%; } 100% { left: -100%; } } @-webkit-keyframes jslide-left-out { 0% { left: 0%; } 100% { left: -100%; } } /** Keyframes Right to Left **/ @keyframes jslide-right-in { 0% { left: 100%; } 100% { left: 0%; } } @-webkit-keyframes jslide-right-in { 0% { left: 100%; } 100% { left: 0%; } } @keyframes jslide-right-out { 0% { left: 0%; } 100% { left: 100%; } } @-webkit-keyframes jslide-right-out { 0% { left: 0%; } 100% { left: 100%; } } /** Keyframes Top to Bottom **/ @keyframes jslide-top-in { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } @-webkit-keyframes jslide-top-in { 0% { transform: translateY(-100%); } 100% { -webkit-transform: translateY(0%); } } @keyframes jslide-top-out { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } @-webkit-keyframes jslide-top-out { 0% { -webkit-transform: translateY(0%); } 100% { -webkit-transform: translateY(-100%); } } /** Keyframes Bottom to Top **/ @keyframes jslide-bottom-in { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } @-webkit-keyframes jslide-bottom-in { 0% { transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); } } @keyframes jslide-bottom-out { 0% { transform: translateY(0%); } 100% { transform: translateY(100%); } } @-webkit-keyframes jslide-bottom-out { 0% { -webkit-transform: translateY(0%); } 100% { -webkit-transform: translateY(100%); } } @-webkit-keyframes jspin { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(359deg); } } @keyframes jspin { from { transform:rotate(0deg); } to { transform:rotate(359deg); } } .jcalendar { position:absolute; z-index:9000; display:none; box-sizing:border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; min-width:280px; } .jcalendar.jcalendar-focus { display:block; } .jcalendar .jcalendar-backdrop { position:fixed; top:0px; left:0px; z-index:9000; min-width:100%; min-height:100%; background-color:rgba(0,0,0,0.5); border:0px; padding:0px; display:none; } .jcalendar .jcalendar-container { position:relative; box-sizing:border-box; } .jcalendar .jcalendar-content { position:absolute; z-index:9001; -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); background-color:#fff; } .jcalendar-header { text-align:center; } .jcalendar-header span { margin-right:4px; font-size:1.1em; font-weight:bold; } .jcalendar-prev { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z%27 fill=%27%23000%27 /%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0V0z%27/%3E%3C/svg%3E"); background-position:center; background-repeat:no-repeat; } .jcalendar-next { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27 fill=%27%23000%27 /%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0V0z%27/%3E%3C/svg%3E"); background-position:center; background-repeat:no-repeat; } .jcalendar-weekday { font-weight: 600; background-color: #fcfcfc; padding: 14px; } .jcalendar-table { padding: 10px; } .jcalendar-table > table { width:100%; background-color:#fff; } .jcalendar-table > table > thead { cursor: pointer; } .jcalendar-table thead td { padding: 10px; height: 40px; } .jcalendar-table > table > tbody > tr { height: 34px; } .jcalendar-table > table > tbody td { box-sizing:border-box; cursor:pointer; padding:9px; font-size:0.9em; } .jcalendar-table tfoot td { padding:10px; } .jcalendar-months td, .jcalendar-years td { height:24px; } .jcalendar-input { padding-right:18px; background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27gray%27%3E%3Cpath d=%27M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z%27/%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0z%27/%3E%3C/svg%3E"); background-position:top 50% right 5px; background-repeat:no-repeat; box-sizing: border-box; } .jcalendar-done { -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.39); background-color:#fff; } .jcalendar-update { border:1px solid #ccc; background-color:#fff; border-radius:4px; padding:5px; width:100%; } .jcalendar-container select { width:55px; display:inline-block; border:0px; padding:4px; text-align:center; font-size:1.1em; user-select:none; margin-right:10px; } .jcalendar-container select:first-child { margin-right:2px; } .jcalendar-selected { background-color:#eee; } .jcalendar-reset, .jcalendar-confirm { text-transform:uppercase; cursor:pointer; color: var(--jactive-color); } .jcalendar-controls { padding:15px; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align:middle; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-between; align-items:center; } .jcalendar-controls div { font-weight:bold; } .jcalendar-fullsize { position:fixed; width:100%; top:0px; left:0px; } .jcalendar-fullsize .jcalendar-content { position:fixed; width:100%; left:0px; bottom:0px; } .jcalendar-focus.jcalendar-fullsize .jcalendar-backdrop { display:block; } .jcalendar-sunday { color: red; } .jcalendar-disabled { color: #ccc; } .jcalendar-time { display:flex; } .jcalendar_warning { color: red; } .jcalendar-hide-controls .jcalendar-controls { display: none; } .jcolor { display: none; outline: none; position: absolute; } .jcolor-input { padding-right: 24px !important; background: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z%27/%3E%3C/svg%3E") top 50% right 4px no-repeat, content-box; box-sizing: border-box; } .jcolor-content { position: absolute; z-index: 9000; user-select: none; -webkit-font-smoothing: antialiased; font-size: .875rem; letter-spacing: .2px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); background-color:#fff; box-sizing: border-box; min-width: 260px; } .jmodal .jcolor-content { position: fixed; } .jcolor-controls { display: flex; padding: 10px; border-bottom: 1px solid #eee; margin-bottom: 5px; } .jcolor-controls div { flex: 1; font-size: 1em; color: var(--jactive-color); text-transform: uppercase; font-weight: bold; box-sizing: border-box; } .jcolor-content table { border-collapse: collapse; box-sizing: border-box; } .jcolor-focus { display:block; } .jcolor table { width:100%; height:100%; min-height: 160px; } .jcolor td { padding: 7px; } .jcolor-selected { background-repeat:no-repeat; background-size: 16px; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z%27 fill=%27white%27/%3E%3C/svg%3E"); } .jcolor-fullscreen { position: fixed; left: 0px; bottom: 0px; width:100%; max-height: 290px; border-radius: 0px; box-sizing: border-box; } .jcolor-fullscreen .jcolor-controls { padding: 15px; -webkit-box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.39); -moz-box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.39); box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.39); } .jcolor-reset { text-align: left; } .jcolor-close { text-align: right; } .jcolor-backdrop { position: fixed; top: 0px; left: 0px; min-width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); border: 0px; padding: 0px; z-index: 8000; display: none; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .jcolor-content .jtabs-content { padding: 7px; } .jcolor-grid tr:first-child > td:first-child { border-top-left-radius: 3px; } .jcolor-grid tr:first-child > td:last-child { border-top-right-radius: 3px; } .jcolor-grid tr:last-child > td:first-child { border-bottom-left-radius: 3px; } .jcolor-grid tr:last-child > td:last-child { border-bottom-right-radius: 3px; } .jcolor-hsl { box-sizing: border-box; } .jcolor-hsl > div { height: 100%; position: relative; } .jcolor-hsl canvas { display: block; border-radius: 4px; -webkit-user-drag: none; } .jcolor-point { height: 5px; width: 5px; background-color: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .jcolor-sliders { padding: 10px 20px 10px 10px; } .jcolor-sliders input { -webkit-appearance: none; height: 12px; width: 80%; background: #d3d3d3; opacity: 1; border-radius: 30px; outline: none; } .jcolor-sliders-input-subcontainer { display: flex; justify-content: space-between; align-items: center; } .jcolor-sliders-input-container { margin-top: 4px; line-height: 0.8em; text-align: left; } .jcolor-sliders-input-container > label { font-size: 10px; text-transform: uppercase; color: #bbbbbd; } .jcolor-sliders-input-subcontainer > input { border: 0px; padding: 1px; } .jcolor-sliders-input-container input::-webkit-slider-thumb { -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%; background: #000; border: 2px solid #fff; cursor: pointer; } .jcolor-sliders-input-container input::-moz-range-thumb { -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%; background: #000; border: 2px solid #fff; cursor: pointer; } .jcolor-sliders-final-color { padding: 6px; user-select: all; margin-top: 10px; text-align: center; } .jcolor-sliders-final-color > div:nth-child(2) { width: 71px; text-transform: uppercase; } .jcolor .jtabs .jtabs-headers-container .jtabs-controls { display: none !important; } .jcolor .jtabs .jtabs-headers-container { display: flex !important; justify-content: center; padding: 4px; } .jcolor .jtabs-headers > div:not(.jtabs-border) { padding: 2px !important; padding-left: 15px !important; padding-right: 15px !important; font-size: 0.8em; } .jcontextmenu { position:fixed; z-index:10000; background:#fff; color: #555; font-size: 11px; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1); -moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1); box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1); border: 1px solid #C6C6C6; padding: 0px; padding-top:4px; padding-bottom:4px; margin:0px; outline:none; display:none; } .jcontextmenu.jcontextmenu-focus { display:inline-block; } .jcontextmenu > div { box-sizing: border-box; display: flex; padding: 8px 8px 8px 32px; width: 250px; position: relative; cursor: default; font-size: 11px; font-family:sans-serif; text-align: left; -webkit-box-align: center; align-items: center; } .jcontextmenu > div::before { content: attr(data-icon); font-family: 'Material Icons' !important; font-size: 15px; position: absolute; left: 9px; line-height: 24px; } .jcontextmenu.symbols > div::before { font-family: 'Material Symbols Outlined' !important; } .jcontextmenu > div.header { display: none; } .jcontextmenu > div a { color: #555; text-decoration: none; flex: 1; cursor: pointer; } .jcontextmenu > div span { margin-right: 10px; font-size: 0.9em; } .jcontextmenu .jcontextmenu-disabled a { color: #ccc; } .jcontextmenu .jcontextmenu-disabled::before { color: #ccc; } .jcontextmenu > div:hover { background: #ebebeb; } .jcontextmenu hr { border: 1px solid #e9e9e9; border-bottom: 0; margin-top:5px; margin-bottom:5px; } .jcontextmenu > hr:hover { background: transparent; } .jcontextmenu .jcontextmenu { top: 4px; left: 99%; opacity: 0; position: absolute; } .jcontextmenu > div:hover > .jcontextmenu { display: block; opacity: 1; -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); pointer-events: auto; } @media only screen and (max-width: 420px) { .jcontextmenu { top: initial !important; left: 0px !important; bottom: 0px !important; width: 100vw; height: 260px; overflow: scroll; animation: jslide-bottom-in 0.4s forwards; padding-top: 0px; } .jcontextmenu div { width: 100%; text-align: center; border-bottom: 1px solid #ccc; padding: 15px; } .jcontextmenu > div.header { background-color: lightgray; padding: 5px; top: 0px; position: sticky; z-index: 2; } .jcontextmenu > div.header > a.title { text-align: left; } .jcontextmenu > div.header > a.close { text-align: right; } .jcontextmenu a { font-size: 1.4em; text-transform: uppercase; } .jcontextmenu span { display: none; } .jcontextmenu span { display: none; } .jcontextmenu hr { display: none; } } .jdropdown { cursor:pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; background:#fff; -webkit-tap-highlight-color: transparent; display: inline-block; } .jdropdown-backdrop { position:fixed; top:0px; left:0px; min-width:100%; min-height:100%; background-color:rgba(0,0,0,0.5); border:0px; padding:0px; z-index:8000; display:none; } .jdropdown[disabled] { opacity: 0.5; pointer-events: none; } .jdropdown-focus { position:relative; } .jdropdown-focus .jdropdown-container { transform: translate3d(0,0,0); } .jdropdown-default.jdropdown-focus .jdropdown-header { outline:auto 5px -webkit-focus-ring-color; } .jdropdown-default.jdropdown-focus .jdropdown-header.jdropdown-add { background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27gray%27 width=%2724px%27 height=%2724px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z%27/%3E%3C/svg%3E"); } .jdropdown-container-header { padding:0px; margin:0px; position:relative; box-sizing: border-box; } .jdropdown-header { width:100%; appearance: none; background-repeat: no-repeat; background-position:top 50% right 5px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0V0z%27/%3E%3Cpath d=%27M7 10l5 5 5-5H7z%27 fill=%27gray%27/%3E%3C/svg%3E"); text-overflow: ellipsis; cursor:pointer; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; padding-right:30px !important; } .jdropdown-insert-button { font-size: 1.4em; text-transform: uppercase; position:absolute; right: 30px; top: 4px; display:none; } .jdropdown-container { min-width: inherit; transform: translate3d(-10000px,0,0); position:absolute; z-index:9001; } .jdropdown-close { display:none; font-size:1em; color: var(--jactive-color); text-transform:uppercase; text-align:right; padding:12px; font-weight:bold; } .jdropdown-content { min-width:inherit; margin:0px; box-sizing:border-box; } .jdropdown-content:empty { } .jdropdown-item { white-space: nowrap; text-align: left; text-overflow: ellipsis; overflow-x: hidden; color: #000; display: flex; align-items: center; } .jdropdown-description { text-overflow: ellipsis; overflow: hidden; line-height: 1.5em; } .jdropdown-image { margin-right:10px; width: 32px; height: 32px; border-radius:20px; } .jdropdown-image-small { width:24px; height:24px; } .jdropdown-icon { margin-right:10px; font-size: 30px; margin-left: -5px; } .jdropdown-icon-small { font-size: 24px; margin-left: 0px; } .jdropdown-title { font-size: 0.7em; text-overflow: ellipsis; overflow-x: hidden; display: block; } /** Default visual **/ .jdropdown-default .jdropdown-header { border:1px solid #ccc; padding:5px; padding-left:10px; padding-right:16px; } .jdropdown-default .jdropdown-container { background-color:#fff; } .jdropdown-default.jdropdown-focus.jdropdown-insert .jdropdown-header { padding-right:50px; } .jdropdown-default.jdropdown-focus.jdropdown-insert .jdropdown-insert-button { display:block; } .jdropdown-default .jdropdown-content { min-width:inherit; border:1px solid #8fb1e3; margin:0px; background-color:#fff; box-sizing:border-box; min-height:10px; max-height:215px; overflow-y:auto; } .jdropdown-default .jdropdown-item { padding:4px; padding-left:8px; padding-right:40px; } .jdropdown-default .jdropdown-item:hover { background-color:#1f93ff; color:#fff; } .jdropdown-default .jdropdown-cursor { background-color:#eee; } .jdropdown-default .jdropdown-selected { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik05IDE2LjE3TDQuODMgMTJsLTEuNDIgMS40MUw5IDE5IDIxIDdsLTEuNDEtMS40MXoiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPgo=); background-repeat:no-repeat; background-position:top 50% right 5px; background-color:#1f93ff; color:#fff; } .jdropdown-default .jdropdown-group { margin-top:5px; } .jdropdown-default .jdropdown-group .jdropdown-item { padding-left:16px; } .jdropdown-default .jdropdown-group-name { padding-left: 8px; font-weight: bold; text-align: left; } .jdropdown-default .jdropdown-reset_ { content:'x'; position:absolute; top:0; right:0; margin:5px; margin-right:10px; font-size:12px; width:12px; cursor:pointer; text-shadow: 0px 0px 5px #fff; display:none; line-height: 1.8em; } .jdropdown-default.jdropdown-focus .jdropdown-reset_ { display:block; } /** Default render for mobile **/ .jdropdown-picker.jdropdown-focus .jdropdown-backdrop { display:block; } .jdropdown-picker .jdropdown-header { outline: none; } .jdropdown-picker .jdropdown-container { position:fixed; bottom:0px; left:0px; border-bottom:1px solid #e6e6e8; width:100%; background-color:#fff; box-sizing: border-box; } .jdropdown-picker .jdropdown-close { -webkit-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.39); -moz-box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.39); box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.39); background-color:#fff; display:block; } .jdropdown-picker .jdropdown-content { overflow-y:scroll; height:280px; background-color:#fafafa; border-top:1px solid #e6e6e8; } .jdropdown-picker .jdropdown-group-name { font-size: 1em; text-transform: uppercase; padding-top:10px; padding-bottom:10px; display: block; border-bottom: 1px solid #e6e6e8; padding-left:20px; padding-right:20px; text-align:center; font-weight:bold; } .jdropdown-picker .jdropdown-item { font-size: 1em; text-transform: uppercase; padding-top:10px; padding-bottom:10px; border-bottom: 1px solid #e6e6e8; padding-left:20px; padding-right:20px; } .jdropdown-picker .jdropdown-selected { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik05IDE2LjE3TDQuODMgMTJsLTEuNDIgMS40MUw5IDE5IDIxIDdsLTEuNDEtMS40MXoiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPgo=); background-repeat:no-repeat; background-position:top 50% right 15px; background-color:#1f93ff; color:#fff; } .jdropdown-picker .jdropdown-cursor { background-color:#1f93ff; color:#fff; } /** Default render for mobile searchbar **/ .jdropdown-searchbar.jdropdown-focus { position:fixed; top:0px !important; left:0px !important; width:100% !important; height:100% !important; background-color:#fafafa; padding:0px; z-index:9001; overflow-y:scroll; will-change: scroll-position; -webkit-overflow-scrolling: touch; } .jdropdown-searchbar.jdropdown-focus .jdropdown-container-header { position: fixed; top: 0px; left: 0px; z-index: 9002; padding: 6px; background-color:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); width: 100%; height: 40px; } .jdropdown-searchbar.jdropdown-focus .jdropdown-header { border: 0px !important; background-position-x: 0% !important; background-position-y: 40% !important; background-repeat: no-repeat; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUuNSAxNGgtLjc5bC0uMjgtLjI3QzE1LjQxIDEyLjU5IDE2IDExLjExIDE2IDkuNSAxNiA1LjkxIDEzLjA5IDMgOS41IDNTMyA1LjkxIDMgOS41IDUuOTEgMTYgOS41IDE2YzEuNjEgMCAzLjA5LS41OSA0LjIzLTEuNTdsLjI3LjI4di43OWw1IDQuOTlMMjAuNDkgMTlsLTQuOTktNXptLTYgMEM3LjAxIDE0IDUgMTEuOTkgNSA5LjVTNy4wMSA1IDkuNSA1IDE0IDcuMDEgMTQgOS41IDExLjk5IDE0IDkuNSAxNHoiIGZpbGw9IiNlNmU2ZTgiLz48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+); padding-left: 30px !important; padding-right: 60px !important; } .jdropdown-searchbar.jdropdown-focus .jdropdown-close { display:block; } .jdropdown-searchbar .jdropdown-header { outline: none; } .jdropdown-searchbar .jdropdown-container { margin-top: 40px; width:100%; } .jdropdown-searchbar .jdropdown-close { position:fixed; top:0px; right:0px; } .jdropdown-searchbar .jdropdown-content { margin-top:10px; } .jdropdown-searchbar .jdropdown-group { margin-top:10px; margin-bottom:15px; background-color:#fff; } .jdropdown-searchbar .jdropdown-group-name { border-top: 1px solid #e6e6e8; border-bottom: 1px solid #e6e6e8; padding:10px; padding-left:12px; font-weight:bold; } .jdropdown-searchbar .jdropdown-group-arrow { float:right; width:24px; height:24px; background-repeat:no-repeat; } .jdropdown-searchbar .jdropdown-group-arrow-down { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy40MSA4LjU5TDEyIDEzLjE3bDQuNTktNC41OEwxOCAxMGwtNiA2LTYtNiAxLjQxLTEuNDF6Ii8+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgwVjB6Ii8+PC9zdmc+); } .jdropdown-searchbar .jdropdown-group-arrow-up { background-image: url(data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcuNDEgMTUuNDFMMTIgMTAuODNsNC41OSA0LjU4TDE4IDE0bC02LTYtNiA2eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=); } .jdropdown-searchbar .jdropdown-item { padding-top:10px; padding-bottom:10px; border-bottom: 1px solid #e6e6e8; padding-left:15px; padding-right:40px; background-color:#fff; font-size:0.9em; } .jdropdown-searchbar .jdropdown-description { text-overflow: ellipsis; overflow: hidden; max-width: calc(100% - 20px); } .jdropdown-searchbar .jdropdown-content > .jdropdown-item:first-child { border-top: 1px solid #e6e6e8; } .jdropdown-searchbar .jdropdown-selected { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwN2FmZiIvPjwvc3ZnPg==); background-repeat:no-repeat; background-position:top 50% right 15px; } /** List render **/ .jdropdown-list { } .jdropdown-list .jdropdown-container { display:block; } .jdropdown-list .jdropdown-header { display:none; } .jdropdown-list .jdropdown-group { background-color:#fff; } .jdropdown-list .jdropdown-group-name { border-bottom: 1px solid #e6e6e8; padding-top:10px; padding-bottom:10px; font-weight:bold; } .jdropdown-list .jdropdown-item { padding-top:10px; padding-bottom:10px; border-bottom: 1px solid #e6e6e8; padding-left:10px; padding-right:40px; background-color:#fff; } .jdropdown-list .jdropdown-selected { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwN2FmZiIvPjwvc3ZnPg==); background-repeat:no-repeat; background-position:top 50% right 10px; } @media only screen and (max-width : 800px) { .jdropdown-list { width:100% !important; border:0px; padding:0px; } .jdropdown-list .jdropdown-container { min-width:100%; } .jdropdown-searchbar.jdropdown-focus .jdropdown-description { text-transform: uppercase; } } .app .jdropdown-item { text-transform:uppercase; } .jdropdown-create-container { margin: 10px; border: 1px solid #ccc; border-radius: 2px; padding: 6px; } .jdropdown-color { background-color: #fff; border: 1px solid transparent; border-radius: 12px; width: 12px; height: 12px; margin-right: 6px; } .jdropdown-item[data-disabled] { opacity: 0.5; pointer-events: none; } .jeditor-container { border:1px solid #ccc; box-sizing: border-box; } .jeditor-container.with-margin { background-color: #f2f2f2; max-width: 1200px; } .jeditor-dragging { border:1px dashed #000; } .jeditor { outline:none; word-break: break-word; } .jeditor-container.with-margin .jeditor { background-color: #fff; margin: 80px; min-height: 800px; padding: 80px; max-width: 800px; } .jeditor[data-placeholder]:empty:before { content: attr(data-placeholder); color: lightgray; } /** Snippet **/ .jsnippet { margin-top:15px; cursor:pointer; border: 1px solid #ccc; position:relative; } .jsnippet:focus { outline: none; } .jsnippet img { width:100%; } .jsnippet .jsnippet-title { padding:15px; font-size:1.4em; } .jsnippet .jsnippet-description { padding-left:15px; padding-right:15px; font-size:1em; } .jsnippet .jsnippet-host { padding:15px; text-transform:uppercase; font-size:0.8em; color:#777; text-align:right; } .jsnippet .jsnippet-url { display:none; } .jeditor .jsnippet:after { content: 'close'; font-family: 'Material icons'; font-size: 24px; width: 24px; height: 24px; line-height: 24px; cursor: pointer; text-shadow: 0px 0px 2px #fff; position: absolute; top: 12px; right: 12px; } .jsnippet * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; } .jeditor img { border:2px solid transparent; box-sizing: border-box; } .jeditor img.resizing { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; } .jeditor img:focus { border: 2px solid #0096FD; outline: #0096FD; } .jeditor .pdf { background-image: url("data:image/svg+xml,%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 512 512%27 style=%27enable-background:new 0 0 512 512;%27 xml:space=%27preserve%27%3E%3Cpath style=%27fill:%23C30B15;%27 d=%27M511.344,274.266C511.77,268.231,512,262.143,512,256C512,114.615,397.385,0,256,0S0,114.615,0,256 c0,117.769,79.53,216.949,187.809,246.801L511.344,274.266z%27/%3E%3Cpath style=%27fill:%2385080E;%27 d=%27M511.344,274.266L314.991,77.913L119.096,434.087l68.714,68.714C209.522,508.787,232.385,512,256,512 C391.243,512,501.976,407.125,511.344,274.266z%27/%3E%3Cpolygon style=%27fill:%23FFFFFF;%27 points=%27278.328,333.913 255.711,77.913 119.096,77.913 119.096,311.652 %27/%3E%3Cpolygon style=%27fill:%23E8E6E6;%27 points=%27392.904,311.652 392.904,155.826 337.252,133.565 314.991,77.913 255.711,77.913 256.067,333.913 %27/%3E%3Cpolygon style=%27fill:%23FFFFFF;%27 points=%27314.991,155.826 314.991,77.913 392.904,155.826 %27/%3E%3Crect x=%27119.096%27 y=%27311.652%27 style=%27fill:%23FC0F1A;%27 width=%27273.809%27 height=%27122.435%27/%3E%3Cg%3E%3Cpath style=%27fill:%23FFFFFF;%27 d=%27M204.871,346.387c13.547,0,21.341,6.659,21.341,18.465c0,12.412-7.795,19.601-21.341,19.601h-9.611 v14.909h-13.471v-52.975L204.871,346.387L204.871,346.387z M195.26,373.858h8.93c5.904,0,9.308-2.952,9.308-8.552 c0-5.525-3.406-8.324-9.308-8.324h-8.93V373.858z%27/%3E%3Cpath style=%27fill:%23FFFFFF;%27 d=%27M257.928,346.387c16.649,0,28.152,10.746,28.152,26.487c0,15.666-11.655,26.488-28.683,26.488 h-22.25v-52.975H257.928z M248.619,388.615h9.611c8.249,0,14.151-6.357,14.151-15.665c0-9.384-6.205-15.817-14.757-15.817h-9.006 V388.615z%27/%3E%3Cpath style=%27fill:%23FFFFFF;%27 d=%27M308.563,356.982v12.26h23.763v10.596h-23.763v19.525h-13.471v-52.975h39.277v10.595h-25.806 V356.982z%27/%3E%3C/g%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: cover; width:60px; height:60px; } .jeditor-toolbar { width: fit-content; max-width: 100%; box-sizing: border-box; margin: 10px; } .toolbar-on-top .jeditor-toolbar { width: initial; margin: 0px; box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); display: block; } .toolbar-on-top .jeditor { padding: 15px; } .toolbar-on-top .jtoolbar .material-icons { font-size: 24px; transform: initial; margin: 4px; } .toolbar-on-top .jtoolbar .jpicker-header { font-size: 1em; margin-top: 4px; margin-bottom: 4px; } .jeditor table { border-collapse: collapse; } .jeditor table td { border: 1px solid #bbb; height: 2em; } .jeditor table td:focus { border: 1px solid blue; } .jeditor .line-break { border-top: 1px dashed #ccc; display: flex; justify-content: center; pointer-events: none; } .jeditor .line-break:before { content: 'New page'; background-color: #fff; color: #ccc; margin: -1em; padding: 6px; position: absolute; } .jfloating { position:fixed; bottom:0px; right:0px; margin-right:5px; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.2); border:1px solid #ccc; background-color:#fff; box-sizing: border-box; padding-top:50px !important; z-index:9002; border-radius: 8px; } .jfloating.jfloating-big { width: 510px !important; height: 472px !important; } .jfloating.jfloating-small { width: 300px !important; height: 320px !important; } .jfloating.jfloating-large { width: 600px !important; height: 600px !important; } .jfloating:before { position:absolute; top:0; left:0; width:100%; content:attr(title); padding:15px; box-sizing: border-box; font-size:1.2em; box-shadow: 1px 1px 3px rgba(0,0,0,.2); background-color: #fff; border-radius: 8px 8px 0px 0px; background-color: #404040; font-size: .93rem; font-weight: 600; color: white; letter-spacing: .5px; } .jfloating:after { content:''; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23FFF%27 d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); position:absolute; top:0; right:0; margin:14px; font-size:24px; width:24px; height:24px; cursor:pointer; text-shadow: 0px 0px 5px #fff; } .jfloating_content { padding:20px; overflow-y:auto; max-height:100%; box-sizing: border-box; height: -webkit-fill-available; } .jfloating.jfloating-minimized { height: 50px !important; } .jfloating.jfloating-minimized .jfloating_content { display: none; } .jmodal { position:fixed; top:50%; left:50%; width:60%; height:60%; -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 12px rgba(0,0,0,.2); border:1px solid #ccc; background-color:#fff; transform: translate(-50%, -50%); box-sizing: border-box; z-index:9002; border-radius: 4px; display: flex; flex-direction: column; } .jmodal_title { padding: 20px; height: 70px; box-sizing: border-box; font-size: 1.4em; background-color: #fff; border-radius: 8px 8px 0px 0px; pointer-events: none; display: flex; -webkit-align-items: center; -webkit-box-align: center; align-items: center; border-bottom: 1px solid #eee; } .jmodal_title > div { font-size: 1.4em; } .jmodal_title[data-icon]:before { content: attr(data-icon); font-family: 'Material Icons' !important; width: 24px; height: 24px; font-size: 24px; margin-right: 10px; line-height: 24px; } .jmodal_content { padding: 20px; overflow-y: auto; height: 100%; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #333 transparent; } .jmodal_title:empty { display: none; } .jmodal_title:empty + .jmodal_content { height: 100%; } .jmodal_content::-webkit-scrollbar { height: 12px; } .jmodal_content::-webkit-scrollbar { width: 12px; } .jmodal_content::-webkit-scrollbar-track { border: 1px solid #fff; background: #eee; } .jmodal_content::-webkit-scrollbar-thumb { border: 1px solid #fff; background: #888; } .jmodal:after { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); position: absolute; top: 0; right: 0; margin: 25px; font-size: 24px; width: 24px; height: 24px; cursor: pointer; text-shadow: 0px 0px 5px #fff; } .jmodal_fullscreen { width: 100% !important; height: 100% !important; top: 0px; left: 0px; transform: none; border: 0px; border-radius: 0px; } .jmodal_backdrop { position: fixed; top: 0px; left: 0px; min-width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.2); border: 0px; padding: 0px; z-index: 8000; display: none; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .jmodal_content .jcalendar .jcalendar-content, .jmodal_content .jdropdown-container { position: fixed; } .jnotification { position: fixed; z-index: 10000; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; bottom: 0px; } .jnotification-container { -webkit-box-shadow: 0px 2px 15px -5px rgba(0, 0, 0, 0.7); box-shadow: 0px 2px 15px -5px rgba(0, 0, 0, 0.7); padding: 12px; border-radius: 8px; background-color: #000; background: rgba(92,92,92,1); background: linear-gradient(0deg, rgba(92,92,92,1) 0%, rgba(77,77,77,1) 100%); color: #fff; width: 320px; margin: 30px; padding: 20px; } .jnotification-close { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27white%27%3E%3Cpath d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); font-size: 20px; width: 20px; height: 20px; cursor: pointer; } .jnotification-title { font-weight: bold; } .jnotification-header { display: flex; padding-bottom: 5px; } .jnotification-header:empty { display: none; } .jnotification-image { margin-right: 5px; } .jnotification-image:empty { display: none; } .jnotification-image img { width: 24px; } .jnotification-name { text-transform: uppercase; font-size: 0.9em; flex: 1; letter-spacing: 0.1em; } .jnotification-error .jnotification-container { background: rgb(182,38,6); background: linear-gradient(0deg, rgba(170,41,13,1) 0%, rgba(149,11,11,1) 100%); } @media (max-width: 800px) { .jnotification { top: calc(0px + var(--jsafe-area-top)); width: 100%; } .jnotification-container { background: rgba(255,255,255,0.95); border: 1px solid #eee; color: #444; margin: 0px; width: initial; } .jnotification-error .jnotification-container { background: rgba(255,255,255,0.95); color: #790909; } .jnotification-close { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); } } .jnotification-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .jpicker { cursor: pointer; white-space: nowrap; display: inline-flex; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; position: relative; min-height: 26px; } .jpicker-header { background-repeat: no-repeat; background-position: top 50% right 5px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27none%27 d=%27M0 0h24v24H0V0z%27/%3E%3Cpath d=%27M7 10l5 5 5-5H7z%27 fill=%27gray%27/%3E%3C/svg%3E"); text-overflow: ellipsis; cursor: pointer; box-sizing: border-box; text-align: left; outline: none; line-height: 24px; padding: 2px 35px 2px 12px; border-radius: 4px; } .jpicker-header:hover { background-color: #f2f2f2; } .jpicker-content { position: absolute; top: 0; display: none; box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); border-radius: 4px; background-color: #fff; padding: 4px; z-index: 50; text-align: left; max-height: 250px; scrollbar-width: thin; scrollbar-color: #333 transparent; } .jpicker-content::-webkit-scrollbar { width: 8px; } .jpicker-content::-webkit-scrollbar-track { background: #eee; } .jpicker-content::-webkit-scrollbar-thumb { background: #888; } .jpicker-content > div { padding: 6px; padding-left: 15px; padding-right: 15px; } .jpicker-focus > .jpicker-content { display: block; } .jpicker-content > div:hover { background-color:#efefef; } .jpicker-content > div:empty { opacity: 0; } .jpicker-header > i, .jpicker-header > div { display: block; } .jpicker-focus > .jpicker-content.jpicker-columns { display: flex !important ; justify-content: center; flex-wrap: wrap; } .jpicker-focus .jpicker-content.jpicker-grid { display: inline-grid; } .jprogressbar { cursor:pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; background:#fff; -webkit-tap-highlight-color: transparent; display: inline-block; box-sizing: border-box; cursor:pointer; border:1px solid #ccc; position:relative; } .jprogressbar::before { content:attr(data-value); position:absolute; margin:5px; margin-left:10px; } .jprogressbar-header::placeholder { color:#000; } .jprogressbar:focus { outline: auto 5px -webkit-focus-ring-color; } .jprogressbar > div { background-color: #eee; background-color: red; box-sizing: border-box; height:31px; } .jrating { display:flex; } .jrating > div { width:24px; height:24px; line-height:24px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z%27 fill=%27gray%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); } .jrating .jrating-over { background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); opacity: 0.7; } .jrating .jrating-selected { background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27red%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); } .jsearch { position: relative; display: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jsearch_container { position: absolute; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 2px 6px 2px rgba(60,64,67,0.149); border: none; -webkit-border-radius: 4px; border-radius: 4px; width: 280px; padding: 8px 0; z-index: 1; -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2); box-shadow: 0 2px 4px rgba(0,0,0,0.2); -webkit-transition: opacity .218s; transition: opacity .218s; background: #fff; border: 1px solid rgba(0,0,0,.2); cursor: pointer; margin: 0; min-width: 300px; outline: none; width: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jsearch_container:empty:after { content: attr(data-placeholder); } .jsearch_container > div { color: #333; cursor: pointer; display: -webkit-box; display: -webkit-flex; display: flex; padding: 5px 10px; user-select: none; -webkit-align-items: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jsearch_container > div:hover { background-color: #e8eaed; } .jsearch_container > div > img { width: 32px; height: 32px; user-select: none; border-radius: 16px; margin-right: 2px; } .jsearch_container > div > div { overflow: hidden; text-overflow: ellipsis; margin-left: 2px; max-width: 300px; white-space: nowrap; user-select: none; } .jsearch_container .selected { background-color: #e8eaed; } .jslider { outline: none; } .jslider-focus { width: 100% !important; height: 100% !important; } .jslider-focus img { display: none; } .jslider img { width: 100px; } .jslider-left::before { position: fixed; left: 15px; top: 50%; content:'arrow_back_ios'; color: #fff; width: 30px; height: 30px; font-family: 'Material Icons'; font-size: 30px; /* before it was 0px 0px 0px #000 */ text-shadow: 0px 0px 6px rgb(56,56,56); text-align: center; cursor: pointer; } .jslider-right::after { position: fixed; right: 15px; top: 50%; content: 'arrow_forward_ios'; color: #fff; width: 30px; height: 30px; font-family: 'Material Icons'; font-size: 30px; /* before it was 0px 0px 0px #000 */ text-shadow: 0px 0px 6px rgb(56,56,56); text-align: center; cursor: pointer; } .jslider-close { width:24px; height:24px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27white%27%3E%3Cpath d=%27M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); position:fixed; top:15px; right:15px; cursor:pointer; z-index:3000; display: block !important; } .jslider-counter { height:24px; background-color: transparent; position:fixed; left: 50%; transform: translateX(-50%); bottom: 15px; cursor:pointer; z-index:3000; display: flex; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; -webkit-flex-direction: row; justify-content: center; align-items: center; flex-direction: row; } .jslider-caption { position: fixed; max-width: 90vw; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; top:15px; left: 15px; z-index:3000; color: #FFF; font-size: 1rem; display: block !important; } .jslider-counter div { width: 10px; height: 10px; background: #fff; border-radius: 50%; margin: 0px 5px; display: block !important; } .jslider-counter .jslider-counter-focus { background-color: cornflowerblue; pointer-events: none; } .jslider-focus { position:fixed; left:0; top:0; width: 100%; min-height:100%; max-height:100%; z-index:2000; margin:0px; box-sizing:border-box; background-color:rgba(0,0,0,0.8); -webkit-transition-duration: .05s; transition-duration: .05s; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } .jslider-focus img { width: 50vw; height: auto; box-sizing: border-box; margin:0 auto; vertical-align:middle; display:none; } .jslider-focus img.jslider-vertical { width: auto; /* before it was 50vh */ height: 80vh; } @media only screen and (max-width: 576px) { .jslider-focus img.jslider-vertical { width: 99vw !important; height: auto !important; } .jslider-focus img { width: 100vw !important; height: auto !important; } } .jslider-grid { display: -ms-grid; display: grid; grid-gap: 1px; position: relative; } .jslider-grid[data-number='2'] { -ms-grid-columns: 1fr 50%; grid-template-columns: 1fr 50%; } .jslider-grid[data-number='3'] { -ms-grid-columns: 1fr 33%; grid-template-columns: 1fr 33%; } .jslider-grid[data-number='4'] { -ms-grid-columns: 1fr 25%; grid-template-columns: 1fr 25%; } .jslider-grid img { display: none; width: 100%; height: 100%; object-fit: cover; } .jslider-grid[data-total]:after { content: attr(data-total) "+"; font-size: 1.5em; position:absolute; color: #fff; right: 15px; bottom: 6px; } .jslider-grid img:first-child { -ms-grid-column: 1; -ms-grid-row: 1; grid-column: 1; grid-row: 1; display: block; } .jslider-grid[data-number='2'] img:nth-child(2) { -ms-grid-column: 2; -ms-grid-row: 1; grid-column: 2; grid-row: 1; display: block; } .jslider-grid[data-number='3'] img:first-child { -ms-grid-column: 1 / 2; -ms-grid-row: 1 / 4; grid-column: 1 / 2; grid-row: 1 / 4; } .jslider-grid[data-number='3'] img:nth-child(2) { -ms-grid-column: 2; -ms-grid-row: 1; grid-column: 2; grid-row: 1; display: block; } .jslider-grid[data-number='3'] img:nth-child(3) { -ms-grid-column: 2; -ms-grid-row: 2; grid-column: 2; grid-row: 2; display: block; } .jslider-grid[data-number='4'] img:first-child { -ms-grid-column: 1 / 2; -ms-grid-row: 1 / 4; grid-column: 1 / 2; grid-row: 1 / 4; } .jslider-grid[data-number='4'] img:nth-child(2) { -ms-grid-column: 2; -ms-grid-row: 1; grid-column: 2; grid-row: 1; display: block; } .jslider-grid[data-number='4'] img:nth-child(3) { -ms-grid-column: 2; -ms-grid-row: 2; grid-column: 2; grid-row: 2; display: block; } .jslider-grid[data-number='4'] img:nth-child(4) { -ms-grid-column: 2; -ms-grid-row: 3; grid-column: 2; grid-row: 3; display: block; } .jtabs { max-width: 100vw; position: relative; } .jtabs .jtabs-headers-container { display: flex; align-items: center; } .jtabs .jtabs-headers { display: flex; align-items: center; overflow: hidden; position: relative; } .jtabs .jtabs-headers > div:not(.jtabs-border) { padding: 8px; padding-left: 20px; padding-right: 20px; margin-left: 1px; margin-right: 1px; background-color: #f1f1f1; cursor: pointer; white-space: nowrap; text-align: center; } .jtabs .jtabs-headers > div.jtabs-selected { background-color: #e8e8e8; color: #000; } .jtabs .jtabs-headers > div > div { color: #555; width: 100%; overflow: hidden; } .jtabs .jtabs-headers i { display: block; margin: auto; } .jtabs .jtabs-content { box-sizing: border-box; } .jtabs .jtabs-content > div { display: none; box-sizing: border-box; } .jtabs .jtabs-content > div.jtabs-selected { display: block; } .jtabs .jtabs-border { position: absolute; height: 2px; background-color: #888; transform-origin: left; transition: all .2s cubic-bezier(0.4,0,0.2,1); transition-property: color,left,transform; display: none; pointer-events: none; } .jtabs-animation .jtabs-border { display: initial; } .jtabs .jtabs-controls { margin: 3px; margin-left: 10px; display: flex; min-width: 82px; } .jtabs .jtabs-controls > div { cursor: pointer; background-position: center; background-repeat: no-repeat; width: 24px; height: 24px; line-height: 24px; } .jtabs .jtabs-prev { margin-left: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27gray%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z%27/%3E%3C/svg%3E"); } .jtabs .jtabs-prev.disabled { margin-left: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27lightgray%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z%27/%3E%3C/svg%3E"); } .jtabs .jtabs-next { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27gray%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z%27/%3E%3C/svg%3E"); } .jtabs .jtabs-next.disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27lightgray%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z%27/%3E%3C/svg%3E"); } .jtabs .jtabs-add { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2724%27 viewBox=%270 0 24 24%27 width=%2724%27%3E%3Cpath d=%27M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z%27 fill=%27%23bbbbbb%27/%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3C/svg%3E"); } /** Modern skin **/ .jtabs.jtabs-modern .jtabs-headers > div:not(.jtabs-border) { padding: 4px; padding-left: 10px; padding-right: 10px; background-color: #fff; } .jtabs.jtabs-modern .jtabs-headers > .jtabs-selected { color: #000; } .jtabs.jtabs-modern .jtabs-headers > .jtabs-selected .material-icons { color: #000; } .jtabs.jtabs-modern .jtabs-headers { background: #EEEEEF !important; padding: 2px; border-radius: 4px; } .jtabs.jtabs-modern .jtabs-headers .jtabs-border { border-color: #EEEEEF !important; } .jtabs.jtabs-modern .jtabs-border { background-color: rgba(194, 197, 188, 0.884); } .jtags { display: flex; flex-wrap: wrap; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-pack: flex-start; -webkit-justify-content: space-between; justify-content: flex-start; padding: 1px; border: 1px solid #ccc; position: relative; } .jtags.jtags-empty:not(.jtags-focus)::before { position: absolute; margin: 3px; color: #ccc; content: attr(data-placeholder); top: 0; margin-left: 6px; } .jtags > div { padding: 3px 22px 3px 10px; font-size: 0.9em; position: relative; border-radius: 1px; margin: 2px; display: block; outline: none; } .jtags > div:empty:before { content: " "; white-space: pre; } .jtags > div::after { content: 'x'; position: absolute; right: 4px; width: 12px; height: 12px; cursor: pointer; font-size: 0.9em; display: none; } .jtags_label { background-color: #e4e4e4 !important; } .jtags_label::after { display: inline-block !important; } .jtags_error::after { color: #fff !important; } .jtags_error { background-color: #d93025 !important; color: #fff; } .jtoolbar-container { border-radius: 2px; box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); display: inline-flex !important; } .jtoolbar { cursor: pointer; white-space: nowrap; display: flex; padding:4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 13px; } .jtoolbar-disabled { pointer-events: none; opacity: 0.4; } .jtoolbar-mobile { display: flex; position:fixed; bottom: 0; margin: 0; left: 0; width: 100%; background: #f7f7f8; z-index: 1; box-sizing: border-box; box-shadow: 0 -1px 2px rgba(0,0,0,.1); border-radius: 0px; } .jtoolbar > div { display: inline-flex; align-items: center; box-sizing: border-box; vertical-align:middle; justify-content: space-evenly; } .jtoolbar-mobile > div { display: flex; width: 100%; } .jtoolbar .jtoolbar-item { text-align: center; margin: auto; padding: 2px; padding-left:4px; padding-right:4px; } .jtoolbar-mobile .jtoolbar-item { position: relative; flex:1; } .jtoolbar .jtoolbar-divisor { width: 2px; height: 18px; padding: 0px; margin-left: 4px; margin-right: 4px; background-color: #ddd; } .jtoolbar .jtoolbar-label { padding-left: 8px; padding-right: 8px; } .jtoolbar-mobile a { text-decoration:none; display:inline-block; } .jtoolbar-mobile i { display: inline-flex !important; color:#929292; } .jtoolbar-mobile span { font-size:0.7em; display:block; color:#929292; } .jtoolbar-mobile .jtoolbar-selected a, .jtoolbar-mobile .jtoolbar-selected i, .jtoolbar-mobile .jtoolbar-selected span { color:var(--jactive-color) !important; background-color:transparent; } .jtoolbar-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jtoolbar-item i { display: block; color:#333; } .jtoolbar-item:hover { background-color:#f2f2f2; } .jtoolbar .jpicker { padding-left: 0; padding-right: 0; } .jtoolbar .jpicker-header { padding: 0 20px 0 8px; background-position: top 50% right 0; display: flex; align-items: center; } .jtoolbar .jpicker-content > div { padding: 6px; } .jtoolbar-active { background-color:#eee; } .jtoolbar .fa { width: 18px; height: 18px; display: block; line-height: 18px; font-size: 14px; } .jtoolbar .material-icons { font-size: 18px; width: 24px; height: 24px; display: block; line-height: 24px; transform: rotate(0.03deg); text-align: center; } .jtoolbar .jtoolbar-arrow { background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27 width=%2718px%27 height=%2718px%27%3E%3Cpath d=%27M0 0h24v24H0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z%27/%3E%3C/svg%3E"); width: 24px; height: 16px; margin-left: 4px; border-left: 1px solid #f2f2f2; } .jtoolbar-floating { position: absolute; display: none; box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); border-radius: 4px; background-color: #fff; padding: 4px; z-index: 50; text-align: left; margin-right: 20px; } .jtoolbar-floating .jtoolbar-divisor { display: none; } .jtoolbar-arrow-selected .jtoolbar-floating { display: flex; flex-wrap: wrap; } /* /css/lib/jetsheet.css */ :root { --jss-border-color:#000; } .jss_spreadsheet { outline: none; } .jss_container { display:inline-block; padding-right:2px; box-sizing: border-box; overscroll-behavior: contain; outline: none; } .fullscreen { position:fixed !important; top:0px; left:0px; width:100%; height:100%; z-index:21; display: flex; flex-direction: column; background-color:#ffffff; } .fullscreen .jtabs-content { flex: 1; overflow: hidden; } .fullscreen .jss_content { overflow:auto; width: 100% !important; height:100%; max-height: 100% !important; } .fullscreen .jss_container { height:100%; } .jss_content { display:inline-block; box-sizing: border-box; padding-right:3px; padding-bottom:3px; position:relative; scrollbar-width: thin; scrollbar-color: #666 transparent; } @supports (-moz-appearance:none) { .jss_content { padding-right:10px; } } .jss_content::-webkit-scrollbar { width: 8px; height: 8px; } .jss_content::-webkit-scrollbar-track { background: #eee; } .jss_content::-webkit-scrollbar-thumb { background: #666; } .jss_worksheet { border-collapse: separate; table-layout: fixed; white-space: nowrap; empty-cells: show; border: 0px; background-color: #fff; width: 0; border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .jss_worksheet > thead > tr > td { border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid transparent; border-bottom: 1px solid transparent; background-color: #f3f3f3; padding: 2px; cursor: pointer; box-sizing: border-box; overflow: hidden; position: -webkit-sticky; position: sticky; top: 0; z-index:2; } .jss_worksheet > thead > tr > td.dragging { opacity:0.5; } .jss_worksheet > thead > tr > td.selected { background-color:#dcdcdc; } .jss_worksheet > thead > tr > td.arrow-up { background-repeat:no-repeat; background-position:center right 5px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 14l5-5 5 5H7z' fill='gray'/%3E%3C/svg%3E"); text-decoration:underline; } .jss_worksheet > thead > tr > td.arrow-down { background-repeat:no-repeat; background-position:center right 5px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E"); text-decoration:underline; } .jss_worksheet > tbody > tr > td:first-child { position:relative; background-color:#f3f3f3; text-align:center; } .jss_worksheet > tbody.resizable > tr > td:first-child::before { content:'\00a0'; width:100%; height:3px; position:absolute; bottom:0px; left:0px; cursor:row-resize; } .jss_worksheet > tbody.draggable > tr > td:first-child::after { content:'\00a0'; width:3px; height:100%; position:absolute; top:0px; right:0px; cursor:move; } .jss_worksheet > tbody > tr.dragging > td { background-color:#eee; opacity:0.5; } .jss_worksheet > tbody > tr > td { border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid transparent; border-bottom:1px solid transparent; padding:4px; white-space: nowrap; box-sizing: border-box; line-height:1em; position: relative; /* Enable positioning for conditional formatting bars */ } /* Conditional Formatting - Layer */ .jss-cf-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Conditional Formatting - Data Bars */ .jss-cf-databar { position: absolute; top: 0; left: 0; height: 100%; z-index: 0; pointer-events: none; border-radius: 2px; } /* Conditional Formatting - Color Scale */ .jss-cf-colorscale { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.35; } /* Conditional Formatting - Icon Set */ .jss-cf-icon { position: absolute; top: 2px; right: 2px; font-size: 12px; line-height: 1; } /* Conditional Formatting - Sparkline */ .jss-cf-sparkline { position: absolute; bottom: 2px; left: 2px; width: calc(100% - 4px); height: 16px; } /* Conditional Formatting - Chart Container */ .jss-cf-chart { position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; min-width: 100px; min-height: 60px; z-index: 1; } /* Fallback when ECharts not available */ .jss-cf-chart-unavailable { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 11px; color: #999; background: #f9f9f9; border: 1px dashed #ddd; border-radius: 2px; } .jss_overflow > tbody > tr > td { overflow: hidden; } .jss_worksheet > tbody > tr > td:last-child { overflow: hidden; } .jss_worksheet > tbody > tr > td > img { display:inline-block; max-width:100px; } .jss_worksheet > tbody > tr > td.readonly { color:rgba(0,0,0,0.3) } .jss_worksheet > tbody > tr.selected > td:first-child { background-color:#dcdcdc; } .jss_worksheet > tbody > tr > td > select, .jss_worksheet > tbody > tr > td > input, .jss_worksheet > tbody > tr > td > textarea { border:0px; border-radius:0px; outline:0px; width:100%; margin:0px; padding:0px; padding-right:2px; background-color:transparent; box-sizing: border-box; } .jss_worksheet > tbody > tr > td > textarea { resize: none; padding-top:6px !important; } .jss_worksheet > tbody > tr > td > input[type=checkbox] { width:12px; margin-top:2px; } .jss_worksheet > tbody > tr > td > input[type=radio] { width:12px; margin-top:2px; } .jss_worksheet > tbody > tr > td > select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-repeat: no-repeat; background-position-x: 100%; background-position-y: 40%; background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+); } .jss_worksheet > tbody > tr > td.jss_dropdown { background-repeat: no-repeat; background-position:top 50% right 5px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E"); text-overflow: ellipsis; overflow-x:hidden; } .jss_worksheet > tbody > tr > td.jss_dropdown.jss_comments { background:url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E") top 50% right 5px no-repeat, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=') top right no-repeat; } .jss_worksheet > tbody > tr > td > .color { width:90%; height:10px; margin:auto; } .jss_worksheet > tbody > tr > td > a { text-decoration: underline; } .jss_worksheet > tbody > tr > td.highlight > a { color: blue; cursor: pointer; } .jss_worksheet > tfoot > tr > td { border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid transparent; border-bottom: 1px solid transparent; background-color: #f3f3f3; padding: 2px; cursor: pointer; box-sizing: border-box; overflow: hidden; } .jss_worksheet .highlight { background-color:rgba(0,0,0,0.05); } .jss_worksheet .highlight-top { border-top:1px solid #000; box-shadow: 0px -1px #ccc; } .jss_worksheet .highlight-left { border-left:1px solid #000; box-shadow: -1px 0px #ccc; } .jss_worksheet .highlight-right { border-right:1px solid #000; } .jss_worksheet .highlight-bottom { border-bottom:1px solid #000; } .jss_worksheet .highlight-top.highlight-left { box-shadow: -1px -1px #ccc; -webkit-box-shadow: -1px -1px #ccc; -moz-box-shadow: -1px -1px #ccc; } .jss_worksheet .highlight-selected { background-color:rgba(0,0,0,0.0); } .jss_worksheet .selection { background-color:rgba(0,0,0,0.05); } .jss_worksheet .selection-left { border-left:1px dotted #000; } .jss_worksheet .selection-right { border-right:1px dotted #000; } .jss_worksheet .selection-top { border-top:1px dotted #000; } .jss_worksheet .selection-bottom { border-bottom:1px dotted #000; } /* Formula range selection - distinct styling during formula editing */ .jss_worksheet .formula-range-selection { background-color: rgba(66, 133, 244, 0.15); } .jss_worksheet .formula-range-selection-left { border-left: 2px solid #4285f4; } .jss_worksheet .formula-range-selection-right { border-right: 2px solid #4285f4; } .jss_worksheet .formula-range-selection-top { border-top: 2px solid #4285f4; } .jss_worksheet .formula-range-selection-bottom { border-bottom: 2px solid #4285f4; } .jss_corner { position:absolute; background-color: rgb(0, 0, 0); height: 1px; width: 1px; border: 1px solid rgb(255, 255, 255); top:-2000px; left:-2000px; cursor:crosshair; box-sizing: initial; z-index:20; padding: 2px; } .jss_worksheet .editor { outline:0px solid transparent; overflow:visible; white-space: nowrap; text-align:left; padding:0px; box-sizing: border-box; overflow:visible !important; } .jss_worksheet .editor > input { padding-left:4px; } .jss_worksheet .editor .jupload { position:fixed; top:100%; z-index:40; user-select:none; -webkit-font-smoothing: antialiased; font-size: .875rem; letter-spacing: .2px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); padding:10px; background-color:#fff; width:300px; min-height:225px; margin-top:2px; } .jss_worksheet .editor .jupload img { width:100%; height:auto; } .jss_worksheet .editor .jss_richtext { position:fixed; top:100%; z-index:40; user-select:none; -webkit-font-smoothing: antialiased; font-size: .875rem; letter-spacing: .2px; -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); padding:10px; background-color:#fff; width:358px; margin-top:2px; text-align:left; white-space: initial; } .jss_worksheet .editor .jclose:after { position:absolute; top:0; right:0; margin:10px; content:'close'; font-family:'Material icons'; font-size:24px; width:24px; height:24px; line-height:24px; cursor:pointer; text-shadow: 0px 0px 5px #fff; } .jss_worksheet, .jss_worksheet td, .jss_corner { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } .jss_textarea { position:absolute; top:-999px; left:-999px; width:1px; height:1px; } .jss_worksheet .dragline { position:absolute; } .jss_worksheet .dragline div { position:relative; top:-6px; height:5px; width:22px; } .jss_worksheet .dragline div:hover { cursor:move; } .jss_worksheet .onDrag { background-color:rgba(0,0,0,0.6); } .jss_worksheet .error { border:1px solid red; } .jss_worksheet thead td.resizing { border-right-style:dotted !important; border-right-color:red !important; } .jss_worksheet tbody tr.resizing > td { border-bottom-style:dotted !important; border-bottom-color:red !important; } .jss_worksheet tbody td.resizing { border-right-style:dotted !important; border-right-color:red !important; } .jss_worksheet .jdropdown-header { border:0px !important; outline:none !important; width:100% !important; height:100% !important; padding:0px !important; padding-left:8px !important; } .jss_worksheet .jdropdown-container { margin-top:1px; } .jss_worksheet .jdropdown-container-header { padding: 0px; margin: 0px; height: inherit; } .jss_worksheet .jdropdown-picker { border:0px !important; padding:0px !important; width:inherit; height:inherit; } .jss_worksheet .jss_comments { background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII='); background-repeat: no-repeat; background-position: top right; } .jss_worksheet .sp-replacer { margin: 2px; border:0px; } .jss_worksheet > thead > tr.jss_filter > td > input { border:0px; width:100%; outline:none; } .jss_about { float: right; font-size: 0.7em; padding: 2px; text-transform: uppercase; letter-spacing: 1px; display: none; } .jss_about a { color: #ccc; text-decoration: none; } .jss_about img { display: none; } .jss_filter { display:flex; justify-content:space-between; margin-bottom:4px; } .jss_filter > div { padding:8px; align-items:center; } .jss_pagination { display:flex; justify-content:space-between; align-items:center; } .jss_pagination > div { display:flex; padding:10px; } .jss_pagination > div:last-child { padding-right:10px; padding-top:10px; } .jss_pagination > div > div { text-align:center; width:36px; height:36px; line-height:34px; border:1px solid #ccc; box-sizing: border-box; margin-left:2px; cursor:pointer; } .jss_page { font-size:0.8em; } .jss_page_selected { font-weight:bold; background-color:#f3f3f3; } .jss_toolbar { display:flex; background-color:#f3f3f3; border:1px solid #ccc; padding:4px; margin:0px 2px 4px 1px; } .jss_toolbar:empty { display:none; } .jss_worksheet .dragging-left { background-repeat: no-repeat; background-position:top 50% left 0px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 7l-5 5 5 5V7z'/%3E%3Cpath fill='none' d='M24 0v24H0V0h24z'/%3E%3C/svg%3E"); } .jss_worksheet .dragging-right { background-repeat: no-repeat; background-position:top 50% right 0px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath fill='none' d='M0 24V0h24v24H0z'/%3E%3C/svg%3E"); } .jss_hidden_index > tbody > tr > td:first-child, .jss_hidden_index > thead > tr > td:first-child, .jss_hidden_index > tfoot > tr > td:first-child, .jss_hidden_index > colgroup > col:first-child { display:none; } .jss_worksheet .jrating { display: inline-flex; } .jss_worksheet .jrating > div { zoom: 0.55; } .jss_worksheet .copying-top { border-top:1px dashed #000; } .jss_worksheet .copying-left { border-left:1px dashed #000; } .jss_worksheet .copying-right { border-right:1px dashed #000; } .jss_worksheet .copying-bottom { border-bottom:1px dashed #000; } .jss_worksheet .jss_column_filter { background-repeat: no-repeat; background-position: top 50% right 5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray' width='18px' height='18px'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); text-overflow: ellipsis; overflow: hidden; padding: 0px; padding-left: 6px; padding-right: 20px; } .jss_worksheet thead .jss_freezed, .jss_worksheet tfoot .jss_freezed { left: 0px; z-index: 3 !important; box-shadow: 2px 0px 2px 0.2px #ccc !important; -webkit-box-shadow: 2px 0px 2px 0.2px #ccc !important; -moz-box-shadow: 2px 0px 2px 0.2px #ccc !important; } .jss_worksheet tbody .jss_freezed { position: relative; background-color: #fff; box-shadow: 1px 1px 1px 1px #ccc !important; -webkit-box-shadow: 2px 4px 4px 0.1px #ccc !important; -moz-box-shadow: 2px 4px 4px 0.1px #ccc !important; } .red { color: red; } .jss_worksheet > tbody > tr > td.readonly > input[type=checkbox], .jss_worksheet > tbody > tr > td.readonly > input[type=radio] { pointer-events: none; opacity: 0.5; } /* ============================================================ FIND & REPLACE DIALOG ============================================================ */ .jss-find-replace-dialog { position: absolute; top: 50px; right: 20px; width: 360px; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; } .jss-fr-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #f5f5f5; border-bottom: 1px solid #e0e0e0; border-radius: 4px 4px 0 0; } .jss-fr-title { font-weight: 600; color: #333; } .jss-fr-close { background: none; border: none; font-size: 18px; cursor: pointer; color: #666; padding: 0 4px; line-height: 1; } .jss-fr-close:hover { color: #333; } .jss-fr-body { padding: 12px; } .jss-fr-row { margin-bottom: 10px; } .jss-fr-row:last-child { margin-bottom: 0; } .jss-fr-row label { display: block; margin-bottom: 4px; color: #555; font-size: 12px; } .jss-fr-row input[type="text"], .jss-fr-row select { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; font-size: 13px; } .jss-fr-row input[type="text"]:focus, .jss-fr-row select:focus { outline: none; border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2); } .jss-fr-options { display: flex; gap: 16px; } .jss-fr-options label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 0; cursor: pointer; } .jss-fr-status { padding: 8px; background: #f9f9f9; border-radius: 3px; color: #666; min-height: 20px; text-align: center; font-size: 12px; } .jss-fr-footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-top: 1px solid #e0e0e0; background: #fafafa; border-radius: 0 0 4px 4px; } .jss-fr-btn { flex: 1 1 45%; padding: 8px 12px; border: 1px solid #ccc; background: #fff; border-radius: 3px; cursor: pointer; font-size: 12px; transition: background-color 0.15s; } .jss-fr-btn:hover { background: #f0f0f0; } .jss-fr-btn:active { background: #e5e5e5; } .jss-fr-btn:focus { outline: none; border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2); } /* ============================================================ FIND HIGHLIGHTING ============================================================ */ .jss-find-highlight { background-color: #ffeb3b !important; } .jss-find-current { background-color: #ff9800 !important; outline: 2px solid #e65100; } /* ============================================================ DYNAMIC ARRAY SPILL ============================================================ */ .jss-spill { background-color: rgba(77, 144, 254, 0.08); } .jss-spill-anchor { outline: 2px solid rgba(77, 144, 254, 0.6); outline-offset: -2px; } /* /css/lib/jetsheet-themes.css */ .jss_worksheet > thead > tr > td { border-top: 1px solid var(--border_color, #ccc); border-left: 1px solid var(--border_color, #ccc); background-color: var(--header_background, #f3f3f3); color: var(--header_color, #000); } .jss_worksheet > thead > tr > td.selected { background-color: var(--header_background_highlighted, #dcdcdc); color: var(--header_color_highlighted, #000); } .jss_worksheet > tbody > tr > td:first-child { background-color: var(--header_background, #f3f3f3); color: var(--header_color, #000); } .jss_worksheet > tbody > tr > td { background-color: var(--content_background, #fff); color: var(--content_color, #000); border-top: 1px solid var(--border_color, #ccc); border-left: 1px solid var(--border_color, #ccc); } .jss_worksheet > tbody > tr.selected > td:first-child { background-color: var(--header_background_highlighted, #dcdcdc); color: var(--header_color_highlighted, #000); } .jss_worksheet .highlight { background-color: var(--selection, rgba(0,0,0,0.05)); } .jss_worksheet .highlight-top { border-top:1px solid var(--border_color_highlighted, #000); } .jss_worksheet .highlight-left { border-left:1px solid var(--border_color_highlighted, #000); } .jss_worksheet .highlight-right { border-right:1px solid var(--border_color_highlighted, #000); } .jss_worksheet .highlight-bottom { border-bottom:1px solid var(--border_color_highlighted, #000); } .jss_worksheet .highlight-selected { background-color: var(--cursor, #eee); } .jss_pagination > div > div { color: var(--header_color, #000); background: var(--header_background, #f3f3f3); border: 1px solid var(--border_color, #ccc); } .jss_toolbar { background-color: var(--header_background, #f3f3f3); color: var(--header_color, #000); border: 1px solid var(--border_color, #ccc); } .jss_toolbar .jtoolbar-item i { color: var(--content_color, #000); } .jss_toolbar .jtoolbar-item:not(.jtoolbar-divisor):hover, .jss_toolbar .jtoolbar-item.jpicker:hover > .jpicker-header { background-color: var(--content_background_highlighted, #f3f3f3); color: var(--content_color_highlighted, #000); } .jss_toolbar .jtoolbar-divisor { background: var(--header_color, #ddd); } .jss_contextmenu { border: 1px solid var(--border_color, #ccc); background: var(--menu_background, #fff); color: var(--menu_color, #555); box-shadow: var(--menu_box_shadow, 2px 2px 2px 0px rgba(143, 144, 145, 1)); -webkit-box-shadow: var(--menu_box_shadow, 2px 2px 2px 0px rgba(143, 144, 145, 1)); -moz-box-shadow: var(--menu_box_shadow, 2px 2px 2px 0px rgba(143, 144, 145, 1)) } .jss_contextmenu>div a { color: var(--menu_color, #555); } .jss_contextmenu>div:not(.contextmenu-line):hover a { color: var(--menu_color_highlighted, #555); } .jss_contextmenu>div:not(.contextmenu-line):hover { background: var(--menu_background_highlighted, #ebebeb); } .jss_container input { color: var(--header_color, #000); background: var(--header_background, #f3f3f3); } /* /css/lib/hljs.min.css */ pre code.hljs { display: block; overflow-x: auto; padding: 0 var(--space-4); background: var(--secondary-2); color: var(--secondary-12) } code.hljs { padding: var(--space-1) var(--space-2); background: var(--primary-3); color: var(--primary-11); border-radius: var(--radius-2); font-size: 0.9em } .hljs { color: var(--secondary-12) } .hljs-doctag, .hljs-keyword, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-strong, .hljs-title { font-weight: 700 } .hljs-comment { color: var(--secondary-10) } .hljs-built_in, .hljs-literal, .hljs-name, .hljs-quote, .hljs-section, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-tag, .hljs-title, .hljs-type { color: var(--primary-10) } .hljs-addition { color: var(--success-10) } .hljs-attribute, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-regexp, .hljs-subst, .hljs-symbol, .hljs-template-variable, .hljs-variable { color: var(--primary-11) } .hljs-deletion { color: var(--failure-10) } .hljs-emphasis { font-style: italic } /* /css/components/artifact-index.css */ /* * Shared library composition for mature artifact indexes. * * The component tags intentionally scope this layer so the established button, * form, and file-item vocabulary can keep serving dialogs and compact sidebars. * Slides keeps its card styles inline but follows the same compact, * metadata-first surface family rather than duplicating the title in a preview. */ .main-panel :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index, slides-index ) { box-sizing: border-box; color: var(--secondary-12); } .main-panel :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) { display: grid; grid-template-areas: "header header" "tabs search" "content content"; grid-template-columns: minmax(0, 1fr) minmax(0, var(--container-narrow-3)); align-content: start; column-gap: var(--space-4); width: min(var(--container-5), 100%); max-width: var(--container-5); height: auto; min-height: 100%; margin: 0 auto; padding: var(--space-6) clamp(var(--space-4-half), 4vw, var(--space-8)) var(--space-9); overflow: visible; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .settings-header { grid-area: header; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-comfortable); padding: 0; margin: 0 0 var(--space-5); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .settings-header > h1 { grid-column: 1; margin: 0; font-size: clamp(var(--font-size-8), 4vw, var(--font-size-10)); line-height: 1.1; letter-spacing: -0.035em; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .settings-header > p { grid-column: 1; max-width: var(--measure); margin: var(--space-2) 0 0; /* Step 11, not 10: this is body copy at 14px and step 10 lands at 3.7:1 against the page, under the 4.5:1 floor for text this size. */ color: var(--secondary-11); font-size: var(--font-size-2-half); line-height: 1.5; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .settings-header > .button-container { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2) !important; margin: 0; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .settings-header .btn { min-height: var(--space-7); padding: 0 var(--space-4); border-radius: var(--radius-5); box-shadow: none; font-size: var(--font-size-2-half); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > hr { display: none; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .tabs { grid-area: tabs; display: flex; align-items: center; align-self: start; width: max-content; max-width: 100%; min-width: 0; gap: var(--space-1); padding: var(--space-half) !important; margin: 0 0 var(--space-comfortable); overflow-x: auto; border: calc(var(--space-half) / 2) solid var(--secondary-5); border-radius: var(--radius-5); background: var(--secondary-2); scrollbar-width: none; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .tabs::-webkit-scrollbar { display: none; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .tabs > .tab { flex: 0 0 auto; min-height: var(--space-6); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-3); color: var(--secondary-11); background: transparent; font-size: var(--font-size-1-half); font-weight: var(--font-weight-regular); line-height: 1; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .tabs > .tab:hover { color: var(--secondary-12); background: var(--secondary-3); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .tabs > .tab--active { color: var(--secondary-12); background: var(--secondary-1); box-shadow: var(--shadow-2); font-weight: var(--font-weight-medium); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .tabs > .tab--active::after { display: none; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > section:has(.search__input) { grid-area: search; align-self: start; justify-self: end; width: min(var(--container-narrow-3), 100%); padding: 0 !important; margin: 0 0 var(--space-comfortable); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > section:has(.search__input) .form-field { width: 100%; margin: 0; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > section:has(.search__input) .input-with-icon { width: 100%; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > section:has(.search__input) .input-with-icon > .icon { top: 50%; left: var(--space-3); width: var(--space-comfortable); height: var(--space-comfortable); transform: translateY(-50%); fill: var(--secondary-9); pointer-events: none; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > section:has(.search__input) .search__input { width: 100%; max-width: none; min-height: var(--space-7); padding: 0 var(--space-3) 0 var(--space-7); margin: 0; border: calc(var(--space-half) / 2) solid var(--secondary-6); border-radius: var(--radius-5); color: var(--secondary-12); background: var(--secondary-1); box-shadow: none; font-size: var(--font-size-2-half); line-height: 1.2; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > section:has(.search__input) .search__input:focus-visible { border-color: var(--primary-8); outline: calc(var(--space-half) / 2) solid var(--primary-6); outline-offset: var(--space-half); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .files__container { grid-area: content; width: 100%; height: auto !important; min-height: 0; max-height: none; padding: 0 !important; overflow: visible; } files-index > .files__container--drag { max-height: min(60vh, var(--container-4)); overflow-y: auto; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .files__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--space-4-half); width: 100%; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item { display: flex; flex-direction: column; min-width: 0; height: 100%; padding: var(--space-3-half); overflow: hidden; border: calc(var(--space-half) / 2) solid var(--secondary-5); border-radius: var(--radius-6); color: var(--secondary-12); background: var(--secondary-1); box-shadow: var(--shadow-1); transition: transform 0.14s var(--ease-out-cubic), box-shadow 0.14s var(--ease-out-cubic), border-color 0.14s var(--ease-out-cubic); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item:not(.file-item--skeleton):hover { transform: translateY(calc(var(--space-half) * -1)); border-color: var(--secondary-7); box-shadow: var(--shadow-2); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item__title { margin: 0 0 var(--space-2); color: var(--secondary-12); font-size: var(--font-size-2-half); font-weight: var(--font-weight-medium); line-height: 1.3; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item__date { margin: 0 0 var(--space-2); /* 11px at step 9 measured 3.2:1 on the card surface. Step 11 at 12px reads cleanly in both themes. */ color: var(--secondary-11); font-size: var(--font-size-1-half); line-height: 1.4; font-variant-numeric: tabular-nums; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item__meta { gap: var(--space-1); color: var(--secondary-11); font-size: var(--font-size-1-half); line-height: 1.45; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item > div:has(> :is(.file-item__edit, .file-item__view, .file-item__rename, .file-item__pin, .file-item__share, .file-item__delete)), :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item > div:has( > div > :is( .file-item__edit, .file-item__view, .file-item__rename, .file-item__pin, .file-item__share, .file-item__delete ) ) { align-items: center !important; justify-content: space-between !important; flex-wrap: wrap; gap: var(--space-1-half) !important; margin-top: auto !important; padding-top: var(--space-2); border-top: calc(var(--space-half) / 2) solid var(--secondary-4); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item > div:has( > div > :is( .file-item__edit, .file-item__view, .file-item__rename, .file-item__pin, .file-item__share, .file-item__delete ) ) > div { display: flex !important; flex-wrap: wrap; gap: var(--space-1-half) !important; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) :is( .file-item__edit, .file-item__view, .file-item__rename, .file-item__pin, .file-item__share, .file-item__delete ) { display: inline-flex; align-items: center; justify-content: center; width: var(--space-7); height: var(--space-7); padding: 0; border: calc(var(--space-half) / 2) solid transparent; border-radius: var(--radius-4); color: var(--secondary-10); background: transparent; opacity: 1; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) :is( .file-item__edit, .file-item__view, .file-item__rename, .file-item__pin, .file-item__share ):hover:not(:disabled) { border-color: var(--secondary-5); color: var(--secondary-12); background: var(--secondary-2); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item__delete:hover:not(:disabled) { border-color: transparent; color: var(--failure-11); background: var(--failure-3); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) :is( .file-item__edit, .file-item__view, .file-item__rename, .file-item__pin, .file-item__share, .file-item__delete ) svg { width: var(--space-comfortable); height: var(--space-comfortable); flex-shrink: 0; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .pagination { grid-column: 1 / -1; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .pagination { display: flex !important; align-items: center; justify-content: center !important; flex-wrap: wrap; gap: var(--space-2) !important; width: 100%; margin: var(--space-5) 0 0; padding: 0 !important; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .pagination > button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--space-7); padding: 0 var(--space-3); margin: 0; border: calc(var(--space-half) / 2) solid var(--secondary-6); border-radius: var(--radius-4); color: var(--secondary-11); background: var(--secondary-1); box-shadow: none; font-size: var(--font-size-2); font-weight: var(--font-weight-regular); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .pagination > button:first-of-type { order: 1; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .pagination > button:last-of-type { order: 3; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .pagination > button:hover:not(:disabled) { border-color: var(--primary-8); color: var(--primary-11); background: var(--primary-3); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .pagination > button:disabled { /* Was step 8 at 0.64 opacity, which measured 1.8:1 — the label was invisible. The muted background and not-allowed cursor carry the disabled state; the text still has to be readable. */ color: var(--secondary-11); background: var(--secondary-2); cursor: not-allowed; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .pagination > .pagination-current { order: 2; display: inline-flex; align-items: center; justify-content: center; min-height: var(--space-7); padding: 0 var(--space-3); margin: 0 !important; border: calc(var(--space-half) / 2) solid transparent; border-radius: var(--radius-4); color: var(--secondary-11) !important; font-size: var(--font-size-2) !important; font-weight: var(--font-weight-regular); line-height: 1; } @media (min-width: 48.001rem) and (max-width: 64rem) { :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .files__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 48rem) { .main-panel :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) { grid-template-areas: "header" "tabs" "search" "content"; grid-template-columns: minmax(0, 1fr); width: 100%; min-height: 100%; padding: var(--space-comfortable) var(--space-3) var(--space-8); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .settings-header { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); padding: 0; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .settings-header > .button-container { grid-column: 1; grid-row: auto; justify-content: flex-start; width: 100%; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .settings-header > .button-container > .btn { flex: 1 1 auto; } workspaces-index > .settings-header > .workspace-index__create-row { align-items: stretch; } workspaces-index > .settings-header > .workspace-index__create-row > .workspace-index__name-input { flex: 1 1 100%; width: 100%; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .tabs { width: 100%; margin-bottom: var(--space-3); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > .tabs > .tab { flex: 1 0 auto; justify-content: center; text-align: center; } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > section:has(.search__input) { justify-self: stretch; width: 100%; margin-bottom: var(--space-4); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) > section:has(.search__input) .search__input { min-height: var( --mobile-touch-target-min-size, calc(var(--space-6) + var(--space-3)) ); padding-top: 0; padding-bottom: 0; font-size: var(--font-size-3); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .files__grid { grid-template-columns: 1fr; gap: var(--space-3); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) :is( .file-item__edit, .file-item__view, .file-item__rename, .file-item__pin, .file-item__share, .file-item__delete, .pagination > button ) { min-width: var( --mobile-touch-target-min-size, calc(var(--space-6) + var(--space-3)) ); min-height: var( --mobile-touch-target-min-size, calc(var(--space-6) + var(--space-3)) ); } :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .pagination { margin-top: var(--space-4); } } @media (prefers-reduced-motion: reduce) { :is( chats-index, documents-index, spreadsheets-index, apps-index, workspaces-index, flows-index, custom-prompts-index, files-index ) .file-item { transition: none; } } /* /css/overrides/index.css */ /* ============================================================================= CSS Overrides (loaded last) Contract: - This file is imported last from public/css/index.css.erb. - It is the only place where "override"-style CSS should live. - Prefer fixing the source rule first; use overrides only when necessary. ============================================================================= */ /* --- Layout/scroll overrides (moved from public/css/globals/overrides.css) --- */ /* ============================================================================= GLOBAL LAYOUT OVERRIDES Centralized location for high-specificity body/html state rules. These rules determine the scrolling behavior (App Mode vs Document Mode) and override standard layout constraints based on content presence. IMPORTANT: This file MUST load last in index.css.erb to guarantee these overrides win the cascade. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Route/Element-based Overrides (Restores native body scroll) Moved from: elements.css Purpose: Switch from "container scroll" to "body scroll" for specific views DESKTOP ONLY: On mobile, we keep container scrolling (.content--wrapper scrolls) to preserve the app-like UX with fixed header/nav. ----------------------------------------------------------------------------- */ @media (min-width: 769px) { /* Step 0: Allow HTML to scroll */ html:has(flow-form), html:has(chats-index), html:has(documents-index), html:has(apps-index), html:has(spreadsheets-index), html:has(workspaces-index), html:has(workspace-shell), html:has(custom-prompts-index), html:has(flows-index) { overflow-y: auto; overflow-x: hidden; height: auto; min-height: 100svh; } /* Step 1: Make Body scrollable and static context */ body:has(flow-form), body:has(chats-index), body:has(documents-index), body:has(apps-index), body:has(spreadsheets-index), body:has(workspaces-index), body:has(workspace-shell), body:has(custom-prompts-index), body:has(flows-index) { overflow-y: auto; overflow-x: hidden; height: auto; min-height: 100svh; position: static; } /* Step 2: Unwrap intermediate containers to allow content to grow */ body:has(flow-form) .container, body:has(flow-form) .main-content, body:has(flow-form) .panels-row, body:has(flow-form) .main-panel, body:has(flow-form) .content--wrapper:not(.content--wrapper--hidden), body:has(chats-index) .container, body:has(chats-index) .main-content, body:has(chats-index) .panels-row, body:has(chats-index) .main-panel, body:has(chats-index) .content--wrapper:not(.content--wrapper--hidden), body:has(documents-index) .container, body:has(documents-index) .main-content, body:has(documents-index) .panels-row, body:has(documents-index) .main-panel, body:has(documents-index) .content--wrapper:not(.content--wrapper--hidden), body:has(apps-index) .container, body:has(apps-index) .main-content, body:has(apps-index) .panels-row, body:has(apps-index) .main-panel, body:has(apps-index) .content--wrapper:not(.content--wrapper--hidden), body:has(spreadsheets-index) .container, body:has(spreadsheets-index) .main-content, body:has(spreadsheets-index) .panels-row, body:has(spreadsheets-index) .main-panel, body:has(spreadsheets-index) .content--wrapper:not(.content--wrapper--hidden), body:has(workspaces-index) .container, body:has(workspaces-index) .main-content, body:has(workspaces-index) .panels-row, body:has(workspaces-index) .main-panel, body:has(workspaces-index) .content--wrapper:not(.content--wrapper--hidden), body:has(workspace-shell) .container, body:has(workspace-shell) .main-content, body:has(workspace-shell) .panels-row, body:has(workspace-shell) .main-panel, body:has(workspace-shell) .content--wrapper:not(.content--wrapper--hidden), body:has(custom-prompts-index) .container, body:has(custom-prompts-index) .main-content, body:has(custom-prompts-index) .panels-row, body:has(custom-prompts-index) .main-panel, body:has(custom-prompts-index) .content--wrapper:not(.content--wrapper--hidden), body:has(flows-index) .container, body:has(flows-index) .main-content, body:has(flows-index) .panels-row, body:has(flows-index) .main-panel, body:has(flows-index) .content--wrapper:not(.content--wrapper--hidden) { overflow: visible; height: auto; min-height: 100svh; max-height: none; position: static; } /* Step 3: Remove internal scrolling constraints from components */ body:has(flow-form) .main-panel flow-form, body:has(flow-form) flow-form, body:has(chats-index) .main-panel chats-index, body:has(chats-index) chats-index, body:has(documents-index) .main-panel documents-index, body:has(documents-index) documents-index, body:has(apps-index) .main-panel apps-index, body:has(apps-index) apps-index, body:has(spreadsheets-index) .main-panel spreadsheets-index, body:has(spreadsheets-index) spreadsheets-index, body:has(workspaces-index) .main-panel workspaces-index, body:has(workspaces-index) workspaces-index, body:has(workspace-shell) .main-panel workspace-shell, body:has(workspace-shell) workspace-shell, body:has(custom-prompts-index) .main-panel custom-prompts-index, body:has(custom-prompts-index) custom-prompts-index, body:has(flows-index) .main-panel flows-index, body:has(flows-index) flows-index { max-height: none; overflow: visible; height: auto; } } /* ----------------------------------------------------------------------------- 2. Editor Overrides Moved from: layout.css Purpose: Lock body scrolling when ProseMirror editor is active (except flow-form) ----------------------------------------------------------------------------- */ /* Disable body scrolling for document editing routes - let ProseMirror handle scroll */ /* Exclude flow-form which uses minimal-markdown-editor but needs body-level scrolling */ body:has(.content--wrapper:not(.content--wrapper--hidden) .ProseMirror):not(:has(flow-form)) { overflow-y: hidden; } /* ----------------------------------------------------------------------------- 3. Chat View Overrides Moved from: chat.css Purpose: Enable body-level scrolling for chat conversation views on desktop ----------------------------------------------------------------------------- */ @media (min-width: 769px) { /* When in chat view, make the body scrollable */ body:has(chat-conversation) { overflow-y: auto; overflow-x: hidden; } /* Remove overflow from intermediate containers */ body:has(chat-conversation) .container, body:has(chat-conversation) .main-content, body:has(chat-conversation) .panels-row, body:has(chat-conversation) .main-panel, body:has(chat-conversation) .chat-container { overflow: visible; height: auto; min-height: 100vh; } /* Chat messages container - no longer scrollable */ body:has(chat-conversation) .chat-messages { position: relative; overflow-y: visible !important; overflow-x: hidden; /* Remove height constraints */ max-height: none; height: auto; /* Keep content width constrained */ width: 100%; max-width: min(var(--thread-max-width), calc(100vw - var(--nav-rail-width, 144px) - var(--right-sidebar-width, 0px))); margin: 0 auto; /* Reset positioning */ left: auto; margin-top: var(--space-2); /* Remove horizontal padding */ padding-inline: 0; /* Always reserve space for fixed input when messages exist */ padding-bottom: var(--chat-input-offset, 120px); box-sizing: border-box; } /* Ensure chat conversation doesn't create its own scroll */ .main-panel chat-conversation { max-height: none; min-height: calc(100svh - var(--space-4)); overflow: visible; } } /* --- Legacy inline CSS extracted from public/css/index.css.erb --- */ .payment__container { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--container-3); flex-direction: column; gap: var(--space-2); } .link--secondary { color: var(--secondary-11); text-decoration: none; &:hover { color: var(--secondary-11); } &:active { color: var(--secondary-12); } &:visited { color: var(--secondary-9); } } .link--tertiary { color: var(--secondary-6); text-decoration: none; &:hover { color: var(--secondary-7); } &:active { color: var(--secondary-8); } &:visited { color: var(--secondary-5); } } @media (min-width: 769px) { [data-command="ai"] { display: none; } [data-command="chat"] { display: none; } } .ai-editor-button { background-color: var(--secondary-1); border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); fill: var(--secondary-1); color: var(--secondary-6); stroke: var(--secondary-6); transition: transform 0.2s; &:hover { background-color: var(--primary-1); transform: scale(1.1); color: var(--primary-9); fill: var(--primary-1); stroke: var(--primary-9); box-shadow: -2px 2px -4px var(--primary-6); } } .ai-editor-button svg { width: calc(24px * var(--scaling)); height: calc(24px * var(--scaling)); } @media (max-width: 768px) { .ai-editor-button { background-color: var(--primary-1); color: var(--primary-9); fill: var(--primary-1); stroke: var(--primary-9); border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); transition: transform 0.2s; &:hover { background-color: var(--primary-1); color: var(--primary-12); fill: var(--primary-3); stroke: var(--primary-12); box-shadow: -2px 2px -4px var(--primary-6); transform: scale(1.1); } } .ai-editor-button svg { width: 28px; height: 28px; fill: var(--primary-1); color: var(--primary-9); stroke: var(--primary-1); } } .sidebar__main-menu { top: 0; width: 90vw; background-color: var(--secondary-2); color: var(--secondary-11); height: 100vh; height: 100svh; left: 80vw; border: 1px solid var(--secondary-4); box-shadow: var(--shadow-2); z-index: var(--z-index-9); font-weight: var(--font-weight-medium); transform: translateX(0); transition: transform 0.2s ease-out; will-change: transform; display: flex; flex-direction: column; :where(.sidebar__logo) { margin-top: var(--space-4); margin-left: var(--space-3); margin-right: var(--space-4); margin-bottom: var(--space-4); border: none; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: center; :where(button) { display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; padding: 0; margin: 0; box-sizing: border-box; border-radius: var(--radius-3); } } :where(.sidebar__dismiss) { min-width: 44px; min-height: 44px; margin-top: var(--space-3); margin-right: var(--space-3); margin-left: auto; border: none; border-radius: var(--radius-3); background-color: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: var(--cursor-link); flex-shrink: 0; } :where(.sidebar__dismiss:hover) { background-color: var(--secondary-3); } :where(.sidebar__dismiss:active) { background-color: var(--secondary-4); } :where(.sidebar__dismiss svg) { width: 20px; height: 20px; flex-shrink: 0; } :where(.sidebar__logo svg) { background-color: var(--primary-10); padding: 0; margin: 0; border: none; cursor: pointer; background-repeat: no-repeat; background-position: center; } :where(.sidebar__button) { display: flex; align-items: center; justify-content: flex-start; background-color: transparent; border: none; color: inherit; text-align: left; width: 100%; cursor: var(--cursor-link); font-weight: var(--font-weight-regular); gap: var(--space-2); transition: background-color 0.3s ease, color 0.3s ease; border-radius: var(--radius-2); padding: calc(var(--space-2) * 0.4) calc(var(--space-8) * 0.45); &:hover { background-color: var(--secondary-3); color: var(--secondary-10); } &:active { background-color: var(--secondary-4); } &.sidebar__button--active { background-color: var(--primary-3); color: var(--primary-11); box-shadow: var(--shadow-2); } } :where(.sidebar__icon) { margin: 0; border: none; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: center; color: inherit; stroke: currentColor; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; height: 18px; width: 18px; :where(.sidebar__icon--logo path) { fill: var(--primary-1); fill-rule: evenodd; } } :where(.sidebar__text) { color: inherit; font-size: var(--font-size-3); font-weight: var(--font-weight-regular); flex: 1; display: inline-flex; align-items: center; line-height: 1.2; } :where(.sidebar__plan-badge) { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; height: 14px; padding: 0 calc(var(--space-1) * 0.75); border-radius: 999px; border: 1px solid var(--secondary-5); background: var(--secondary-3); color: var(--secondary-11); font-size: var(--font-size-0); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-1); line-height: 1; text-transform: uppercase; } :where(.sidebar__state-badge) { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: var(--space-5); padding: 0 var(--space-2); border-radius: 999px; border: 1px solid var(--secondary-5); background: var(--secondary-3); color: var(--secondary-11); font-size: var(--font-size-1); font-weight: var(--font-weight-medium); line-height: 1; } :where(.sidebar__plan-badge--guest) { background: var(--warning-4); border-color: var(--warning-6); color: var(--warning-11); } :where(.sidebar__plan-badge--pro) { background: var(--success-4); border-color: var(--success-6); color: var(--success-11); } :where(.sidebar__plan-badge--team) { background: var(--primary-4); border-color: var(--primary-6); color: var(--primary-11); } :where(.sidebar__bottom-group) { margin-top: auto; } :where(.sidebar__header) { display: flex; align-items: center; padding: var(--space-2) var(--space-3); } :where(.sidebar__logo) { border-radius: var(--radius-3); padding-bottom: 5px; margin-top: var(--space-4); margin-left: var(--space-2); margin-right: var(--space-6); margin-bottom: var(--space-4); } } .sidebar__main-menu--open { transform: translateX(-80vw); } .content__header h1 { font-size: var(--font-size-8); margin-bottom: var(--space-2); color: var(--secondary-12); letter-spacing: var(--letter-spacing-9); } .content__header p { font-size: var(--font-size-4); color: var(--secondary-11); margin-bottom: var(--space-4); } /* Form group: theme-aware inputs and selects. Uses --secondary-* scale so light/dark switch without re-declaring colors. --secondary-1 surface in light gives crisp white; --secondary-3 in dark lifts the field off the page so it reads as an input, not a void. */ .form-group { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); :where(label) { font-size: var(--font-size-3); font-weight: var(--font-weight-medium); color: var(--secondary-12); letter-spacing: var(--letter-spacing-4); } :where(input, select) { padding: var(--space-3); border: 1px solid var(--secondary-6); border-radius: var(--radius-3); box-sizing: border-box; background-color: var(--secondary-1); color: var(--secondary-12); font-size: var(--font-size-3); line-height: var(--line-height-4); -webkit-text-fill-color: var(--secondary-12); box-shadow: var(--shadow-1); transition: border-color 0.16s var(--ease-out-cubic), box-shadow 0.16s var(--ease-out-cubic), background-color 0.16s var(--ease-out-cubic); &::placeholder { color: var(--secondary-9); opacity: 1; } &:where(:hover:not(:focus, :disabled)) { border-color: var(--secondary-8); } &:where(:focus, :focus-visible) { outline: none; border-color: var(--primary-9); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-9) 22%, transparent), var(--shadow-1); } &:where(:disabled) { background-color: var(--secondary-2); color: var(--secondary-9); cursor: not-allowed; opacity: 0.7; } } /* Native |
|---|