:root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace; line-height: 1.5; font-weight: 400; color-scheme: light dark; /* Design tokens. Dark values live on :root; the light block below overrides them so components can stay palette-agnostic. The THEME-CONTROLLED tokens (accent family + the two grounds) are the values a colour theme (Settings > Appearance > Theme, ) swaps out. The defaults on :root ARE the "prototype" theme; every other theme overrides them in src/themes.css for both colour schemes. Everything else here is neutral chrome a theme may optionally tune. */ /* -- theme-controlled: accent ---------------------------------------- */ --accent: #646cff; /* solid accent: buttons, active states, links */ --accent-rgb: 100 108 255; /* same colour as space-separated RGB for alpha tints: rgb(var(--accent-rgb) / 0.1) */ --accent-hover: #535bf2; /* hover state of a solid --accent fill */ --accent-contrast: #ffffff; /* text / icons drawn on a solid --accent fill */ --accent-text: #8b92ff; /* accent used as TEXT on the ground (contrast-tuned per scheme) */ /* -- theme-controlled: grounds --------------------------------------- */ --surface: #1f1f1f; /* main chat / content ground */ --surface-raised: #282828; /* nav sidebar, composer bubble, right-panel cards */ --surface-overlay: #2e2e2e; /* menus, popovers */ /* -- neutral chrome --------------------------------------------------- */ --text: rgba(255, 255, 255, 0.9); --text-secondary: rgba(255, 255, 255, 0.62); --text-muted: rgba(255, 255, 255, 0.42); --hover: rgba(255, 255, 255, 0.06); --pressed: rgba(255, 255, 255, 0.1); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.3); /* -- derived accent tints (follow the accent automatically) ------------ */ --accent-soft: rgb(var(--accent-rgb) / 0.14); --logo-grad-from: color-mix(in srgb, var(--accent), #000 6%); /* QuestLogo diagonal wash: darker top-left stop... */ --logo-grad-to: color-mix(in srgb, var(--accent), #fff 12%); /* ...lifting toward the bottom-right accent wedge */ --accent-tint: rgb(var(--accent-rgb) / 0.3); /* filled-but-light accent: user bubbles, upload button */ --accent-tint-strong: rgb(var(--accent-rgb) / 0.42); /* hover state for --accent-tint fills */ color: var(--text); background-color: var(--surface); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Settings > Appearance override. src/utils/theme.ts sets to "light" or "dark" (absent = auto/follow the OS); the build-time themeOverridePlugin.ts rewrites every prefers-color-scheme media block to honour it, and these rules keep native form controls and scrollbars in step with the forced scheme. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } a { font-weight: 500; color: var(--accent); text-decoration: inherit; } a:hover { color: var(--accent-hover); } body { margin: 0; min-width: 320px; min-height: 100vh; } h1 { font-size: 3.2em; line-height: 1.1; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: var(--accent); } button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } @media (prefers-color-scheme: light) { :root:where(:not([data-theme="dark"])) { --surface: #ffffff; --surface-raised: #ffffff; --surface-overlay: #ffffff; --text: #1c1c1e; --text-secondary: rgba(0, 0, 0, 0.6); --text-muted: rgba(0, 0, 0, 0.42); --hover: rgba(0, 0, 0, 0.04); --pressed: rgba(0, 0, 0, 0.07); --border: rgba(0, 0, 0, 0.07); --border-strong: rgba(0, 0, 0, 0.12); --accent-text: #4a50d9; --accent-soft: rgb(var(--accent-rgb) / 0.12); --accent-tint: rgb(var(--accent-rgb) / 0.18); --accent-tint-strong: rgb(var(--accent-rgb) / 0.28); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.07); --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.12); } :where(:root:not([data-theme="dark"])) button { background-color: #f9f9f9; } } :root:where([data-theme="light"]) { --surface: #ffffff; --surface-raised: #ffffff; --surface-overlay: #ffffff; --text: #1c1c1e; --text-secondary: rgba(0, 0, 0, 0.6); --text-muted: rgba(0, 0, 0, 0.42); --hover: rgba(0, 0, 0, 0.04); --pressed: rgba(0, 0, 0, 0.07); --border: rgba(0, 0, 0, 0.07); --border-strong: rgba(0, 0, 0, 0.12); --accent-text: #4a50d9; --accent-soft: rgb(var(--accent-rgb) / 0.12); --accent-tint: rgb(var(--accent-rgb) / 0.18); --accent-tint-strong: rgb(var(--accent-rgb) / 0.28); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.07); --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.12); } :where(:root[data-theme="light"]) button { background-color: #f9f9f9; } /* Colour themes (Settings > Appearance > Theme). * * A theme swaps the THEME-CONTROLLED design tokens declared on :root in * index.css -- the accent family (--accent, --accent-rgb, --accent-hover, * --accent-contrast, --accent-text) and the grounds (--surface for the chat * area, --surface-raised for the nav sidebar / composer bubble / right-panel * cards, --surface-overlay for menus) -- and may tune the neutral chrome * tokens. Every theme specifies BOTH colour schemes: dark values on the * bare `:root[data-color-theme=...]` selector, light values in a * `prefers-color-scheme: light` block (the build-time themeOverridePlugin.ts * makes that block honour the Settings > Appearance light/dark override, * exactly as for component stylesheets). The values need not be the same in * both schemes -- adjust them for contrast. * * `[data-color-theme]` selectors carry more specificity than the bare :root * defaults, so a theme's dark block beats index.css's light override; the * theme's own light block, later in source order, wins back in light mode. * * The registry the UI offers (ids, labels, swatches) lives in * src/utils/colorTheme.ts and the server-side allow-list in * chat/routes/user.py COLOR_THEME_CHOICES -- keep all three in step. * * "prototype" -- the original Quest palette (indigo accent #646cff, neutral * greys). It IS the :root default token set in index.css, so it needs no * overrides here; the attribute is still set so devtools show the choice. */ /* "electric-blue" -- Electric Capital brand palette: cyan-blue ramp * (000 DAF0FC ... 500 00BBF2 ... 950 1C95C0) over a neutral grey ramp * (000 F6F6F6 ... 950 161616) and white. */ :root[data-color-theme="electric-blue"] { --accent: #00bbf2; /* blue 500 */ --accent-rgb: 0 187 242; --accent-hover: #4cc2f4; /* blue 400 */ --accent-contrast: #161616; /* grey 950 -- dark text on the bright cyan */ --accent-text: #4cc2f4; /* blue 400 */ --surface: #161616; /* grey 950 -- chat ground */ --surface-raised: #202020; /* between grey 950 and 900 -- sidebar, composer, right-panel cards */ --surface-overlay: #2a2a2a; /* grey 900 (menus float on --shadow-menu) */ --text: #f6f6f6; /* grey 000 */ --text-secondary: #a4a4a4; /* grey 400 */ --text-muted: #8a8a8a; /* grey 500 */ --border: rgba(246, 246, 246, 0.08); --border-strong: rgba(246, 246, 246, 0.16); } @media (prefers-color-scheme: light) { :root:where(:not([data-theme="dark"]))[data-color-theme="electric-blue"] { --accent: #00bbf2; /* blue 500 -- same brand cyan as dark */ --accent-rgb: 0 187 242; --accent-hover: #199dca; /* blue 900 -- darkens on hover in light */ --accent-contrast: #161616; /* grey 950 -- dark text on the bright cyan (white fails contrast) */ --accent-text: #1c95c0; /* blue 950 -- accent as text stays the darker ramp step for legibility on white */ --surface: #fcfcfc; /* near-white -- chat ground */ --surface-raised: #ffffff; /* white -- sidebar, composer, right-panel cards */ --surface-overlay: #ffffff; --text: #161616; /* grey 950 */ --text-secondary: #585858; /* grey 700 */ --text-muted: #8a8a8a; /* grey 500 */ --border: #e2e2e2; /* grey 150 */ --border-strong: #d7d7d7; /* grey 200 */ } } :root:where([data-theme="light"])[data-color-theme="electric-blue"] { --accent: #00bbf2; /* blue 500 -- same brand cyan as dark */ --accent-rgb: 0 187 242; --accent-hover: #199dca; /* blue 900 -- darkens on hover in light */ --accent-contrast: #161616; /* grey 950 -- dark text on the bright cyan (white fails contrast) */ --accent-text: #1c95c0; /* blue 950 -- accent as text stays the darker ramp step for legibility on white */ --surface: #fcfcfc; /* near-white -- chat ground */ --surface-raised: #ffffff; /* white -- sidebar, composer, right-panel cards */ --surface-overlay: #ffffff; --text: #161616; /* grey 950 */ --text-secondary: #585858; /* grey 700 */ --text-muted: #8a8a8a; /* grey 500 */ --border: #e2e2e2; /* grey 150 */ --border-strong: #d7d7d7; /* grey 200 */ } /* "alloy" -- forest green + cream: deep forest-green grounds (#0b1914 ... * #193224) with cream type and a cream accent fill in the dark scheme; cream * paper grounds (#fffcec page, #f3efd9 band) with a forest-green accent * (#326849) and warm charcoal text in the light scheme. */ :root[data-color-theme="alloy"] { --accent: #e2e5dd; /* cream -- the hero's "Partner with us" button fill */ --accent-rgb: 226 229 221; --accent-hover: #fffcec; /* brand cream -- brighter on hover */ --accent-contrast: #0b1914; /* forest -- dark text on the cream fill */ --accent-text: #9fcdb2; /* pale sage -- accent as text/links on forest */ --surface: #0b1914; /* hero forest -- chat ground */ --surface-raised: #11251b; /* hero mid-tone -- sidebar, composer, right-panel cards */ --surface-overlay: #193224; /* hero highlight -- menus float on --shadow-menu */ --text: #f4f2e2; /* hero body copy */ --text-secondary: #c1c3b6; /* hero eyebrow */ --text-muted: #8f978c; --hover: rgba(244, 242, 226, 0.06); --pressed: rgba(244, 242, 226, 0.1); --border: rgba(244, 242, 226, 0.08); --border-strong: rgba(244, 242, 226, 0.16); } @media (prefers-color-scheme: light) { :root:where(:not([data-theme="dark"]))[data-color-theme="alloy"] { --accent: #326849; /* forest green -- the stat figures */ --accent-rgb: 50 104 73; --accent-hover: #3d7a56; --accent-contrast: #fffcec; /* cream text on the green fill */ --accent-text: #2b6343; --surface: #fffcec; /* page cream -- chat ground */ --surface-raised: #f6f3e1; /* between page cream and the #f3efd9 band -- sidebar, composer, cards */ --surface-overlay: #fffdf2; --text: #191a1e; /* headline charcoal */ --text-secondary: #3f403d; /* body copy */ --text-muted: #5d5e57; /* eyebrow labels */ --hover: rgba(25, 26, 30, 0.04); --pressed: rgba(25, 26, 30, 0.07); --border: #dcdad0; /* stat-card border */ --border-strong: #cfcdc0; } } :root:where([data-theme="light"])[data-color-theme="alloy"] { --accent: #326849; /* forest green -- the stat figures */ --accent-rgb: 50 104 73; --accent-hover: #3d7a56; --accent-contrast: #fffcec; /* cream text on the green fill */ --accent-text: #2b6343; --surface: #fffcec; /* page cream -- chat ground */ --surface-raised: #f6f3e1; /* between page cream and the #f3efd9 band -- sidebar, composer, cards */ --surface-overlay: #fffdf2; --text: #191a1e; /* headline charcoal */ --text-secondary: #3f403d; /* body copy */ --text-muted: #5d5e57; /* eyebrow labels */ --hover: rgba(25, 26, 30, 0.04); --pressed: rgba(25, 26, 30, 0.07); --border: #dcdad0; /* stat-card border */ --border-strong: #cfcdc0; } /* "recall" -- sage mint on near-black: a sage-mint accent (#8DB5AC, dark type * on it) over a near-black ground (#111111) with faintly green-tinted raised * surfaces (#1E2221) and white type. */ :root[data-color-theme="recall"] { --accent: #8db5ac; /* sage mint */ --accent-rgb: 141 181 172; --accent-hover: #a3c6be; /* lighter sage */ --accent-contrast: #111111; /* near-black type on the pale accent, as on the disc */ --accent-text: #9fc3ba; /* sage as text on the dark ground */ --surface: #111111; /* near-black -- chat ground */ --surface-raised: #1a1d1c; /* green-tinted charcoal -- sidebar, composer, right-panel cards */ --surface-overlay: #242827; /* the APY pill tone, one step lighter (menus) */ --text: #f4f6f5; --text-secondary: #a3a8a6; --text-muted: #7f8583; --border: rgba(244, 246, 245, 0.08); --border-strong: rgba(244, 246, 245, 0.16); } @media (prefers-color-scheme: light) { :root:where(:not([data-theme="dark"]))[data-color-theme="recall"] { --accent: #4f7d72; /* deepened sage for contrast on white */ --accent-rgb: 79 125 114; --accent-hover: #467065; --accent-contrast: #ffffff; --accent-text: #3f6a60; --surface: #f5f8f7; /* mint-tinted off-white -- chat ground */ --surface-raised: #ffffff; /* white -- sidebar, composer, right-panel cards */ --surface-overlay: #ffffff; --text: #111111; --text-secondary: #5a605e; --text-muted: #858b89; --border: #e1e6e4; --border-strong: #d2d9d6; } } :root:where([data-theme="light"])[data-color-theme="recall"] { --accent: #4f7d72; /* deepened sage for contrast on white */ --accent-rgb: 79 125 114; --accent-hover: #467065; --accent-contrast: #ffffff; --accent-text: #3f6a60; --surface: #f5f8f7; /* mint-tinted off-white -- chat ground */ --surface-raised: #ffffff; /* white -- sidebar, composer, right-panel cards */ --surface-overlay: #ffffff; --text: #111111; --text-secondary: #5a605e; --text-muted: #858b89; --border: #e1e6e4; --border-strong: #d2d9d6; } #root { max-width: 100%; margin: 0; padding: 0; text-align: left; } /* App container with flex layout */ .app-container { display: flex; flex-direction: row; height: 100vh; width: 100%; } /* Main content area */ .main-content { flex: 1; display: flex; align-items: stretch; justify-content: stretch; min-width: 0; /* Allow flex item to shrink below content size */ } /* Center content when no conversation is selected */ .main-content .no-conversation-selected { flex: 1; display: flex; align-items: center; justify-content: center; } /* API key form container */ .api-key-form-container { max-width: 400px; margin: 0 auto; padding: 2rem; text-align: center; } .api-key-form-container h1 { font-size: 2rem; margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.87); } .api-key-form-container > p { color: rgba(255, 255, 255, 0.6); margin-bottom: 1.5rem; } .api-key-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; } .api-key-input { padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid #444; border-radius: 8px; background-color: #2a2a2a; color: rgba(255, 255, 255, 0.87); font-family: inherit; } .api-key-input:focus { outline: none; border-color: var(--accent); } .api-key-input::placeholder { color: rgba(255, 255, 255, 0.4); } .api-key-submit { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; border-radius: 8px; border: 1px solid transparent; background-color: var(--accent); color: var(--accent-contrast); cursor: pointer; transition: background-color 0.25s; font-family: inherit; } .api-key-submit:hover { background-color: var(--accent-hover); } .api-key-help { font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); line-height: 1.4; } /* No conversation selected state */ .no-conversation-selected { text-align: center; color: rgba(255, 255, 255, 0.6); } /* Chat placeholder */ .chat-placeholder { text-align: center; color: rgba(255, 255, 255, 0.6); } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .api-key-form-container h1 { color: #213547; } :where(:root:not([data-theme="dark"])) .api-key-form-container > p { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .api-key-input { background-color: #ffffff; border-color: #d0d0d0; color: #213547; } :where(:root:not([data-theme="dark"])) .api-key-input::placeholder { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .api-key-help { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .no-conversation-selected, :where(:root:not([data-theme="dark"])) .chat-placeholder { color: rgba(0, 0, 0, 0.6); } } :where(:root[data-theme="light"]) .api-key-form-container h1 { color: #213547; } :where(:root[data-theme="light"]) .api-key-form-container > p { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .api-key-input { background-color: #ffffff; border-color: #d0d0d0; color: #213547; } :where(:root[data-theme="light"]) .api-key-input::placeholder { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .api-key-help { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .no-conversation-selected, :where(:root[data-theme="light"]) .chat-placeholder { color: rgba(0, 0, 0, 0.6); } /* Admin ops menu - fixed position container in bottom-right */ .admin-ops-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; } /* Circular trigger button */ .admin-ops-button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background-color: #2a2a2a; color: rgba(255, 255, 255, 0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s, color 0.15s; } .admin-ops-button:hover { background-color: #3a3a3a; color: rgba(255, 255, 255, 0.9); } .admin-ops-button:disabled { cursor: default; opacity: 0.7; } .admin-ops-button.shutting-down { background-color: #4a2020; border-color: rgba(255, 100, 100, 0.3); color: #ff6b6b; } /* Amber/orange button when impersonating */ .admin-ops-button.impersonating { background-color: #92400e; border-color: rgba(251, 191, 36, 0.4); color: #fbbf24; } .admin-ops-button.impersonating:hover { background-color: #78350f; color: #fde68a; } /* Spinner for shutting-down state */ .admin-ops-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 100, 100, 0.3); border-top-color: #ff6b6b; border-radius: 50%; animation: admin-ops-spin 0.8s linear infinite; } @keyframes admin-ops-spin { to { transform: rotate(360deg); } } /* Inline variant - rendered in the sidebar UserInfoBar next to the gear. The dropdown still opens upward, overlaying the sidebar content. */ .admin-ops-container.admin-ops-inline { position: relative; bottom: auto; right: auto; z-index: 20; } .admin-ops-inline .admin-ops-button { width: auto; height: auto; padding: 0.375rem; border: none; border-radius: 6px; background: none; color: rgba(255, 255, 255, 0.5); } .admin-ops-inline .admin-ops-button:hover { background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } .admin-ops-inline .admin-ops-button.shutting-down { background-color: rgba(255, 100, 100, 0.12); color: #ff6b6b; } .admin-ops-inline .admin-ops-button.impersonating { background-color: rgba(251, 191, 36, 0.15); color: #fbbf24; } .admin-ops-inline .admin-ops-button.impersonating:hover { background-color: rgba(251, 191, 36, 0.25); color: #fde68a; } /* Dropdown menu - opens upward from the button */ .admin-ops-dropdown { position: absolute; bottom: calc(100% + 0.5rem); right: 0; min-width: 160px; background-color: #2a2a2a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); overflow: hidden; } /* Menu items */ .admin-ops-item { display: block; width: 100%; padding: 0.5rem 0.75rem; border: none; background: none; color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; text-align: left; cursor: pointer; transition: background-color 0.15s, color 0.15s; } .admin-ops-item:hover { background-color: rgba(255, 255, 255, 0.1); } /* Danger item (shutdown) */ .admin-ops-item-danger:hover { color: #ff6b6b; } .admin-ops-item-danger.confirming { color: #ff6b6b; background-color: rgba(255, 50, 50, 0.1); font-weight: 500; } /* Impersonation info row in dropdown */ .admin-ops-impersonating-info { padding: 0.4rem 0.75rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .admin-ops-impersonating-info strong { color: rgba(255, 255, 255, 0.8); } /* Stop impersonation item */ .admin-ops-item-stop { color: #fbbf24; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .admin-ops-item-stop:hover { color: #fde68a; background-color: rgba(251, 191, 36, 0.1); } .admin-ops-item-stop:disabled { cursor: default; opacity: 0.6; } /* Back button in user picker */ .admin-ops-item-back { border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); } /* User picker scrollable list */ .admin-ops-user-list { max-height: 240px; overflow-y: auto; } /* Individual user row */ .admin-ops-user-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0.4rem 0.75rem; } .admin-ops-user-name { font-size: 0.85rem; font-weight: 500; } .admin-ops-user-email { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); } .admin-ops-no-users { padding: 0.5rem 0.75rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); } /* Light mode overrides */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .admin-ops-button { background-color: #f0f0f0; border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .admin-ops-button:hover { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .admin-ops-button.shutting-down { background-color: #fde8e8; border-color: rgba(200, 50, 50, 0.3); color: #c53030; } :where(:root:not([data-theme="dark"])) .admin-ops-button.impersonating { background-color: #fef3c7; border-color: rgba(180, 130, 0, 0.4); color: #92400e; } :where(:root:not([data-theme="dark"])) .admin-ops-button.impersonating:hover { background-color: #fde68a; color: #78350f; } :where(:root:not([data-theme="dark"])) .admin-ops-inline .admin-ops-button { background: none; color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .admin-ops-inline .admin-ops-button:hover { background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.87); } :where(:root:not([data-theme="dark"])) .admin-ops-inline .admin-ops-button.shutting-down { background-color: rgba(200, 50, 50, 0.1); color: #c53030; } :where(:root:not([data-theme="dark"])) .admin-ops-inline .admin-ops-button.impersonating { background-color: rgba(180, 130, 0, 0.15); color: #92400e; } :where(:root:not([data-theme="dark"])) .admin-ops-inline .admin-ops-button.impersonating:hover { background-color: rgba(180, 130, 0, 0.25); color: #78350f; } :where(:root:not([data-theme="dark"])) .admin-ops-spinner { border-color: rgba(200, 50, 50, 0.3); border-top-color: #c53030; } :where(:root:not([data-theme="dark"])) .admin-ops-dropdown { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .admin-ops-item { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .admin-ops-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .admin-ops-item-danger:hover { color: #c53030; } :where(:root:not([data-theme="dark"])) .admin-ops-item-danger.confirming { color: #c53030; background-color: rgba(200, 50, 50, 0.08); } :where(:root:not([data-theme="dark"])) .admin-ops-item-back { border-bottom-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .admin-ops-user-email { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .admin-ops-no-users { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .admin-ops-impersonating-info { color: rgba(0, 0, 0, 0.5); border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .admin-ops-impersonating-info strong { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .admin-ops-item-stop { color: #92400e; border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .admin-ops-item-stop:hover { color: #78350f; background-color: rgba(180, 130, 0, 0.08); } } :where(:root[data-theme="light"]) .admin-ops-button { background-color: #f0f0f0; border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .admin-ops-button:hover { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .admin-ops-button.shutting-down { background-color: #fde8e8; border-color: rgba(200, 50, 50, 0.3); color: #c53030; } :where(:root[data-theme="light"]) .admin-ops-button.impersonating { background-color: #fef3c7; border-color: rgba(180, 130, 0, 0.4); color: #92400e; } :where(:root[data-theme="light"]) .admin-ops-button.impersonating:hover { background-color: #fde68a; color: #78350f; } :where(:root[data-theme="light"]) .admin-ops-inline .admin-ops-button { background: none; color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .admin-ops-inline .admin-ops-button:hover { background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.87); } :where(:root[data-theme="light"]) .admin-ops-inline .admin-ops-button.shutting-down { background-color: rgba(200, 50, 50, 0.1); color: #c53030; } :where(:root[data-theme="light"]) .admin-ops-inline .admin-ops-button.impersonating { background-color: rgba(180, 130, 0, 0.15); color: #92400e; } :where(:root[data-theme="light"]) .admin-ops-inline .admin-ops-button.impersonating:hover { background-color: rgba(180, 130, 0, 0.25); color: #78350f; } :where(:root[data-theme="light"]) .admin-ops-spinner { border-color: rgba(200, 50, 50, 0.3); border-top-color: #c53030; } :where(:root[data-theme="light"]) .admin-ops-dropdown { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .admin-ops-item { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .admin-ops-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .admin-ops-item-danger:hover { color: #c53030; } :where(:root[data-theme="light"]) .admin-ops-item-danger.confirming { color: #c53030; background-color: rgba(200, 50, 50, 0.08); } :where(:root[data-theme="light"]) .admin-ops-item-back { border-bottom-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .admin-ops-user-email { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .admin-ops-no-users { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .admin-ops-impersonating-info { color: rgba(0, 0, 0, 0.5); border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .admin-ops-impersonating-info strong { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .admin-ops-item-stop { color: #92400e; border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .admin-ops-item-stop:hover { color: #78350f; background-color: rgba(180, 130, 0, 0.08); } /* User info bar at bottom of sidebar */ .user-info-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-top: 1px solid var(--border); background-color: var(--surface); flex-shrink: 0; } .user-info { display: flex; align-items: center; gap: 0.625rem; min-width: 0; /* Allow text truncation */ flex: 1; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; } .user-details { min-width: 0; /* Allow text truncation */ } .user-name { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-email { font-size: 0.6875rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Right-hand icon cluster: admin wrench (admins only) + settings gear */ .user-info-actions { display: flex; align-items: center; gap: 0.125rem; flex-shrink: 0; } .settings-button { background: none; border: none; padding: 0.375rem; cursor: pointer; color: var(--text-muted); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; flex-shrink: 0; } .settings-button:hover { color: var(--text); background-color: var(--hover); } /* Light mode */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .user-name { color: #213547; } } :where(:root[data-theme="light"]) .user-name { color: #213547; } /* New Project Modal overlay */ .new-project-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container */ .new-project-modal { background-color: #2a2a2a; border-radius: 12px; width: 440px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; } @keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Header */ .new-project-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .new-project-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; } .new-project-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .new-project-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Body */ .new-project-body { padding: 1.5rem; } .new-project-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.8); } .new-project-description { margin: 0 0 1rem; font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6); } .new-project-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color 0.15s; box-sizing: border-box; } .new-project-input:focus { border-color: var(--accent); } .new-project-input:disabled { opacity: 0.6; } .new-project-public-row { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.75rem 0 0; cursor: pointer; } .new-project-public-row input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; } .new-project-public-label { display: block; font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); } .new-project-public-hint { display: block; font-size: 0.75rem; font-weight: 400; margin-top: 0.25rem; color: rgba(255, 255, 255, 0.5); } .new-project-error { margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); border-radius: 6px; color: #ff6b6b; font-size: 0.8125rem; } /* Actions */ .new-project-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; } .new-project-cancel-button { padding: 0.5rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: none; color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s; } .new-project-cancel-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.05); } .new-project-create-button { padding: 0.5rem 1.25rem; border: 1px solid transparent; border-radius: 8px; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s; } .new-project-create-button:hover:not(:disabled) { background-color: var(--accent-hover); } .new-project-create-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Light mode */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .new-project-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .new-project-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .new-project-header h2 { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .new-project-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .new-project-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .new-project-label { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .new-project-description { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .new-project-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .new-project-public-label { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .new-project-public-hint { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .new-project-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root:not([data-theme="dark"])) .new-project-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .new-project-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } } :where(:root[data-theme="light"]) .new-project-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .new-project-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .new-project-header h2 { color: #1a1a1a; } :where(:root[data-theme="light"]) .new-project-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .new-project-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .new-project-label { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .new-project-description { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .new-project-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .new-project-public-label { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .new-project-public-hint { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .new-project-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root[data-theme="light"]) .new-project-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .new-project-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } /* Skills section. Colours come from the design tokens in index.css; only the semantic public-badge green is literal, so the light-mode block is limited to that. */ /* Tab bar */ .skills-tab-bar { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--border); } .skills-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.5rem 1rem; font-size: 0.8125rem; font-family: inherit; color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .skills-tab-btn:hover { color: var(--text-secondary); } .skills-tab-btn.active { color: var(--text); border-bottom-color: var(--accent); } .skills-toolbar { display: flex; align-items: center; margin-bottom: 1rem; } .skills-list { display: flex; flex-direction: column; gap: 0.75rem; } .skill-card { transition: border-color 0.15s; } .skill-card-editing { border-color: var(--accent); } .skill-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; } .skill-card-name { font-size: 0.875rem; font-weight: 600; color: var(--text); } /* Visibility badges */ .skill-badge-private, .skill-badge-shared, .skill-badge-public { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 10px; font-size: 0.6875rem; font-weight: 600; } .skill-badge-private { background: var(--hover); color: var(--text-secondary); } .skill-badge-shared { background: var(--accent-soft); color: var(--accent-text); } .skill-badge-public { background: rgba(76, 175, 80, 0.15); color: #4caf50; } /* Skill description */ .skill-card-description { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.375rem; } /* Creator info (shown on shared skill cards) */ .skill-card-creator { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; } /* Show more/Show less toggle on truncated skill content */ .skill-preview-toggle { display: block; margin-top: 0.25rem; padding: 0; background: none; border: none; font-size: 0.75rem; font-family: inherit; color: var(--accent-text); cursor: pointer; } .skill-preview-toggle:hover { text-decoration: underline; } /* Description input */ .skill-description-input { font-weight: 400 !important; } /* Visibility selector */ .skill-visibility-selector { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .skill-visibility-selector label { font-size: 0.8125rem; color: var(--text-secondary); } .skill-visibility-selector select { padding: 0.25rem 0.5rem; font-size: 0.8125rem; font-family: inherit; border: 1px solid var(--border-strong); border-radius: 4px; background-color: var(--surface-raised); color: var(--text); cursor: pointer; } .skill-visibility-selector select:focus { outline: none; border-color: var(--accent); } /* Enabled toggle */ .skill-enabled-toggle { display: flex; align-items: center; gap: 0.375rem; margin-left: auto; } .skill-enabled-toggle label { font-size: 0.75rem; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 0.25rem; } .skill-enabled-toggle input[type="checkbox"] { cursor: pointer; } /* Shares management */ .skill-shares-section { padding: 0.5rem 0; } .skill-shares-list { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; } .skill-share-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; } .skill-share-email { color: var(--text); } .skill-share-name { color: var(--text-secondary); margin-left: 0.5rem; } .skill-add-share-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } .skill-add-share-input { flex: 1; } /* Type-ahead dropdown for user search */ .share-typeahead-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: 0.375rem; box-shadow: var(--shadow-menu); max-height: 200px; overflow-y: auto; z-index: 10; margin-top: 0.25rem; } .share-typeahead-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; transition: background 0.15s; } .share-typeahead-option:hover { background: var(--hover); } .share-typeahead-name { color: var(--text); font-weight: 500; font-size: 0.8125rem; } .share-typeahead-email { color: var(--text-secondary); font-size: 0.75rem; } /* Light mode: only the literal semantic status colour needs a darker, higher-contrast variant on light grounds. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .skill-badge-public { background: rgba(76, 175, 80, 0.1); color: #388e3c; } } :where(:root[data-theme="light"]) .skill-badge-public { background: rgba(76, 175, 80, 0.1); color: #388e3c; } /* Project Settings Modal overlay */ .project-settings-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container -- sidebar layout with left nav */ .project-settings-modal { background-color: #2a2a2a; border-radius: 12px; width: 700px; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; } /* Header */ .project-settings-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .project-settings-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; } .project-settings-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .project-settings-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Body -- sidebar layout (row direction with nav + content) */ .project-settings-body { display: flex; flex-direction: row; flex: 1; min-height: 0; overflow: hidden; } /* Content area */ .project-settings-content { flex: 1; overflow-y: auto; padding: 1.5rem; min-width: 0; } .project-settings-loading { text-align: center; color: rgba(255, 255, 255, 0.6); padding: 2rem 0; } .project-settings-field { margin-bottom: 1.25rem; } .project-settings-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.8); } .project-settings-label-hint { display: block; font-weight: 400; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.25rem; } .project-settings-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color 0.15s; box-sizing: border-box; } .project-settings-input:focus { border-color: var(--accent); } .project-settings-input:disabled { opacity: 0.6; } .project-settings-textarea { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.875rem; font-family: inherit; outline: none; resize: vertical; min-height: 120px; transition: border-color 0.15s; box-sizing: border-box; line-height: 1.5; } .project-settings-textarea:focus { border-color: var(--accent); } .project-settings-textarea:disabled { opacity: 0.6; } .project-settings-char-count { text-align: right; font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); margin-top: 0.25rem; } .project-settings-public-note { margin-bottom: 1rem; padding: 0.5rem 0.75rem; background-color: rgba(94, 158, 255, 0.08); border: 1px solid rgba(94, 158, 255, 0.3); border-radius: 6px; color: #7ab2ff; font-size: 0.8125rem; } .project-settings-error { margin-bottom: 1rem; padding: 0.5rem 0.75rem; background-color: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); border-radius: 6px; color: #ff6b6b; font-size: 0.8125rem; } /* Actions */ .project-settings-actions { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; } .project-settings-save-button { padding: 0.5rem 1.25rem; border: 1px solid transparent; border-radius: 8px; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s; } .project-settings-save-button:hover:not(:disabled) { background-color: var(--accent-hover); } .project-settings-save-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Danger zone */ .project-settings-danger-zone { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.25rem; } .project-settings-danger-zone h3 { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 600; color: #ff6b6b; } .project-settings-danger-zone p { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); margin: 0 0 1rem; line-height: 1.5; } .project-settings-delete-button { padding: 0.5rem 1rem; border: 1px solid #ff6b6b; border-radius: 8px; background: none; color: #ff6b6b; font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s; } .project-settings-delete-button:hover { background-color: rgba(255, 107, 107, 0.1); } .project-settings-delete-confirm { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .project-settings-delete-confirm span { font-size: 0.875rem; color: #ff6b6b; font-weight: 500; } .project-settings-delete-confirm-button { padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 8px; background-color: #d32f2f; color: white; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s; } .project-settings-delete-confirm-button:hover:not(:disabled) { background-color: #b71c1c; } .project-settings-delete-confirm-button:disabled { opacity: 0.6; cursor: not-allowed; } .project-settings-delete-cancel-button { padding: 0.5rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: none; color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s; } .project-settings-delete-cancel-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.05); } /* Mobile: full-screen takeover with a two-tier drill-in nav, mirroring SettingsModal. Scoped by class (set from the useIsMobile hook) rather than a media query so the JS breakpoint stays the single source of truth. The nav, back button, and chevron reuse the shared .settings-nav / .settings-back-button / .settings-nav-chevron styles from SettingsModal.css. */ .project-settings-overlay-mobile { align-items: stretch; justify-content: stretch; } .project-settings-modal-mobile { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; } /* iOS auto-zoom guard: the modal is portaled to document.body, outside .mobile-shell, so mirror its 16px form-control rule here. */ .project-settings-modal-mobile input, .project-settings-modal-mobile textarea, .project-settings-modal-mobile select { font-size: 16px; } .project-settings-modal-mobile .project-settings-header { gap: 0.5rem; } .project-settings-modal-mobile .project-settings-header h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* First tier: the nav list fills the screen */ .project-settings-modal-mobile .project-settings-body { position: relative; } .project-settings-modal-mobile .settings-nav { width: 100%; box-sizing: border-box; border-right: none; padding: 0.75rem 1rem; overflow-y: auto; } .project-settings-modal-mobile .settings-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem; font-size: 1rem; } /* Second tier: the section content slides over the nav list */ .project-settings-modal-mobile .project-settings-content { position: absolute; inset: 0; background-color: #2a2a2a; padding: 1rem; transform: translateX(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; } .project-settings-modal-mobile.project-settings-mobile-section-open .project-settings-content { transform: translateX(0); visibility: visible; transition: transform 0.25s ease; } /* ------------------------------------------------------------------- Light mode ------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .project-settings-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .project-settings-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .project-settings-header h2 { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .project-settings-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .project-settings-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .project-settings-modal-mobile .project-settings-content { background-color: #ffffff; } :where(:root:not([data-theme="dark"])) .project-settings-loading { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .project-settings-label { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .project-settings-label-hint { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .project-settings-input, :where(:root:not([data-theme="dark"])) .project-settings-textarea { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .project-settings-char-count { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .project-settings-public-note { background-color: rgba(25, 103, 210, 0.05); border-color: rgba(25, 103, 210, 0.3); color: #1967d2; } :where(:root:not([data-theme="dark"])) .project-settings-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root:not([data-theme="dark"])) .project-settings-danger-zone { border-top-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .project-settings-danger-zone h3 { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .project-settings-danger-zone p { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .project-settings-delete-button { border-color: #d32f2f; color: #d32f2f; } :where(:root:not([data-theme="dark"])) .project-settings-delete-button:hover { background-color: rgba(211, 47, 47, 0.05); } :where(:root:not([data-theme="dark"])) .project-settings-delete-confirm span { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .project-settings-delete-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .project-settings-delete-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } } :where(:root[data-theme="light"]) .project-settings-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .project-settings-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .project-settings-header h2 { color: #1a1a1a; } :where(:root[data-theme="light"]) .project-settings-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .project-settings-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .project-settings-modal-mobile .project-settings-content { background-color: #ffffff; } :where(:root[data-theme="light"]) .project-settings-loading { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .project-settings-label { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .project-settings-label-hint { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .project-settings-input, :where(:root[data-theme="light"]) .project-settings-textarea { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .project-settings-char-count { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .project-settings-public-note { background-color: rgba(25, 103, 210, 0.05); border-color: rgba(25, 103, 210, 0.3); color: #1967d2; } :where(:root[data-theme="light"]) .project-settings-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root[data-theme="light"]) .project-settings-danger-zone { border-top-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .project-settings-danger-zone h3 { color: #d32f2f; } :where(:root[data-theme="light"]) .project-settings-danger-zone p { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .project-settings-delete-button { border-color: #d32f2f; color: #d32f2f; } :where(:root[data-theme="light"]) .project-settings-delete-button:hover { background-color: rgba(211, 47, 47, 0.05); } :where(:root[data-theme="light"]) .project-settings-delete-confirm span { color: #d32f2f; } :where(:root[data-theme="light"]) .project-settings-delete-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .project-settings-delete-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } /* New Routine Modal overlay */ .new-routine-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container */ .new-routine-modal { background-color: #2a2a2a; border-radius: 12px; width: 540px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; } /* Header */ .new-routine-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .new-routine-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; } .new-routine-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .new-routine-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Body */ .new-routine-body { padding: 1.5rem; } .new-routine-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; margin-top: 1rem; color: rgba(255, 255, 255, 0.8); } .new-routine-label:first-of-type { margin-top: 0; } .new-routine-label-hint { display: block; font-weight: 400; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.25rem; } .new-routine-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color 0.15s; box-sizing: border-box; } .new-routine-input:focus { border-color: var(--accent); } .new-routine-input:disabled { opacity: 0.6; } .new-routine-textarea { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.875rem; font-family: inherit; outline: none; resize: vertical; min-height: 80px; transition: border-color 0.15s; box-sizing: border-box; line-height: 1.5; } .new-routine-textarea:focus { border-color: var(--accent); } .new-routine-textarea:disabled { opacity: 0.6; } .new-routine-select { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.875rem; font-family: inherit; outline: none; transition: border-color 0.15s; box-sizing: border-box; cursor: pointer; } .new-routine-select:focus { border-color: var(--accent); } .new-routine-select:disabled { opacity: 0.6; } .new-routine-error { margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); border-radius: 6px; color: #ff6b6b; font-size: 0.8125rem; } /* Actions */ .new-routine-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; } .new-routine-cancel-button { padding: 0.5rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: none; color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s; } .new-routine-cancel-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.05); } .new-routine-create-button { padding: 0.5rem 1.25rem; border: 1px solid transparent; border-radius: 8px; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s; } .new-routine-create-button:hover:not(:disabled) { background-color: var(--accent-hover); } .new-routine-create-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Light mode */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .new-routine-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .new-routine-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .new-routine-header h2 { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .new-routine-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .new-routine-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .new-routine-label { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .new-routine-label-hint { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .new-routine-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .new-routine-textarea { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .new-routine-select { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .new-routine-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root:not([data-theme="dark"])) .new-routine-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .new-routine-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } } :where(:root[data-theme="light"]) .new-routine-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .new-routine-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .new-routine-header h2 { color: #1a1a1a; } :where(:root[data-theme="light"]) .new-routine-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .new-routine-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .new-routine-label { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .new-routine-label-hint { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .new-routine-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .new-routine-textarea { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .new-routine-select { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .new-routine-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root[data-theme="light"]) .new-routine-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .new-routine-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } /* Routine Settings Modal overlay */ .routine-settings-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container */ .routine-settings-modal { background-color: #2a2a2a; border-radius: 12px; width: 720px; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; } /* Header */ .routine-settings-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .routine-settings-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; } .routine-settings-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .routine-settings-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Body with left nav + content */ .routine-settings-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* Left navigation */ .routine-settings-nav { width: 140px; flex-shrink: 0; border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 0.75rem; display: flex; flex-direction: column; justify-content: space-between; } .routine-settings-nav-top { display: flex; flex-direction: column; gap: 0.25rem; } .routine-settings-nav-bottom { display: flex; flex-direction: column; gap: 0.25rem; } .routine-settings-nav-item { background: none; border: none; padding: 0.5rem 0.75rem; text-align: left; cursor: pointer; color: rgba(255, 255, 255, 0.6); border-radius: 6px; font-size: 0.875rem; font-family: inherit; transition: color 0.15s, background-color 0.15s; } .routine-settings-nav-item:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.05); } .routine-settings-nav-item.active { color: rgba(255, 255, 255, 0.87); background-color: rgb(var(--accent-rgb) / 0.15); } /* Danger nav item */ .routine-settings-nav-danger { color: rgba(255, 100, 100, 0.7); } .routine-settings-nav-danger:hover { color: rgba(255, 100, 100, 0.9); background-color: rgba(255, 100, 100, 0.1); } .routine-settings-nav-danger.active { color: rgba(255, 100, 100, 0.9); background-color: rgba(255, 100, 100, 0.15); } /* Scrollable content area */ .routine-settings-content { flex: 1; overflow-y: auto; padding: 1.5rem; min-height: 0; min-width: 0; } .routine-settings-loading { text-align: center; color: rgba(255, 255, 255, 0.6); padding: 0.5rem 0; font-size: 0.8125rem; } .routine-settings-field { margin-bottom: 1.25rem; } .routine-settings-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.8); } .routine-settings-label-hint { display: block; font-weight: 400; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.25rem; } .routine-settings-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color 0.15s; box-sizing: border-box; } .routine-settings-input:focus { border-color: var(--accent); } .routine-settings-input:disabled { opacity: 0.6; } .routine-settings-textarea { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.875rem; font-family: inherit; outline: none; resize: none; min-height: 80px; max-height: 420px; overflow-y: auto; transition: border-color 0.15s; box-sizing: border-box; line-height: 1.5; } .routine-settings-textarea:focus { border-color: var(--accent); } .routine-settings-textarea:disabled { opacity: 0.6; } .routine-settings-select { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.875rem; font-family: inherit; outline: none; transition: border-color 0.15s; box-sizing: border-box; cursor: pointer; } .routine-settings-select:focus { border-color: var(--accent); } .routine-settings-select:disabled { opacity: 0.6; } /* Read-only display for a leftover (deprecated) guide attachment */ .routine-settings-guide-readonly { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); box-sizing: border-box; } .routine-settings-guide-name { color: rgba(255, 255, 255, 0.87); font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .routine-settings-guide-clear-button { padding: 0.25rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background: none; color: rgba(255, 255, 255, 0.7); font-size: 0.8125rem; cursor: pointer; transition: background-color 0.15s; flex-shrink: 0; } .routine-settings-guide-clear-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.05); } .routine-settings-guide-clear-button:disabled { opacity: 0.6; } /* Schedule fields wrapper -- grayed out when schedule is disabled */ .routine-settings-schedule-fields { transition: opacity 0.15s; } .routine-settings-schedule-fields.disabled { opacity: 0.45; } .routine-settings-schedule-fields.disabled .routine-settings-label { color: rgba(255, 255, 255, 0.4); } .routine-settings-last-run { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.5rem; } /* Error */ .routine-settings-error { margin-bottom: 1rem; padding: 0.5rem 0.75rem; background-color: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); border-radius: 6px; color: #ff6b6b; font-size: 0.8125rem; } /* Conflict modal (409 stale_update). Stacked on top of the settings modal with its own backdrop -- the settings modal stays open underneath so the user's unsaved edits survive. Patterned on NewFolderModal. */ .routine-conflict-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; /* Above .routine-settings-overlay (z-index: 1000). */ z-index: 1100; animation: fadeIn 0.15s ease-out; } .routine-conflict-modal { background-color: #2a2a2a; border-radius: 12px; width: 440px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; } .routine-conflict-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .routine-conflict-header h2 { margin: 0; font-size: 1rem; font-weight: 600; color: #ffc107; } .routine-conflict-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .routine-conflict-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } .routine-conflict-body { padding: 1.25rem 1.5rem 1.5rem; } .routine-conflict-body p { margin: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); } .routine-conflict-actions { display: flex; justify-content: flex-end; gap: 0.625rem; flex-wrap: wrap; } .routine-conflict-discard-button { padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 8px; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.875rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background-color 0.15s; } .routine-conflict-discard-button:hover:not(:disabled) { background-color: var(--accent-hover); } .routine-conflict-discard-button:disabled { opacity: 0.5; cursor: not-allowed; } .routine-conflict-overwrite-button { padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 8px; background-color: #d32f2f; color: white; font-size: 0.875rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background-color 0.15s; } .routine-conflict-overwrite-button:hover:not(:disabled) { background-color: #b71c1c; } .routine-conflict-overwrite-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Actions */ .routine-settings-actions { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; } .routine-settings-save-button { padding: 0.5rem 1.25rem; border: 1px solid transparent; border-radius: 8px; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s; } .routine-settings-save-button:hover:not(:disabled) { background-color: var(--accent-hover); } .routine-settings-save-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Danger zone (no border-top -- danger zone is in its own nav section) */ .routine-settings-danger-zone { } .routine-settings-danger-zone h3 { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 600; color: #ff6b6b; } .routine-settings-danger-zone p { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); margin: 0 0 1rem; line-height: 1.5; } .routine-settings-delete-button { padding: 0.5rem 1rem; border: 1px solid #ff6b6b; border-radius: 8px; background: none; color: #ff6b6b; font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s; } .routine-settings-delete-button:hover { background-color: rgba(255, 107, 107, 0.1); } .routine-settings-delete-confirm { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .routine-settings-delete-confirm span { font-size: 0.875rem; color: #ff6b6b; font-weight: 500; } .routine-settings-delete-confirm-button { padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 8px; background-color: #d32f2f; color: white; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s; } .routine-settings-delete-confirm-button:hover:not(:disabled) { background-color: #b71c1c; } .routine-settings-delete-confirm-button:disabled { opacity: 0.6; cursor: not-allowed; } .routine-settings-delete-cancel-button { padding: 0.5rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: none; color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s; } .routine-settings-delete-cancel-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.05); } /* ------------------------------------------------------------------- Light mode ------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .routine-settings-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .routine-settings-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .routine-settings-header h2 { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .routine-settings-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .routine-settings-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .routine-settings-loading { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .routine-settings-label { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .routine-settings-label-hint { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .routine-settings-input, :where(:root:not([data-theme="dark"])) .routine-settings-textarea { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .routine-settings-select { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .routine-settings-guide-readonly { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); } :where(:root:not([data-theme="dark"])) .routine-settings-guide-name { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .routine-settings-guide-clear-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .routine-settings-guide-clear-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .routine-settings-nav { border-right-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .routine-settings-nav-item { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .routine-settings-nav-item:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .routine-settings-nav-item.active { color: rgba(0, 0, 0, 0.87); background-color: rgb(var(--accent-rgb) / 0.1); } :where(:root:not([data-theme="dark"])) .routine-settings-nav-danger { color: rgba(220, 53, 69, 0.7); } :where(:root:not([data-theme="dark"])) .routine-settings-nav-danger:hover { color: rgba(220, 53, 69, 0.9); background-color: rgba(220, 53, 69, 0.08); } :where(:root:not([data-theme="dark"])) .routine-settings-nav-danger.active { color: rgba(220, 53, 69, 0.9); background-color: rgba(220, 53, 69, 0.1); } :where(:root:not([data-theme="dark"])) .routine-settings-schedule-fields.disabled .routine-settings-label { color: rgba(0, 0, 0, 0.35); } :where(:root:not([data-theme="dark"])) .routine-settings-last-run { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .routine-settings-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root:not([data-theme="dark"])) .routine-conflict-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .routine-conflict-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .routine-conflict-header h2 { color: #b88600; } :where(:root:not([data-theme="dark"])) .routine-conflict-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .routine-conflict-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .routine-conflict-body p { color: rgba(0, 0, 0, 0.75); } :where(:root:not([data-theme="dark"])) .routine-settings-danger-zone h3 { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .routine-settings-danger-zone p { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .routine-settings-delete-button { border-color: #d32f2f; color: #d32f2f; } :where(:root:not([data-theme="dark"])) .routine-settings-delete-button:hover { background-color: rgba(211, 47, 47, 0.05); } :where(:root:not([data-theme="dark"])) .routine-settings-delete-confirm span { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .routine-settings-delete-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .routine-settings-delete-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } } :where(:root[data-theme="light"]) .routine-settings-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .routine-settings-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .routine-settings-header h2 { color: #1a1a1a; } :where(:root[data-theme="light"]) .routine-settings-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .routine-settings-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .routine-settings-loading { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .routine-settings-label { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .routine-settings-label-hint { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .routine-settings-input, :where(:root[data-theme="light"]) .routine-settings-textarea { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .routine-settings-select { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .routine-settings-guide-readonly { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); } :where(:root[data-theme="light"]) .routine-settings-guide-name { color: #1a1a1a; } :where(:root[data-theme="light"]) .routine-settings-guide-clear-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .routine-settings-guide-clear-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .routine-settings-nav { border-right-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .routine-settings-nav-item { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .routine-settings-nav-item:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .routine-settings-nav-item.active { color: rgba(0, 0, 0, 0.87); background-color: rgb(var(--accent-rgb) / 0.1); } :where(:root[data-theme="light"]) .routine-settings-nav-danger { color: rgba(220, 53, 69, 0.7); } :where(:root[data-theme="light"]) .routine-settings-nav-danger:hover { color: rgba(220, 53, 69, 0.9); background-color: rgba(220, 53, 69, 0.08); } :where(:root[data-theme="light"]) .routine-settings-nav-danger.active { color: rgba(220, 53, 69, 0.9); background-color: rgba(220, 53, 69, 0.1); } :where(:root[data-theme="light"]) .routine-settings-schedule-fields.disabled .routine-settings-label { color: rgba(0, 0, 0, 0.35); } :where(:root[data-theme="light"]) .routine-settings-last-run { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .routine-settings-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root[data-theme="light"]) .routine-conflict-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .routine-conflict-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .routine-conflict-header h2 { color: #b88600; } :where(:root[data-theme="light"]) .routine-conflict-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .routine-conflict-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .routine-conflict-body p { color: rgba(0, 0, 0, 0.75); } :where(:root[data-theme="light"]) .routine-settings-danger-zone h3 { color: #d32f2f; } :where(:root[data-theme="light"]) .routine-settings-danger-zone p { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .routine-settings-delete-button { border-color: #d32f2f; color: #d32f2f; } :where(:root[data-theme="light"]) .routine-settings-delete-button:hover { background-color: rgba(211, 47, 47, 0.05); } :where(:root[data-theme="light"]) .routine-settings-delete-confirm span { color: #d32f2f; } :where(:root[data-theme="light"]) .routine-settings-delete-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .routine-settings-delete-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } /* Search Modal overlay */ .search-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container */ .search-modal { background-color: #2a2a2a; border-radius: 12px; width: 600px; max-width: 90vw; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; } /* Header */ .search-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .search-modal-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; } .search-modal-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .search-modal-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Search input wrapper */ .search-modal-input-wrapper { position: relative; padding: 1rem 1.5rem; flex-shrink: 0; } .search-modal-input-icon { position: absolute; left: 2.25rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.4); pointer-events: none; } .search-modal-input { width: 100%; padding: 0.625rem 0.75rem 0.625rem 2.25rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color 0.15s; box-sizing: border-box; } .search-modal-input:focus { border-color: var(--accent); } .search-modal-input::placeholder { color: rgba(255, 255, 255, 0.35); } /* Results area */ .search-modal-results { flex: 1; overflow-y: auto; padding: 0 0.75rem 0.75rem; } .search-modal-results::-webkit-scrollbar { width: 6px; } .search-modal-results::-webkit-scrollbar-track { background: transparent; } .search-modal-results::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } .search-modal-results::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Status messages (loading, empty, error) */ .search-modal-status { padding: 2rem 1rem; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; } .search-modal-error { padding: 0.75rem 1rem; text-align: center; color: #ff6b6b; font-size: 0.875rem; } /* Result count */ .search-modal-count { padding: 0.25rem 0.75rem 0.5rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); } /* Individual result item */ .search-result-item { padding: 0.75rem; border-radius: 8px; cursor: pointer; transition: background-color 0.15s; } .search-result-item:hover, .search-result-item.highlighted { background-color: rgba(255, 255, 255, 0.08); } .search-result-title { font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.87); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; } .search-result-archived-badge { font-size: 0.6875rem; font-weight: 500; color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.08); padding: 0.125rem 0.375rem; border-radius: 4px; flex-shrink: 0; } .search-result-snippet { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .search-result-snippet mark { background-color: rgb(var(--accent-rgb) / 0.3); color: rgba(255, 255, 255, 0.95); border-radius: 2px; padding: 0 1px; } .search-result-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.35); } .search-result-role { text-transform: capitalize; } /* Keyboard shortcut hint */ .search-modal-shortcut-hint { padding: 0.5rem 1.5rem 0.75rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.3); text-align: center; flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .search-modal-shortcut-hint kbd { display: inline-block; padding: 0.125rem 0.375rem; font-size: 0.6875rem; font-family: inherit; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; margin: 0 0.125rem; } /* Light mode */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .search-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .search-modal-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .search-modal-header h2 { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .search-modal-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .search-modal-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .search-modal-input-icon { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .search-modal-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .search-modal-input::placeholder { color: rgba(0, 0, 0, 0.35); } :where(:root:not([data-theme="dark"])) .search-modal-results::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .search-modal-results::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .search-modal-status { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .search-modal-error { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .search-modal-count { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .search-result-item:hover, :where(:root:not([data-theme="dark"])) .search-result-item.highlighted { background-color: rgba(0, 0, 0, 0.04); } :where(:root:not([data-theme="dark"])) .search-result-title { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .search-result-archived-badge { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .search-result-snippet { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .search-result-snippet mark { background-color: rgb(var(--accent-rgb) / 0.2); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .search-result-meta { color: rgba(0, 0, 0, 0.35); } :where(:root:not([data-theme="dark"])) .search-modal-shortcut-hint { color: rgba(0, 0, 0, 0.3); border-top-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .search-modal-shortcut-hint kbd { background-color: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.15); } } :where(:root[data-theme="light"]) .search-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .search-modal-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .search-modal-header h2 { color: #1a1a1a; } :where(:root[data-theme="light"]) .search-modal-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .search-modal-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .search-modal-input-icon { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .search-modal-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .search-modal-input::placeholder { color: rgba(0, 0, 0, 0.35); } :where(:root[data-theme="light"]) .search-modal-results::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .search-modal-results::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .search-modal-status { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .search-modal-error { color: #d32f2f; } :where(:root[data-theme="light"]) .search-modal-count { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .search-result-item:hover, :where(:root[data-theme="light"]) .search-result-item.highlighted { background-color: rgba(0, 0, 0, 0.04); } :where(:root[data-theme="light"]) .search-result-title { color: #1a1a1a; } :where(:root[data-theme="light"]) .search-result-archived-badge { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .search-result-snippet { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .search-result-snippet mark { background-color: rgb(var(--accent-rgb) / 0.2); color: #1a1a1a; } :where(:root[data-theme="light"]) .search-result-meta { color: rgba(0, 0, 0, 0.35); } :where(:root[data-theme="light"]) .search-modal-shortcut-hint { color: rgba(0, 0, 0, 0.3); border-top-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .search-modal-shortcut-hint kbd { background-color: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.15); } /* Sidebar container. Sits on the theme's raised ground (--surface-raised, shared with the composer bubble and the right-panel cards) so a colour theme can tint the nav/chrome separately from the chat ground. */ .sidebar { width: 260px; height: 100vh; display: flex; flex-direction: column; background-color: var(--surface-raised); border-right: 1px solid var(--border); } /* Brand bar: logo + app name on the left, search + requests inbox on the right */ .sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; padding: 0.875rem 0.5rem 0.875rem 1rem; flex-shrink: 0; } .sidebar-brand-identity { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .sidebar-brand-logo { width: 26px; height: 26px; flex-shrink: 0; } .sidebar-brand-name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-brand-actions { display: flex; align-items: center; gap: 0; flex-shrink: 0; } /* Square icon buttons in the brand bar (new chat, search, requests inbox) */ .sidebar-icon-button { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px; background: none; color: var(--text-secondary); cursor: pointer; transition: color 0.15s, background-color 0.15s; } .sidebar-icon-button:hover { color: var(--text); background-color: var(--hover); } /* Keyboard focus keeps a ring; mouse clicks don't leave one behind. */ .sidebar-icon-button:focus:not(:focus-visible) { outline: none; } .sidebar-icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .sidebar-icon-button.active { color: var(--accent); background-color: var(--accent-soft); } .sidebar-icon-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Open-request count pinned to the inbox icon's top-right corner */ .requests-badge { position: absolute; top: -3px; right: -4px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.625rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; line-height: 16px; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; } /* Error display */ .sidebar-error { padding: 0.75rem 1rem; color: #ff6b6b; font-size: 0.875rem; text-align: center; } /* Scrollable content area */ .sidebar-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; } /* Sliding panels container */ .sidebar-panels { display: flex; width: 200%; flex: 1; min-height: 0; overflow: hidden; transition: transform 0.2s ease-in-out; } .sidebar-panels.drilled { transform: translateX(-50%); } /* Individual panel. The transparent right border insets the scrollbar from the panel edge (scrollbars render inside the border box). */ .sidebar-panel { width: 50%; min-width: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 1rem; border-right: 4px solid transparent; box-sizing: border-box; } .sidebar-panel-main, .sidebar-panel-project { flex-shrink: 0; } /* Custom scrollbar for panels */ .sidebar-panel::-webkit-scrollbar { width: 6px; } .sidebar-panel::-webkit-scrollbar-track { background: transparent; } .sidebar-panel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .sidebar-panel::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Loading / empty states */ .sidebar-loading, .sidebar-empty { padding: 1rem 1rem 1.5rem; color: var(--text-muted); font-size: 0.8125rem; } /* --------------------------------------------------------------------------- Sections. Instead of hairline dividers, each section is a spaced block with a bold header row; the gap between blocks does the separating. --------------------------------------------------------------------------- */ .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem 0 1rem; margin-bottom: 0.25rem; } .section-label { padding: 0.375rem 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .section-header .section-label { padding-left: 0; } .section-add-button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background-color 0.15s; } .section-add-button:hover:not(:disabled) { color: var(--text); background-color: var(--hover); } .section-add-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Right-hand cluster in a section header (e.g. New Chat + options menu) */ .section-header-actions { display: flex; align-items: center; gap: 0.125rem; flex-shrink: 0; } .projects-section { padding-top: 0.5rem; margin-bottom: 1.5rem; } .projects-section + .section-header, .sidebar-panel-main > .section-header { margin-top: 0.5rem; } /* Create project button (empty state) */ .create-project-button { display: flex; align-items: center; gap: 0.5rem; width: calc(100% - 1.5rem); margin: 0.125rem 0.75rem 0.25rem; padding: 0.5rem 0.625rem; border: 1px dashed var(--border-strong); border-radius: 8px; background: none; color: var(--text-muted); font-size: 0.8125rem; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .create-project-button:hover { background-color: var(--hover); color: var(--text-secondary); } /* --------------------------------------------------------------------------- Rows. Projects, conversations, routines and routine groups all share the same rounded pill geometry, inset from the sidebar edges. --------------------------------------------------------------------------- */ .project-group { margin-bottom: 1px; } .project-header, .conversation-item, .routine-group-header, .load-more-conversations-button { margin: 0 0.5rem; border-radius: 8px; } .project-header { display: flex; align-items: center; padding: 0.4375rem 0.5rem; cursor: pointer; transition: background-color 0.15s; gap: 0.5rem; } .project-header:hover { background-color: var(--hover); } .project-name { flex: 1; font-size: 0.875rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-folder-icon { flex-shrink: 0; color: var(--text-muted); } .project-nav-chevron { flex-shrink: 0; color: transparent; margin-left: auto; transition: color 0.15s; } .project-header:hover .project-nav-chevron { color: var(--text-muted); } .project-loading { padding: 0.5rem 1rem; font-size: 0.8rem; color: var(--text-muted); } /* Drill-down header (back arrow + project name) */ .drill-down-header { display: flex; align-items: center; gap: 0.375rem; padding: 0.625rem 0.75rem 0.5rem; position: sticky; top: 0; background-color: var(--surface-raised); z-index: 1; } .drill-down-back-button, .drill-down-settings-button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: none; color: var(--text-secondary); cursor: pointer; transition: color 0.15s, background-color 0.15s; flex-shrink: 0; } .drill-down-settings-button { color: var(--text-muted); } .drill-down-back-button:hover, .drill-down-settings-button:hover { color: var(--text); background-color: var(--hover); } .drill-down-folder-icon { flex-shrink: 0; color: var(--text-muted); } .drill-down-project-name { flex: 1; font-size: 0.9375rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drill-down-conversations { padding-top: 0.5rem; } .drill-down-conversations > .section-header { margin-top: 0.25rem; } /* Conversation list */ .conversation-list { overflow-x: hidden; } /* "Load more" pager at the bottom of the paged top-level conversation list */ .load-more-conversations-button { display: block; width: calc(100% - 1rem); padding: 0.4375rem 0.5rem; border: none; background: none; color: var(--text-muted); font-size: 0.8125rem; cursor: pointer; transition: background-color 0.15s, color 0.15s; text-align: left; } .load-more-conversations-button:hover:not(:disabled) { background-color: var(--hover); color: var(--text); } .load-more-conversations-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Conversation item */ .conversation-item { position: relative; padding: 0.375rem 0.5rem; cursor: pointer; transition: background-color 0.15s; } .conversation-item:hover { background-color: var(--hover); } .conversation-item.active { background-color: var(--accent-soft); } .conversation-title { font-weight: 400; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.825rem; color: var(--text); } /* Routines section in project drill-down */ .routines-section { margin-bottom: 1.5rem; } .routines-section .section-header { margin-bottom: 0.25rem; } .routine-item { display: flex; align-items: center; justify-content: space-between; margin: 0 0.5rem; padding: 0.375rem 0.25rem 0.375rem 0.5rem; border-radius: 8px; cursor: default; } .routine-item:hover { background-color: var(--hover); } /* Matches .conversation-title so routines and conversations read as one list */ .routine-name { font-size: 0.825rem; font-weight: 400; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .routine-settings-button, .routine-play-button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 4px; background: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; margin-left: 0.25rem; transition: color 0.15s, background-color 0.15s; } .routine-settings-button:hover { color: var(--text); background-color: var(--hover); } .routine-play-button:hover { color: rgba(80, 190, 100, 0.95); background-color: rgba(80, 190, 100, 0.12); } .routine-play-button:disabled { opacity: 0.3; cursor: default; } .routine-schedule-indicator { display: inline-flex; align-items: center; color: var(--text-muted); margin-left: 0.25rem; flex-shrink: 0; } /* Origin indicators next to a conversation title */ .conversation-slack-icon, .conversation-subagent-icon, .conversation-inference-icon { display: inline-flex; align-items: center; color: var(--text-muted); margin-right: 6px; flex-shrink: 0; vertical-align: middle; } /* Routine conversation group (collapsible) */ .routine-conversation-group { margin-bottom: 1px; } .routine-group-header { display: flex; align-items: center; padding: 0.375rem 0.5rem 0.375rem 0.375rem; cursor: pointer; transition: background-color 0.15s; gap: 0.35rem; } .routine-group-header:hover { background-color: var(--hover); } .routine-group-header.has-active { background-color: var(--accent-soft); } .routine-group-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.15s ease; } .routine-group-icon { flex-shrink: 0; color: var(--text-muted); } .routine-group-name { flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .routine-group-count { font-size: 0.6875rem; color: var(--text-muted); flex-shrink: 0; margin-left: auto; } .routine-sub-item { padding-left: 2rem !important; /* indent under the group header */ } .routine-sub-item-timestamp { font-size: 0.825rem; color: var(--text-secondary); font-weight: 400; } /* Meatball menu button */ .conversation-menu-button { display: none; align-items: center; justify-content: center; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: none; border-radius: 4px; background: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: color 0.15s, background-color 0.15s; z-index: 2; } /* Hover-reveal only where hover exists. On touch devices (iOS Safari), a :hover style that inserts content makes the first tap apply hover instead of clicking — the row wouldn't open until the second tap. */ @media (hover: hover) { .conversation-item:hover .conversation-menu-button { display: flex; } .conversation-item:hover .conversation-title { padding-right: 1.5rem; } } @media (hover: none) { .conversation-menu-button { display: flex; } .conversation-title { padding-right: 1.5rem; } } .conversation-menu-button:focus { display: flex; } .conversation-menu-button:hover { color: var(--text); background-color: var(--pressed); } /* Dropdown menu */ .conversation-menu-dropdown { position: absolute; right: 0.5rem; top: 100%; min-width: 120px; background-color: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-menu); z-index: 10; overflow: hidden; } .conversation-menu-item { display: block; width: 100%; padding: 0.5rem 0.75rem; border: none; background: none; color: var(--text); font-size: 0.8125rem; text-align: left; cursor: pointer; transition: background-color 0.15s; } .conversation-menu-item:hover { background-color: var(--hover); } /* Inline rename input */ .conversation-rename-input { width: 100%; padding: 0.25rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 4px; background-color: var(--surface-raised); color: var(--text); font-size: 0.8125rem; font-family: inherit; outline: none; box-sizing: border-box; } .conversation-rename-input:focus { border-color: var(--accent); } /* Archived conversation (dimmed appearance) */ .conversation-item.archived .conversation-title { opacity: 0.5; font-style: italic; } /* Conversation options: meatball icon button + popover menu in the section header. */ .conversation-filter-wrapper { position: relative; display: inline-flex; align-items: center; } .conversation-filter-button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background-color 0.15s; } .conversation-filter-button:hover { color: var(--text); background-color: var(--hover); } .conversation-filter-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; min-width: 200px; background-color: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-menu); z-index: 10; padding: 0.25rem 0; overflow: hidden; } .conversation-filter-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0.5rem 0.75rem; color: var(--text); font-size: 0.8125rem; cursor: pointer; transition: background-color 0.15s; box-sizing: border-box; } .conversation-filter-menu-item:hover { background-color: var(--hover); } .conversation-filter-menu-item input[type='checkbox'] { margin: 0; cursor: pointer; flex-shrink: 0; } /* Version update banner */ .version-update-banner { flex-shrink: 0; margin: 0 0.5rem 0.5rem; padding: 0.375rem 0.75rem; border-radius: 8px; background-color: #e65100; color: #ffffff; font-size: 0.8125rem; font-weight: 500; text-align: center; } .version-update-banner a { color: #ffffff; text-decoration: underline; font-weight: 700; cursor: pointer; } .version-update-banner a:hover { text-decoration: none; } /* Public-project badges (globe): shown next to the project name in the projects list row and as a labeled chip in the drill-down header. */ .project-public-badge { flex-shrink: 0; opacity: 0.65; } .drill-down-public-badge { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 999px; border: 1px solid currentColor; opacity: 0.7; } /* JSON Tree Viewer -- dark mode (default) */ .json-tree-viewer { margin: 0; padding: 1.25rem 1.5rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.87); background-color: #222222; min-height: 100%; box-sizing: border-box; overflow-x: auto; } /* ------------------------------------------------------------------ */ /* Nodes */ /* ------------------------------------------------------------------ */ .json-node-primitive { padding-left: 1.25rem; } .json-node-primitive:hover { background-color: rgba(255, 255, 255, 0.04); border-radius: 3px; } .json-node-compound > .json-node-header { cursor: pointer; display: inline-flex; align-items: baseline; padding-left: 0; } .json-node-compound > .json-node-header:hover { background-color: rgba(255, 255, 255, 0.04); border-radius: 3px; } /* ------------------------------------------------------------------ */ /* Toggle arrow */ /* ------------------------------------------------------------------ */ .json-toggle { display: inline-block; width: 1rem; height: 1rem; flex-shrink: 0; position: relative; top: 0.125rem; margin-right: 0.125rem; } .json-toggle::before { content: ''; display: block; width: 0; height: 0; border-style: solid; transition: transform 0.1s ease; } .json-toggle-collapsed::before { border-width: 4px 0 4px 6px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.45); margin-top: 4px; margin-left: 4px; } .json-toggle-expanded::before { border-width: 6px 4px 0 4px; border-color: rgba(255, 255, 255, 0.45) transparent transparent transparent; margin-top: 5px; margin-left: 2px; } /* ------------------------------------------------------------------ */ /* Children indentation with guide line */ /* ------------------------------------------------------------------ */ .json-children { padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, 0.08); margin-left: 0.4375rem; } .json-node-footer { padding-left: 0; } /* ------------------------------------------------------------------ */ /* Syntax colors -- dark mode */ /* ------------------------------------------------------------------ */ /* Keys: bright orange (matches hljs-attr in Message.css) */ .json-key { color: #ffb86c; } .json-colon { color: rgba(255, 255, 255, 0.6); } /* String values: bright green (matches hljs-string) */ .json-string { color: #50fa7b; } /* Number values: cyan */ .json-number { color: #8be9fd; } /* Boolean values: bright pink (matches hljs-keyword) */ .json-boolean { color: #ff79c6; } /* null: bright pink */ .json-null { color: #ff79c6; } /* Structural punctuation */ .json-bracket { color: rgba(255, 255, 255, 0.6); } .json-comma { color: rgba(255, 255, 255, 0.45); } /* Collapsed badge */ .json-badge { display: inline-block; margin: 0 0.375rem; padding: 0 0.375rem; font-size: 0.75rem; line-height: 1.4; color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; } /* ------------------------------------------------------------------ */ /* Light mode */ /* ------------------------------------------------------------------ */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .json-tree-viewer { color: #1a1a1a; background-color: #f5f5f5; } :where(:root:not([data-theme="dark"])) .json-node-primitive:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root:not([data-theme="dark"])) .json-node-compound > .json-node-header:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root:not([data-theme="dark"])) .json-toggle-collapsed::before { border-color: transparent transparent transparent rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .json-toggle-expanded::before { border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent; } :where(:root:not([data-theme="dark"])) .json-children { border-left-color: rgba(0, 0, 0, 0.1); } /* Keys: orange (matches hljs-attr light) */ :where(:root:not([data-theme="dark"])) .json-key { color: #e36209; } :where(:root:not([data-theme="dark"])) .json-colon { color: rgba(0, 0, 0, 0.55); } /* String values: dark green (matches hljs-string light) */ :where(:root:not([data-theme="dark"])) .json-string { color: #22863a; } /* Number values: blue (matches hljs-number light) */ :where(:root:not([data-theme="dark"])) .json-number { color: #005cc5; } /* Boolean values: red (matches hljs-keyword light) */ :where(:root:not([data-theme="dark"])) .json-boolean { color: #d73a49; } :where(:root:not([data-theme="dark"])) .json-null { color: #d73a49; } :where(:root:not([data-theme="dark"])) .json-bracket { color: rgba(0, 0, 0, 0.55); } :where(:root:not([data-theme="dark"])) .json-comma { color: rgba(0, 0, 0, 0.35); } :where(:root:not([data-theme="dark"])) .json-badge { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.06); } } :where(:root[data-theme="light"]) .json-tree-viewer { color: #1a1a1a; background-color: #f5f5f5; } :where(:root[data-theme="light"]) .json-node-primitive:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root[data-theme="light"]) .json-node-compound > .json-node-header:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root[data-theme="light"]) .json-toggle-collapsed::before { border-color: transparent transparent transparent rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .json-toggle-expanded::before { border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent; } :where(:root[data-theme="light"]) .json-children { border-left-color: rgba(0, 0, 0, 0.1); } /* Keys: orange (matches hljs-attr light) */ :where(:root[data-theme="light"]) .json-key { color: #e36209; } :where(:root[data-theme="light"]) .json-colon { color: rgba(0, 0, 0, 0.55); } /* String values: dark green (matches hljs-string light) */ :where(:root[data-theme="light"]) .json-string { color: #22863a; } /* Number values: blue (matches hljs-number light) */ :where(:root[data-theme="light"]) .json-number { color: #005cc5; } /* Boolean values: red (matches hljs-keyword light) */ :where(:root[data-theme="light"]) .json-boolean { color: #d73a49; } :where(:root[data-theme="light"]) .json-null { color: #d73a49; } :where(:root[data-theme="light"]) .json-bracket { color: rgba(0, 0, 0, 0.55); } :where(:root[data-theme="light"]) .json-comma { color: rgba(0, 0, 0, 0.35); } :where(:root[data-theme="light"]) .json-badge { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.06); } /* JsonView: JsonTreeViewer wrapped in a tool-section box with a copy button (JsonView.tsx). Background/scroll/max-height come from .tool-section-content in ToolUseMessage.css; here we restyle the embedded tree to sit flush in that box (its standalone look targets the full-height FileViewerModal) and style the copy button. */ .json-view { position: relative; white-space: normal; } .json-view .json-tree-viewer { padding: 0; background-color: transparent; min-height: 0; font-family: inherit; font-size: inherit; line-height: 1.5; color: inherit; overflow-x: visible; } /* Copy button: hidden until the box is hovered, mirrors .table-copy-btn. Sticky so it stays visible while scrolling a tall blob. */ .json-copy-btn { position: sticky; top: 0; float: right; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; z-index: 1; padding: 0.25rem 0.45rem; border-radius: 4px; border: none; background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); cursor: pointer; display: inline-flex; align-items: center; } .json-view:hover .json-copy-btn { opacity: 1; visibility: visible; } .json-copy-btn:hover { background-color: rgba(255, 255, 255, 0.2); } .json-copy-btn.copied { background-color: rgba(76, 175, 80, 0.3); color: #4caf50; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .json-copy-btn { background-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .json-copy-btn:hover { background-color: rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .json-copy-btn.copied { background-color: rgba(76, 175, 80, 0.15); color: #2e7d32; } } :where(:root[data-theme="light"]) .json-copy-btn { background-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .json-copy-btn:hover { background-color: rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .json-copy-btn.copied { background-color: rgba(76, 175, 80, 0.15); color: #2e7d32; } /* Tool Use Message Styles */ .tool-use-message { display: flex; flex-direction: column; background-color: var(--surface-raised); border: 1px solid rgb(var(--accent-rgb) / 0.25); border-radius: 8px; margin: 0.5rem 0; overflow: hidden; animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Header */ .tool-use-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; background-color: rgb(var(--accent-rgb) / 0.1); transition: background-color 0.2s ease; } .tool-use-header:hover { background-color: rgb(var(--accent-rgb) / 0.16); } /* Tool icon */ .tool-use-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background-color: var(--accent-tint); border-radius: 6px; color: var(--accent-text); flex-shrink: 0; } /* Tool info */ .tool-use-info { display: flex; align-items: center; gap: 0.5rem; flex-grow: 1; min-width: 0; } .tool-name { font-family: var(--font-mono); font-weight: 600; color: var(--accent-text); font-size: 0.9rem; } .tool-name-description { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .tool-intent { font-size: 0.8rem; color: var(--text-secondary); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } .tool-status { font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: 4px; text-transform: uppercase; font-weight: 500; } .tool-status.completed { background-color: rgba(80, 200, 120, 0.2); color: #50c878; } .tool-status.running { background-color: rgba(255, 180, 0, 0.2); color: #ffb400; animation: pulse 1.5s infinite; } .tool-status.errored { background-color: rgba(220, 80, 80, 0.22); color: #ff6b6b; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Toggle chevron */ .tool-use-toggle { display: flex; align-items: center; color: var(--text-muted); } .tool-use-toggle .chevron { transition: transform 0.2s ease; } .tool-use-toggle .chevron.expanded { transform: rotate(180deg); } /* Timestamp */ .tool-timestamp { font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; } /* Details section (expanded) */ .tool-use-details { padding: 0 1rem 1rem; } .tool-section { margin-top: 0.75rem; } .tool-section-header { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 0.5rem; } .tool-section-content { background-color: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); overflow-x: auto; margin: 0; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; } .tool-output { color: #a0ffa0; } /* run_python inline script rendered as highlighted code (see ToolInputContent). Code keeps its real line structure (no wrap) and gets more vertical room than a generic JSON input blob. */ .tool-script-code { white-space: pre; max-height: 480px; } .tool-script-code code { font-family: inherit; font-size: inherit; background: transparent; padding: 0; color: var(--text); } /* Remaining run_python params (args/timeout) shown under the script */ .tool-script-params { margin-top: 0.5rem; } /* Syntax highlighting palette -- mirrors the chat markdown code blocks in Message.css so tool scripts read the same as fenced code in messages. */ .tool-section-content code .hljs-keyword, .tool-section-content code .hljs-selector-tag, .tool-section-content code .hljs-literal, .tool-section-content code .hljs-section, .tool-section-content code .hljs-link { color: #ff79c6; font-weight: 600; } .tool-section-content code .hljs-function .hljs-keyword { color: #e66aff; font-weight: 600; } .tool-section-content code .hljs-string, .tool-section-content code .hljs-doctag, .tool-section-content code .hljs-regexp, .tool-section-content code .hljs-addition, .tool-section-content code .hljs-attribute { color: #50fa7b; } .tool-section-content code .hljs-number, .tool-section-content code .hljs-built_in, .tool-section-content code .hljs-builtin-name, .tool-section-content code .hljs-symbol, .tool-section-content code .hljs-bullet { color: #ffb86c; } .tool-section-content code .hljs-title, .tool-section-content code .hljs-class .hljs-title, .tool-section-content code .hljs-type { color: #f1fa8c; font-weight: 600; } .tool-section-content code .hljs-comment, .tool-section-content code .hljs-quote, .tool-section-content code .hljs-deletion, .tool-section-content code .hljs-meta { color: #8b95b5; font-style: italic; } .tool-section-content code .hljs-variable, .tool-section-content code .hljs-template-variable, .tool-section-content code .hljs-attr { color: #ffb86c; } .tool-section-content code .hljs-name { color: #8be9fd; } .tool-section-content code .hljs-params { color: #f8f8f2; } /* Collapsed state - minimal, single-line appearance. Deliberately low contrast so a run of tool calls reads as quiet trace, not content; hover brings a row back up. */ .tool-use-message.collapsed { background-color: transparent; border: none; border-radius: 4px; margin: 0.125rem 0; opacity: 0.55; transition: opacity 0.2s ease; } .tool-use-message.collapsed:hover { opacity: 0.9; } .tool-use-message.collapsed .tool-use-header { padding: 0.25rem 0.5rem; gap: 0.5rem; background-color: transparent; } .tool-use-message.collapsed .tool-use-header:hover { background-color: var(--hover); } .tool-use-message.collapsed .tool-use-icon { width: 16px; height: 16px; background-color: transparent; border-radius: 3px; color: var(--accent-text); } .tool-use-message.collapsed .tool-use-icon svg { width: 12px; height: 12px; } .tool-use-message.collapsed .tool-name { font-size: 0.8rem; font-weight: 400; color: var(--accent-text); } .tool-use-message.collapsed .tool-name-description { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .tool-use-message.collapsed .tool-intent { font-size: 0.7rem; color: var(--text-secondary); max-width: 200px; } .tool-use-message.collapsed .tool-status { font-size: 0.6rem; padding: 0.1rem 0.3rem; } .tool-use-message.collapsed .tool-status.completed { background-color: transparent; color: rgba(80, 200, 120, 0.6); } .tool-use-message.collapsed .tool-status.running { background-color: transparent; color: rgba(255, 180, 0, 0.85); } .tool-use-message.collapsed .tool-status.errored { background-color: transparent; color: rgba(255, 107, 107, 0.9); } .tool-use-message.collapsed .tool-use-toggle { color: var(--text-muted); } .tool-use-message.collapsed .tool-use-toggle .chevron { width: 12px; height: 12px; } /* Light mode: only the semantic status colours and the syntax-highlighting palette need scheme-specific values -- chrome, accent and surfaces come from the design tokens, which already swap per scheme/theme. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .tool-output { color: #208020; } /* Light-mode syntax highlighting -- mirrors Message.css */ :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-keyword, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-selector-tag, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-literal, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-section, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-link { color: #d73a49; font-weight: 600; } :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-function .hljs-keyword { color: #6f42c1; font-weight: 600; } :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-string, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-doctag, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-regexp, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-addition, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-attribute { color: #22863a; } :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-number, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-built_in, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-builtin-name, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-symbol, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-bullet { color: #005cc5; } :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-title, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-class .hljs-title, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-type { color: #6f42c1; font-weight: 600; } :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-comment, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-quote, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-deletion, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-meta { color: #57606a; font-style: italic; } :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-variable, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-template-variable, :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-attr { color: #e36209; } :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-name { color: #005cc5; } :where(:root:not([data-theme="dark"])) .tool-section-content code .hljs-params { color: #24292e; } :where(:root:not([data-theme="dark"])) .tool-use-message.collapsed .tool-status.completed { background-color: transparent; color: rgba(32, 128, 32, 0.6); } :where(:root:not([data-theme="dark"])) .tool-use-message.collapsed .tool-status.running { background-color: transparent; color: rgba(180, 120, 0, 0.85); } :where(:root:not([data-theme="dark"])) .tool-use-message.collapsed .tool-status.errored { background-color: transparent; color: rgba(200, 40, 40, 0.9); } :where(:root:not([data-theme="dark"])) .tool-status.errored { background-color: rgba(220, 80, 80, 0.15); color: rgba(200, 40, 40, 0.95); } } :where(:root[data-theme="light"]) .tool-output { color: #208020; } /* Light-mode syntax highlighting -- mirrors Message.css */ :where(:root[data-theme="light"]) .tool-section-content code .hljs-keyword, :where(:root[data-theme="light"]) .tool-section-content code .hljs-selector-tag, :where(:root[data-theme="light"]) .tool-section-content code .hljs-literal, :where(:root[data-theme="light"]) .tool-section-content code .hljs-section, :where(:root[data-theme="light"]) .tool-section-content code .hljs-link { color: #d73a49; font-weight: 600; } :where(:root[data-theme="light"]) .tool-section-content code .hljs-function .hljs-keyword { color: #6f42c1; font-weight: 600; } :where(:root[data-theme="light"]) .tool-section-content code .hljs-string, :where(:root[data-theme="light"]) .tool-section-content code .hljs-doctag, :where(:root[data-theme="light"]) .tool-section-content code .hljs-regexp, :where(:root[data-theme="light"]) .tool-section-content code .hljs-addition, :where(:root[data-theme="light"]) .tool-section-content code .hljs-attribute { color: #22863a; } :where(:root[data-theme="light"]) .tool-section-content code .hljs-number, :where(:root[data-theme="light"]) .tool-section-content code .hljs-built_in, :where(:root[data-theme="light"]) .tool-section-content code .hljs-builtin-name, :where(:root[data-theme="light"]) .tool-section-content code .hljs-symbol, :where(:root[data-theme="light"]) .tool-section-content code .hljs-bullet { color: #005cc5; } :where(:root[data-theme="light"]) .tool-section-content code .hljs-title, :where(:root[data-theme="light"]) .tool-section-content code .hljs-class .hljs-title, :where(:root[data-theme="light"]) .tool-section-content code .hljs-type { color: #6f42c1; font-weight: 600; } :where(:root[data-theme="light"]) .tool-section-content code .hljs-comment, :where(:root[data-theme="light"]) .tool-section-content code .hljs-quote, :where(:root[data-theme="light"]) .tool-section-content code .hljs-deletion, :where(:root[data-theme="light"]) .tool-section-content code .hljs-meta { color: #57606a; font-style: italic; } :where(:root[data-theme="light"]) .tool-section-content code .hljs-variable, :where(:root[data-theme="light"]) .tool-section-content code .hljs-template-variable, :where(:root[data-theme="light"]) .tool-section-content code .hljs-attr { color: #e36209; } :where(:root[data-theme="light"]) .tool-section-content code .hljs-name { color: #005cc5; } :where(:root[data-theme="light"]) .tool-section-content code .hljs-params { color: #24292e; } :where(:root[data-theme="light"]) .tool-use-message.collapsed .tool-status.completed { background-color: transparent; color: rgba(32, 128, 32, 0.6); } :where(:root[data-theme="light"]) .tool-use-message.collapsed .tool-status.running { background-color: transparent; color: rgba(180, 120, 0, 0.85); } :where(:root[data-theme="light"]) .tool-use-message.collapsed .tool-status.errored { background-color: transparent; color: rgba(200, 40, 40, 0.9); } :where(:root[data-theme="light"]) .tool-status.errored { background-color: rgba(220, 80, 80, 0.15); color: rgba(200, 40, 40, 0.95); } /* Sub-agent child tool calls tree */ .sub-agent-children { padding: 0.25rem 0 0.25rem 1.5rem; border-left: 2px solid rgb(var(--accent-rgb) / 0.25); margin-left: 1.25rem; margin-bottom: 0.25rem; } .sub-agent-children-expanded { margin-top: 0.5rem; padding-bottom: 0.5rem; } .sub-agent-section { margin-bottom: 0.375rem; } .sub-agent-section:last-child { margin-bottom: 0; } .sub-agent-header { display: flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.25rem; color: var(--accent-text); font-size: 0.75rem; font-weight: 500; cursor: pointer; border-radius: 4px; transition: background-color 0.15s ease; } .sub-agent-header:hover { background-color: var(--hover); } .sub-agent-section-chevron { margin-left: auto; color: var(--text-muted); transition: transform 0.2s ease; flex-shrink: 0; } .sub-agent-section-chevron.expanded { transform: rotate(180deg); } .sub-agent-header svg { color: var(--accent-text); opacity: 0.8; flex-shrink: 0; } .sub-agent-name { font-weight: 600; color: var(--accent-text); } .sub-agent-header .tool-status { font-size: 0.6rem; padding: 0.1rem 0.25rem; } .sub-agent-tool-list { display: flex; flex-direction: column; gap: 0.125rem; padding-left: 0.5rem; border-left: 2px solid rgb(var(--accent-rgb) / 0.18); margin-left: 0.375rem; } .sub-agent-tool-item { display: flex; flex-direction: column; font-size: 0.7rem; opacity: 0.85; border-radius: 4px; overflow: hidden; } .sub-agent-tool-item.expanded { background-color: var(--hover); } .sub-agent-tool-item-header { display: flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.25rem; cursor: pointer; border-radius: 3px; transition: background-color 0.15s ease; } .sub-agent-tool-item-header:hover { background-color: var(--pressed); } .sub-agent-tool-item-header svg { color: var(--accent-text); opacity: 0.6; flex-shrink: 0; } .sub-agent-tool-name { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-text); font-weight: 400; } .sub-agent-tool-name-description { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .sub-agent-tool-intent { font-size: 0.65rem; color: var(--text-secondary); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .sub-agent-tool-chevron { margin-left: auto; color: var(--text-muted); transition: transform 0.2s ease; flex-shrink: 0; } .sub-agent-tool-chevron.expanded { transform: rotate(180deg); } .sub-agent-tool-item .tool-status { font-size: 0.55rem; padding: 0.05rem 0.2rem; } .sub-agent-tool-item .tool-status.completed { background-color: transparent; color: rgba(80, 200, 120, 0.75); } .sub-agent-tool-item .tool-status.running { background-color: transparent; color: rgba(255, 180, 0, 0.75); } .sub-agent-tool-item .tool-status.errored, .sub-agent-header .tool-status.errored { background-color: transparent; color: rgba(255, 107, 107, 0.85); } .sub-agent-tool-detail { padding: 0.25rem 0.5rem 0.5rem 1.25rem; } .sub-agent-tool-detail .tool-section { margin-top: 0.375rem; } .sub-agent-tool-detail .tool-section:first-child { margin-top: 0; } .sub-agent-tool-detail .tool-section-header { font-size: 0.65rem; margin-bottom: 0.25rem; } .sub-agent-tool-detail .tool-section-content { font-size: 0.7rem; padding: 0.5rem; max-height: 200px; } /* Nested (2nd-level) sub-agent node: rendered as a sibling of its 1st-level agent's leaf tool calls inside the same `.sub-agent-tool-list`, so the single indent + guide line of that list IS the one nesting step. The node itself adds no extra left indent/border (that would double the guide line); its OWN grandchild `.sub-agent-tool-list` provides the next level deeper. */ .nested-agent-node { margin-bottom: 0.25rem; } .nested-agent-node .sub-agent-tool-list { border-left-color: rgb(var(--accent-rgb) / 0.22); } .nested-agent-model { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent-text); padding: 0.05rem 0.25rem; border-radius: 3px; background-color: var(--accent-soft); font-weight: 400; white-space: nowrap; } .nested-agent-empty .sub-agent-tool-intent { padding: 0.2rem 0.25rem; opacity: 0.6; } /* Expanded nested-node body: grandchild tool calls plus the node's own prompt/response detail (reusing the leaf .sub-agent-tool-detail styling). */ .nested-agent-detail .sub-agent-tool-detail { padding-left: 0.5rem; } /* Child count badge */ .tool-child-count { font-size: 0.65rem; color: var(--accent-text); padding: 0.1rem 0.3rem; border-radius: 3px; background-color: var(--accent-soft); font-weight: 400; } /* When tool-use-message has children but is collapsed, keep some vertical space */ .tool-use-message.collapsed.has-children { margin-bottom: 0.25rem; } /* Light mode for the sub-agent tree: semantic status colours only. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .sub-agent-tool-item .tool-status.completed { color: rgba(32, 128, 32, 0.75); } :where(:root:not([data-theme="dark"])) .sub-agent-tool-item .tool-status.running { color: rgba(180, 120, 0, 0.75); } :where(:root:not([data-theme="dark"])) .sub-agent-tool-item .tool-status.errored, :where(:root:not([data-theme="dark"])) .sub-agent-header .tool-status.errored { color: rgba(200, 40, 40, 0.85); } :where(:root:not([data-theme="dark"])) .sub-agent-tool-detail .tool-output { color: #208020; } } :where(:root[data-theme="light"]) .sub-agent-tool-item .tool-status.completed { color: rgba(32, 128, 32, 0.75); } :where(:root[data-theme="light"]) .sub-agent-tool-item .tool-status.running { color: rgba(180, 120, 0, 0.75); } :where(:root[data-theme="light"]) .sub-agent-tool-item .tool-status.errored, :where(:root[data-theme="light"]) .sub-agent-header .tool-status.errored { color: rgba(200, 40, 40, 0.85); } :where(:root[data-theme="light"]) .sub-agent-tool-detail .tool-output { color: #208020; } .revise-feedback-form { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .revise-feedback-textarea { width: 100%; box-sizing: border-box; padding: 0.5rem 0.65rem; font-family: inherit; font-size: 0.85rem; line-height: 1.4; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.04); color: inherit; resize: vertical; min-height: 2.5rem; } .revise-feedback-textarea:focus { outline: none; border-color: rgba(217, 159, 52, 0.6); background-color: rgba(255, 255, 255, 0.06); } .revise-feedback-textarea:disabled { opacity: 0.6; cursor: not-allowed; } .revise-feedback-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .revise-feedback-btn { padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid transparent; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .revise-feedback-send { background-color: #d99f34; color: #1a1a1a; } .revise-feedback-send:hover:not(:disabled) { background-color: #c08c2c; } .revise-feedback-cancel { background-color: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, 0.2); } .revise-feedback-cancel:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.06); } .revise-feedback-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Persisted feedback line shown under the "Denied" status on collapsed * action-request cards and under denied requests in the Requests pane. */ .action-request-feedback, .request-feedback { margin-top: 0.25rem; font-size: 0.8rem; font-style: italic; opacity: 0.8; white-space: pre-wrap; word-break: break-word; } .action-request-feedback-label, .request-feedback-label { font-style: normal; font-weight: 600; margin-right: 0.25rem; } @media (prefers-color-scheme: light) { /* Surrounding card surfaces are #f0f0f8 / #fafafa, so the unfocused * input must go LIGHTER than the card (white-on-card) rather than the * usual darker-tint-on-white pattern used elsewhere. */ :where(:root:not([data-theme="dark"])) .revise-feedback-textarea { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .revise-feedback-textarea:focus { background-color: #ffffff; border-color: #d99f34; } } /* Surrounding card surfaces are #f0f0f8 / #fafafa, so the unfocused * input must go LIGHTER than the card (white-on-card) rather than the * usual darker-tint-on-white pattern used elsewhere. */ :where(:root[data-theme="light"]) .revise-feedback-textarea { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .revise-feedback-textarea:focus { background-color: #ffffff; border-color: #d99f34; } /* Spreadsheet diff table shown inside edit_spreadsheet approval cards. */ /* The generic preview fields are flex rows (key left, value right); the diff table needs the full card width, so its field stacks instead. Applies to both the chat card and the Requests pane variants. */ .action-request-preview-field.sheet-diff-field, .request-preview-field.sheet-diff-field { display: block; min-width: 0; } .sheet-diff-scroll { overflow-x: auto; margin-top: 0.5rem; max-width: 100%; } .sheet-diff-table { border-collapse: collapse; font-size: 0.8rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .sheet-diff-table th, .sheet-diff-table td { border: 1px solid #3a3a6a; padding: 0.25rem 0.5rem; text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } /* Row-number / column-letter headers, spreadsheet-style. */ .sheet-diff-corner, .sheet-diff-col-label, .sheet-diff-row-label { background-color: #24244a; color: rgba(255, 255, 255, 0.55); font-weight: 600; font-family: inherit; text-align: center; position: sticky; } .sheet-diff-row-label { left: 0; z-index: 1; } .sheet-diff-corner { left: 0; z-index: 2; } .sheet-diff-col-label.in-target, .sheet-diff-row-label.in-target { color: #a0a0ff; background-color: #2c2c5e; } /* Cells outside the replaced range: read-only context. */ .sheet-diff-cell.context { color: rgba(255, 255, 255, 0.45); background-color: rgba(255, 255, 255, 0.02); } /* Cells inside the replaced range whose value is not actually changing. */ .sheet-diff-cell.target.unchanged { color: rgba(255, 255, 255, 0.75); background-color: rgb(var(--accent-rgb) / 0.08); } /* Cells whose value changes: old value struck through, new value green. */ .sheet-diff-cell.target.changed { background-color: rgba(80, 200, 120, 0.12); } .sheet-diff-old { color: rgba(255, 120, 120, 0.85); text-decoration: line-through; margin-right: 0.5rem; } .sheet-diff-new { color: #7fdc9a; font-weight: 600; } /* Legend under the table. */ .sheet-diff-legend { display: flex; gap: 1rem; margin-top: 0.4rem; font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); } .sheet-diff-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; } .sheet-diff-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid #3a3a6a; } .sheet-diff-swatch.changed { background-color: rgba(80, 200, 120, 0.35); } .sheet-diff-swatch.unchanged { background-color: rgb(var(--accent-rgb) / 0.25); } .sheet-diff-swatch.context { background-color: rgba(255, 255, 255, 0.06); } /* Light mode support (base styles above are dark-first, matching ActionRequestMessage.css / RequestsView.css). */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .sheet-diff-table th, :where(:root:not([data-theme="dark"])) .sheet-diff-table td { border-color: #d8d8e4; } :where(:root:not([data-theme="dark"])) .sheet-diff-corner, :where(:root:not([data-theme="dark"])) .sheet-diff-col-label, :where(:root:not([data-theme="dark"])) .sheet-diff-row-label { background-color: #ececf4; color: rgba(0, 0, 0, 0.55); } :where(:root:not([data-theme="dark"])) .sheet-diff-col-label.in-target, :where(:root:not([data-theme="dark"])) .sheet-diff-row-label.in-target { color: #4a4ac0; background-color: #dcdcf0; } :where(:root:not([data-theme="dark"])) .sheet-diff-cell.context { color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.02); } :where(:root:not([data-theme="dark"])) .sheet-diff-cell.target.unchanged { color: rgba(0, 0, 0, 0.75); background-color: rgb(var(--accent-rgb) / 0.08); } :where(:root:not([data-theme="dark"])) .sheet-diff-cell.target.changed { background-color: rgba(26, 127, 55, 0.08); } :where(:root:not([data-theme="dark"])) .sheet-diff-old { color: #c03030; } :where(:root:not([data-theme="dark"])) .sheet-diff-new { color: #1a7f37; } :where(:root:not([data-theme="dark"])) .sheet-diff-legend { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .sheet-diff-swatch { border-color: #d8d8e4; } :where(:root:not([data-theme="dark"])) .sheet-diff-swatch.changed { background-color: rgba(26, 127, 55, 0.25); } :where(:root:not([data-theme="dark"])) .sheet-diff-swatch.unchanged { background-color: rgb(var(--accent-rgb) / 0.2); } :where(:root:not([data-theme="dark"])) .sheet-diff-swatch.context { background-color: rgba(0, 0, 0, 0.05); } } :where(:root[data-theme="light"]) .sheet-diff-table th, :where(:root[data-theme="light"]) .sheet-diff-table td { border-color: #d8d8e4; } :where(:root[data-theme="light"]) .sheet-diff-corner, :where(:root[data-theme="light"]) .sheet-diff-col-label, :where(:root[data-theme="light"]) .sheet-diff-row-label { background-color: #ececf4; color: rgba(0, 0, 0, 0.55); } :where(:root[data-theme="light"]) .sheet-diff-col-label.in-target, :where(:root[data-theme="light"]) .sheet-diff-row-label.in-target { color: #4a4ac0; background-color: #dcdcf0; } :where(:root[data-theme="light"]) .sheet-diff-cell.context { color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.02); } :where(:root[data-theme="light"]) .sheet-diff-cell.target.unchanged { color: rgba(0, 0, 0, 0.75); background-color: rgb(var(--accent-rgb) / 0.08); } :where(:root[data-theme="light"]) .sheet-diff-cell.target.changed { background-color: rgba(26, 127, 55, 0.08); } :where(:root[data-theme="light"]) .sheet-diff-old { color: #c03030; } :where(:root[data-theme="light"]) .sheet-diff-new { color: #1a7f37; } :where(:root[data-theme="light"]) .sheet-diff-legend { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .sheet-diff-swatch { border-color: #d8d8e4; } :where(:root[data-theme="light"]) .sheet-diff-swatch.changed { background-color: rgba(26, 127, 55, 0.25); } :where(:root[data-theme="light"]) .sheet-diff-swatch.unchanged { background-color: rgb(var(--accent-rgb) / 0.2); } :where(:root[data-theme="light"]) .sheet-diff-swatch.context { background-color: rgba(0, 0, 0, 0.05); } /* Line diff shown inside edit_skill approval cards (content edits). */ /* The generic preview fields are flex rows (key left, value right); the diff needs the full card width, so its field stacks instead. Applies to both the chat card and the Requests pane variants. */ .action-request-preview-field.skill-diff-field, .request-preview-field.skill-diff-field { display: block; min-width: 0; } .skill-diff-scroll { overflow-x: auto; margin-top: 0.5rem; max-width: 100%; border: 1px solid #3a3a6a; border-radius: 4px; } .skill-diff-table { border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width: 100%; } .skill-diff-table td { padding: 0.1rem 0.45rem; vertical-align: top; } /* Old / new line-number gutters. */ .skill-diff-gutter { color: rgba(255, 255, 255, 0.35); text-align: right; user-select: none; min-width: 2.2em; border-right: 1px solid #3a3a6a; background-color: rgba(255, 255, 255, 0.03); } .skill-diff-marker { user-select: none; width: 1em; text-align: center; } .skill-diff-text { white-space: pre-wrap; word-break: break-word; width: 100%; } .skill-diff-line.context .skill-diff-text { color: rgba(255, 255, 255, 0.6); } .skill-diff-line.del { background-color: rgba(255, 100, 100, 0.1); } .skill-diff-line.del .skill-diff-marker, .skill-diff-line.del .skill-diff-text { color: rgba(255, 140, 140, 0.9); } .skill-diff-line.add { background-color: rgba(80, 200, 120, 0.12); } .skill-diff-line.add .skill-diff-marker, .skill-diff-line.add .skill-diff-text { color: #7fdc9a; } /* "N unchanged lines" separators between collapsed hunks. */ .skill-diff-separator td { color: rgba(255, 255, 255, 0.4); text-align: center; font-size: 0.72rem; padding: 0.2rem 0.5rem; background-color: rgba(255, 255, 255, 0.03); border-top: 1px solid #3a3a6a; border-bottom: 1px solid #3a3a6a; } .skill-diff-table tr:first-child.skill-diff-separator td { border-top: none; } .skill-diff-table tr:last-child.skill-diff-separator td { border-bottom: none; } /* Footer: +N / -M stats plus the expand toggle. */ .skill-diff-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); } .skill-diff-stat-add { color: #7fdc9a; } .skill-diff-stat-del { color: rgba(255, 140, 140, 0.9); } .skill-diff-toggle { background: none; border: 1px solid #3a3a6a; border-radius: 4px; color: rgba(255, 255, 255, 0.65); font-size: 0.72rem; padding: 0.15rem 0.5rem; cursor: pointer; } .skill-diff-toggle:hover { color: rgba(255, 255, 255, 0.9); border-color: #55558a; } /* Light mode support (base styles above are dark-first, matching ActionRequestMessage.css / RequestsView.css). */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .skill-diff-scroll { border-color: #d8d8e4; } :where(:root:not([data-theme="dark"])) .skill-diff-gutter { color: rgba(0, 0, 0, 0.35); border-right-color: #d8d8e4; background-color: rgba(0, 0, 0, 0.02); } :where(:root:not([data-theme="dark"])) .skill-diff-line.context .skill-diff-text { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .skill-diff-line.del { background-color: rgba(192, 48, 48, 0.08); } :where(:root:not([data-theme="dark"])) .skill-diff-line.del .skill-diff-marker, :where(:root:not([data-theme="dark"])) .skill-diff-line.del .skill-diff-text { color: #c03030; } :where(:root:not([data-theme="dark"])) .skill-diff-line.add { background-color: rgba(26, 127, 55, 0.08); } :where(:root:not([data-theme="dark"])) .skill-diff-line.add .skill-diff-marker, :where(:root:not([data-theme="dark"])) .skill-diff-line.add .skill-diff-text { color: #1a7f37; } :where(:root:not([data-theme="dark"])) .skill-diff-separator td { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.03); border-top-color: #d8d8e4; border-bottom-color: #d8d8e4; } :where(:root:not([data-theme="dark"])) .skill-diff-footer { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .skill-diff-stat-add { color: #1a7f37; } :where(:root:not([data-theme="dark"])) .skill-diff-stat-del { color: #c03030; } :where(:root:not([data-theme="dark"])) .skill-diff-toggle { border-color: #d8d8e4; color: rgba(0, 0, 0, 0.65); } :where(:root:not([data-theme="dark"])) .skill-diff-toggle:hover { color: rgba(0, 0, 0, 0.9); border-color: #b8b8d0; } } :where(:root[data-theme="light"]) .skill-diff-scroll { border-color: #d8d8e4; } :where(:root[data-theme="light"]) .skill-diff-gutter { color: rgba(0, 0, 0, 0.35); border-right-color: #d8d8e4; background-color: rgba(0, 0, 0, 0.02); } :where(:root[data-theme="light"]) .skill-diff-line.context .skill-diff-text { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .skill-diff-line.del { background-color: rgba(192, 48, 48, 0.08); } :where(:root[data-theme="light"]) .skill-diff-line.del .skill-diff-marker, :where(:root[data-theme="light"]) .skill-diff-line.del .skill-diff-text { color: #c03030; } :where(:root[data-theme="light"]) .skill-diff-line.add { background-color: rgba(26, 127, 55, 0.08); } :where(:root[data-theme="light"]) .skill-diff-line.add .skill-diff-marker, :where(:root[data-theme="light"]) .skill-diff-line.add .skill-diff-text { color: #1a7f37; } :where(:root[data-theme="light"]) .skill-diff-separator td { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.03); border-top-color: #d8d8e4; border-bottom-color: #d8d8e4; } :where(:root[data-theme="light"]) .skill-diff-footer { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .skill-diff-stat-add { color: #1a7f37; } :where(:root[data-theme="light"]) .skill-diff-stat-del { color: #c03030; } :where(:root[data-theme="light"]) .skill-diff-toggle { border-color: #d8d8e4; color: rgba(0, 0, 0, 0.65); } :where(:root[data-theme="light"]) .skill-diff-toggle:hover { color: rgba(0, 0, 0, 0.9); border-color: #b8b8d0; } /* PDF viewer: two-pane layout (thumbnail rail + main page scroller) inside the file viewer modal content area. */ .pdf-viewer { display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden; } /* Thumbnail rail */ .pdf-thumbnail-rail { width: 160px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid rgba(255, 255, 255, 0.1); background-color: #222222; padding: 0.75rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .pdf-thumbnail { background: none; border: 2px solid transparent; border-radius: 6px; padding: 0.375rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; flex-shrink: 0; transition: background-color 0.15s, border-color 0.15s; } .pdf-thumbnail:hover { background-color: rgba(255, 255, 255, 0.06); } .pdf-thumbnail-active { border-color: #4da6ff; background-color: rgba(77, 166, 255, 0.12); } /* White box doubles as the placeholder until the lazy thumbnail render lands */ .pdf-thumbnail-canvas-wrap { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; } .pdf-thumbnail-canvas-wrap canvas { position: absolute; top: 0; left: 0; } .pdf-thumbnail-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); } .pdf-thumbnail-active .pdf-thumbnail-label { color: #4da6ff; } /* Main page scroller */ .pdf-main-view { flex: 1; min-width: 0; overflow: auto; position: relative; /* offsetParent for page containers (scrollToPage) */ background-color: #1a1a1a; padding: 16px 24px; /* keep in sync with PAGE_GAP / MAIN_PADDING_X in PdfViewer.tsx */ display: flex; flex-direction: column; align-items: center; gap: 16px; outline: none; box-sizing: border-box; } /* PDF pages are white regardless of theme; the shadow makes them read as sheets on the backdrop. */ .pdf-page { position: relative; background-color: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); flex-shrink: 0; overflow: hidden; } /* Shows through the (transparent) canvas until its opaque render lands */ .pdf-page-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(0, 0, 0, 0.3); font-size: 0.875rem; border: 1px solid rgba(0, 0, 0, 0.08); box-sizing: border-box; } .pdf-page-canvas { position: absolute; top: 0; left: 0; } .pdf-page-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c62828; font-size: 0.875rem; } /* Light mode */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .pdf-thumbnail-rail { border-right-color: rgba(0, 0, 0, 0.1); background-color: #e8e8e8; } :where(:root:not([data-theme="dark"])) .pdf-thumbnail:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .pdf-thumbnail-active { border-color: #1a73e8; background-color: rgba(26, 115, 232, 0.1); } :where(:root:not([data-theme="dark"])) .pdf-thumbnail-canvas-wrap { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .pdf-thumbnail-label { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .pdf-thumbnail-active .pdf-thumbnail-label { color: #1a73e8; } :where(:root:not([data-theme="dark"])) .pdf-main-view { background-color: #f0f0f0; } :where(:root:not([data-theme="dark"])) .pdf-page { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .pdf-page-error { color: #d32f2f; } } :where(:root[data-theme="light"]) .pdf-thumbnail-rail { border-right-color: rgba(0, 0, 0, 0.1); background-color: #e8e8e8; } :where(:root[data-theme="light"]) .pdf-thumbnail:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .pdf-thumbnail-active { border-color: #1a73e8; background-color: rgba(26, 115, 232, 0.1); } :where(:root[data-theme="light"]) .pdf-thumbnail-canvas-wrap { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .pdf-thumbnail-label { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .pdf-thumbnail-active .pdf-thumbnail-label { color: #1a73e8; } :where(:root[data-theme="light"]) .pdf-main-view { background-color: #f0f0f0; } :where(:root[data-theme="light"]) .pdf-page { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .pdf-page-error { color: #d32f2f; } /* Import highlight.js theme for rendered-markdown code blocks (idempotent -- also imported by Message.css; duplicate @import of the same sheet is harmless) */ pre code.hljs { display: block; overflow-x: auto; padding: 1em } code.hljs { padding: 3px 5px } /* Atom One Dark by Daniel Gamage Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax base: #282c34 mono-1: #abb2bf mono-2: #818896 mono-3: #5c6370 hue-1: #56b6c2 hue-2: #61aeee hue-3: #c678dd hue-4: #98c379 hue-5: #e06c75 hue-5-2: #be5046 hue-6: #d19a66 hue-6-2: #e6c07b */ .hljs { color: #abb2bf; background: #282c34 } .hljs-comment, .hljs-quote { color: #5c6370; font-style: italic } .hljs-doctag, .hljs-keyword, .hljs-formula { color: #c678dd } .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst { color: #e06c75 } .hljs-literal { color: #56b6c2 } .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: #98c379 } .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { color: #d19a66 } .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title { color: #61aeee } .hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title { color: #e6c07b } .hljs-emphasis { font-style: italic } .hljs-strong { font-weight: bold } .hljs-link { text-decoration: underline } /* File Viewer Modal overlay */ .file-viewer-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container */ .file-viewer-modal { background-color: #2a2a2a; border-radius: 12px; width: 85vw; height: 85vh; max-width: 85vw; max-height: 85vh; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; display: flex; flex-direction: column; } /* Header */ .file-viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .file-viewer-title { margin: 0; font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .file-viewer-title-group { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .file-viewer-image-meta { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); white-space: nowrap; flex-shrink: 0; } .file-viewer-download-button { background: none; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.375rem 0.75rem; cursor: pointer; color: rgba(255, 255, 255, 0.7); border-radius: 6px; display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; flex-shrink: 0; transition: color 0.15s, background-color 0.15s, border-color 0.15s; } .file-viewer-download-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } .file-viewer-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .file-viewer-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Content area */ .file-viewer-content { flex: 1; overflow: auto; min-height: 0; } /* PDF branch: the PdfViewer child owns scrolling (two independent scroll areas), so the content div must not scroll itself. */ .file-viewer-content--pdf { overflow: hidden; display: flex; } .file-viewer-content--pdf .file-viewer-loading, .file-viewer-content--pdf .file-viewer-error { flex: 1; } .file-viewer-pre { margin: 0; padding: 1.25rem 1.5rem; white-space: pre; overflow-x: auto; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.87); background-color: #222222; min-height: 100%; box-sizing: border-box; } /* Image display */ .file-viewer-image-container { display: flex; align-items: center; justify-content: center; height: 100%; padding: 1.25rem 1.5rem; box-sizing: border-box; background-color: #1a1a1a; background-image: linear-gradient(45deg, #222 25%, transparent 25%), linear-gradient(-45deg, #222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222 75%), linear-gradient(-45deg, transparent 75%, #222 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; } .file-viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; } .file-viewer-image-hidden { visibility: hidden; position: absolute; } /* Loading state */ .file-viewer-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, 0.5); font-size: 0.9375rem; } /* Error state */ .file-viewer-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; height: 100%; padding: 2rem; color: #ff6b6b; font-size: 0.9375rem; text-align: center; } .file-viewer-error-icon { color: #ff6b6b; opacity: 0.85; } .file-viewer-error-message { max-width: 32rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); } .file-viewer-error-download { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; padding: 0.4rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.9); font-size: 0.875rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .file-viewer-error-download:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); } /* CSV preview table (styling adapted from TableViewerModal.css so the file preview matches the project-tables browser; kept local rather than importing the sibling modal's stylesheet, matching the markdown/PDF integration pattern) */ .file-viewer-csv-wrapper { overflow-x: auto; min-height: 100%; } .file-viewer-csv-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .file-viewer-csv-table thead { position: sticky; top: 0; z-index: 1; } .file-viewer-csv-table th { background-color: #333; color: rgba(255, 255, 255, 0.87); font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid rgba(255, 255, 255, 0.15); white-space: nowrap; } .file-viewer-csv-table th.sortable { cursor: pointer; user-select: none; } .file-viewer-csv-table th.sortable:hover { background-color: #3a3a3a; } .file-viewer-csv-table th.sorted { color: #ffffff; } .file-viewer-csv-table td { padding: 0.375rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.87); white-space: nowrap; max-width: 400px; overflow: hidden; text-overflow: ellipsis; } .file-viewer-csv-table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); } .file-viewer-csv-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); } /* Footer note shown when a large CSV is truncated to the render cap */ .file-viewer-csv-note { padding: 0.625rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); flex-shrink: 0; } /* Save to Google Drive button (same style as download button) */ .file-viewer-gdrive-button { background: none; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.375rem 0.75rem; cursor: pointer; color: rgba(255, 255, 255, 0.7); border-radius: 6px; display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; flex-shrink: 0; transition: color 0.15s, background-color 0.15s, border-color 0.15s; } .file-viewer-gdrive-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } /* Markdown rendered/raw sliding switch (standard track + knob) */ .file-viewer-md-switch { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; flex-shrink: 0; user-select: none; } /* Visually-hidden native checkbox drives the switch state */ .file-viewer-md-switch-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .file-viewer-md-switch-track { position: relative; display: inline-block; width: 34px; height: 18px; border-radius: 999px; background-color: var(--border-strong); transition: background-color 0.15s; flex-shrink: 0; } .file-viewer-md-switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background-color: var(--accent-contrast); transition: transform 0.15s; } .file-viewer-md-switch-input:checked + .file-viewer-md-switch-track { background-color: var(--accent); } .file-viewer-md-switch-input:checked + .file-viewer-md-switch-track .file-viewer-md-switch-knob { transform: translateX(16px); } .file-viewer-md-switch-input:focus-visible + .file-viewer-md-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } .file-viewer-md-switch-label { font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; } /* Rendered markdown container */ .file-viewer-markdown { padding: 1.25rem 1.5rem; max-width: 860px; margin: 0 auto; font-size: 0.9375rem; line-height: 1.65; color: rgba(255, 255, 255, 0.87); box-sizing: border-box; } .file-viewer-markdown h1, .file-viewer-markdown h2, .file-viewer-markdown h3, .file-viewer-markdown h4, .file-viewer-markdown h5, .file-viewer-markdown h6 { margin-top: 1.25em; margin-bottom: 0.5em; font-weight: 600; line-height: 1.25; } .file-viewer-markdown h1:first-child, .file-viewer-markdown h2:first-child, .file-viewer-markdown h3:first-child, .file-viewer-markdown h4:first-child, .file-viewer-markdown h5:first-child, .file-viewer-markdown h6:first-child { margin-top: 0; } .file-viewer-markdown h1 { font-size: 1.7em; padding-bottom: 0.3em; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .file-viewer-markdown h2 { font-size: 1.4em; padding-bottom: 0.3em; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .file-viewer-markdown h3 { font-size: 1.2em; } .file-viewer-markdown p { margin: 0.75em 0; } .file-viewer-markdown p:first-child { margin-top: 0; } .file-viewer-markdown a { color: var(--accent-text); text-decoration: underline; text-decoration-style: dotted; } .file-viewer-markdown a:hover { text-decoration-style: solid; } .file-viewer-markdown pre { margin: 0.75em 0; padding: 1rem; background-color: rgb(var(--accent-rgb) / 0.08); border: 1px solid rgb(var(--accent-rgb) / 0.18); border-radius: 6px; overflow-x: auto; line-height: 1.55; } .file-viewer-markdown pre code { background-color: transparent; padding: 0; border-radius: 0; font-size: 0.875em; font-family: var(--font-mono); color: var(--text); } .file-viewer-markdown code { background-color: var(--accent-soft); padding: 0.2em 0.4em; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85em; color: var(--accent-text); } .file-viewer-markdown ul, .file-viewer-markdown ol { margin: 0.75em 0; padding-left: 2em; } .file-viewer-markdown li { margin: 0.25em 0; } .file-viewer-markdown ul ul, .file-viewer-markdown ol ol, .file-viewer-markdown ul ol, .file-viewer-markdown ol ul { margin: 0.25em 0; } .file-viewer-markdown blockquote { margin: 0.75em 0; padding: 0.5em 1em; border-left: 4px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.7); } .file-viewer-markdown blockquote p { margin: 0.5em 0; } .file-viewer-markdown hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.15); margin: 1.5em 0; } .file-viewer-markdown img { max-width: 100%; } .file-viewer-markdown table { border-collapse: collapse; margin: 0.75em 0; } .file-viewer-markdown table th, .file-viewer-markdown table td { border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.5em 0.75em; text-align: left; } .file-viewer-markdown table th { background-color: rgba(255, 255, 255, 0.05); font-weight: 600; } .file-viewer-markdown table tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); } /* Save to Drive dialog overlay */ .save-to-drive-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; border-radius: 12px; z-index: 10; } .save-to-drive-dialog { background-color: #333; border-radius: 10px; padding: 1.5rem; width: 400px; max-width: 90%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .save-to-drive-title { margin: 0 0 1rem 0; font-size: 1rem; font-weight: 600; color: rgba(255, 255, 255, 0.87); } .save-to-drive-label { display: block; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.375rem; } .save-to-drive-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background-color: #222; color: rgba(255, 255, 255, 0.87); font-size: 0.875rem; outline: none; box-sizing: border-box; transition: border-color 0.15s; } .save-to-drive-input:focus { border-color: rgba(255, 255, 255, 0.4); } .save-to-drive-input:disabled { opacity: 0.5; } .save-to-drive-error { margin-top: 0.5rem; font-size: 0.8125rem; color: #ff6b6b; } .save-to-drive-success { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.87); } .save-to-drive-link { color: #4da6ff; text-decoration: none; font-size: 0.875rem; } .save-to-drive-link:hover { text-decoration: underline; } .save-to-drive-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } .save-to-drive-btn { padding: 0.4375rem 1rem; border-radius: 6px; font-size: 0.8125rem; cursor: pointer; border: none; transition: background-color 0.15s, opacity 0.15s; } .save-to-drive-btn:disabled { opacity: 0.5; cursor: not-allowed; } .save-to-drive-btn-primary { background-color: #4da6ff; color: #fff; } .save-to-drive-btn-primary:hover:not(:disabled) { background-color: #3d96ef; } .save-to-drive-btn-secondary { background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); } .save-to-drive-btn-secondary:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.15); } /* Light mode */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .file-viewer-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .file-viewer-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .file-viewer-title { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .file-viewer-image-meta { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .file-viewer-download-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .file-viewer-download-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .file-viewer-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .file-viewer-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .file-viewer-pre { color: #1a1a1a; background-color: #f5f5f5; } :where(:root:not([data-theme="dark"])) .file-viewer-loading { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .file-viewer-error { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .file-viewer-error-icon { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .file-viewer-error-message { color: rgba(0, 0, 0, 0.75); } :where(:root:not([data-theme="dark"])) .file-viewer-error-download { border-color: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .file-viewer-error-download:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.35); } :where(:root:not([data-theme="dark"])) .file-viewer-image-container { background-color: #f0f0f0; background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; } :where(:root:not([data-theme="dark"])) .file-viewer-gdrive-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .file-viewer-gdrive-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .file-viewer-markdown { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .file-viewer-markdown h1, :where(:root:not([data-theme="dark"])) .file-viewer-markdown h2 { border-bottom-color: rgba(0, 0, 0, 0.12); } :where(:root:not([data-theme="dark"])) .file-viewer-markdown pre { background-color: rgb(var(--accent-rgb) / 0.05); border-color: rgb(var(--accent-rgb) / 0.15); } :where(:root:not([data-theme="dark"])) .file-viewer-markdown blockquote { border-left-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.65); } :where(:root:not([data-theme="dark"])) .file-viewer-markdown hr { border-top-color: rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .file-viewer-markdown table th, :where(:root:not([data-theme="dark"])) .file-viewer-markdown table td { border-color: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .file-viewer-markdown table th { background-color: rgba(0, 0, 0, 0.04); } :where(:root:not([data-theme="dark"])) .file-viewer-markdown table tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); } :where(:root:not([data-theme="dark"])) .file-viewer-csv-table th { background-color: #f0f0f0; color: #1a1a1a; border-bottom-color: rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .file-viewer-csv-table th.sortable:hover { background-color: #e6e6e6; } :where(:root:not([data-theme="dark"])) .file-viewer-csv-table th.sorted { color: #000000; } :where(:root:not([data-theme="dark"])) .file-viewer-csv-table td { color: #1a1a1a; border-bottom-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .file-viewer-csv-table tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); } :where(:root:not([data-theme="dark"])) .file-viewer-csv-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root:not([data-theme="dark"])) .file-viewer-csv-note { border-top-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .save-to-drive-dialog { background-color: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .save-to-drive-title { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .save-to-drive-label { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .save-to-drive-input { background-color: #f5f5f5; border-color: rgba(0, 0, 0, 0.2); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .save-to-drive-input:focus { border-color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .save-to-drive-error { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .save-to-drive-success { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .save-to-drive-link { color: #1a73e8; } :where(:root:not([data-theme="dark"])) .save-to-drive-btn-secondary { background-color: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .save-to-drive-btn-secondary:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.1); } } :where(:root[data-theme="light"]) .file-viewer-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .file-viewer-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .file-viewer-title { color: #1a1a1a; } :where(:root[data-theme="light"]) .file-viewer-image-meta { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .file-viewer-download-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .file-viewer-download-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .file-viewer-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .file-viewer-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .file-viewer-pre { color: #1a1a1a; background-color: #f5f5f5; } :where(:root[data-theme="light"]) .file-viewer-loading { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .file-viewer-error { color: #d32f2f; } :where(:root[data-theme="light"]) .file-viewer-error-icon { color: #d32f2f; } :where(:root[data-theme="light"]) .file-viewer-error-message { color: rgba(0, 0, 0, 0.75); } :where(:root[data-theme="light"]) .file-viewer-error-download { border-color: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .file-viewer-error-download:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.35); } :where(:root[data-theme="light"]) .file-viewer-image-container { background-color: #f0f0f0; background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; } :where(:root[data-theme="light"]) .file-viewer-gdrive-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .file-viewer-gdrive-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .file-viewer-markdown { color: #1a1a1a; } :where(:root[data-theme="light"]) .file-viewer-markdown h1, :where(:root[data-theme="light"]) .file-viewer-markdown h2 { border-bottom-color: rgba(0, 0, 0, 0.12); } :where(:root[data-theme="light"]) .file-viewer-markdown pre { background-color: rgb(var(--accent-rgb) / 0.05); border-color: rgb(var(--accent-rgb) / 0.15); } :where(:root[data-theme="light"]) .file-viewer-markdown blockquote { border-left-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.65); } :where(:root[data-theme="light"]) .file-viewer-markdown hr { border-top-color: rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .file-viewer-markdown table th, :where(:root[data-theme="light"]) .file-viewer-markdown table td { border-color: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .file-viewer-markdown table th { background-color: rgba(0, 0, 0, 0.04); } :where(:root[data-theme="light"]) .file-viewer-markdown table tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); } :where(:root[data-theme="light"]) .file-viewer-csv-table th { background-color: #f0f0f0; color: #1a1a1a; border-bottom-color: rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .file-viewer-csv-table th.sortable:hover { background-color: #e6e6e6; } :where(:root[data-theme="light"]) .file-viewer-csv-table th.sorted { color: #000000; } :where(:root[data-theme="light"]) .file-viewer-csv-table td { color: #1a1a1a; border-bottom-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .file-viewer-csv-table tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); } :where(:root[data-theme="light"]) .file-viewer-csv-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root[data-theme="light"]) .file-viewer-csv-note { border-top-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .save-to-drive-dialog { background-color: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .save-to-drive-title { color: #1a1a1a; } :where(:root[data-theme="light"]) .save-to-drive-label { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .save-to-drive-input { background-color: #f5f5f5; border-color: rgba(0, 0, 0, 0.2); color: #1a1a1a; } :where(:root[data-theme="light"]) .save-to-drive-input:focus { border-color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .save-to-drive-error { color: #d32f2f; } :where(:root[data-theme="light"]) .save-to-drive-success { color: #1a1a1a; } :where(:root[data-theme="light"]) .save-to-drive-link { color: #1a73e8; } :where(:root[data-theme="light"]) .save-to-drive-btn-secondary { background-color: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .save-to-drive-btn-secondary:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.1); } /* New Folder Modal overlay */ .new-folder-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container */ .new-folder-modal { background-color: #2a2a2a; border-radius: 12px; width: 440px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; } @keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Header */ .new-folder-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .new-folder-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; } .new-folder-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .new-folder-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Body */ .new-folder-body { padding: 1.5rem; } .new-folder-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.8); } .new-folder-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color 0.15s; box-sizing: border-box; } .new-folder-input:focus { border-color: var(--accent); } .new-folder-input:disabled { opacity: 0.6; } .new-folder-error { margin-top: 0.5rem; padding: 0.5rem 0.75rem; background-color: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); border-radius: 6px; color: #ff6b6b; font-size: 0.8125rem; } /* Actions */ .new-folder-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; } .new-folder-cancel-button { padding: 0.5rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: none; color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; cursor: pointer; transition: background-color 0.15s; } .new-folder-cancel-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.05); } .new-folder-create-button { padding: 0.5rem 1.25rem; border: 1px solid transparent; border-radius: 8px; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s; } .new-folder-create-button:hover:not(:disabled) { background-color: var(--accent-hover); } .new-folder-create-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Light mode */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .new-folder-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .new-folder-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .new-folder-header h2 { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .new-folder-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .new-folder-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .new-folder-label { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .new-folder-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .new-folder-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root:not([data-theme="dark"])) .new-folder-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .new-folder-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } } :where(:root[data-theme="light"]) .new-folder-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .new-folder-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .new-folder-header h2 { color: #1a1a1a; } :where(:root[data-theme="light"]) .new-folder-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .new-folder-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .new-folder-label { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .new-folder-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .new-folder-error { background-color: rgba(211, 47, 47, 0.05); border-color: rgba(211, 47, 47, 0.3); color: #d32f2f; } :where(:root[data-theme="light"]) .new-folder-cancel-button { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .new-folder-cancel-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.03); } /* File Browser container */ .file-browser { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; background-color: transparent; position: relative; } .file-browser.drag-over { background-color: rgb(var(--accent-rgb) / 0.1); } /* Header section */ .file-browser-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem 0.5rem; } .file-browser-header h3 { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .file-browser-header-actions { display: flex; align-items: center; gap: 4px; } .refresh-button, .hidden-toggle-button { background: transparent; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .refresh-button:hover:not(:disabled), .hidden-toggle-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } .refresh-button:disabled, .hidden-toggle-button:disabled { opacity: 0.4; cursor: not-allowed; } /* Active (pressed) state when hidden files are being shown. */ .hidden-toggle-button.active { background-color: rgb(var(--accent-rgb) / 0.2); color: rgba(255, 255, 255, 0.87); } /* Navigation bar */ .file-browser-nav { display: flex; align-items: center; padding: 0 0.5rem 0.25rem; gap: 4px; } .nav-button { background: transparent; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .nav-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } .nav-button:disabled { opacity: 0.4; cursor: not-allowed; } .current-path { flex: 1; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); padding: 0 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; } /* Actions section */ .file-browser-actions { padding: 0.5rem 0.75rem 0.75rem; border-bottom: 1px solid var(--border); } /* Action buttons row -- splits the actions bar into two equal halves */ .file-browser-action-buttons { display: flex; gap: 0.5rem; width: 100%; } .action-button { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; border-radius: 6px; border: 1px solid transparent; padding: 0.5em 0.75em; font-size: 0.875em; font-weight: 500; font-family: inherit; cursor: pointer; transition: background-color 0.25s; } .action-button .action-button-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .action-button:disabled { opacity: 0.6; cursor: not-allowed; } /* Primary (Upload Files) -- same light accent tint as the user chat bubbles */ .upload-button { background-color: var(--accent-tint); color: var(--text); } .upload-button:hover:not(:disabled) { background-color: var(--accent-tint-strong); } .upload-button:disabled { opacity: 0.6; cursor: not-allowed; } /* Secondary (New Folder) -- outline variant so the two buttons are visually distinct but still equal in weight */ .new-folder-button { background-color: transparent; color: rgba(255, 255, 255, 0.87); border-color: rgba(255, 255, 255, 0.2); } .new-folder-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); } /* Upload progress bar */ .upload-progress-bar { width: 100%; height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; margin-top: 8px; overflow: hidden; } .upload-progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.2s ease; } /* Error display */ .file-browser-error { padding: 0.75rem; color: #ff6b6b; font-size: 0.75rem; text-align: center; background-color: rgba(255, 107, 107, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .file-browser-error .error-summary { font-weight: 500; margin-bottom: 4px; } .file-browser-error .error-list { list-style: none; margin: 0; padding: 0; text-align: left; max-height: 120px; overflow-y: auto; } .file-browser-error .error-list li { padding: 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Loading state */ .file-browser-loading { padding: 2rem 1rem; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; } /* Empty state */ .file-browser-empty { padding: 2rem 1rem; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; } .file-browser-empty p { margin: 0; } .file-browser-empty .drop-hint { margin-top: 0.5rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); } /* File list */ .file-list { flex: 1; overflow-y: auto; overflow-x: hidden; } /* Custom scrollbar */ .file-list::-webkit-scrollbar { width: 6px; } .file-list::-webkit-scrollbar-track { background: transparent; } .file-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } .file-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Zipping notification */ .file-browser-zipping { padding: 0.5rem 0.75rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); background-color: rgb(var(--accent-rgb) / 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* File item */ .file-item { display: flex; align-items: center; padding: 0.625rem 0.75rem; cursor: pointer; transition: background-color 0.15s; gap: 0.5rem; } .file-item:hover { background-color: rgba(255, 255, 255, 0.05); } .file-item.folder { cursor: pointer; } /* File icon */ .file-icon { flex-shrink: 0; color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; } .file-item.folder .file-icon { color: #ffc107; } /* File type icon colors */ .file-icon.file-icon-python { color: #3572a5; } .file-icon.file-icon-javascript { color: #f1e05a; } .file-icon.file-icon-typescript { color: #3178c6; } .file-icon.file-icon-html { color: #e34c26; } .file-icon.file-icon-css { color: #563d7c; } .file-icon.file-icon-json { color: #a8a800; } .file-icon.file-icon-data { color: #cb4a32; } .file-icon.file-icon-markdown { color: #519aba; } .file-icon.file-icon-image { color: #a074c4; } .file-icon.file-icon-pdf { color: #db1b1b; } .file-icon.file-icon-archive { color: #d4a017; } .file-icon.file-icon-database { color: #00758f; } .file-icon.file-icon-shell { color: #89e051; } .file-icon.file-icon-word { color: #2b579a; } .file-icon.file-icon-excel { color: #217346; } .file-icon.file-icon-powerpoint { color: #d24726; } /* File info */ .file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .file-name { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.87); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-meta { display: flex; gap: 0.5rem; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.5); } .file-size { color: rgba(255, 255, 255, 0.4); } /* File menu (meatball menu) */ .file-menu-container { flex-shrink: 0; position: relative; } .file-menu-button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 4px; background: none; color: rgba(255, 255, 255, 0.4); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, background-color 0.15s; } .file-item:hover .file-menu-button { opacity: 1; } .file-menu-button:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); } .file-menu-dropdown { position: absolute; right: 0; top: 100%; min-width: 120px; background-color: #2a2a2a; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 10; overflow: hidden; } .file-menu-item { display: block; width: 100%; padding: 0.5rem 0.75rem; border: none; background: none; color: rgba(255, 255, 255, 0.8); font-size: 0.8125rem; text-align: left; cursor: pointer; transition: background-color 0.15s; } .file-menu-item:hover { background-color: rgba(255, 255, 255, 0.1); } .file-menu-item-danger { color: #ff6b6b; } .file-menu-item-danger:hover { background-color: rgba(255, 107, 107, 0.1); } /* Drag overlay */ .drag-overlay { position: absolute; inset: 0; background-color: rgb(var(--accent-rgb) / 0.2); border: 2px dashed var(--accent); display: flex; align-items: center; justify-content: center; z-index: 10; } .drag-overlay p { color: white; font-weight: 500; font-size: 0.875rem; background-color: rgb(var(--accent-rgb) / 0.8); padding: 0.5rem 1rem; border-radius: 6px; } /* Light mode support */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .file-browser.drag-over { background-color: rgb(var(--accent-rgb) / 0.05); } :where(:root:not([data-theme="dark"])) .refresh-button, :where(:root:not([data-theme="dark"])) .hidden-toggle-button { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .refresh-button:hover:not(:disabled), :where(:root:not([data-theme="dark"])) .hidden-toggle-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); color: #213547; } :where(:root:not([data-theme="dark"])) .hidden-toggle-button.active { background-color: rgb(var(--accent-rgb) / 0.18); color: #213547; } :where(:root:not([data-theme="dark"])) .nav-button { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .nav-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); color: #213547; } :where(:root:not([data-theme="dark"])) .current-path { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .new-folder-button { color: rgba(0, 0, 0, 0.87); border-color: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .new-folder-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .upload-progress-bar { background: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .file-browser-error { color: #d32f2f; background-color: rgba(211, 47, 47, 0.1); border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .file-browser-loading, :where(:root:not([data-theme="dark"])) .file-browser-empty { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .file-browser-empty .drop-hint { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .file-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .file-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .file-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .file-icon { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .file-item.folder .file-icon { color: #f9a825; } /* File type icon colors -- light mode */ :where(:root:not([data-theme="dark"])) .file-icon.file-icon-python { color: #2b5d8b; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-javascript { color: #b8a000; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-typescript { color: #2b6cb0; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-html { color: #c43e1c; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-css { color: #4a3268; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-json { color: #8a8a00; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-data { color: #b03e28; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-markdown { color: #3d7a99; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-image { color: #8a5eaa; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-pdf { color: #c01515; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-archive { color: #b38a12; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-database { color: #005f73; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-shell { color: #5a9e2e; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-word { color: #2b579a; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-excel { color: #185c37; } :where(:root:not([data-theme="dark"])) .file-icon.file-icon-powerpoint { color: #b7472a; } :where(:root:not([data-theme="dark"])) .file-name { color: #213547; } :where(:root:not([data-theme="dark"])) .file-meta { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .file-size { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .file-menu-button { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .file-menu-button:hover { color: #213547; background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .file-menu-dropdown { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .file-menu-item { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .file-menu-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .file-menu-item-danger { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .file-menu-item-danger:hover { background-color: rgba(211, 47, 47, 0.1); } :where(:root:not([data-theme="dark"])) .file-browser-zipping { color: rgba(0, 0, 0, 0.7); background-color: rgb(var(--accent-rgb) / 0.05); border-top-color: rgba(0, 0, 0, 0.1); } } :where(:root[data-theme="light"]) .file-browser.drag-over { background-color: rgb(var(--accent-rgb) / 0.05); } :where(:root[data-theme="light"]) .refresh-button, :where(:root[data-theme="light"]) .hidden-toggle-button { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .refresh-button:hover:not(:disabled), :where(:root[data-theme="light"]) .hidden-toggle-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); color: #213547; } :where(:root[data-theme="light"]) .hidden-toggle-button.active { background-color: rgb(var(--accent-rgb) / 0.18); color: #213547; } :where(:root[data-theme="light"]) .nav-button { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .nav-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); color: #213547; } :where(:root[data-theme="light"]) .current-path { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .new-folder-button { color: rgba(0, 0, 0, 0.87); border-color: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .new-folder-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .upload-progress-bar { background: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .file-browser-error { color: #d32f2f; background-color: rgba(211, 47, 47, 0.1); border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .file-browser-loading, :where(:root[data-theme="light"]) .file-browser-empty { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .file-browser-empty .drop-hint { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .file-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .file-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .file-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .file-icon { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .file-item.folder .file-icon { color: #f9a825; } /* File type icon colors -- light mode */ :where(:root[data-theme="light"]) .file-icon.file-icon-python { color: #2b5d8b; } :where(:root[data-theme="light"]) .file-icon.file-icon-javascript { color: #b8a000; } :where(:root[data-theme="light"]) .file-icon.file-icon-typescript { color: #2b6cb0; } :where(:root[data-theme="light"]) .file-icon.file-icon-html { color: #c43e1c; } :where(:root[data-theme="light"]) .file-icon.file-icon-css { color: #4a3268; } :where(:root[data-theme="light"]) .file-icon.file-icon-json { color: #8a8a00; } :where(:root[data-theme="light"]) .file-icon.file-icon-data { color: #b03e28; } :where(:root[data-theme="light"]) .file-icon.file-icon-markdown { color: #3d7a99; } :where(:root[data-theme="light"]) .file-icon.file-icon-image { color: #8a5eaa; } :where(:root[data-theme="light"]) .file-icon.file-icon-pdf { color: #c01515; } :where(:root[data-theme="light"]) .file-icon.file-icon-archive { color: #b38a12; } :where(:root[data-theme="light"]) .file-icon.file-icon-database { color: #005f73; } :where(:root[data-theme="light"]) .file-icon.file-icon-shell { color: #5a9e2e; } :where(:root[data-theme="light"]) .file-icon.file-icon-word { color: #2b579a; } :where(:root[data-theme="light"]) .file-icon.file-icon-excel { color: #185c37; } :where(:root[data-theme="light"]) .file-icon.file-icon-powerpoint { color: #b7472a; } :where(:root[data-theme="light"]) .file-name { color: #213547; } :where(:root[data-theme="light"]) .file-meta { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .file-size { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .file-menu-button { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .file-menu-button:hover { color: #213547; background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .file-menu-dropdown { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .file-menu-item { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .file-menu-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .file-menu-item-danger { color: #d32f2f; } :where(:root[data-theme="light"]) .file-menu-item-danger:hover { background-color: rgba(211, 47, 47, 0.1); } :where(:root[data-theme="light"]) .file-browser-zipping { color: rgba(0, 0, 0, 0.7); background-color: rgb(var(--accent-rgb) / 0.05); border-top-color: rgba(0, 0, 0, 0.1); } /* File list inside subagent_return approval cards. */ /* The generic preview fields are flex rows (key left, value right); the file list needs the full card width, so its field stacks instead. Applies to both the chat card and the Requests pane variants. */ .action-request-preview-field.subagent-files-field, .request-preview-field.subagent-files-field { display: block; min-width: 0; } .subagent-return-files { margin-top: 0.5rem; border: 1px solid #3a3a6a; border-radius: 4px; overflow: hidden; } .subagent-return-file-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.55rem; font-size: 0.82rem; } .subagent-return-file-row + .subagent-return-file-row { border-top: 1px solid #3a3a6a; } .subagent-return-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .subagent-return-file-size { color: rgba(255, 255, 255, 0.45); font-size: 0.75rem; flex-shrink: 0; } .subagent-return-file-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; font-size: 0.75rem; background: rgba(255, 255, 255, 0.06); border: 1px solid #3a3a6a; border-radius: 4px; color: inherit; cursor: pointer; flex-shrink: 0; } .subagent-return-file-btn:hover { background: rgba(255, 255, 255, 0.12); } .subagent-return-file-btn.download { padding: 0.15rem 0.3rem; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .subagent-return-files { border-color: #d0d0e0; } :where(:root:not([data-theme="dark"])) .subagent-return-file-row + .subagent-return-file-row { border-top-color: #d0d0e0; } :where(:root:not([data-theme="dark"])) .subagent-return-file-size { color: rgba(0, 0, 0, 0.45); } :where(:root:not([data-theme="dark"])) .subagent-return-file-btn { background: rgba(0, 0, 0, 0.04); border-color: #d0d0e0; } :where(:root:not([data-theme="dark"])) .subagent-return-file-btn:hover { background: rgba(0, 0, 0, 0.08); } } :where(:root[data-theme="light"]) .subagent-return-files { border-color: #d0d0e0; } :where(:root[data-theme="light"]) .subagent-return-file-row + .subagent-return-file-row { border-top-color: #d0d0e0; } :where(:root[data-theme="light"]) .subagent-return-file-size { color: rgba(0, 0, 0, 0.45); } :where(:root[data-theme="light"]) .subagent-return-file-btn { background: rgba(0, 0, 0, 0.04); border-color: #d0d0e0; } :where(:root[data-theme="light"]) .subagent-return-file-btn:hover { background: rgba(0, 0, 0, 0.08); } /* Action Request Message Styles */ .action-request-message { display: flex; gap: 0.75rem; background-color: #1a1a2e; border: 1px solid #3a3a6a; border-radius: 8px; margin: 0.5rem 0; padding: 1rem; animation: fadeIn 0.3s ease-in; } .action-request-message.pending { border-color: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.15); } .action-request-message.executed { border-color: rgba(80, 200, 120, 0.4); opacity: 0.85; } .action-request-message.denied, .action-request-message.stopped { border-color: rgba(255, 100, 100, 0.3); opacity: 0.7; } /* Icon */ .action-request-icon { display: flex; align-items: flex-start; justify-content: center; width: 28px; height: 28px; background-color: #3a3a6a; border-radius: 6px; color: #a0a0ff; flex-shrink: 0; padding-top: 6px; } /* Body */ .action-request-body { flex-grow: 1; min-width: 0; } /* Header */ .action-request-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .action-request-display-name { font-weight: 600; font-size: 0.9rem; color: #e0e0e0; } .action-request-id { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.08); padding: 0.1rem 0.4rem; border-radius: 4px; font-family: monospace; } /* Reasoning */ .action-request-reasoning { font-style: italic; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.75rem; line-height: 1.4; } /* Preview */ .action-request-preview { background-color: #0d0d1a; border-radius: 6px; padding: 0.75rem; margin-bottom: 0.75rem; } .action-request-preview-field { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.85rem; line-height: 1.5; } .action-request-preview-field:last-child { margin-bottom: 0; } .action-request-preview-key { font-weight: 600; color: rgba(255, 255, 255, 0.6); flex-shrink: 0; } .action-request-preview-value { color: #e0e0e0; word-break: break-word; white-space: pre-wrap; } /* Thread context */ .action-request-thread-context { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .action-request-thread-context > .action-request-preview-key { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; } .action-request-thread-messages { border-left: 2px solid rgb(var(--accent-rgb) / 0.3); padding-left: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; } .action-request-thread-parent, .action-request-thread-reply { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8rem; line-height: 1.4; } .action-request-thread-parent { padding-bottom: 0.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .action-request-thread-user { font-weight: 600; color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; } .action-request-thread-text { color: rgba(255, 255, 255, 0.55); word-break: break-word; white-space: pre-wrap; } .action-request-thread-gap { font-size: 0.75rem; color: rgba(255, 255, 255, 0.35); font-style: italic; padding: 0.1rem 0; } .action-request-preview pre { margin: 0; font-size: 0.8rem; color: #e0e0e0; white-space: pre-wrap; word-break: break-word; } /* Error */ .action-request-error { color: #ff6464; font-size: 0.85rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background-color: rgba(255, 100, 100, 0.1); border-radius: 6px; border: 1px solid rgba(255, 100, 100, 0.2); } /* Buttons */ .action-request-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .action-request-btn { padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid transparent; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .action-request-btn.approve { background-color: #2ea043; color: white; } .action-request-btn.approve:hover:not(:disabled) { background-color: #268a38; } .action-request-btn.revise { background-color: #d99f34; color: #1a1a1a; } .action-request-btn.revise:hover:not(:disabled) { background-color: #c08c2c; } .action-request-btn.deny, .action-request-btn.stop { background-color: #cf3030; color: white; } .action-request-btn.deny:hover:not(:disabled), .action-request-btn.stop:hover:not(:disabled) { background-color: #b22828; } .action-request-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Collapsed state (after decision) */ .action-request-message.collapsed { align-items: center; padding: 0.5rem 0.75rem; } .action-request-outcome-text { font-size: 0.85rem; } .action-request-outcome-status { font-weight: 600; } .action-request-message.executed .action-request-outcome-status { color: #50c878; } .action-request-message.denied .action-request-outcome-status, .action-request-message.stopped .action-request-outcome-status { color: rgba(255, 100, 100, 0.7); } .action-request-outcome-content { color: rgba(255, 255, 255, 0.6); } /* Expandable details on resolved cards */ .action-request-message.collapsed.expanded { align-items: flex-start; } .action-request-collapsed-body { flex-grow: 1; min-width: 0; } .action-request-collapsed-row { display: flex; align-items: center; gap: 0.5rem; } .action-request-collapsed-row .action-request-outcome-text { flex-grow: 1; min-width: 0; } .action-request-expand-toggle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; padding: 0; background: transparent; border: none; border-radius: 4px; color: rgba(255, 255, 255, 0.4); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; } .action-request-expand-toggle:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.08); } .action-request-expand-toggle svg { transition: transform 0.2s ease; } .action-request-message.collapsed.expanded .action-request-expand-toggle svg { transform: rotate(180deg); } .action-request-expanded-details { margin-top: 0.5rem; } .action-request-expanded-details .action-request-reasoning { margin-bottom: 0.5rem; } .action-request-expanded-details .action-request-preview { margin-bottom: 0; } /* Light mode support */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .action-request-message { background-color: #f0f0f8; border-color: #d0d0e0; } :where(:root:not([data-theme="dark"])) .action-request-message.pending { border-color: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.1); } :where(:root:not([data-theme="dark"])) .action-request-icon { background-color: #d0d0e8; color: #6060a0; } :where(:root:not([data-theme="dark"])) .action-request-display-name { color: #333333; } :where(:root:not([data-theme="dark"])) .action-request-id { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .action-request-reasoning { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .action-request-preview { background-color: #ffffff; border: 1px solid #e0e0e8; } :where(:root:not([data-theme="dark"])) .action-request-preview-key { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .action-request-preview-value { color: #333333; } :where(:root:not([data-theme="dark"])) .action-request-preview pre { color: #333333; } :where(:root:not([data-theme="dark"])) .action-request-thread-context { border-top-color: rgba(0, 0, 0, 0.08); } :where(:root:not([data-theme="dark"])) .action-request-thread-messages { border-left-color: rgb(var(--accent-rgb) / 0.25); } :where(:root:not([data-theme="dark"])) .action-request-thread-parent { border-bottom-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .action-request-thread-user { color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .action-request-thread-text { color: rgba(0, 0, 0, 0.55); } :where(:root:not([data-theme="dark"])) .action-request-thread-gap { color: rgba(0, 0, 0, 0.35); } :where(:root:not([data-theme="dark"])) .action-request-error { color: #cc3333; background-color: rgba(255, 100, 100, 0.08); border-color: rgba(255, 100, 100, 0.15); } :where(:root:not([data-theme="dark"])) .action-request-outcome-content { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .action-request-expand-toggle { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .action-request-expand-toggle:hover { color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.06); } } :where(:root[data-theme="light"]) .action-request-message { background-color: #f0f0f8; border-color: #d0d0e0; } :where(:root[data-theme="light"]) .action-request-message.pending { border-color: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.1); } :where(:root[data-theme="light"]) .action-request-icon { background-color: #d0d0e8; color: #6060a0; } :where(:root[data-theme="light"]) .action-request-display-name { color: #333333; } :where(:root[data-theme="light"]) .action-request-id { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .action-request-reasoning { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .action-request-preview { background-color: #ffffff; border: 1px solid #e0e0e8; } :where(:root[data-theme="light"]) .action-request-preview-key { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .action-request-preview-value { color: #333333; } :where(:root[data-theme="light"]) .action-request-preview pre { color: #333333; } :where(:root[data-theme="light"]) .action-request-thread-context { border-top-color: rgba(0, 0, 0, 0.08); } :where(:root[data-theme="light"]) .action-request-thread-messages { border-left-color: rgb(var(--accent-rgb) / 0.25); } :where(:root[data-theme="light"]) .action-request-thread-parent { border-bottom-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .action-request-thread-user { color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .action-request-thread-text { color: rgba(0, 0, 0, 0.55); } :where(:root[data-theme="light"]) .action-request-thread-gap { color: rgba(0, 0, 0, 0.35); } :where(:root[data-theme="light"]) .action-request-error { color: #cc3333; background-color: rgba(255, 100, 100, 0.08); border-color: rgba(255, 100, 100, 0.15); } :where(:root[data-theme="light"]) .action-request-outcome-content { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .action-request-expand-toggle { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .action-request-expand-toggle:hover { color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.06); } @font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.18.7"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.katex-newline{display:block}.katex .katex-base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .katex-base,.katex .katex-strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .katex-vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .katex-thinbox{display:inline-flex;flex-direction:row;max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line{min-height:1px}.katex .mspace{display:inline-block}.katex .katex-smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner{position:absolute}.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix{display:inline-block}.katex .llap>.katex-inner{right:0}.katex .clap>.katex-inner,.katex .rlap>.katex-inner{left:0}.katex .clap>.katex-inner>span{margin-left:-50%;margin-right:50%}.katex .katex-rule{border:0 solid;display:inline-block;position:relative}.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.katex-root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .katex-accent .accent-body{position:relative}.katex .katex-accent .accent-body:not(.accent-full){width:0}.katex .katex-overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .katex-stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .katex-stretchy:after,.katex .katex-stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .katex-sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .reflectbox{display:inline-block;transform:scaleX(-1)}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.katex-tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.katex-tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo} /* Import highlight.js theme for code syntax highlighting */ pre code.hljs { display: block; overflow-x: auto; padding: 1em } code.hljs { padding: 3px 5px } /* Atom One Dark by Daniel Gamage Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax base: #282c34 mono-1: #abb2bf mono-2: #818896 mono-3: #5c6370 hue-1: #56b6c2 hue-2: #61aeee hue-3: #c678dd hue-4: #98c379 hue-5: #e06c75 hue-5-2: #be5046 hue-6: #d19a66 hue-6-2: #e6c07b */ .hljs { color: #abb2bf; background: #282c34 } .hljs-comment, .hljs-quote { color: #5c6370; font-style: italic } .hljs-doctag, .hljs-keyword, .hljs-formula { color: #c678dd } .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst { color: #e06c75 } .hljs-literal { color: #56b6c2 } .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: #98c379 } .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { color: #d19a66 } .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title { color: #61aeee } .hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title { color: #e6c07b } .hljs-emphasis { font-style: italic } .hljs-strong { font-weight: bold } .hljs-link { text-decoration: underline } /* Message bubble */ .message { position: relative; display: flex; flex-direction: column; gap: 0.375rem; animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* User message alignment */ .message.user { align-items: flex-end; } /* Quest message alignment */ .message.assistant { align-items: flex-start; } /* Message footer: timestamp (+ model name for assistant replies) tucked under the bubble. Absolutely positioned into the list gap below the message so it reserves no space, and revealed only on hover. */ .message-footer { position: absolute; top: 100%; margin-top: 2px; display: flex; align-items: center; gap: 0.375rem; padding: 0 0.25rem; font-size: 0.7rem; line-height: 1; color: var(--text-muted); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .message.user .message-footer { right: 0; } .message.assistant .message-footer { left: 0; } @media (hover: hover) { .message:hover .message-footer { opacity: 1; } } .message-footer-model::before { content: '\00b7'; margin-right: 0.375rem; } /* Message content bubble */ .message-content { background-color: #2a2a2a; padding: 0.75rem 1rem; border-radius: 12px; max-width: 80%; word-wrap: break-word; white-space: pre-wrap; line-height: 1.5; } /* User message styling: a light accent tint rather than a solid fill */ .message.user .message-content { background-color: var(--accent-tint); color: var(--text); } /* Assistant replies sit flat on the page ground -- no bubble */ .message.assistant .message-content { white-space: normal; background: none; padding: 0.25rem 0.25rem; border-radius: 0; max-width: 100%; } /* Markdown headings */ .message-content h1, .message-content h2, .message-content h3, .message-content h4, .message-content h5, .message-content h6 { margin-top: 1em; margin-bottom: 0.5em; font-weight: 600; line-height: 1.25; } .message-content h1:first-child, .message-content h2:first-child, .message-content h3:first-child, .message-content h4:first-child, .message-content h5:first-child, .message-content h6:first-child { margin-top: 0; } .message-content h1 { font-size: 1.5em; } .message-content h2 { font-size: 1.3em; } .message-content h3 { font-size: 1.1em; } /* Markdown paragraphs */ .message-content p { margin: 0.75em 0; } .message-content p:first-child { margin-top: 0; } .message-content p:last-child { margin-bottom: 0; } /* Markdown links: the theme's accent-as-text colour, per scheme */ .message-content a { color: var(--accent-text); text-decoration: underline; text-decoration-style: dotted; } .message-content a:hover { text-decoration-style: solid; } /* Markdown code blocks */ .message-content pre { margin: 0.75em 0; padding: 1rem; background-color: rgb(var(--accent-rgb) / 0.08); /* faint accent wash so the block follows the colour theme */ border: 1px solid rgb(var(--accent-rgb) / 0.18); border-radius: 6px; overflow-x: auto; line-height: 1.55; /* Slightly increased for readability */ } .message-content pre code { background-color: transparent; padding: 0; border-radius: 0; font-weight: 400; /* inline code is bold; fenced blocks are not */ font-size: 0.875em; font-family: var(--font-mono); /* Explicitly apply code font */ color: var(--text); } /* Enhanced syntax highlighting colors for better visibility */ .message-content pre code .hljs-keyword, .message-content pre code .hljs-selector-tag, .message-content pre code .hljs-literal, .message-content pre code .hljs-section, .message-content pre code .hljs-link { color: #ff79c6; /* Very bright pink for keywords */ font-weight: 600; } .message-content pre code .hljs-function .hljs-keyword { color: #e66aff; /* Bright purple for function keywords */ font-weight: 600; } .message-content pre code .hljs-string, .message-content pre code .hljs-doctag, .message-content pre code .hljs-regexp, .message-content pre code .hljs-addition, .message-content pre code .hljs-attribute { color: #50fa7b; /* Very bright green for strings */ } .message-content pre code .hljs-number, .message-content pre code .hljs-built_in, .message-content pre code .hljs-builtin-name, .message-content pre code .hljs-symbol, .message-content pre code .hljs-bullet { color: #ffb86c; /* Bright orange for numbers and built-ins */ } .message-content pre code .hljs-title, .message-content pre code .hljs-class .hljs-title, .message-content pre code .hljs-type { color: #f1fa8c; /* Very bright yellow for titles and types */ font-weight: 600; } .message-content pre code .hljs-comment, .message-content pre code .hljs-quote, .message-content pre code .hljs-deletion, .message-content pre code .hljs-meta { color: #8b95b5; /* ~5.5:1 ratio on #1a1b2e -- PASSES WCAG AA */ font-style: italic; } .message-content pre code .hljs-variable, .message-content pre code .hljs-template-variable, .message-content pre code .hljs-attr { color: #ffb86c; /* Bright orange for variables */ } .message-content pre code .hljs-name { color: #8be9fd; /* Cyan for names */ } .message-content pre code .hljs-params { color: #f8f8f2; /* Almost white for parameters */ } /* Markdown inline code: no highlighted background -- a bolder weight and the theme's accent-as-text colour set it apart from prose without breaking the line. */ .message-content code { background: none; padding: 0; border-radius: 0; font-family: var(--font-mono); font-size: 0.85em; font-weight: 600; color: var(--accent-text); } /* Markdown lists */ .message-content ul, .message-content ol { margin: 0.75em 0; padding-left: 2em; } .message-content li { margin: 0.25em 0; } .message-content ul ul, .message-content ol ol, .message-content ul ol, .message-content ol ul { margin: 0.25em 0; } /* Markdown blockquotes */ .message-content blockquote { margin: 0.75em 0; padding: 0.5em 1em; border-left: 4px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.8); } .message-content blockquote p { margin: 0.5em 0; } /* Markdown tables */ .message-content table { border-collapse: collapse; margin: 0; width: 100%; overflow: auto; display: block; } .message-content table th, .message-content table td { border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.5em 0.75em; text-align: left; } .message-content table th { background-color: rgba(255, 255, 255, 0.05); font-weight: 600; } .message-content table tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); } /* Table copy wrapper and hover button */ .table-copy-wrapper { position: relative; display: block; margin: 0.75em 0; } .table-copy-btn { position: absolute; top: -0.25rem; right: -0.25rem; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; z-index: 1; padding: 0.25rem 0.5rem; border-radius: 4px; border: none; background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); cursor: pointer; display: flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; } .table-copy-wrapper:hover .table-copy-btn { opacity: 1; visibility: visible; } .table-copy-btn:hover { background-color: rgba(255, 255, 255, 0.2); } .table-copy-btn.copied { background-color: rgba(76, 175, 80, 0.3); color: #4caf50; } /* Markdown horizontal rules */ .message-content hr { margin: 1.5em 0; border: none; border-top: 1px solid rgba(255, 255, 255, 0.2); } /* Markdown images */ .message-content img { max-width: 100%; height: auto; border-radius: 4px; } /* Click-to-enlarge wrapper around inline workspace markdown images */ .markdown-image-button { display: block; max-width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; text-align: left; } /* Fallback chip when a markdown image path doesn't resolve in the workspace */ .markdown-image-missing { opacity: 0.7; font-style: italic; } /* External image refs are never auto-fetched; they render as a plain link */ .markdown-image-external { font-style: italic; } /* Markdown task lists (GFM) */ .message-content .task-list-item { list-style-type: none; margin-left: -1.5em; } .message-content .task-list-item input[type="checkbox"] { margin-right: 0.5em; } /* Usage stats display */ .message-stats { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 0.5rem; } .stats-container { display: flex; align-items: center; gap: 0.75rem; font-size: 0.65rem; color: rgba(255, 255, 255, 0.35); font-family: var(--font-mono); letter-spacing: 0.05em; } .stats-breakdown { display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 0.6rem; color: rgba(255, 255, 255, 0.25); font-family: var(--font-mono); letter-spacing: 0.05em; margin-top: 0.15rem; } /* Token stats tooltip */ .stats-tooltip-container { position: relative; cursor: default; } .stats-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background-color: rgba(30, 30, 30, 0.95); color: rgba(255, 255, 255, 0.8); padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.6rem; font-family: var(--font-mono); white-space: pre; line-height: 1.5; pointer-events: none; transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out; z-index: 10; } .stats-tooltip-container:hover .stats-tooltip { visibility: visible; opacity: 1; } /* Interrupted message styles */ .message-interrupted { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; margin: 0.5rem 0; background-color: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 8px; font-size: 0.8rem; color: #ffc107; } .interrupted-icon { font-size: 0.7rem; } .interrupted-text { font-weight: 500; } .interrupted-timestamp { font-size: 0.7rem; color: rgba(255, 193, 7, 0.7); } /* Refusal-fallback model-switch marker styles */ /* Failed optimistic send: the bubble stays (text preserved) with an inline notice + Retry / Discard under it. */ .message.user.send-failed .message-content { opacity: 0.6; } .message-send-failed { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; padding: 0.35rem 0.6rem; max-width: 80%; font-size: 0.8rem; color: #ff6b6b; background-color: rgba(255, 107, 107, 0.08); border: 1px solid rgba(255, 107, 107, 0.35); border-radius: 8px; } .message-send-failed-button { padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 600; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; } .message-send-failed-button:hover { background-color: rgba(255, 107, 107, 0.15); } .message-model-fallback { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; margin: 0.5rem 0; background-color: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.3); border-radius: 8px; font-size: 0.8rem; color: #a78bfa; } .model-fallback-icon { font-size: 0.8rem; } .model-fallback-text { font-weight: 500; } .model-fallback-timestamp { font-size: 0.7rem; color: rgba(167, 139, 250, 0.7); } /* Compaction marker styles */ .message-compaction { padding: 0.5rem 1rem; margin: 0.5rem 0; background-color: rgba(96, 165, 250, 0.08); border: 1px solid rgba(96, 165, 250, 0.3); border-radius: 8px; font-size: 0.8rem; color: #60a5fa; } .compaction-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .compaction-icon { font-size: 0.8rem; } .compaction-text { font-weight: 500; } .compaction-timestamp { font-size: 0.7rem; color: rgba(96, 165, 250, 0.7); } .compaction-details { margin-top: 0.4rem; text-align: left; } .compaction-details summary { cursor: pointer; font-size: 0.75rem; color: rgba(96, 165, 250, 0.85); } .compaction-summary { margin: 0.4rem 0 0; padding: 0.65rem 0.9rem; max-height: 420px; overflow-y: auto; text-align: left; font-size: 0.8rem; background-color: #1e2430; border: 1px solid rgba(96, 165, 250, 0.25); border-radius: 6px; color: rgba(255, 255, 255, 0.87); } /* Markdown-rendered summary body: compact headings and lists */ .compaction-summary-md { line-height: 1.45; } .compaction-summary-md h2 { font-size: 0.85rem; margin: 0.7rem 0 0.25rem; color: #93c5fd; } .compaction-summary-md h3 { font-size: 0.8rem; margin: 0.5rem 0 0.2rem; } .compaction-summary-md p { margin: 0.3rem 0; } .compaction-summary-md ul, .compaction-summary-md ol { margin: 0.25rem 0; padding-left: 1.25rem; } .compaction-summary-md li { margin: 0.1rem 0; } .compaction-summary-md code { font-family: var(--font-mono); font-size: 0.72rem; background-color: rgba(148, 163, 184, 0.18); padding: 0.05rem 0.3rem; border-radius: 4px; } /* Preserved-records tail: line-oriented, keep monospace */ .compaction-summary-records { margin: 0.6rem 0 0; padding: 0.5rem 0.65rem; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.45; background-color: rgba(0, 0, 0, 0.25); border-radius: 6px; color: rgba(255, 255, 255, 0.75); } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .compaction-summary { background-color: #ffffff; border-color: rgba(37, 99, 235, 0.25); color: #213547; } :where(:root:not([data-theme="dark"])) .compaction-summary-md h2 { color: #1d4ed8; } :where(:root:not([data-theme="dark"])) .compaction-summary-md code { background-color: rgba(37, 99, 235, 0.08); } :where(:root:not([data-theme="dark"])) .compaction-summary-records { background-color: #f6f8fa; color: #3f4a5a; border: 1px solid #e2e8f0; } } :where(:root[data-theme="light"]) .compaction-summary { background-color: #ffffff; border-color: rgba(37, 99, 235, 0.25); color: #213547; } :where(:root[data-theme="light"]) .compaction-summary-md h2 { color: #1d4ed8; } :where(:root[data-theme="light"]) .compaction-summary-md code { background-color: rgba(37, 99, 235, 0.08); } :where(:root[data-theme="light"]) .compaction-summary-records { background-color: #f6f8fa; color: #3f4a5a; border: 1px solid #e2e8f0; } /* Error bubble styles */ .message.error-bubble { align-items: flex-start; margin: 0.5rem 0; } .error-bubble-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; background-color: rgba(220, 53, 69, 0.15); border: 1px solid rgba(220, 53, 69, 0.4); border-radius: 8px; color: #f87171; cursor: pointer; transition: background-color 0.2s; max-width: 80%; } .error-bubble-header:hover { background-color: rgba(220, 53, 69, 0.25); } .error-bubble-icon { flex-shrink: 0; color: #f87171; } .error-bubble-summary { font-size: 0.875rem; flex: 1; word-break: break-word; } .error-bubble-chevron { flex-shrink: 0; color: rgba(248, 113, 113, 0.7); transition: transform 0.2s; } .error-bubble-details { margin-top: 0.5rem; padding: 0.75rem; background-color: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); border-radius: 8px; max-width: 80%; overflow: hidden; } .error-bubble-details pre { margin: 0; padding: 0; background: none; font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); white-space: pre-wrap; word-break: break-word; overflow-x: auto; } .error-bubble-stacktrace-label { margin-top: 0.75rem; margin-bottom: 0.25rem; font-size: 0.7rem; color: rgba(248, 113, 113, 0.7); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* Attachment thumbnails on a user message */ .message-attachments { display: flex; flex-wrap: wrap; gap: 0.375rem; max-width: 80%; padding: 0 0.25rem; } .message.user .message-attachments { justify-content: flex-end; } .message-attachment-thumb { width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background-color: rgba(0, 0, 0, 0.2); } .message-attachment-thumb a, .message-attachment-thumb-button { display: block; width: 100%; height: 100%; } .message-attachment-thumb-button { padding: 0; margin: 0; border: none; background: transparent; cursor: pointer; color: inherit; font: inherit; } .message-attachment-thumb-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .message-attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Light mode support */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .message-content { background-color: #f5f5f5; color: rgba(0, 0, 0, 0.87); } :where(:root:not([data-theme="dark"])) .message.user .message-content { background-color: var(--accent-tint); color: var(--text); } /* Light mode markdown styles */ :where(:root:not([data-theme="dark"])) .message-content pre { background-color: rgb(var(--accent-rgb) / 0.05); border-color: rgb(var(--accent-rgb) / 0.15); } :where(:root:not([data-theme="dark"])) .message-content blockquote { border-left-color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .message-content table th, :where(:root:not([data-theme="dark"])) .message-content table td { border-color: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .message-content table th { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .message-content table tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); } :where(:root:not([data-theme="dark"])) .table-copy-btn { background-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .table-copy-btn:hover { background-color: rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .table-copy-btn.copied { background-color: rgba(76, 175, 80, 0.15); color: #2e7d32; } :where(:root:not([data-theme="dark"])) .message-content hr { border-top-color: rgba(0, 0, 0, 0.2); } /* Light mode syntax highlighting */ :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-keyword, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-selector-tag, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-literal, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-section, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-link { color: #d73a49; /* Red for keywords */ font-weight: 600; } :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-function .hljs-keyword { color: #6f42c1; /* Purple for function keywords */ font-weight: 600; } :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-string, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-doctag, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-regexp, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-addition, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-attribute { color: #22863a; /* Dark green for strings */ } :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-number, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-built_in, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-builtin-name, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-symbol, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-bullet { color: #005cc5; /* Blue for numbers and built-ins */ } :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-title, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-class .hljs-title, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-type { color: #6f42c1; /* Purple for titles and types */ font-weight: 600; } :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-comment, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-quote, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-deletion, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-meta { color: #57606a; /* ~5.8:1 on #f4f5f9 -- comfortably passes WCAG AA */ font-style: italic; } :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-variable, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-template-variable, :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-attr { color: #e36209; /* Orange for variables */ } :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-name { color: #005cc5; /* Blue for names */ } :where(:root:not([data-theme="dark"])) .message-content pre code .hljs-params { color: #24292e; /* Dark gray for parameters */ } /* Light mode stats */ :where(:root:not([data-theme="dark"])) .stats-container { color: rgba(0, 0, 0, 0.35); } /* Light mode stats breakdown */ :where(:root:not([data-theme="dark"])) .stats-breakdown { color: rgba(0, 0, 0, 0.3); } /* Light mode tooltip */ :where(:root:not([data-theme="dark"])) .stats-tooltip { background-color: rgba(240, 240, 240, 0.97); color: rgba(0, 0, 0, 0.75); border: 1px solid rgba(0, 0, 0, 0.1); } /* Light mode error bubble */ :where(:root:not([data-theme="dark"])) .error-bubble-header { background-color: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.3); color: #dc3545; } :where(:root:not([data-theme="dark"])) .error-bubble-header:hover { background-color: rgba(220, 53, 69, 0.2); } :where(:root:not([data-theme="dark"])) .error-bubble-icon { color: #dc3545; } :where(:root:not([data-theme="dark"])) .error-bubble-chevron { color: rgba(220, 53, 69, 0.7); } :where(:root:not([data-theme="dark"])) .error-bubble-details { background-color: rgba(220, 53, 69, 0.05); border-color: rgba(220, 53, 69, 0.2); } :where(:root:not([data-theme="dark"])) .error-bubble-details pre { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .error-bubble-stacktrace-label { color: rgba(220, 53, 69, 0.7); } /* Light mode interrupted message */ :where(:root:not([data-theme="dark"])) .message-send-failed { color: #c62828; background-color: rgba(198, 40, 40, 0.06); border-color: rgba(198, 40, 40, 0.35); } :where(:root:not([data-theme="dark"])) .message-interrupted { background-color: rgba(255, 193, 7, 0.08); border-color: rgba(255, 152, 0, 0.4); color: #e65100; } :where(:root:not([data-theme="dark"])) .interrupted-timestamp { color: rgba(230, 81, 0, 0.7); } /* Light mode refusal-fallback marker */ :where(:root:not([data-theme="dark"])) .message-model-fallback { background-color: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.3); color: #7c3aed; } :where(:root:not([data-theme="dark"])) .model-fallback-timestamp { color: rgba(124, 58, 237, 0.7); } } :where(:root[data-theme="light"]) .message-content { background-color: #f5f5f5; color: rgba(0, 0, 0, 0.87); } :where(:root[data-theme="light"]) .message.user .message-content { background-color: var(--accent-tint); color: var(--text); } /* Light mode markdown styles */ :where(:root[data-theme="light"]) .message-content pre { background-color: rgb(var(--accent-rgb) / 0.05); border-color: rgb(var(--accent-rgb) / 0.15); } :where(:root[data-theme="light"]) .message-content blockquote { border-left-color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .message-content table th, :where(:root[data-theme="light"]) .message-content table td { border-color: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .message-content table th { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .message-content table tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); } :where(:root[data-theme="light"]) .table-copy-btn { background-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .table-copy-btn:hover { background-color: rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .table-copy-btn.copied { background-color: rgba(76, 175, 80, 0.15); color: #2e7d32; } :where(:root[data-theme="light"]) .message-content hr { border-top-color: rgba(0, 0, 0, 0.2); } /* Light mode syntax highlighting */ :where(:root[data-theme="light"]) .message-content pre code .hljs-keyword, :where(:root[data-theme="light"]) .message-content pre code .hljs-selector-tag, :where(:root[data-theme="light"]) .message-content pre code .hljs-literal, :where(:root[data-theme="light"]) .message-content pre code .hljs-section, :where(:root[data-theme="light"]) .message-content pre code .hljs-link { color: #d73a49; /* Red for keywords */ font-weight: 600; } :where(:root[data-theme="light"]) .message-content pre code .hljs-function .hljs-keyword { color: #6f42c1; /* Purple for function keywords */ font-weight: 600; } :where(:root[data-theme="light"]) .message-content pre code .hljs-string, :where(:root[data-theme="light"]) .message-content pre code .hljs-doctag, :where(:root[data-theme="light"]) .message-content pre code .hljs-regexp, :where(:root[data-theme="light"]) .message-content pre code .hljs-addition, :where(:root[data-theme="light"]) .message-content pre code .hljs-attribute { color: #22863a; /* Dark green for strings */ } :where(:root[data-theme="light"]) .message-content pre code .hljs-number, :where(:root[data-theme="light"]) .message-content pre code .hljs-built_in, :where(:root[data-theme="light"]) .message-content pre code .hljs-builtin-name, :where(:root[data-theme="light"]) .message-content pre code .hljs-symbol, :where(:root[data-theme="light"]) .message-content pre code .hljs-bullet { color: #005cc5; /* Blue for numbers and built-ins */ } :where(:root[data-theme="light"]) .message-content pre code .hljs-title, :where(:root[data-theme="light"]) .message-content pre code .hljs-class .hljs-title, :where(:root[data-theme="light"]) .message-content pre code .hljs-type { color: #6f42c1; /* Purple for titles and types */ font-weight: 600; } :where(:root[data-theme="light"]) .message-content pre code .hljs-comment, :where(:root[data-theme="light"]) .message-content pre code .hljs-quote, :where(:root[data-theme="light"]) .message-content pre code .hljs-deletion, :where(:root[data-theme="light"]) .message-content pre code .hljs-meta { color: #57606a; /* ~5.8:1 on #f4f5f9 -- comfortably passes WCAG AA */ font-style: italic; } :where(:root[data-theme="light"]) .message-content pre code .hljs-variable, :where(:root[data-theme="light"]) .message-content pre code .hljs-template-variable, :where(:root[data-theme="light"]) .message-content pre code .hljs-attr { color: #e36209; /* Orange for variables */ } :where(:root[data-theme="light"]) .message-content pre code .hljs-name { color: #005cc5; /* Blue for names */ } :where(:root[data-theme="light"]) .message-content pre code .hljs-params { color: #24292e; /* Dark gray for parameters */ } /* Light mode stats */ :where(:root[data-theme="light"]) .stats-container { color: rgba(0, 0, 0, 0.35); } /* Light mode stats breakdown */ :where(:root[data-theme="light"]) .stats-breakdown { color: rgba(0, 0, 0, 0.3); } /* Light mode tooltip */ :where(:root[data-theme="light"]) .stats-tooltip { background-color: rgba(240, 240, 240, 0.97); color: rgba(0, 0, 0, 0.75); border: 1px solid rgba(0, 0, 0, 0.1); } /* Light mode error bubble */ :where(:root[data-theme="light"]) .error-bubble-header { background-color: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.3); color: #dc3545; } :where(:root[data-theme="light"]) .error-bubble-header:hover { background-color: rgba(220, 53, 69, 0.2); } :where(:root[data-theme="light"]) .error-bubble-icon { color: #dc3545; } :where(:root[data-theme="light"]) .error-bubble-chevron { color: rgba(220, 53, 69, 0.7); } :where(:root[data-theme="light"]) .error-bubble-details { background-color: rgba(220, 53, 69, 0.05); border-color: rgba(220, 53, 69, 0.2); } :where(:root[data-theme="light"]) .error-bubble-details pre { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .error-bubble-stacktrace-label { color: rgba(220, 53, 69, 0.7); } /* Light mode interrupted message */ :where(:root[data-theme="light"]) .message-send-failed { color: #c62828; background-color: rgba(198, 40, 40, 0.06); border-color: rgba(198, 40, 40, 0.35); } :where(:root[data-theme="light"]) .message-interrupted { background-color: rgba(255, 193, 7, 0.08); border-color: rgba(255, 152, 0, 0.4); color: #e65100; } :where(:root[data-theme="light"]) .interrupted-timestamp { color: rgba(230, 81, 0, 0.7); } /* Light mode refusal-fallback marker */ :where(:root[data-theme="light"]) .message-model-fallback { background-color: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.3); color: #7c3aed; } :where(:root[data-theme="light"]) .model-fallback-timestamp { color: rgba(124, 58, 237, 0.7); } /* Tool Call Group Styles */ .tool-call-group { display: flex; flex-direction: column; margin: 0.25rem 0; } /* Expanded: group header bar */ .tool-group-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 4px; margin-bottom: 0.25rem; transition: background-color 0.2s ease; } .tool-group-header:hover { background-color: var(--hover); } .tool-group-header-icon { display: flex; align-items: center; color: var(--accent-text); transform: rotate(180deg); /* Points up to indicate "collapse" */ transition: transform 0.2s ease; } .tool-group-header-label { font-size: 0.75rem; font-weight: 500; color: var(--accent-text); opacity: 0.85; } .tool-group-status { font-size: 0.65rem; padding: 0.1rem 0.3rem; border-radius: 4px; text-transform: uppercase; font-weight: 500; } .tool-group-status.completed { color: rgba(80, 200, 120, 0.85); } .tool-group-status.running { color: rgba(255, 180, 0, 0.85); animation: pulse 1.5s infinite; } /* Expanded: individual items container */ .tool-group-items { display: flex; flex-direction: column; gap: 0.125rem; padding-left: 0.5rem; border-left: 2px solid rgb(var(--accent-rgb) / 0.25); margin-left: 0.5rem; } /* Collapsed: "and N more" expand bar */ .tool-group-expand-bar { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease; opacity: 0.55; } .tool-group-expand-bar:hover { background-color: var(--hover); opacity: 0.9; } .tool-group-expand-label { font-size: 0.7rem; color: var(--accent-text); font-weight: 500; } .tool-group-expand-chevron { color: var(--accent-text); opacity: 0.7; } /* Pulse animation for running status */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Light mode: semantic status colours only -- everything else is tokenized. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .tool-group-status.completed { color: rgba(32, 128, 32, 0.85); } :where(:root:not([data-theme="dark"])) .tool-group-status.running { color: rgba(180, 120, 0, 0.85); } } :where(:root[data-theme="light"]) .tool-group-status.completed { color: rgba(32, 128, 32, 0.85); } :where(:root[data-theme="light"]) .tool-group-status.running { color: rgba(180, 120, 0, 0.85); } .context-indicator-container { margin-left: auto; position: relative; cursor: default; } .context-indicator-badge { font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.02em; } /* Color levels */ .context-indicator-badge.context-normal { color: rgba(255, 255, 255, 0.45); } .context-indicator-badge.context-warning { color: #f0ad4e; } .context-indicator-badge.context-danger { color: #ff6b6b; } /* Info button */ .context-indicator-info-button { background: none; border: none; padding: 0 2px; cursor: pointer; color: rgba(255, 255, 255, 0.45); display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s; vertical-align: middle; } .context-indicator-info-button:hover { color: rgba(255, 255, 255, 0.7); } /* Tooltip on hover */ .context-indicator-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 6px); right: 0; background-color: rgba(30, 30, 30, 0.97); color: rgba(255, 255, 255, 0.75); padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; white-space: nowrap; pointer-events: none; transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out; z-index: 10; border: 1px solid rgba(255, 255, 255, 0.1); } .context-indicator-container:hover .context-indicator-tooltip { visibility: visible; opacity: 1; } /* Light mode support */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .context-indicator-badge.context-normal { color: rgba(0, 0, 0, 0.45); } :where(:root:not([data-theme="dark"])) .context-indicator-badge.context-warning { color: #b8860b; } :where(:root:not([data-theme="dark"])) .context-indicator-badge.context-danger { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .context-indicator-info-button { color: rgba(0, 0, 0, 0.45); } :where(:root:not([data-theme="dark"])) .context-indicator-info-button:hover { color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .context-indicator-tooltip { background-color: rgba(240, 240, 240, 0.97); color: rgba(0, 0, 0, 0.75); border: 1px solid rgba(0, 0, 0, 0.1); } } :where(:root[data-theme="light"]) .context-indicator-badge.context-normal { color: rgba(0, 0, 0, 0.45); } :where(:root[data-theme="light"]) .context-indicator-badge.context-warning { color: #b8860b; } :where(:root[data-theme="light"]) .context-indicator-badge.context-danger { color: #d32f2f; } :where(:root[data-theme="light"]) .context-indicator-info-button { color: rgba(0, 0, 0, 0.45); } :where(:root[data-theme="light"]) .context-indicator-info-button:hover { color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .context-indicator-tooltip { background-color: rgba(240, 240, 240, 0.97); color: rgba(0, 0, 0, 0.75); border: 1px solid rgba(0, 0, 0, 0.1); } /* Skill Selector Modal overlay */ .skill-selector-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container */ .skill-selector-modal { background-color: #2a2a2a; border-radius: 12px; width: 560px; max-width: 90vw; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; } /* Header */ .skill-selector-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .skill-selector-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; } .skill-selector-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .skill-selector-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Search input wrapper */ .skill-selector-input-wrapper { position: relative; padding: 1rem 1.5rem; flex-shrink: 0; } .skill-selector-input-icon { position: absolute; left: 2.25rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.4); pointer-events: none; } .skill-selector-input { width: 100%; padding: 0.625rem 0.75rem 0.625rem 2.25rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color 0.15s; box-sizing: border-box; } .skill-selector-input:focus { border-color: var(--accent); } .skill-selector-input::placeholder { color: rgba(255, 255, 255, 0.35); } /* Skills list */ .skill-selector-list { flex: 1; overflow-y: auto; padding: 0 0.75rem 0.75rem; } .skill-selector-list::-webkit-scrollbar { width: 6px; } .skill-selector-list::-webkit-scrollbar-track { background: transparent; } .skill-selector-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } .skill-selector-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Status messages */ .skill-selector-status { padding: 2rem 1rem; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; } .skill-selector-error { padding: 0.75rem 1rem; text-align: center; color: #ff6b6b; font-size: 0.875rem; } /* Individual skill row */ .skill-selector-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 8px; cursor: pointer; transition: background-color 0.15s; } .skill-selector-row:hover { background-color: rgba(255, 255, 255, 0.06); } .skill-selector-row.disabled { opacity: 0.5; cursor: default; } .skill-selector-row.disabled:hover { background-color: transparent; } .skill-selector-checkbox { margin-top: 0.125rem; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; } .skill-selector-row.disabled .skill-selector-checkbox { cursor: default; } .skill-selector-row-content { flex: 1; min-width: 0; } .skill-selector-row-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .skill-selector-name { font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.87); } .skill-selector-description { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Badges */ .skill-selector-badge { font-size: 0.6875rem; font-weight: 500; padding: 0.0625rem 0.375rem; border-radius: 4px; flex-shrink: 0; } .skill-selector-badge.auto-loaded { color: rgb(var(--accent-rgb) / 0.9); background-color: rgb(var(--accent-rgb) / 0.15); } .skill-selector-badge.loaded { color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.08); } .skill-selector-badge.visibility { color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.06); } /* Footer */ .skill-selector-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .skill-selector-footer-hint { font-size: 0.75rem; color: rgba(255, 255, 255, 0.3); } .skill-selector-footer-hint kbd { display: inline-block; padding: 0.125rem 0.375rem; font-size: 0.6875rem; font-family: inherit; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; margin: 0 0.125rem; } .skill-selector-footer-buttons { display: flex; align-items: center; gap: 0.5rem; } .skill-selector-cancel-btn { padding: 0.375rem 0.875rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background: none; color: rgba(255, 255, 255, 0.7); font-size: 0.8125rem; font-family: inherit; cursor: pointer; transition: background-color 0.15s, color 0.15s; } .skill-selector-cancel-btn:hover { background-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.87); } .skill-selector-confirm-btn { padding: 0.375rem 0.875rem; border: 1px solid transparent; border-radius: 6px; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background-color 0.15s; } .skill-selector-confirm-btn:hover:not(:disabled) { background-color: var(--accent-hover); } .skill-selector-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Light mode */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .skill-selector-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .skill-selector-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .skill-selector-header h2 { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .skill-selector-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .skill-selector-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .skill-selector-input-icon { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .skill-selector-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .skill-selector-input::placeholder { color: rgba(0, 0, 0, 0.35); } :where(:root:not([data-theme="dark"])) .skill-selector-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .skill-selector-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .skill-selector-status { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .skill-selector-error { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .skill-selector-row:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root:not([data-theme="dark"])) .skill-selector-row.disabled:hover { background-color: transparent; } :where(:root:not([data-theme="dark"])) .skill-selector-name { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .skill-selector-description { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .skill-selector-badge.auto-loaded { color: rgb(var(--accent-rgb) / 0.9); background-color: rgb(var(--accent-rgb) / 0.12); } :where(:root:not([data-theme="dark"])) .skill-selector-badge.loaded { color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .skill-selector-badge.visibility { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .skill-selector-footer { border-top-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .skill-selector-footer-hint { color: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .skill-selector-footer-hint kbd { background-color: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .skill-selector-cancel-btn { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .skill-selector-cancel-btn:hover { background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.87); } } :where(:root[data-theme="light"]) .skill-selector-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .skill-selector-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .skill-selector-header h2 { color: #1a1a1a; } :where(:root[data-theme="light"]) .skill-selector-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .skill-selector-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .skill-selector-input-icon { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .skill-selector-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #1a1a1a; } :where(:root[data-theme="light"]) .skill-selector-input::placeholder { color: rgba(0, 0, 0, 0.35); } :where(:root[data-theme="light"]) .skill-selector-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .skill-selector-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .skill-selector-status { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .skill-selector-error { color: #d32f2f; } :where(:root[data-theme="light"]) .skill-selector-row:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root[data-theme="light"]) .skill-selector-row.disabled:hover { background-color: transparent; } :where(:root[data-theme="light"]) .skill-selector-name { color: #1a1a1a; } :where(:root[data-theme="light"]) .skill-selector-description { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .skill-selector-badge.auto-loaded { color: rgb(var(--accent-rgb) / 0.9); background-color: rgb(var(--accent-rgb) / 0.12); } :where(:root[data-theme="light"]) .skill-selector-badge.loaded { color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .skill-selector-badge.visibility { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .skill-selector-footer { border-top-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .skill-selector-footer-hint { color: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .skill-selector-footer-hint kbd { background-color: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .skill-selector-cancel-btn { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .skill-selector-cancel-btn:hover { background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.87); } /* System Prompt Modal overlay */ .system-prompt-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container */ .system-prompt-modal { background-color: #2a2a2a; border-radius: 12px; width: 85vw; height: 85vh; max-width: 85vw; max-height: 85vh; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; display: flex; flex-direction: column; } /* Header */ .system-prompt-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .system-prompt-title { margin: 0; font-size: 1rem; font-weight: 600; } .system-prompt-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .system-prompt-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Content area */ .system-prompt-content { flex: 1; overflow: auto; min-height: 0; } .system-prompt-pre { margin: 0; padding: 1.25rem 1.5rem; white-space: pre-wrap; overflow-x: auto; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.87); background-color: #222222; min-height: 100%; box-sizing: border-box; } /* Loading state */ .system-prompt-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, 0.5); font-size: 0.9375rem; } /* Error state */ .system-prompt-error { display: flex; align-items: center; justify-content: center; height: 100%; padding: 2rem; color: #ff6b6b; font-size: 0.9375rem; text-align: center; } /* Empty state */ .system-prompt-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 2rem; color: rgba(255, 255, 255, 0.5); font-size: 0.9375rem; text-align: center; } /* Light mode */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .system-prompt-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .system-prompt-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .system-prompt-title { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .system-prompt-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .system-prompt-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .system-prompt-pre { color: #1a1a1a; background-color: #f5f5f5; } :where(:root:not([data-theme="dark"])) .system-prompt-loading { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .system-prompt-error { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .system-prompt-empty { color: rgba(0, 0, 0, 0.5); } } :where(:root[data-theme="light"]) .system-prompt-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .system-prompt-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .system-prompt-title { color: #1a1a1a; } :where(:root[data-theme="light"]) .system-prompt-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .system-prompt-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .system-prompt-pre { color: #1a1a1a; background-color: #f5f5f5; } :where(:root[data-theme="light"]) .system-prompt-loading { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .system-prompt-error { color: #d32f2f; } :where(:root[data-theme="light"]) .system-prompt-empty { color: rgba(0, 0, 0, 0.5); } /* Token-cost "Learn more" modal. Mirrors the NewProjectModal overlay/modal conventions (dark-first, light-mode override block) with a scrollable reading body. */ .token-cost-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } .token-cost-modal { background-color: #2a2a2a; border-radius: 12px; width: 560px; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; } @keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .token-cost-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .token-cost-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; } .token-cost-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .token-cost-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } .token-cost-content { padding: 0.5rem 1.5rem 1.5rem; overflow-y: auto; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.75); } .token-cost-content h3 { margin: 1.1rem 0 0.35rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.92); } .token-cost-content p { margin: 0.35rem 0; } .token-cost-content ol { margin: 0.35rem 0; padding-left: 1.4rem; } .token-cost-content li { margin: 0.25rem 0; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .token-cost-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .token-cost-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .token-cost-header h2 { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .token-cost-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .token-cost-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .token-cost-content { color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .token-cost-content h3 { color: rgba(0, 0, 0, 0.9); } } :where(:root[data-theme="light"]) .token-cost-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .token-cost-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .token-cost-header h2 { color: #1a1a1a; } :where(:root[data-theme="light"]) .token-cost-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .token-cost-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .token-cost-content { color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .token-cost-content h3 { color: rgba(0, 0, 0, 0.9); } /* Blocking expensive-resume warning card, rendered above the composer footer (.input-area). Dark-first with a light-mode override block, matching the repo's plain-CSS convention. */ .expensive-resume-warning { margin: 0 1rem 0.25rem; padding: 0.85rem 1rem; background: #2a2416; border: 1px solid #6b5a1e; border-radius: 10px; color: #e8e8e8; font-size: 0.85rem; } .expensive-resume-header { display: flex; align-items: center; gap: 0.5rem; } .expensive-resume-icon { color: #e6b422; font-size: 1rem; } .expensive-resume-title { font-weight: 600; flex: 1; } .expensive-resume-learn-more { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.8rem; padding: 0; text-decoration: underline; } .expensive-resume-learn-more:hover { color: var(--accent-text); } .expensive-resume-body { margin: 0.5rem 0 0.75rem; color: #c8c8c8; line-height: 1.45; } .expensive-resume-actions { display: flex; flex-direction: column; gap: 0.5rem; } .expensive-resume-action { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.55rem 0.75rem; background: #1f1f1f; border: 1px solid #444; border-radius: 8px; color: inherit; cursor: pointer; text-align: left; font-size: 0.85rem; } .expensive-resume-action:hover:not(:disabled) { border-color: var(--accent); background: #24242e; } .expensive-resume-action:disabled { opacity: 0.6; cursor: default; } .expensive-resume-action-label { font-weight: 600; } .expensive-resume-action-desc { color: #999; font-size: 0.78rem; line-height: 1.35; } .expensive-resume-action-continue .expensive-resume-action-label { color: #e6b422; } .expensive-resume-action-continue:hover:not(:disabled) { border-color: #6b5a1e; background: #262013; } .expensive-resume-error { margin-top: 0.5rem; color: #ff6b6b; font-size: 0.8rem; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .expensive-resume-warning { background: #fdf6e3; border-color: #e0c76a; color: #333; } :where(:root:not([data-theme="dark"])) .expensive-resume-icon { color: #b8860b; } :where(:root:not([data-theme="dark"])) .expensive-resume-body { color: #555; } :where(:root:not([data-theme="dark"])) .expensive-resume-action { background: #fff; border-color: #ccc; } :where(:root:not([data-theme="dark"])) .expensive-resume-action:hover:not(:disabled) { background: #f5f5ff; } :where(:root:not([data-theme="dark"])) .expensive-resume-action-desc { color: #777; } :where(:root:not([data-theme="dark"])) .expensive-resume-action-continue .expensive-resume-action-label { color: #9a7209; } :where(:root:not([data-theme="dark"])) .expensive-resume-action-continue:hover:not(:disabled) { background: #fbf3dd; border-color: #e0c76a; } } :where(:root[data-theme="light"]) .expensive-resume-warning { background: #fdf6e3; border-color: #e0c76a; color: #333; } :where(:root[data-theme="light"]) .expensive-resume-icon { color: #b8860b; } :where(:root[data-theme="light"]) .expensive-resume-body { color: #555; } :where(:root[data-theme="light"]) .expensive-resume-action { background: #fff; border-color: #ccc; } :where(:root[data-theme="light"]) .expensive-resume-action:hover:not(:disabled) { background: #f5f5ff; } :where(:root[data-theme="light"]) .expensive-resume-action-desc { color: #777; } :where(:root[data-theme="light"]) .expensive-resume-action-continue .expensive-resume-action-label { color: #9a7209; } :where(:root[data-theme="light"]) .expensive-resume-action-continue:hover:not(:disabled) { background: #fbf3dd; border-color: #e0c76a; } /* Conversation title unit at the top of the chat panel (Claude-style). */ .conversation-header { display: flex; align-items: center; padding: 0.625rem 1rem 0; flex-shrink: 0; /* Above the messages container so the dropdown floats over the transcript. */ position: relative; z-index: 20; } .conversation-header-unit { position: relative; max-width: min(60%, 560px); } .conversation-header-title-button { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; padding: 0.25rem 0.25rem 0.25rem 0.5rem; border: none; border-radius: 8px; background: transparent; color: var(--text); font-size: 0.9375rem; line-height: 1.4; cursor: pointer; transition: background-color 0.15s; } .conversation-header-title-button:hover, .conversation-header-title-button.open { background-color: var(--hover); } /* Keyboard focus keeps the ring; a mouse click doesn't leave one behind. */ .conversation-header-title-button:focus:not(:focus-visible), .conversation-header-menu-item:focus:not(:focus-visible) { outline: none; } .conversation-header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conversation-header-badge { flex-shrink: 0; padding: 0.0625rem 0.4rem; border-radius: 999px; background-color: var(--pressed); color: var(--text-secondary); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; } .conversation-header-chevron { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; background-color: var(--hover); color: var(--text-secondary); transition: background-color 0.15s, color 0.15s; } .conversation-header-title-button:hover .conversation-header-chevron, .conversation-header-title-button.open .conversation-header-chevron { background-color: var(--pressed); color: var(--text); } /* Inline rename input replaces the title while editing. */ .conversation-header-rename-input { width: 320px; max-width: 100%; padding: 0.3rem 0.5rem; border: 1px solid var(--accent); border-radius: 8px; background-color: var(--surface-raised); color: var(--text); font-size: 0.9375rem; font-family: inherit; outline: none; } /* Dropdown */ .conversation-header-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px; padding: 0.375rem; background-color: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-menu); z-index: 30; } .conversation-header-menu-item { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; border: none; border-radius: 8px; background: none; color: var(--text); font-size: 0.875rem; font-family: inherit; text-align: left; cursor: pointer; transition: background-color 0.12s; } .conversation-header-menu-item:hover { background-color: var(--hover); } .conversation-header-menu-icon { flex-shrink: 0; color: var(--text-secondary); } .conversation-header-menu-key { margin-left: auto; padding-left: 1.5rem; color: var(--text-muted); font-size: 0.8125rem; } .conversation-header-menu-separator { height: 1px; margin: 0.25rem 0.375rem; background-color: var(--border); } /* Chat panel container */ .chat-panel { flex: 1; height: 100vh; display: flex; flex-direction: column; background-color: var(--surface); position: relative; } /* Messages container. The transparent right border insets the scrollbar from the panel edge (scrollbars render inside the border box). */ .messages-container { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem 2rem; border-right: 6px solid transparent; } /* Custom scrollbar for messages */ .messages-container::-webkit-scrollbar { width: 8px; } .messages-container::-webkit-scrollbar-track { background: transparent; } .messages-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } .messages-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Messages list. The 720px cap keeps reply lines at a readable measure; the composer bubble and its banners share the same cap so they line up. */ .messages-list { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; margin: 0 auto; width: 100%; /* Trailing slack so scroll-to-bottom leaves ~3 lines of empty space below * the last message; otherwise the final message hugs the viewport edge. */ padding-bottom: 3rem; } /* Search result highlight animation */ .message-search-highlight { animation: searchHighlightFlash 2s ease-out; border-radius: 8px; } @keyframes searchHighlightFlash { 0% { background-color: rgb(var(--accent-rgb) / 0.25); } 100% { background-color: transparent; } } /* Loading state */ .chat-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; } /* Error state */ .chat-error { display: flex; align-items: center; justify-content: center; height: 100%; color: #ff6b6b; font-size: 0.875rem; text-align: center; padding: 2rem; } /* Empty conversation state */ .empty-conversation { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; text-align: center; } /* Streaming message styles */ .message.streaming { display: flex; flex-direction: column; gap: 0.375rem; align-items: flex-start; animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Slim row holding the typing indicator while a reply is in flight */ .message.streaming .message-header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); padding: 0 0.25rem; } .message.streaming .message-content { background: none; padding: 0.25rem 0.25rem; border-radius: 0; max-width: 100%; word-wrap: break-word; white-space: normal; line-height: 1.5; } /* Streaming message animation */ .message.streaming .message-content { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.9; } } /* Typing indicator */ .typing-indicator { display: inline-flex; align-items: center; gap: 3px; } .typing-indicator .dot { width: 4px; height: 4px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; animation: typing 1.4s infinite; } .typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; } .typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } } /* Pre-stream typing placeholder */ .typing-placeholder { color: rgba(255, 255, 255, 0.5); font-style: italic; } /* Streaming cursor */ .streaming-cursor { display: inline-block; width: 2px; height: 1em; background-color: rgba(255, 255, 255, 0.8); margin-left: 2px; vertical-align: text-bottom; animation: blink 1s step-end infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Input area */ .input-area { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; background-color: var(--surface); border-top: 1px solid var(--border); position: relative; } .input-area.drag-over { background-color: rgb(var(--accent-rgb) / 0.1); } /* Drop-target overlay shown while a file drag hovers the composer * (FileBrowser .drag-overlay pattern). */ .composer-drag-overlay { position: absolute; inset: 0; background-color: rgb(var(--accent-rgb) / 0.2); border: 2px dashed var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; z-index: 10; } .composer-drag-overlay p { margin: 0; color: white; font-weight: 500; font-size: 0.875rem; background-color: rgb(var(--accent-rgb) / 0.8); padding: 0.5rem 1rem; border-radius: 6px; pointer-events: none; } /* Slack thread deep link shown when the composer is locked for a * Slack-driven conversation. */ .slack-thread-link-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); padding: 0 0.25rem; } .slack-thread-link-note a { color: var(--accent-text); text-decoration: none; } .slack-thread-link-note a:hover { text-decoration: underline; } /* Persistent public-project warning above the composer input: the * conversation runs in an internet-enabled sandbox, so remind the user not * to type private/sensitive content. Amber palette matches the * expensive-resume warning card; dark-first with light-mode overrides in * the shared light block below. */ .public-project-warning { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #2a2416; border: 1px solid #6b5a1e; border-radius: 8px; color: #e0d5b0; font-size: 0.8rem; line-height: 1.4; } .public-project-warning strong { color: #e6b422; } .public-project-warning-icon { color: #e6b422; flex-shrink: 0; margin-top: 0.15rem; } /* Composer paste: rejection / status notice */ .paste-notice { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); padding: 0 0.25rem; } /* Composer paste: queued attachment thumbnails (above the input row) */ .paste-attachments-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 0.25rem; } .paste-attachment-thumb { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background-color: #2a2a2a; border: 1px solid rgba(255, 255, 255, 0.15); } .paste-attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .paste-attachment-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background-color: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.75rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .paste-attachment-remove:hover { background-color: rgba(0, 0, 0, 0.9); } .paste-attachment-remove:disabled { cursor: not-allowed; opacity: 0.5; } /* Generic file attachments: chips (above the input row) for files queued for upload-before-send. Distinct from the image thumbnails above. */ .file-attachments-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 0.25rem; } .file-attachment-chip { display: flex; align-items: center; gap: 0.375rem; max-width: 280px; padding: 0.25rem 0.5rem; border-radius: 6px; background-color: #2a2a2a; border: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.75rem; color: rgba(255, 255, 255, 0.87); } .file-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-attachment-size { color: rgba(255, 255, 255, 0.5); flex-shrink: 0; } .file-attachment-remove { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); font-size: 0.7rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .file-attachment-remove:hover { background-color: rgba(255, 255, 255, 0.25); } .file-attachment-remove:disabled { cursor: not-allowed; opacity: 0.5; } /* Flags popover anchor (mirrors AdminOpsMenu) */ .flags-container { position: relative; display: inline-flex; } /* Popover opens upward from the button, like the AdminOpsMenu dropdown */ .flags-popover { position: absolute; bottom: calc(100% + 0.5rem); left: 0; min-width: 280px; max-width: 360px; background-color: #2a2a2a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); padding: 0.25rem; z-index: 100; } .flags-popover-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; border-radius: 4px; cursor: pointer; transition: background-color 0.15s; } .flags-popover-row:hover { background-color: rgba(255, 255, 255, 0.05); } .flags-popover-row input[type="checkbox"] { margin-top: 0.15rem; flex-shrink: 0; cursor: pointer; } .flags-popover-text { display: flex; flex-direction: column; gap: 0.15rem; } .flags-popover-name { font-size: 0.8rem; color: rgba(255, 255, 255, 0.87); } .flags-popover-desc { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); line-height: 1.35; } /* Two-level model menu (trigger button + upward popover + flyout submenu). The trigger is a borderless pill sitting in the composer controls row; the popover mirrors the flags-popover look. */ .model-menu-container { position: relative; display: inline-flex; } .model-menu-trigger { display: flex; align-items: center; gap: 0.35rem; height: 30px; box-sizing: border-box; padding: 0 0.6rem; border: 1px solid transparent; border-radius: 15px; background: transparent; color: rgba(255, 255, 255, 0.65); font-family: inherit; font-size: 0.75rem; cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s; white-space: nowrap; } /* border-color stays transparent on hover: the global index.css button:hover rule would otherwise paint the borderless pill accent-blue. */ .model-menu-trigger:hover:not(:disabled) { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.08); border-color: transparent; } .model-menu-trigger:focus { outline: none; } .model-menu-trigger:focus-visible { border-color: var(--accent); } /* Long model names ellipsize so the row never overflows the bubble. */ .model-menu-trigger-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .model-menu-trigger:disabled { opacity: 0.6; cursor: not-allowed; } .model-menu-trigger svg { flex-shrink: 0; opacity: 0.6; } .model-menu { position: absolute; bottom: calc(100% + 0.5rem); left: 0; min-width: 220px; background-color: #2a2a2a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); padding: 0.25rem; z-index: 100; } .model-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.5rem; border: none; border-radius: 4px; background: none; font-family: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s; } .model-menu-item:hover, .model-menu-item-open { background-color: rgba(255, 255, 255, 0.05); } .model-menu-item-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .model-menu-item-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.87); white-space: nowrap; } .model-menu-item-sub { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); line-height: 1.35; white-space: nowrap; } .model-menu-item svg { flex-shrink: 0; color: rgba(255, 255, 255, 0.5); } .model-menu-item .model-menu-check { color: var(--accent); } .model-menu-divider { height: 1px; margin: 0.25rem 0.5rem; background: rgba(255, 255, 255, 0.1); } /* Anchor wrapper so the flyout positions against the "All models" row. */ .model-submenu-anchor { position: relative; } .model-submenu { position: absolute; left: calc(100% + 0.35rem); bottom: -0.25rem; min-width: 200px; max-height: 320px; overflow-y: auto; background-color: #2a2a2a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); padding: 0.25rem; z-index: 101; } /* Read-only "N flags enabled" label shown after the first message */ .flags-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); padding: 0.25rem 0.5rem; white-space: nowrap; cursor: default; } /* Message input textarea. Borderless: the surrounding .composer-bubble provides the chrome. Auto-resized inline (Composer.tsx handleInputChange), so no flex-basis here -- inside the COLUMN bubble a flex: 1 would pin the height to min-height. */ .message-input { flex: none; min-height: 24px; max-height: 200px; padding: 0.4rem 0.125rem; border: none; border-radius: 0; background: transparent; color: rgba(255, 255, 255, 0.87); font-family: inherit; font-size: 0.95rem; line-height: 1.5; resize: none; overflow-y: auto; } .message-input:focus { outline: none; } .message-input:disabled { opacity: 0.6; cursor: not-allowed; } .message-input::placeholder { color: rgba(255, 255, 255, 0.4); } /* Scrollbar for textarea */ .message-input::-webkit-scrollbar { width: 6px; } .message-input::-webkit-scrollbar-track { background: transparent; } .message-input::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } .message-input::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Light mode support */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .messages-container::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .messages-container::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .chat-loading, :where(:root:not([data-theme="dark"])) .empty-conversation { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .chat-error { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .message.streaming .message-header { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .message.streaming .message-content { background: none; color: rgba(0, 0, 0, 0.87); } :where(:root:not([data-theme="dark"])) .input-area.drag-over { background-color: rgb(var(--accent-rgb) / 0.05); } :where(:root:not([data-theme="dark"])) .slack-thread-link-note { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .public-project-warning { background: #fdf6e3; border-color: #e0c76a; color: #6b5a1e; } :where(:root:not([data-theme="dark"])) .public-project-warning strong, :where(:root:not([data-theme="dark"])) .public-project-warning-icon { color: #9a7209; } :where(:root:not([data-theme="dark"])) .slack-thread-link-note a { color: var(--accent-text); } :where(:root:not([data-theme="dark"])) .message-input { color: rgba(0, 0, 0, 0.87); } :where(:root:not([data-theme="dark"])) .message-input::placeholder { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .message-input::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .message-input::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .typing-indicator .dot { background-color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .typing-placeholder { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .streaming-cursor { background-color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .model-menu-trigger { color: rgba(0, 0, 0, 0.55); } :where(:root:not([data-theme="dark"])) .model-menu-trigger:hover:not(:disabled) { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .model-menu, :where(:root:not([data-theme="dark"])) .model-submenu { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .model-menu-item:hover, :where(:root:not([data-theme="dark"])) .model-menu-item-open { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .model-menu-item-label { color: rgba(0, 0, 0, 0.87); } :where(:root:not([data-theme="dark"])) .model-menu-item-sub { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .model-menu-item svg { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .model-menu-item .model-menu-check { color: var(--accent); } :where(:root:not([data-theme="dark"])) .model-menu-divider { background: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .flags-label { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .flags-popover { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .flags-popover-row:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .flags-popover-name { color: rgba(0, 0, 0, 0.87); } :where(:root:not([data-theme="dark"])) .flags-popover-desc { color: rgba(0, 0, 0, 0.5); } } :where(:root[data-theme="light"]) .messages-container::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .messages-container::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .chat-loading, :where(:root[data-theme="light"]) .empty-conversation { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .chat-error { color: #d32f2f; } :where(:root[data-theme="light"]) .message.streaming .message-header { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .message.streaming .message-content { background: none; color: rgba(0, 0, 0, 0.87); } :where(:root[data-theme="light"]) .input-area.drag-over { background-color: rgb(var(--accent-rgb) / 0.05); } :where(:root[data-theme="light"]) .slack-thread-link-note { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .public-project-warning { background: #fdf6e3; border-color: #e0c76a; color: #6b5a1e; } :where(:root[data-theme="light"]) .public-project-warning strong, :where(:root[data-theme="light"]) .public-project-warning-icon { color: #9a7209; } :where(:root[data-theme="light"]) .slack-thread-link-note a { color: var(--accent-text); } :where(:root[data-theme="light"]) .message-input { color: rgba(0, 0, 0, 0.87); } :where(:root[data-theme="light"]) .message-input::placeholder { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .message-input::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .message-input::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .typing-indicator .dot { background-color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .typing-placeholder { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .streaming-cursor { background-color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .model-menu-trigger { color: rgba(0, 0, 0, 0.55); } :where(:root[data-theme="light"]) .model-menu-trigger:hover:not(:disabled) { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .model-menu, :where(:root[data-theme="light"]) .model-submenu { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .model-menu-item:hover, :where(:root[data-theme="light"]) .model-menu-item-open { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .model-menu-item-label { color: rgba(0, 0, 0, 0.87); } :where(:root[data-theme="light"]) .model-menu-item-sub { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .model-menu-item svg { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .model-menu-item .model-menu-check { color: var(--accent); } :where(:root[data-theme="light"]) .model-menu-divider { background: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .flags-label { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .flags-popover { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .flags-popover-row:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .flags-popover-name { color: rgba(0, 0, 0, 0.87); } :where(:root[data-theme="light"]) .flags-popover-desc { color: rgba(0, 0, 0, 0.5); } /* ================================================================ Composer bubble (rendered by Composer.tsx on every viewport). A floating rounded bubble on the chat ground -- the auto-growing textarea on top, an icon-only controls row underneath (attach / skills / flags / model / context / send). No labels; the buttons carry tooltips. Matches the floating right-side workspace cards from the nav redesign. Desktop: the bubble sits in the flex column below the messages, always expanded, centered and capped at the messages-list width. Phone (same 768px breakpoint as useIsMobile / MobileShell): the bubble overlays the bottom of the messages area, collapses to a single input pill until focused or holding a draft, and its popovers become bubble-wide sheets. Those phone rules live in the media query at the end. ================================================================ */ /* The container floats over the chat ground: no full-width chrome. */ .input-area.composer { background: transparent; border-top: none; padding: 0.25rem 2rem 1rem; gap: 0.375rem; } .composer-bubble { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; max-width: 720px; margin: 0 auto; box-sizing: border-box; position: relative; background-color: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 22px; padding: 0.5rem 0.6rem 0.4rem 0.85rem; box-shadow: var(--shadow-card); transition: border-color 0.15s; } .composer:focus-within .composer-bubble { border-color: rgb(var(--accent-rgb) / 0.55); } /* Attachment rows (pasted images / queued files) sit inside the bubble. */ .composer-bubble .paste-attachments-row, .composer-bubble .file-attachments-row { margin: 0.15rem 0 0; } /* Banners rendered in the strip around the bubble: cap and center them with the bubble so they line up on wide chat panels. */ .composer > .public-project-warning, .composer > .slack-thread-link-note, .composer > .paste-notice { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* Icon-only controls row (second line of the bubble). */ .composer-controls { display: flex; align-items: center; gap: 0.25rem; min-width: 0; } .composer-spacer { flex: 1; } .composer-icon-btn { position: relative; width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.65); cursor: pointer; transition: color 0.15s, background-color 0.15s; } .composer-icon-btn:hover:not(:disabled) { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.08); } .composer-icon-btn:active:not(:disabled) { background-color: rgba(255, 255, 255, 0.12); } .composer-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Count badge pinned to an icon button's top-right corner. */ .composer-badge { position: absolute; top: 1px; right: 1px; display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.625rem; font-weight: 600; line-height: 1; pointer-events: none; } /* Inline "no credentials" warning next to the model trigger. */ .composer-no-models { font-size: 0.75rem; color: #f0ad4e; white-space: nowrap; cursor: help; } /* Round send / stop button (ChatGPT-style arrow). */ .composer-send { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background-color: var(--accent); color: var(--accent-contrast); cursor: pointer; transition: background-color 0.15s; } .composer-send:hover:not(:disabled) { background-color: var(--accent-hover); } .composer-send:disabled { opacity: 0.45; cursor: not-allowed; } .composer-send.composer-stop { background-color: #ff6b6b; } .composer-send.composer-stop:hover:not(:disabled) { background-color: #ff5252; } /* The ContextIndicator's own margin-left: auto is redundant next to the spacer and would fight the gap; neutralize it inside the row. */ .composer-controls .context-indicator-container { margin-left: 0; flex-shrink: 0; white-space: nowrap; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .composer-icon-btn { color: rgba(0, 0, 0, 0.55); } :where(:root:not([data-theme="dark"])) .composer-icon-btn:hover:not(:disabled) { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .composer-icon-btn:active:not(:disabled) { background-color: rgba(0, 0, 0, 0.09); } :where(:root:not([data-theme="dark"])) .composer-no-models { color: #b7791f; } } :where(:root[data-theme="light"]) .composer-icon-btn { color: rgba(0, 0, 0, 0.55); } :where(:root[data-theme="light"]) .composer-icon-btn:hover:not(:disabled) { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .composer-icon-btn:active:not(:disabled) { background-color: rgba(0, 0, 0, 0.09); } :where(:root[data-theme="light"]) .composer-no-models { color: #b7791f; } /* --------------------------------------------------------------- Phone widths (matches useIsMobile). The bubble overlays the messages area and collapses to an input pill until expanded. --------------------------------------------------------------- */ @media (max-width: 768px) { .input-area.composer { padding: 0.375rem 0.625rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); } /* Phones have no slack for the desktop 2rem gutters */ .messages-container { padding: 1rem; border-right: none; } /* Inside the chat panel the composer overlays the bottom of the messages area (.chat-panel is the positioned ancestor) instead of sitting below it in the flex column, so conversation text scrolls behind the transparent strip around the bubble. Scoped to .chat-panel so the home screen's composer keeps its in-flow layout. */ .chat-panel > .input-area.composer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; } /* Room below the last message for the overlaid composer (expanded bubble ~100px) plus the usual trailing slack; replaces the desktop 3rem. scroll-padding-bottom makes ChatPanel's scrollIntoView-based scroll-to-bottom stop with the last message clear of the bubble (the scroll anchor sits above the list padding, so without it auto-scroll parks the newest text behind the composer). */ .chat-panel .messages-container { scroll-padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); } .chat-panel .messages-list { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); } /* Collapsed pill: tighter radius/padding; the expanded bubble restores the shared desktop shape. Solid colours (not the tokens) because conversation text scrolls behind and the bubble must stay opaque. */ .composer-bubble { background-color: #2a2a2a; border-color: rgba(255, 255, 255, 0.14); border-radius: 26px; padding: 0.3rem 0.85rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } .composer.composer-expanded .composer-bubble { border-radius: 22px; padding: 0.5rem 0.6rem 0.4rem 0.85rem; } /* 16px keeps iOS Safari from auto-zooming on focus; the lower cap keeps a long draft from crowding out the conversation above the keyboard. */ .composer .message-input { font-size: 16px; max-height: 160px; } /* The read-only Slack note and paste notice render in the transparent strip around the bubble; conversation text scrolls behind them, so give them their own small bubble to stay legible. */ .composer > .slack-thread-link-note, .composer > .paste-notice { width: auto; align-self: center; padding: 0.25rem 0.75rem; border-radius: 12px; background-color: rgba(42, 42, 42, 0.92); } /* No room for the flags count label in the phone row. */ .composer .flags-label { display: none; } .composer .model-menu-trigger-label { max-width: 30vw; } /* Popovers (model menu + flyout, flags) are trigger-anchored on desktop; on a phone they overflow the viewport. Re-anchor them to the bubble instead (the containers go static so the bubble is the positioned ancestor) and render each as a full-bubble-width sheet floating above the composer. */ .composer .flags-container, .composer .model-menu-container, .composer .model-submenu-anchor { position: static; } .composer .flags-popover, .composer .model-menu { left: 0; right: 0; bottom: calc(100% + 0.5rem); min-width: 0; max-width: none; } .composer .flags-popover { max-height: 45vh; overflow-y: auto; } /* The "All models" flyout cannot escape the menu (its containing block), so overlay it on the menu, growing upward from the menu's bottom edge. NO overflow rule on .model-menu itself -- that would clip this child. */ .composer .model-submenu { left: 0; right: 0; bottom: 0; min-width: 0; max-width: none; max-height: 45vh; } } @media (max-width: 768px) and (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .composer-bubble { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } :where(:root:not([data-theme="dark"])) .composer > .slack-thread-link-note, :where(:root:not([data-theme="dark"])) .composer > .paste-notice { background-color: rgba(255, 255, 255, 0.92); } } @media (max-width: 768px) { :where(:root[data-theme="light"]) .composer-bubble { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } :where(:root[data-theme="light"]) .composer > .slack-thread-link-note, :where(:root[data-theme="light"]) .composer > .paste-notice { background-color: rgba(255, 255, 255, 0.92); } } /** * HomeComposer -- greeting + centering for the root empty-state screen. * * The composer itself reuses ChatPanel.css (.input-area.composer, the * .composer-bubble, etc.) unchanged; this file only styles the centered * column, the greeting, and a max-width wrapper so the composer doesn't * stretch full-bleed. */ .home-composer { /* Column layout: the greeting + composer are centered in the flexible body (as .main-content .no-conversation-selected in App.css used to center them), with the branding footer pinned to the bottom edge. */ flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .home-composer-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; min-height: 0; } /* Branding footer: two centered muted lines at the bottom of the home screen. */ .home-composer-footer { flex: none; padding: 0 1.5rem 1.25rem; text-align: center; color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; } .home-composer-footer-line { margin: 0; } /* Monochrome heart/bolt morph (HeartBoltMorph): inherits the muted footer colour via currentColor. The box is taller than the line so the bolt gets its proportions; centre it on the text and cancel its height with negative vertical margins so the line box doesn't grow. */ .home-composer-footer-heart { display: inline-block; vertical-align: middle; margin: -0.5em -0.15em; } .home-composer-inner { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: stretch; } .home-composer-greeting { font-size: 2.25rem; font-weight: 600; line-height: 1.2; text-align: center; margin: 0 0 1.5rem 0; color: rgba(255, 255, 255, 0.92); } /* Destination cue shown when the Sidebar is drilled into a project: the first send creates the chat inside that project, so name it up front. */ .home-composer-project-hint { margin: -0.75rem 0 1.25rem 0; text-align: center; font-size: 0.95rem; color: rgba(255, 255, 255, 0.55); } .home-composer-project-hint strong { font-weight: 600; color: rgba(255, 255, 255, 0.75); } .home-composer-error { margin: 0 0 0.75rem 0; padding: 0.6rem 0.85rem; border-radius: 8px; background-color: rgba(220, 38, 38, 0.15); border: 1px solid rgba(220, 38, 38, 0.4); color: #fca5a5; font-size: 0.9rem; text-align: center; } /* The composer reuses .input-area styling; here we just constrain its width within the centered column (it normally fills .input-area full-bleed). */ .home-composer-composer { width: 100%; } /* The composer's own floating bubble is the card here; drop the strip padding around it so the bubble aligns with the greeting column. */ .home-composer-composer .input-area.composer { padding: 0; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .home-composer-greeting { color: #213547; } :where(:root:not([data-theme="dark"])) .home-composer-project-hint { color: rgba(33, 53, 71, 0.6); } :where(:root:not([data-theme="dark"])) .home-composer-project-hint strong { color: rgba(33, 53, 71, 0.85); } :where(:root:not([data-theme="dark"])) .home-composer-error { background-color: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.35); color: #b91c1c; } } :where(:root[data-theme="light"]) .home-composer-greeting { color: #213547; } :where(:root[data-theme="light"]) .home-composer-project-hint { color: rgba(33, 53, 71, 0.6); } :where(:root[data-theme="light"]) .home-composer-project-hint strong { color: rgba(33, 53, 71, 0.85); } :where(:root[data-theme="light"]) .home-composer-error { background-color: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.35); color: #b91c1c; } /* Table Viewer Modal overlay */ .table-viewer-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } /* Modal container */ .table-viewer-modal { background-color: #2a2a2a; border-radius: 12px; width: 85vw; height: 85vh; max-width: 85vw; max-height: 85vh; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: slideUp 0.15s ease-out; display: flex; flex-direction: column; } /* Header */ .table-viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .table-viewer-title-group { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .table-viewer-title { margin: 0; font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .table-viewer-meta { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); white-space: nowrap; flex-shrink: 0; } .table-viewer-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: rgba(255, 255, 255, 0.5); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .table-viewer-close-button:hover { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); } /* Content area */ .table-viewer-content { flex: 1; overflow: auto; min-height: 0; } /* Table wrapper for horizontal scrolling */ .table-viewer-table-wrapper { overflow-x: auto; min-height: 100%; } /* Subtle dim while refetching (sort/pagination change) so the table stays visible instead of flickering to a loading placeholder. */ .table-viewer-table-wrapper.is-refetching { opacity: 0.6; transition: opacity 0.1s ease-out; pointer-events: none; } /* The data table */ .table-viewer-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } .table-viewer-table thead { position: sticky; top: 0; z-index: 1; } .table-viewer-table th { background-color: #333; color: rgba(255, 255, 255, 0.87); font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid rgba(255, 255, 255, 0.15); white-space: nowrap; } .table-viewer-table th.sortable { cursor: pointer; user-select: none; } .table-viewer-table th.sortable:hover { background-color: #3a3a3a; } .table-viewer-table th.sorted { color: #ffffff; } .table-viewer-table td { padding: 0.375rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.87); white-space: nowrap; max-width: 400px; overflow: hidden; text-overflow: ellipsis; } .table-viewer-table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); } .table-viewer-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); } /* Null cell styling */ .table-viewer-table td.cell-null { color: rgba(255, 255, 255, 0.3); font-style: italic; } /* Loading state */ .table-viewer-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, 0.5); font-size: 0.9375rem; } /* Error state */ .table-viewer-error { display: flex; align-items: center; justify-content: center; height: 100%; padding: 2rem; color: #ff6b6b; font-size: 0.9375rem; text-align: center; } /* Empty state */ .table-viewer-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, 0.5); font-size: 0.9375rem; } /* Pagination */ .table-viewer-pagination { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .table-viewer-pagination-info { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); } .table-viewer-pagination-buttons { display: flex; gap: 0.5rem; } .table-viewer-pagination-btn { padding: 0.3125rem 0.75rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); background: none; color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s; } .table-viewer-pagination-btn:hover:not(:disabled) { color: rgba(255, 255, 255, 0.87); background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } .table-viewer-pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Light mode support */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .table-viewer-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .table-viewer-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .table-viewer-title { color: #1a1a1a; } :where(:root:not([data-theme="dark"])) .table-viewer-meta { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .table-viewer-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .table-viewer-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .table-viewer-table th { background-color: #f0f0f0; color: #1a1a1a; border-bottom-color: rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .table-viewer-table th.sortable:hover { background-color: #e6e6e6; } :where(:root:not([data-theme="dark"])) .table-viewer-table th.sorted { color: #000000; } :where(:root:not([data-theme="dark"])) .table-viewer-table td { color: #1a1a1a; border-bottom-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .table-viewer-table tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); } :where(:root:not([data-theme="dark"])) .table-viewer-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root:not([data-theme="dark"])) .table-viewer-table td.cell-null { color: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .table-viewer-loading { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .table-viewer-error { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .table-viewer-empty { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .table-viewer-pagination { border-top-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .table-viewer-pagination-info { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .table-viewer-pagination-btn { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root:not([data-theme="dark"])) .table-viewer-pagination-btn:hover:not(:disabled) { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.3); } } :where(:root[data-theme="light"]) .table-viewer-modal { background-color: #ffffff; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .table-viewer-header { border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .table-viewer-title { color: #1a1a1a; } :where(:root[data-theme="light"]) .table-viewer-meta { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .table-viewer-close-button { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .table-viewer-close-button:hover { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .table-viewer-table th { background-color: #f0f0f0; color: #1a1a1a; border-bottom-color: rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .table-viewer-table th.sortable:hover { background-color: #e6e6e6; } :where(:root[data-theme="light"]) .table-viewer-table th.sorted { color: #000000; } :where(:root[data-theme="light"]) .table-viewer-table td { color: #1a1a1a; border-bottom-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .table-viewer-table tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); } :where(:root[data-theme="light"]) .table-viewer-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.04); } :where(:root[data-theme="light"]) .table-viewer-table td.cell-null { color: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .table-viewer-loading { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .table-viewer-error { color: #d32f2f; } :where(:root[data-theme="light"]) .table-viewer-empty { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .table-viewer-pagination { border-top-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .table-viewer-pagination-info { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .table-viewer-pagination-btn { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.7); } :where(:root[data-theme="light"]) .table-viewer-pagination-btn:hover:not(:disabled) { color: rgba(0, 0, 0, 0.87); background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.3); } /* Project Tables container */ .project-tables { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; background-color: transparent; } /* Header section */ .project-tables-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem 0.5rem; } .project-tables-header h3 { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .project-tables-refresh-button { background: transparent; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .project-tables-refresh-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } .project-tables-refresh-button:disabled { opacity: 0.4; cursor: not-allowed; } /* Error display */ .project-tables-error { padding: 0.5rem 0.75rem; color: #ff6b6b; font-size: 0.75rem; text-align: center; background-color: rgba(255, 107, 107, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Table list */ .project-tables-list { flex: 1; overflow-y: auto; overflow-x: hidden; } /* Custom scrollbar */ .project-tables-list::-webkit-scrollbar { width: 6px; } .project-tables-list::-webkit-scrollbar-track { background: transparent; } .project-tables-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } .project-tables-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Loading state */ .project-tables-loading { padding: 1.5rem 1rem; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 0.8125rem; } /* Empty state */ .project-tables-empty { padding: 1.5rem 1rem; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 0.8125rem; } .project-tables-empty p { margin: 0; } /* Table item */ .project-tables-item { display: flex; align-items: center; padding: 0.5rem 0.75rem; cursor: pointer; transition: background-color 0.15s; gap: 0.5rem; } .project-tables-item:hover { background-color: rgba(255, 255, 255, 0.05); } .project-tables-icon { flex-shrink: 0; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; } .project-tables-name { flex: 1; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.87); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Meatball menu */ .project-tables-menu-container { flex-shrink: 0; position: relative; } .project-tables-menu-button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 4px; background: none; color: rgba(255, 255, 255, 0.4); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, background-color 0.15s; } .project-tables-item:hover .project-tables-menu-button { opacity: 1; } .project-tables-menu-button:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); } .project-tables-menu-dropdown { position: absolute; right: 0; top: 100%; min-width: 120px; background-color: #2a2a2a; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 10; overflow: hidden; } .project-tables-menu-item { display: block; width: 100%; padding: 0.5rem 0.75rem; border: none; background: none; color: rgba(255, 255, 255, 0.8); font-size: 0.8125rem; text-align: left; cursor: pointer; transition: background-color 0.15s; } .project-tables-menu-item:hover { background-color: rgba(255, 255, 255, 0.1); } .project-tables-menu-item-danger { color: #ff6b6b; } .project-tables-menu-item-danger:hover { background-color: rgba(255, 107, 107, 0.1); } /* Light mode support */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .project-tables-refresh-button { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .project-tables-refresh-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); color: #213547; } :where(:root:not([data-theme="dark"])) .project-tables-error { color: #d32f2f; background-color: rgba(211, 47, 47, 0.1); border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .project-tables-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .project-tables-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .project-tables-loading, :where(:root:not([data-theme="dark"])) .project-tables-empty { color: rgba(0, 0, 0, 0.6); } :where(:root:not([data-theme="dark"])) .project-tables-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .project-tables-icon { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .project-tables-name { color: #213547; } :where(:root:not([data-theme="dark"])) .project-tables-menu-button { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .project-tables-menu-button:hover { color: #213547; background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .project-tables-menu-dropdown { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .project-tables-menu-item { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .project-tables-menu-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root:not([data-theme="dark"])) .project-tables-menu-item-danger { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .project-tables-menu-item-danger:hover { background-color: rgba(211, 47, 47, 0.1); } } :where(:root[data-theme="light"]) .project-tables-refresh-button { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .project-tables-refresh-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); color: #213547; } :where(:root[data-theme="light"]) .project-tables-error { color: #d32f2f; background-color: rgba(211, 47, 47, 0.1); border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .project-tables-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .project-tables-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .project-tables-loading, :where(:root[data-theme="light"]) .project-tables-empty { color: rgba(0, 0, 0, 0.6); } :where(:root[data-theme="light"]) .project-tables-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .project-tables-icon { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .project-tables-name { color: #213547; } :where(:root[data-theme="light"]) .project-tables-menu-button { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .project-tables-menu-button:hover { color: #213547; background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .project-tables-menu-dropdown { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .project-tables-menu-item { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .project-tables-menu-item:hover { background-color: rgba(0, 0, 0, 0.05); } :where(:root[data-theme="light"]) .project-tables-menu-item-danger { color: #d32f2f; } :where(:root[data-theme="light"]) .project-tables-menu-item-danger:hover { background-color: rgba(211, 47, 47, 0.1); } /* Right panel: a transparent column that hosts the floating workspace cards. The panel's own width is the resizable thing (inline style, >= 280px). */ .right-panel { width: 280px; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; padding: 0.75rem 0.75rem 0.75rem 0; flex-shrink: 0; position: relative; background-color: var(--surface); } /* Each workspace unit (files, project tables) floats as a raised card */ .right-panel-card { background-color: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; } /* Section within the right panel */ .right-panel-section { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* Width handle on the panel's left edge. The hit area is 12px wide; the visible pill only appears while the panel is hovered or being dragged. */ .right-panel-resize-handle { position: absolute; left: -6px; top: 0.75rem; bottom: 0.75rem; width: 12px; cursor: col-resize; z-index: 2; } .right-panel-resize-handle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 48px; transform: translate(-50%, -50%); border-radius: 2px; background-color: var(--border-strong); opacity: 0; transition: opacity 0.15s, background-color 0.15s, height 0.15s; } .right-panel:hover .right-panel-resize-handle::after, .right-panel.resizing-width .right-panel-resize-handle::after { opacity: 1; } .right-panel-resize-handle:hover::after, .right-panel.resizing-width .right-panel-resize-handle::after { background-color: var(--accent); height: 72px; } /* Gap between the two cards doubles as the split handle. */ .right-panel-divider { position: relative; height: 0.75rem; flex-shrink: 0; cursor: row-resize; } .right-panel-divider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 48px; height: 4px; transform: translate(-50%, -50%); border-radius: 2px; background-color: var(--border-strong); opacity: 0; transition: opacity 0.15s, background-color 0.15s, width 0.15s; } .right-panel:hover .right-panel-divider::after, .right-panel.resizing-split .right-panel-divider::after { opacity: 1; } .right-panel-divider:hover::after, .right-panel.resizing-split .right-panel-divider::after { background-color: var(--accent); width: 72px; } /* Data Connections. Neutral colours come from the design tokens in index.css so the Settings > Appearance colour theme applies; only the semantic status badges / buttons (green, red, amber) are literal. */ .connectors-list { display: flex; flex-direction: column; gap: 0; } .connector-row { display: flex; flex-wrap: nowrap; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); gap: 0.5rem; } .connector-row:last-child { border-bottom: none; } .connector-info { flex: 1; min-width: 0; } .connector-name { font-weight: 500; font-size: 0.875rem; } .connector-detail { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.125rem; } .connector-badge { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .connector-badge-ok { background: rgba(40, 167, 69, 0.15); color: #4caf50; } .connector-badge-off { background: rgba(220, 53, 69, 0.15); color: #ff6b6b; } .connector-badge-warn { background: rgba(255, 193, 7, 0.15); color: #ffc107; } .connector-btn { display: inline-block; padding: 0.25rem 0.875rem; border-radius: 4px; font-size: 0.8125rem; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; width: auto; } .connector-btn-connect { background: var(--accent); color: var(--accent-contrast); } .connector-btn-connect:hover { background: var(--accent-hover); color: var(--accent-contrast); } .connector-btn-reconnect { background: transparent; color: var(--accent-text); border: 1px solid var(--accent); } .connector-btn-reconnect:hover { background: var(--accent-soft); color: var(--accent-text); } /* API key connected state: key hint + disconnect */ .connector-key-hint { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); margin-right: 0.5rem; } .connector-btn-disconnect { display: inline-block; padding: 0.25rem 0.875rem; border-radius: 4px; font-size: 0.8125rem; font-weight: 500; background: transparent; color: #ff6b6b; border: 1px solid #ff6b6b; cursor: pointer; white-space: nowrap; } .connector-btn-disconnect:hover { background: rgba(220, 53, 69, 0.1); } /* Wrapper for key hint + disconnect in API key rows */ .connector-key-connected { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* API key form (inline within connector row) */ .api-key-form { display: contents; } .api-key-input { width: 220px; min-width: 120px; flex-shrink: 1; padding: 0.25rem 0.5rem; font-family: var(--font-mono); font-size: 0.8125rem; border: 1px solid var(--border-strong); border-radius: 4px; background-color: var(--surface-raised); color: var(--text); } .api-key-input:focus { outline: none; border-color: var(--accent); } .api-key-input::placeholder { color: var(--text-muted); } .api-key-status { font-size: 0.75rem; } .api-key-status.error { color: #ff6b6b; } /* Empty state shown before any connection has been added */ .connectors-empty { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--text-secondary); } /* Add Connection flow */ .add-connection-btn { margin-top: 0.75rem; border: none; } .add-connection-panel { margin-top: 0.75rem; border: 1px solid var(--border-strong); border-radius: 6px; padding: 0.75rem; } .add-connection-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .add-connection-title { font-size: 0.8125rem; font-weight: 600; } .add-connection-cancel { background: transparent; border: none; padding: 0; font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer; } .add-connection-cancel:hover { color: var(--text); } .add-connection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; } .add-connection-tile { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.875rem 0.5rem 0.75rem; background: transparent; border: 1px solid var(--border); border-radius: 8px; text-align: center; cursor: pointer; color: inherit; font: inherit; } .add-connection-tile:hover { background: rgb(var(--accent-rgb) / 0.08); border-color: var(--accent); } .add-connection-tile-icon { display: flex; align-items: center; justify-content: center; height: 28px; } .add-connection-tile-name { font-size: 0.8125rem; font-weight: 500; line-height: 1.2; } .add-connection-tile-kind { font-size: 0.6875rem; color: var(--text-muted); } /* Monochrome service icons (X, GitHub, generic fallback) follow the text color. */ .service-icon-mono { color: var(--text); } /* Small brand icon on connected rows */ .connector-row-icon { display: flex; align-items: center; flex-shrink: 0; margin-right: 0.25rem; } .connector-row-icon svg { width: 20px; height: 20px; } .add-connection-empty { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); } /* Key-entry step: inline form laid out as a row inside the panel */ .add-connection-keystep { display: flex; align-items: center; gap: 0.5rem; } .add-connection-keystep .api-key-input { flex: 1; width: auto; } /* Popup blocked notice */ .popup-blocked-notice { margin-top: 1rem; padding: 0.75rem; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 6px; } .popup-blocked-notice p { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); } .popup-blocked-notice a { color: var(--accent-text); } /* Light mode: only the literal semantic status colours need a darker, higher-contrast variant on light grounds. Everything else follows the tokens. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .connector-badge-ok { background: #d4edda; color: #155724; } :where(:root:not([data-theme="dark"])) .connector-badge-off { background: #f8d7da; color: #721c24; } :where(:root:not([data-theme="dark"])) .connector-badge-warn { background: #fff3cd; color: #856404; } :where(:root:not([data-theme="dark"])) .connector-btn-disconnect { color: #d32f2f; border-color: #d32f2f; } :where(:root:not([data-theme="dark"])) .connector-btn-disconnect:hover { background: rgba(220, 53, 69, 0.08); } :where(:root:not([data-theme="dark"])) .api-key-status.error { color: #d32f2f; } } :where(:root[data-theme="light"]) .connector-badge-ok { background: #d4edda; color: #155724; } :where(:root[data-theme="light"]) .connector-badge-off { background: #f8d7da; color: #721c24; } :where(:root[data-theme="light"]) .connector-badge-warn { background: #fff3cd; color: #856404; } :where(:root[data-theme="light"]) .connector-btn-disconnect { color: #d32f2f; border-color: #d32f2f; } :where(:root[data-theme="light"]) .connector-btn-disconnect:hover { background: rgba(220, 53, 69, 0.08); } :where(:root[data-theme="light"]) .api-key-status.error { color: #d32f2f; } /* Memories section. Colours come from the design tokens in index.css; only the semantic archived-badge amber is literal, so the light-mode block is limited to that. */ .memories-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .memories-archived-toggle { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer; } .memories-archived-toggle input[type="checkbox"] { cursor: pointer; } .memories-empty { color: var(--text-muted); text-align: center; padding: 2rem; font-size: 0.875rem; } .memories-list { display: flex; flex-direction: column; gap: 0.75rem; } .memory-card-content { font-size: 0.8125rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; margin-bottom: 0.5rem; } .memory-card-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .memory-card-date { font-size: 0.75rem; color: var(--text-muted); } .memory-badge-archived { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 10px; font-size: 0.6875rem; font-weight: 600; background: rgba(255, 193, 7, 0.15); color: #ffc107; } .memory-card-archived { opacity: 0.6; border-style: dashed; } /* Light mode: only the literal semantic status colour needs a darker, higher-contrast variant on light grounds. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .memory-badge-archived { background: rgba(255, 193, 7, 0.1); color: #856404; } } :where(:root[data-theme="light"]) .memory-badge-archived { background: rgba(255, 193, 7, 0.1); color: #856404; } /* Settings > Appearance: light / dark / auto scheme selector + colour-theme picker. Colours come from the design tokens in index.css, so no light-mode block is needed (the swatch tiles use the theme's own literal colours). */ .appearance-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; max-width: 36rem; } .appearance-theme-option { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; padding: 0.875rem; border-radius: 10px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text); text-align: left; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; } .appearance-theme-option:hover { background-color: var(--hover); border-color: var(--border-strong); } .appearance-theme-option.selected { border-color: var(--accent); background-color: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); } .appearance-theme-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .appearance-theme-icon { display: inline-flex; color: var(--text-secondary); } .appearance-theme-option.selected .appearance-theme-icon { color: var(--accent); } .appearance-theme-label { font-size: 0.875rem; font-weight: 600; } .appearance-theme-description { font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary); } .appearance-subheading { margin: 1.75rem 0 0.25rem; font-size: 0.9375rem; font-weight: 600; } .appearance-color-options { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } /* Miniature app preview: dark half | light half, each with a nav strip on the raised ground and an accent dot on the chat ground. */ .appearance-color-swatch { display: flex; width: 100%; height: 3.25rem; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-strong); margin-bottom: 0.25rem; } .appearance-color-swatch-half { position: relative; flex: 1; display: flex; } .appearance-color-swatch-nav { width: 32%; height: 100%; } .appearance-color-swatch-accent { position: absolute; right: 18%; bottom: 22%; width: 0.875rem; height: 0.875rem; border-radius: 50%; } .appearance-error { margin: 0.75rem 0 0; font-size: 0.8125rem; color: #f87171; } @media (max-width: 480px) { .appearance-theme-options { grid-template-columns: 1fr; } } /* Guides section. Every colour comes from the design tokens in index.css, so there is no light-mode block. */ .guides-deprecation-notice { padding: 0.625rem 0.75rem; margin-bottom: 0.75rem; border-radius: 6px; border: 1px solid rgb(var(--accent-rgb) / 0.4); background: var(--accent-soft); font-size: 0.8125rem; line-height: 1.5; color: var(--text); } .guides-skills-link { background: none; border: none; padding: 0; font-size: inherit; font-family: inherit; color: var(--accent-text); text-decoration: underline; cursor: pointer; } .guides-skills-link:hover { color: var(--accent); } .guides-list { display: flex; flex-direction: column; gap: 0.75rem; } .guide-card { transition: border-color 0.15s; } .guide-card-default { border-left: 3px solid var(--accent); } .guide-card-editing { border-color: var(--accent); } .guide-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; } .guide-card-name { font-size: 0.875rem; font-weight: 600; color: var(--text); } .guide-badge-default { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 10px; font-size: 0.6875rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-text); } .guide-card-preview { font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; margin-bottom: 0.5rem; } .guide-empty-hint { font-style: italic; color: var(--text-muted); } .guide-name-display { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .guide-name-text { font-size: 0.875rem; font-weight: 600; color: var(--text); } /* Settings > Slack. Every colour comes from the design tokens in index.css so the Settings > Appearance colour theme applies. */ .slack-settings-row { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.5rem; } .slack-settings-label { font-size: 0.8125rem; color: var(--text-secondary); } .slack-settings-select { padding: 0.375rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 0.875rem; max-width: 320px; cursor: pointer; } .slack-settings-select:focus { outline: none; border-color: var(--accent); } .slack-settings-checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text); cursor: pointer; } .slack-settings-hint { margin: 0; font-size: 0.75rem; color: var(--text-secondary); } .slack-settings-hint-error { color: #ff6b6b; } .slack-settings-number { padding: 0.375rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 0.875rem; max-width: 120px; } .slack-settings-number:focus { outline: none; border-color: var(--accent); } .slack-settings-number:disabled { opacity: 0.5; cursor: not-allowed; } /* Gmail settings section. Neutral colours come from the design tokens in index.css (label rows and the input on --surface-raised, text / border tokens elsewhere); only the semantic error red is literal, so the light-mode block is limited to that. */ .gmail-labels-empty { font-size: 0.8125rem; color: var(--text-secondary); font-style: italic; margin: 0.5rem 0; } .gmail-labels-list { list-style: none; margin: 0 0 0.75rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; max-width: 420px; } .gmail-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 4px; background-color: var(--surface-raised); } .gmail-label-name { font-size: 0.875rem; color: var(--text); overflow-wrap: anywhere; } .gmail-label-prefix { color: var(--text-muted); } .gmail-label-remove { flex-shrink: 0; background: none; border: none; color: var(--text-secondary); font-size: 1rem; line-height: 1; padding: 0.125rem 0.375rem; border-radius: 4px; cursor: pointer; } .gmail-label-remove:hover { color: #ff6b6b; background-color: rgba(255, 107, 107, 0.1); } .gmail-label-add-row { display: flex; gap: 0.5rem; max-width: 420px; } .gmail-label-input { flex: 1; padding: 0.375rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 0.875rem; } .gmail-label-input:focus { outline: none; border-color: var(--accent); } .gmail-label-add-button { padding: 0.375rem 0.75rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: transparent; color: var(--text); font-size: 0.875rem; cursor: pointer; } .gmail-label-add-button:hover:not(:disabled) { border-color: var(--accent); } .gmail-label-add-button:disabled { opacity: 0.5; cursor: default; } .gmail-label-input-error { font-size: 0.8125rem; color: #ff6b6b; margin: 0.375rem 0 0 0; max-width: 420px; } /* Light mode: only the literal semantic error red needs a darker, higher-contrast variant on light grounds. Everything else follows the tokens. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .gmail-label-remove:hover { color: #d32f2f; background-color: rgba(211, 47, 47, 0.08); } :where(:root:not([data-theme="dark"])) .gmail-label-input-error { color: #d32f2f; } } :where(:root[data-theme="light"]) .gmail-label-remove:hover { color: #d32f2f; background-color: rgba(211, 47, 47, 0.08); } :where(:root[data-theme="light"]) .gmail-label-input-error { color: #d32f2f; } /* SMS Messages section. Colours come from the design tokens in index.css; only the semantic status colours (amber untrusted banner, error red) are literal, so the light-mode block is limited to those. */ .sms-trust-banner { font-size: 0.8125rem; line-height: 1.4; padding: 0.5rem 0.625rem; border-radius: 4px; margin: 0 0 0.75rem 0; max-width: 480px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text-secondary); } .sms-trust-banner.untrusted { border-color: rgba(255, 193, 7, 0.4); background-color: rgba(255, 193, 7, 0.08); } .sms-templates-empty { font-size: 0.8125rem; color: var(--text-secondary); font-style: italic; margin: 0.5rem 0; } .sms-templates-list { list-style: none; margin: 0 0 0.75rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; max-width: 480px; } .sms-template-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 4px; background-color: var(--surface-raised); } .sms-template-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .sms-template-name { font-size: 0.875rem; font-weight: 600; color: var(--text); } .sms-template-body { font-size: 0.8125rem; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; } .sms-template-remove { flex-shrink: 0; background: none; border: none; color: var(--text-secondary); font-size: 1rem; line-height: 1; padding: 0.125rem 0.375rem; border-radius: 4px; cursor: pointer; } .sms-template-remove:hover { color: #ff6b6b; background-color: rgba(255, 107, 107, 0.1); } .sms-template-add { display: flex; flex-direction: column; gap: 0.375rem; max-width: 480px; } .sms-template-input, .sms-template-textarea { width: 100%; box-sizing: border-box; padding: 0.375rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 0.875rem; } .sms-template-textarea { resize: vertical; min-height: 3rem; } .sms-template-input:focus, .sms-template-textarea:focus { outline: none; border-color: var(--accent); } .sms-template-add-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .sms-template-count { font-size: 0.75rem; color: var(--text-muted); } .sms-template-add-button { padding: 0.375rem 0.75rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: transparent; color: var(--text); font-size: 0.875rem; cursor: pointer; } .sms-template-add-button:hover:not(:disabled) { border-color: var(--accent); } .sms-template-add-button:disabled { opacity: 0.5; cursor: default; } .sms-templates-error { font-size: 0.8125rem; color: #ff6b6b; margin: 0.375rem 0 0 0; max-width: 480px; } /* Light mode: only the literal semantic status colours need a darker, higher-contrast variant on light grounds. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .sms-trust-banner.untrusted { border-color: rgba(230, 160, 0, 0.5); background-color: rgba(255, 193, 7, 0.12); } :where(:root:not([data-theme="dark"])) .sms-template-remove:hover { color: #d32f2f; background-color: rgba(211, 47, 47, 0.08); } :where(:root:not([data-theme="dark"])) .sms-templates-error { color: #d32f2f; } } :where(:root[data-theme="light"]) .sms-trust-banner.untrusted { border-color: rgba(230, 160, 0, 0.5); background-color: rgba(255, 193, 7, 0.12); } :where(:root[data-theme="light"]) .sms-template-remove:hover { color: #d32f2f; background-color: rgba(211, 47, 47, 0.08); } :where(:root[data-theme="light"]) .sms-templates-error { color: #d32f2f; } /* Settings > Inference API. Neutral colours come from the design tokens in index.css so the Settings > Appearance colour theme applies; only the semantic status colours (copied green, warning amber, error red) are literal. */ .inf-key-empty { font-size: 0.8125rem; color: var(--text-secondary); font-style: italic; margin: 0.75rem 0 0 0; } .inf-key-created { border: 1px solid rgb(var(--accent-rgb) / 0.5); border-radius: 6px; background-color: rgb(var(--accent-rgb) / 0.08); padding: 0.75rem; margin-bottom: 1rem; max-width: 560px; } .inf-key-created-title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; } .inf-key-created-warning { font-size: 0.8125rem; color: #ffb74d; margin: 0 0 0.5rem 0; } .inf-key-token-row { display: flex; align-items: center; gap: 0.5rem; } .inf-key-token { flex: 1; font-family: monospace; font-size: 0.8125rem; color: var(--text); background-color: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0.375rem 0.5rem; overflow-wrap: anywhere; user-select: all; } .inf-key-copy-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.625rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: transparent; color: var(--text); font-size: 0.8125rem; cursor: pointer; } .inf-key-copy-btn:hover { border-color: var(--accent); } .inf-key-copy-btn.copied { color: #81c784; border-color: #81c784; } .inf-key-dismiss-btn { margin-top: 0.5rem; padding: 0.25rem 0.625rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: transparent; color: var(--text-secondary); font-size: 0.8125rem; cursor: pointer; } .inf-key-dismiss-btn:hover { border-color: var(--text-muted); } .inf-key-add-row { display: flex; gap: 0.5rem; max-width: 560px; } .inf-key-input { flex: 1; padding: 0.375rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 0.875rem; } .inf-key-input:focus { outline: none; border-color: var(--accent); } .inf-key-add-button { flex-shrink: 0; padding: 0.375rem 0.75rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: transparent; color: var(--text); font-size: 0.875rem; cursor: pointer; } .inf-key-add-button:hover:not(:disabled) { border-color: var(--accent); } .inf-key-add-button:disabled { opacity: 0.5; cursor: default; } .inf-key-error { font-size: 0.8125rem; color: #ff6b6b; margin: 0.375rem 0 0 0; max-width: 560px; } .inf-key-list { list-style: none; margin: 0.75rem 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; max-width: 560px; } .inf-key-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.625rem; border: 1px solid var(--border-strong); border-radius: 4px; background-color: var(--surface-raised); } .inf-key-row-main { flex: 1; display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; } .inf-key-name { font-size: 0.875rem; color: var(--text); overflow-wrap: anywhere; } .inf-key-hint { font-family: monospace; font-size: 0.75rem; color: var(--text-muted); } .inf-key-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; } .inf-key-delete { flex-shrink: 0; background: none; border: 1px solid transparent; color: var(--text-secondary); font-size: 0.8125rem; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; } .inf-key-delete:hover { color: #ff6b6b; background-color: rgba(255, 107, 107, 0.1); } /* Light mode: only the literal semantic status colours need a darker, higher-contrast variant on light grounds. Everything else follows the tokens. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .inf-key-created-warning { color: #b26a00; } :where(:root:not([data-theme="dark"])) .inf-key-copy-btn.copied { color: #2e7d32; border-color: #2e7d32; } :where(:root:not([data-theme="dark"])) .inf-key-error { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .inf-key-delete:hover { color: #d32f2f; background-color: rgba(211, 47, 47, 0.08); } } :where(:root[data-theme="light"]) .inf-key-created-warning { color: #b26a00; } :where(:root[data-theme="light"]) .inf-key-copy-btn.copied { color: #2e7d32; border-color: #2e7d32; } :where(:root[data-theme="light"]) .inf-key-error { color: #d32f2f; } :where(:root[data-theme="light"]) .inf-key-delete:hover { color: #d32f2f; background-color: rgba(211, 47, 47, 0.08); } /* Service Credentials settings section. Neutral colours come from the design tokens in index.css (cards on the modal ground with a --border-strong outline, inputs on --surface-raised, text / border tokens elsewhere); only the semantic status colours (configured green, unconfigured / error red, legacy-note amber) are literal, so the light-mode block is limited to those. */ .svc-cred-card { border: 1px solid var(--border-strong); border-radius: 8px; padding: 1rem; max-width: 560px; } .svc-cred-card + .svc-cred-card { margin-top: 1rem; } .svc-cred-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .svc-cred-card-header h4 { margin: 0; font-size: 0.9375rem; } .svc-cred-card-header-actions { display: flex; align-items: center; gap: 0.5rem; } .svc-cred-badge { font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 999px; white-space: nowrap; } .svc-cred-badge.configured { background-color: rgba(74, 222, 128, 0.15); color: #4ade80; } .svc-cred-badge.unconfigured { background-color: rgba(248, 113, 113, 0.15); color: #f87171; } .svc-cred-legacy-note { font-size: 0.8125rem; color: #fbbf24; margin: 0 0 0.75rem; } .svc-cred-load-error { font-size: 0.875rem; color: #f87171; } .svc-cred-row { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; } .svc-cred-label { font-size: 0.8125rem; color: var(--text-secondary); } .svc-cred-optional { color: var(--text-muted); } .svc-cred-input, .svc-cred-textarea { padding: 0.375rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 0.875rem; } .svc-cred-textarea { resize: vertical; font-family: monospace; font-size: 0.8125rem; } .svc-cred-input:focus, .svc-cred-textarea:focus { outline: none; border-color: var(--accent); } /* Enablement toggle (iOS-style switch) for boolean credential fields. */ .svc-cred-toggle { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; cursor: pointer; user-select: none; } .svc-cred-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .svc-cred-toggle-track { position: relative; flex-shrink: 0; width: 36px; height: 20px; border-radius: 999px; background-color: var(--text-muted); transition: background-color 0.15s ease; } /* The knob stays literal white: it must read against both the grey off-track and the accent on-track regardless of the theme's --accent-contrast. */ .svc-cred-toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background-color: #ffffff; transition: transform 0.15s ease; } .svc-cred-toggle-input:checked + .svc-cred-toggle-track { background-color: var(--accent); } .svc-cred-toggle-input:checked + .svc-cred-toggle-track .svc-cred-toggle-knob { transform: translateX(16px); } .svc-cred-toggle-input:focus-visible + .svc-cred-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; } .svc-cred-toggle-text { font-size: 0.875rem; color: var(--text); } /* Light mode: only the literal semantic status colours need a darker, higher-contrast variant on light grounds. Everything else follows the tokens. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .svc-cred-badge.configured { background-color: rgba(22, 163, 74, 0.12); color: #16a34a; } :where(:root:not([data-theme="dark"])) .svc-cred-badge.unconfigured { background-color: rgba(220, 38, 38, 0.1); color: #dc2626; } :where(:root:not([data-theme="dark"])) .svc-cred-legacy-note { color: #b45309; } :where(:root:not([data-theme="dark"])) .svc-cred-load-error { color: #dc2626; } } :where(:root[data-theme="light"]) .svc-cred-badge.configured { background-color: rgba(22, 163, 74, 0.12); color: #16a34a; } :where(:root[data-theme="light"]) .svc-cred-badge.unconfigured { background-color: rgba(220, 38, 38, 0.1); color: #dc2626; } :where(:root[data-theme="light"]) .svc-cred-legacy-note { color: #b45309; } :where(:root[data-theme="light"]) .svc-cred-load-error { color: #dc2626; } /* Per-user access editor inside a feature-gate card (Settings > Features). Neutral colours come from the design tokens in index.css so the Settings > Appearance colour theme applies; only the amber empty-list warning is literal. */ .feature-gate-access { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .feature-gate-access-title { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.375rem; } .feature-gate-radio { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; padding: 0.125rem 0; cursor: pointer; } .feature-gate-user-list { margin-top: 0.5rem; margin-left: 1.25rem; display: flex; flex-direction: column; gap: 0.125rem; max-height: 14rem; overflow-y: auto; } .feature-gate-user-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; padding: 0.125rem 0; cursor: pointer; } .feature-gate-user-email { color: var(--text-muted); font-size: 0.8125rem; } .feature-gate-empty-note { font-size: 0.8125rem; color: #fbbf24; padding: 0.25rem 0; } /* Light mode: only the literal amber warning needs a darker variant. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .feature-gate-empty-note { color: #b45309; } } :where(:root[data-theme="light"]) .feature-gate-empty-note { color: #b45309; } /* Inference Providers settings section. Neutral colours come from the design tokens in index.css (text / border tokens); only the semantic status colours (ok green, error red, warning amber) are literal, so the light-mode block is limited to those. */ .inf-prov-detected-note { font-size: 0.8125rem; color: var(--text-secondary); margin: 0 0 0.75rem; } .inf-prov-subsection { margin-bottom: 0.75rem; } .inf-prov-subsection:last-child { margin-bottom: 0; } .inf-prov-subsection-title { margin: 0 0 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); } .inf-prov-info-row { display: flex; gap: 0.75rem; font-size: 0.8125rem; padding: 0.125rem 0; } .inf-prov-info-label { flex: 0 0 7.5rem; color: var(--text-secondary); } .inf-prov-info-value { color: var(--text); word-break: break-all; } .inf-prov-info-value.mono { font-family: monospace; } .inf-prov-unconfigured-note { font-size: 0.8125rem; color: var(--text-secondary); margin: 0; } .inf-prov-problem { font-size: 0.8125rem; color: #fbbf24; margin: 0.25rem 0 0; } /* Inference cards span the dialog: the two-column body (config + models) needs more room than the 560px service-credential form cards */ .inf-prov-cards .svc-cred-card { max-width: none; } /* Two-column card body: provider config on the left, models on the right */ .inf-prov-columns { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; } .inf-prov-main { flex: 1 1 14rem; min-width: 0; } .inf-prov-models { flex: 1 1 15rem; min-width: 13rem; border-left: 1px solid var(--border-strong); padding-left: 1.25rem; } .inf-prov-models-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.375rem; } .inf-prov-models-header .inf-prov-subsection-title { margin: 0; } .inf-prov-models-note { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.75rem; } .inf-prov-model-row { padding: 0.1875rem 0; } /* Fixed column grid so the wire id, name and controls line up across rows: checkbox | wire id | friendly name | controls cluster (fixed width) */ .inf-prov-model-line { display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) 8rem; align-items: center; gap: 0.5rem; font-size: 0.8125rem; } .inf-prov-model-controls { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; min-width: 0; } .inf-prov-model-name { flex: 1 1 auto; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inf-prov-model-row.disabled .inf-prov-model-wire, .inf-prov-model-row.disabled .inf-prov-model-display { color: var(--text-muted); } .inf-prov-model-checkbox { flex: 0 0 auto; margin: 0; accent-color: var(--accent); cursor: pointer; } /* The wire id (what the API call sends) is the primary label; the friendly name sits beside it, muted */ .inf-prov-model-wire { min-width: 0; font-family: monospace; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inf-prov-model-display { min-width: 0; color: var(--text-secondary); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inf-prov-model-off-note { text-align: right; font-size: 0.6875rem; color: var(--text-muted); } /* Liveness indicator: grey = never checked, green = responding, red = failing */ .inf-prov-dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-muted); } .inf-prov-dot.ok { background: #34d399; } .inf-prov-dot.error { background: #f87171; } .inf-prov-model-remove-btn { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0.125rem; border: none; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; } .inf-prov-model-remove-btn:hover:not(:disabled) { color: #f87171; background: var(--hover); } .inf-prov-model-remove-btn:disabled { opacity: 0.5; cursor: default; } /* "Add model" typeahead on instance cards */ .inf-prov-add-model { position: relative; margin-top: 0.5rem; } .inf-prov-add-model-input { width: 100%; box-sizing: border-box; font-size: 0.8125rem; padding: 0.375rem 0.5rem; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); } .inf-prov-add-model-input:focus { outline: none; border-color: var(--accent); } .inf-prov-typeahead-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; max-height: 16rem; overflow-y: auto; margin-top: 0.25rem; background: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-card); } .inf-prov-typeahead-option { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.375rem 0.625rem; cursor: pointer; } .inf-prov-typeahead-option.active { background: var(--hover); } .inf-prov-typeahead-id { font-family: monospace; font-size: 0.8125rem; color: var(--text); word-break: break-all; } .inf-prov-typeahead-meta { font-size: 0.6875rem; color: var(--text-secondary); } .inf-prov-typeahead-empty { padding: 0.375rem 0.625rem; font-size: 0.75rem; color: var(--text-secondary); } .inf-prov-typeahead-warning { color: #fbbf24; } /* Three-dot header menu on instance cards (holds the destructive action) */ .inf-prov-kebab { position: relative; } .inf-prov-kebab-btn { display: inline-flex; align-items: center; padding: 0.25rem; border: none; border-radius: 4px; background: transparent; color: var(--text-secondary); cursor: pointer; } .inf-prov-kebab-btn:hover, .inf-prov-kebab-btn[aria-expanded="true"] { background: var(--hover); color: var(--text); } .inf-prov-kebab-menu { position: absolute; top: 100%; right: 0; z-index: 10; min-width: 12rem; margin-top: 0.25rem; padding: 0.25rem; background: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-card); } .inf-prov-kebab-item { display: block; width: 100%; text-align: left; font-size: 0.8125rem; padding: 0.375rem 0.625rem; border: none; border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; } .inf-prov-kebab-item:hover:not(:disabled) { background: var(--hover); } .inf-prov-kebab-item.danger { color: #f87171; } .inf-prov-kebab-item:disabled { opacity: 0.5; cursor: default; } /* Section footer: one add button per instance kind */ .inf-prov-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } .inf-prov-add-btn { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; padding: 0.375rem 0.75rem; border-radius: 6px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-secondary); cursor: pointer; } .inf-prov-add-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); } .inf-prov-add-btn:disabled { opacity: 0.5; cursor: default; } .inf-prov-model-spinner { flex: 0 0 auto; color: var(--text-secondary); animation: inf-prov-spin 1s linear infinite; } @keyframes inf-prov-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .inf-prov-model-check-btn { flex: 0 0 auto; font-size: 0.6875rem; padding: 0.125rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-secondary); cursor: pointer; } .inf-prov-model-check-btn:hover:not(:disabled) { border-color: var(--text-muted); color: var(--text); } .inf-prov-model-check-btn:disabled { opacity: 0.5; cursor: default; } /* Extracted provider error for a failed model check */ .inf-prov-model-error { font-size: 0.75rem; color: #f87171; margin: 0.125rem 0 0.25rem 1.375rem; word-break: break-word; white-space: pre-wrap; } /* Light mode: only the literal semantic status colours need a darker, higher-contrast variant on light grounds. Everything else follows the tokens. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .inf-prov-problem { color: #b45309; } :where(:root:not([data-theme="dark"])) .inf-prov-dot.ok { background: #059669; } :where(:root:not([data-theme="dark"])) .inf-prov-dot.error { background: #dc2626; } :where(:root:not([data-theme="dark"])) .inf-prov-model-remove-btn:hover:not(:disabled), :where(:root:not([data-theme="dark"])) .inf-prov-kebab-item.danger { color: #dc2626; } :where(:root:not([data-theme="dark"])) .inf-prov-typeahead-warning { color: #b45309; } :where(:root:not([data-theme="dark"])) .inf-prov-model-error { color: #dc2626; } } :where(:root[data-theme="light"]) .inf-prov-problem { color: #b45309; } :where(:root[data-theme="light"]) .inf-prov-dot.ok { background: #059669; } :where(:root[data-theme="light"]) .inf-prov-dot.error { background: #dc2626; } :where(:root[data-theme="light"]) .inf-prov-model-remove-btn:hover:not(:disabled), :where(:root[data-theme="light"]) .inf-prov-kebab-item.danger { color: #dc2626; } :where(:root[data-theme="light"]) .inf-prov-typeahead-warning { color: #b45309; } :where(:root[data-theme="light"]) .inf-prov-model-error { color: #dc2626; } /* Settings > Password and Settings > Sign-in (admin). Neutral colours come from the design tokens in index.css so the Settings > Appearance colour theme applies; only the semantic status colours (success green, warning amber, error red) are literal. */ .signin-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px; } .signin-row { display: flex; gap: 0.5rem; max-width: 560px; } .signin-input { flex: 1; padding: 0.375rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 0.875rem; } .signin-input:focus { outline: none; border-color: var(--accent); } .signin-button { align-self: flex-start; flex-shrink: 0; padding: 0.375rem 0.75rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: transparent; color: var(--text); font-size: 0.875rem; cursor: pointer; } .signin-button:hover:not(:disabled) { border-color: var(--accent); } .signin-button:disabled { opacity: 0.5; cursor: not-allowed; } .signin-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.5rem; } .signin-subheading { font-size: 0.9375rem; margin: 1.5rem 0 0.25rem 0; } .signin-status { font-size: 0.875rem; margin: 0.25rem 0; } .signin-status strong { color: var(--text); } .signin-success { font-size: 0.8125rem; color: #81c784; margin: 0.25rem 0; } .signin-warning { font-size: 0.8125rem; color: #ffb74d; margin: 0.25rem 0; } .signin-error { font-size: 0.8125rem; color: #ff6b6b; margin: 0.25rem 0; } .signin-link-box { border: 1px solid rgb(var(--accent-rgb) / 0.5); border-radius: 6px; background-color: rgb(var(--accent-rgb) / 0.08); padding: 0.75rem; margin-top: 0.75rem; max-width: 560px; } .signin-link-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; } .signin-link { flex: 1; font-family: monospace; font-size: 0.8125rem; color: var(--text); background-color: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0.375rem 0.5rem; overflow-wrap: anywhere; user-select: all; } .signin-copy-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.25rem; } .signin-copy-btn.copied { color: #81c784; border-color: #81c784; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .signin-success, :where(:root:not([data-theme="dark"])) .signin-copy-btn.copied { color: #2e7d32; border-color: #2e7d32; } :where(:root:not([data-theme="dark"])) .signin-warning { color: #b45309; } :where(:root:not([data-theme="dark"])) .signin-error { color: #c62828; } } :where(:root[data-theme="light"]) .signin-success, :where(:root[data-theme="light"]) .signin-copy-btn.copied { color: #2e7d32; border-color: #2e7d32; } :where(:root[data-theme="light"]) .signin-warning { color: #b45309; } :where(:root[data-theme="light"]) .signin-error { color: #c62828; } /* Settings > Model Selection (admin): table of per-model menu/usage settings on the left, a static rendering of the composer's model menu on the right. Neutral colours come from the design tokens in index.css so the colour theme applies; the preview borrows the real menu's classes from ChatPanel.css. */ .model-selection-layout { display: flex; gap: 1.5rem; align-items: flex-start; } .model-selection-main { flex: 1 1 auto; min-width: 0; } .model-selection-side { flex: 0 0 220px; position: sticky; top: 0; } /* Public mode has six columns, so the two previews move into a row above the table (source order keeps the table first for screen readers) and the table gets the full width. */ .model-selection-layout.public-mode { flex-direction: column; } .model-selection-layout.public-mode .model-selection-side { order: -1; position: static; flex: none; display: flex; gap: 1.5rem; width: 100%; } .model-selection-layout.public-mode .model-selection-preview { flex: 0 0 240px; } .model-selection-layout.public-mode .model-selection-preview + .model-selection-preview { margin-top: 0; } .model-selection-side-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 0.5rem; } .model-selection-preview + .model-selection-preview { margin-top: 1.25rem; } .model-selection-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .model-selection-table th, .model-selection-table td { padding: 0.375rem 0.5rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); } .model-selection-table thead th { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; } /* Two-row header in public mode: the group labels span a slot + allowed pair per visibility; the sub-header carries no bottom padding fuss. */ .model-selection-header-group { text-align: center !important; border-bottom: 1px solid var(--border) !important; } .model-selection-table thead tr + tr th { padding-top: 0.25rem; } .model-selection-group-row th { padding-top: 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border-strong); } .model-selection-col-model { width: 38%; max-width: 0; /* let the id line ellipsize instead of widening the column */ } .model-selection-table.public-mode .model-selection-col-model { width: 30%; } .model-selection-table.public-mode .model-selection-col-descriptor { min-width: 9rem; } .model-selection-col-slot { width: 4.5rem; white-space: nowrap; } .model-selection-col-descriptor { min-width: 11rem; } .model-selection-col-check { width: 3.5rem; text-align: center !important; } .model-selection-row.unavailable .model-selection-model-name { color: var(--text-secondary); } .model-selection-model-name { display: flex; align-items: center; gap: 0.4rem; min-width: 0; color: var(--text); } .model-selection-model-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .model-selection-model-id { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Unavailable marker after the name: grey = provider not configured, red = failing health check (same semantics as the Inference Providers liveness dot). */ .model-selection-status-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); } .model-selection-status-dot.failing { background: #f87171; } .model-selection-slot-select { width: 100%; padding: 0.3125rem 0.375rem; border-radius: 4px; border: 1px solid var(--border-strong); background-color: var(--surface-raised); color: var(--text); font-family: inherit; font-size: 0.8125rem; } .model-selection-slot-select:focus { outline: none; border-color: var(--accent); } .model-selection-descriptor-input { width: 100%; box-sizing: border-box; font-size: 0.8125rem; } .model-selection-note { font-size: 0.75rem; color: var(--text-secondary); margin: 0.75rem 0 0; } /* Save (shared SaveActions) and Discard on one baseline: the shared row carries the top margin, so its own is cancelled here, and Discard matches .settings-save-button's size (SettingsModal.css). */ .model-selection-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .model-selection-actions .settings-actions { margin-top: 0; } .model-selection-discard-btn { padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 500; font-family: inherit; line-height: normal; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-secondary); cursor: pointer; } .model-selection-discard-btn:hover { color: var(--text); border-color: var(--text-muted); } /* Preview: the real .model-menu is an upward-opening absolute popover; render it in flow here. Items are inert (no hover, default cursor). */ .model-selection-preview .model-menu { position: static; width: 100%; box-sizing: border-box; } .model-selection-preview .model-menu-item { cursor: default; } .model-selection-preview .model-menu-item:hover { background: none; } .model-selection-preview .model-menu-item-label, .model-selection-preview .model-menu-item-sub { overflow: hidden; text-overflow: ellipsis; } .model-selection-preview-unavailable { opacity: 0.45; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .model-selection-status-dot.failing { background: #dc2626; } } :where(:root[data-theme="light"]) .model-selection-status-dot.failing { background: #dc2626; } .model-selection-preview-note { font-size: 0.75rem; color: var(--text-muted); margin: 0.5rem 0 0; } /* Sign Out options. Neutral colours come from the design tokens in index.css; only the semantic status colours (disconnect amber, delete red) are literal, so the light-mode block is limited to those. */ .sign-out-options { display: flex; flex-direction: column; gap: 1.5rem; } .sign-out-option { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .sign-out-option:last-child { border-bottom: none; padding-bottom: 0; } .sign-out-option-info { flex: 1; margin-right: 1.5rem; } .sign-out-option-info h4 { margin: 0 0 0.25rem 0; font-size: 0.9375rem; font-weight: 600; } .sign-out-btn { padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 6px; border: none; cursor: pointer; transition: background-color 0.15s; font-family: inherit; white-space: nowrap; flex-shrink: 0; } .sign-out-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sign-out-btn-logout { background-color: var(--hover); color: var(--text); } .sign-out-btn-logout:hover:not(:disabled) { background-color: var(--pressed); } .sign-out-btn-disconnect { background-color: rgba(255, 165, 0, 0.15); color: #ffa500; } .sign-out-btn-disconnect:hover:not(:disabled) { background-color: rgba(255, 165, 0, 0.25); } .sign-out-btn-delete { background-color: rgba(220, 53, 69, 0.15); color: #ff6b6b; } .sign-out-btn-delete:hover:not(:disabled) { background-color: rgba(220, 53, 69, 0.25); } /* Light mode: only the literal semantic status colours need a darker, higher-contrast variant on light grounds. Everything else follows the tokens. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .sign-out-btn-disconnect { background-color: rgba(255, 165, 0, 0.1); color: #e69500; } :where(:root:not([data-theme="dark"])) .sign-out-btn-delete { background-color: rgba(220, 53, 69, 0.1); color: #d32f2f; } } :where(:root[data-theme="light"]) .sign-out-btn-disconnect { background-color: rgba(255, 165, 0, 0.1); color: #e69500; } :where(:root[data-theme="light"]) .sign-out-btn-delete { background-color: rgba(220, 53, 69, 0.1); color: #d32f2f; } /* About section: a centered card with release metadata and credits. Every colour comes from the design tokens in index.css, so no light-mode block is needed. */ .about-section { display: flex; flex-direction: column; min-height: 100%; } .about-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 1rem; gap: 0.75rem; } /* The mark has no tile behind it; a soft accent glow stands in for the old tile shadow. */ .about-logo { width: 72px; height: 72px; filter: drop-shadow(0 8px 24px rgb(var(--accent-rgb) / 0.35)); margin-bottom: 0.5rem; } .about-name { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; } .about-meta { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.25rem 0 0.5rem; font-size: 0.875rem; } .about-meta-row { display: flex; justify-content: center; gap: 0.5rem; } .about-meta-row dt { color: var(--text-secondary); } .about-meta-row dt::after { content: ':'; } .about-meta-row dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); } /* Shown only when HEAD has moved past the nearest release tag. */ .about-build-note { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); } .about-credit { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--text-secondary); } .about-license { margin: 0; max-width: 28rem; font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary); } .about-license a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .about-license a:hover { color: var(--accent-text); } /* Monochrome heart/bolt morph: inherits the credit line's muted colour via currentColor, matching the home composer footer. Taller than the line so the bolt keeps its proportions; centred on the text with negative vertical margins so the line box doesn't grow. */ .about-heart { display: inline-block; vertical-align: middle; margin: -0.5em -0.1em; } .about-github-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: var(--text); background-color: var(--hover); border: 1px solid var(--border); text-decoration: none; transition: background-color 0.15s, border-color 0.15s; } .about-github-link:hover { background-color: var(--pressed); border-color: var(--border-strong); } /* Settings modal. Every colour comes from the design tokens in index.css so the Settings > Appearance colour theme (src/themes.css) styles this screen too: the modal sits on --surface, inputs / cards on --surface-raised, and text / borders / hover states use the neutral chrome tokens. Only the semantic status colours (saved green, error red, archive amber) are literal, so the light-mode block below is limited to those. */ /* Settings overlay */ .settings-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.15s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Modal container */ .settings-modal { background-color: var(--surface); color: var(--text); border-radius: 12px; width: 80vw; height: 80vh; display: flex; flex-direction: column; box-shadow: var(--shadow-card); animation: slideUp 0.15s ease-out; } @keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Header */ .settings-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); } .settings-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--text); } .settings-close-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: var(--text-muted); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background-color 0.15s; } .settings-close-button:hover { color: var(--text); background-color: var(--hover); } /* Body with left nav + content */ .settings-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* Left navigation */ .settings-nav { width: 180px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 0.75rem; display: flex; flex-direction: column; justify-content: space-between; } .settings-nav-top { display: flex; flex-direction: column; gap: 0.25rem; } .settings-nav-bottom { display: flex; flex-direction: column; gap: 0.25rem; } .settings-nav-section-header { margin-top: 0.75rem; padding: 0 0.75rem 0.25rem; border-top: 1px solid var(--border); padding-top: 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .settings-nav-item { background: none; border: none; padding: 0.5rem 0.75rem; text-align: left; cursor: pointer; color: var(--text-secondary); border-radius: 6px; font-size: 0.875rem; font-family: inherit; transition: color 0.15s, background-color 0.15s; } .settings-nav-item:hover { color: var(--text); background-color: var(--hover); } .settings-nav-item.active { color: var(--text); background-color: var(--accent-soft); } /* Sign Out is a nav item too; these come AFTER .settings-nav-item so the red wins at equal specificity in both colour schemes. */ .settings-nav-signout { color: rgba(255, 100, 100, 0.7); } .settings-nav-signout:hover { color: rgba(255, 100, 100, 0.9); background-color: rgba(255, 100, 100, 0.1); } .settings-nav-signout.active { color: rgba(255, 100, 100, 0.9); background-color: rgba(255, 100, 100, 0.15); } /* Content area */ .settings-content { flex: 1; padding: 1.5rem; overflow-y: auto; min-width: 0; } .settings-loading { color: var(--text-muted); text-align: center; padding: 2rem; } /* Section shared styles */ .settings-section h3 { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; color: var(--text); } .settings-description { color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.5; margin: 0 0 1rem 0; } .settings-textarea { width: 100%; padding: 0.75rem; font-size: 0.875rem; font-family: inherit; line-height: 1.5; border: 1px solid var(--border-strong); border-radius: 8px; background-color: var(--surface-raised); color: var(--text); resize: vertical; min-height: 120px; box-sizing: border-box; } .settings-textarea:focus { outline: none; border-color: var(--accent); } .settings-textarea::placeholder { color: var(--text-muted); } /* Actions */ .settings-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .settings-save-button { padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 6px; border: none; background-color: var(--accent); color: var(--accent-contrast); cursor: pointer; transition: background-color 0.15s; font-family: inherit; } .settings-save-button:hover:not(:disabled) { background-color: var(--accent-hover); } .settings-save-button:disabled { opacity: 0.5; cursor: not-allowed; } .settings-save-status { font-size: 0.8125rem; } .settings-save-status.saved { color: #4caf50; } .settings-save-status.error { color: #ff6b6b; } /* Shared card/button styles used across sections (memories, guides, skills) */ .memories-create-btn { padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; font-family: inherit; border-radius: 6px; border: none; background-color: var(--accent); color: var(--accent-contrast); cursor: pointer; transition: background-color 0.15s; } .memories-create-btn:hover:not(:disabled) { background-color: var(--accent-hover); } .memories-create-btn:disabled { opacity: 0.5; cursor: not-allowed; } .memories-empty { color: var(--text-muted); text-align: center; padding: 2rem; font-size: 0.875rem; } .memory-card { border: 1px solid var(--border); border-radius: 8px; padding: 0.875rem; background-color: var(--surface-raised); transition: border-color 0.15s; } .memory-card:hover { border-color: var(--border-strong); } .memory-card-editing { border-color: var(--accent); } .memory-card-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .memory-btn { padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; font-family: inherit; border-radius: 4px; border: none; cursor: pointer; transition: background-color 0.15s; } .memory-btn:disabled { opacity: 0.5; cursor: not-allowed; } .memory-btn-save { background-color: var(--accent); color: var(--accent-contrast); } .memory-btn-save:hover:not(:disabled) { background-color: var(--accent-hover); } .memory-btn-cancel { background-color: var(--hover); color: var(--text-secondary); } .memory-btn-cancel:hover { background-color: var(--pressed); } .memory-btn-edit { background-color: var(--hover); color: var(--text-secondary); } .memory-btn-edit:hover { background-color: var(--pressed); } .memory-btn-archive { background-color: rgba(255, 193, 7, 0.1); color: #ffc107; } .memory-btn-archive:hover { background-color: rgba(255, 193, 7, 0.2); } .memory-btn-unarchive { background-color: rgba(76, 175, 80, 0.1); color: #4caf50; } .memory-btn-unarchive:hover { background-color: rgba(76, 175, 80, 0.2); } .memory-btn-delete { background-color: rgba(220, 53, 69, 0.1); color: #ff6b6b; } .memory-btn-delete:hover { background-color: rgba(220, 53, 69, 0.2); } .memory-edit-textarea { width: 100%; padding: 0.625rem; font-size: 0.8125rem; font-family: inherit; line-height: 1.5; border: 1px solid var(--border-strong); border-radius: 6px; background-color: var(--surface-raised); color: var(--text); resize: vertical; min-height: 80px; box-sizing: border-box; } .memory-edit-textarea:focus { outline: none; border-color: var(--accent); } .memory-edit-textarea::placeholder { color: var(--text-muted); } /* Shared guide-name-input used by guides and skills */ .guide-name-input { width: 100%; padding: 0.5rem 0.625rem; font-size: 0.875rem; font-weight: 600; font-family: inherit; border: 1px solid var(--border-strong); border-radius: 6px; background-color: var(--surface-raised); color: var(--text); margin-bottom: 0.5rem; box-sizing: border-box; } .guide-name-input:focus { outline: none; border-color: var(--accent); } .guide-name-input::placeholder { color: var(--text-muted); font-weight: 400; } /* Shared guide-card-preview used by guides and skills */ .guide-card-preview { font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; margin-bottom: 0.5rem; } .guide-empty-hint { font-style: italic; color: var(--text-muted); } /* Mobile: full-screen takeover with a two-tier drill-in nav. Scoped by class (set from the useIsMobile hook) rather than a media query so the JS breakpoint stays the single source of truth. */ .settings-overlay-mobile { align-items: stretch; justify-content: stretch; } .settings-modal-mobile { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; } /* iOS auto-zoom guard: the modal is portaled to document.body, outside .mobile-shell, so mirror its 16px form-control rule here. */ .settings-modal-mobile input, .settings-modal-mobile textarea, .settings-modal-mobile select { font-size: 16px; } .settings-modal-mobile .settings-header { gap: 0.5rem; } .settings-modal-mobile .settings-header h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-back-button { background: none; border: none; padding: 0.25rem; cursor: pointer; color: var(--text-muted); border-radius: 6px; display: flex; align-items: center; justify-content: center; } /* First tier: the nav list fills the screen */ .settings-modal-mobile .settings-body { position: relative; } .settings-modal-mobile .settings-nav { width: 100%; box-sizing: border-box; border-right: none; padding: 0.75rem 1rem; overflow-y: auto; } .settings-modal-mobile .settings-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem; font-size: 1rem; } .settings-nav-chevron { color: var(--text-muted); flex-shrink: 0; } /* Second tier: the section content slides over the nav list */ .settings-modal-mobile .settings-content { position: absolute; inset: 0; background-color: var(--surface); padding: 1rem; transform: translateX(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; } .settings-modal-mobile.settings-mobile-section-open .settings-content { transform: translateX(0); visibility: visible; transition: transform 0.25s ease; } /* About sits after every other top-group section, separated by a hairline */ .settings-nav-about { margin-top: 0.75rem; border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; padding-top: 0.75rem; } /* Light mode: only the literal semantic status colours need a darker, higher-contrast variant on light grounds. Everything else follows the tokens. */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .settings-overlay { background-color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .settings-nav-signout { color: rgba(220, 53, 69, 0.7); } :where(:root:not([data-theme="dark"])) .settings-nav-signout:hover { color: rgba(220, 53, 69, 0.9); background-color: rgba(220, 53, 69, 0.08); } :where(:root:not([data-theme="dark"])) .settings-nav-signout.active { color: rgba(220, 53, 69, 0.9); background-color: rgba(220, 53, 69, 0.1); } :where(:root:not([data-theme="dark"])) .settings-save-status.error { color: #d32f2f; } :where(:root:not([data-theme="dark"])) .memory-btn-archive { background-color: rgba(255, 193, 7, 0.08); color: #e69500; } :where(:root:not([data-theme="dark"])) .memory-btn-unarchive { background-color: rgba(76, 175, 80, 0.08); color: #388e3c; } :where(:root:not([data-theme="dark"])) .memory-btn-delete { background-color: rgba(220, 53, 69, 0.08); color: #d32f2f; } } :where(:root[data-theme="light"]) .settings-overlay { background-color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .settings-nav-signout { color: rgba(220, 53, 69, 0.7); } :where(:root[data-theme="light"]) .settings-nav-signout:hover { color: rgba(220, 53, 69, 0.9); background-color: rgba(220, 53, 69, 0.08); } :where(:root[data-theme="light"]) .settings-nav-signout.active { color: rgba(220, 53, 69, 0.9); background-color: rgba(220, 53, 69, 0.1); } :where(:root[data-theme="light"]) .settings-save-status.error { color: #d32f2f; } :where(:root[data-theme="light"]) .memory-btn-archive { background-color: rgba(255, 193, 7, 0.08); color: #e69500; } :where(:root[data-theme="light"]) .memory-btn-unarchive { background-color: rgba(76, 175, 80, 0.08); color: #388e3c; } :where(:root[data-theme="light"]) .memory-btn-delete { background-color: rgba(220, 53, 69, 0.08); color: #d32f2f; } .sign-in-screen { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background-color: #242424; } .sign-in-card { text-align: center; max-width: 400px; padding: 2rem; } .sign-in-title { font-size: 2.5rem; margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.87); } .sign-in-subtitle { color: rgba(255, 255, 255, 0.5); margin-bottom: 2rem; font-size: 1rem; } .sign-in-button { display: inline-block; padding: 0.75rem 2rem; background-color: #4285f4; color: white; text-decoration: none; border-radius: 6px; font-size: 1rem; font-weight: 500; transition: background-color 0.15s; } .sign-in-button:hover { background-color: #357abd; color: white; } .sign-in-error { color: #ff6b6b; margin-bottom: 1rem; } .sign-in-loading { color: rgba(255, 255, 255, 0.5); } .sign-in-note { margin-top: 2rem; color: rgba(255, 255, 255, 0.4); font-size: 0.875rem; } .password-sign-in { display: flex; flex-direction: column; gap: 0.75rem; width: 320px; max-width: 100%; margin: 0 auto; text-align: left; } .password-submit { border: none; cursor: pointer; text-align: center; } .password-submit:disabled { background-color: rgba(66, 133, 244, 0.5); cursor: not-allowed; } .password-links { display: flex; justify-content: space-between; } .sign-in-link-button { align-self: center; padding: 0; border: none; background: none; color: #6ea8fe; font-size: 0.875rem; cursor: pointer; } .sign-in-link-button:hover { text-decoration: underline; } .password-help, .password-notice { margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 0.875rem; line-height: 1.4; } .password-notice { color: rgba(255, 255, 255, 0.8); } .dev-login-section { margin-top: 1.5rem; } .dev-login-divider { display: flex; align-items: center; margin-bottom: 1rem; } .dev-login-divider::before, .dev-login-divider::after { content: ''; flex: 1; height: 1px; background-color: rgba(255, 255, 255, 0.2); } .dev-login-divider span { padding: 0 0.75rem; color: rgba(255, 255, 255, 0.4); font-size: 0.875rem; } .dev-accounts-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .dev-account-button { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.6rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 0.95rem; cursor: pointer; text-align: left; transition: border-color 0.15s, background-color 0.15s; } .dev-account-button:hover { border-color: #e6923a; background-color: rgba(230, 146, 58, 0.1); } .dev-account-button:disabled { opacity: 0.5; cursor: not-allowed; } .dev-account-name { font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .dev-account-admin-badge { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: #e6923a; border: 1px solid rgba(230, 146, 58, 0.6); border-radius: 4px; padding: 0 0.35rem; } .dev-account-email { font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); } .dev-login-form { display: flex; flex-direction: column; gap: 0.75rem; } .dev-login-input { padding: 0.75rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.87); font-size: 1rem; outline: none; transition: border-color 0.15s; } .dev-login-input::placeholder { color: rgba(255, 255, 255, 0.35); } .dev-login-input:focus { border-color: #e6923a; } .dev-login-button { padding: 0.75rem 2rem; background-color: #e6923a; color: white; border: none; border-radius: 6px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s; } .dev-login-button:hover { background-color: #cf7d2e; } .dev-login-button:disabled { background-color: rgba(230, 146, 58, 0.5); cursor: not-allowed; } .dev-login-note { margin-top: 0.75rem; color: rgba(255, 255, 255, 0.35); font-size: 0.8rem; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .sign-in-screen { background-color: #ffffff; } :where(:root:not([data-theme="dark"])) .sign-in-title { color: #213547; } :where(:root:not([data-theme="dark"])) .sign-in-subtitle { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .sign-in-note { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .sign-in-loading { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .dev-login-divider::before, :where(:root:not([data-theme="dark"])) .dev-login-divider::after { background-color: rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .dev-login-divider span { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .dev-login-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #213547; } :where(:root:not([data-theme="dark"])) .dev-login-input::placeholder { color: rgba(0, 0, 0, 0.35); } :where(:root:not([data-theme="dark"])) .dev-login-note { color: rgba(0, 0, 0, 0.35); } :where(:root:not([data-theme="dark"])) .password-help { color: rgba(0, 0, 0, 0.55); } :where(:root:not([data-theme="dark"])) .password-notice { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .sign-in-link-button { color: #1a73e8; } :where(:root:not([data-theme="dark"])) .dev-account-button { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #213547; } :where(:root:not([data-theme="dark"])) .dev-account-button:hover { border-color: #e6923a; background-color: rgba(230, 146, 58, 0.08); } :where(:root:not([data-theme="dark"])) .dev-account-email { color: rgba(0, 0, 0, 0.45); } } :where(:root[data-theme="light"]) .sign-in-screen { background-color: #ffffff; } :where(:root[data-theme="light"]) .sign-in-title { color: #213547; } :where(:root[data-theme="light"]) .sign-in-subtitle { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .sign-in-note { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .sign-in-loading { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .dev-login-divider::before, :where(:root[data-theme="light"]) .dev-login-divider::after { background-color: rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .dev-login-divider span { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .dev-login-input { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #213547; } :where(:root[data-theme="light"]) .dev-login-input::placeholder { color: rgba(0, 0, 0, 0.35); } :where(:root[data-theme="light"]) .dev-login-note { color: rgba(0, 0, 0, 0.35); } :where(:root[data-theme="light"]) .password-help { color: rgba(0, 0, 0, 0.55); } :where(:root[data-theme="light"]) .password-notice { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .sign-in-link-button { color: #1a73e8; } :where(:root[data-theme="light"]) .dev-account-button { border-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); color: #213547; } :where(:root[data-theme="light"]) .dev-account-button:hover { border-color: #e6923a; background-color: rgba(230, 146, 58, 0.08); } :where(:root[data-theme="light"]) .dev-account-email { color: rgba(0, 0, 0, 0.45); } .password-sign-in .dev-login-input:focus { border-color: #4285f4; } /* RequestsView - Full-pane view for all action requests */ .requests-view { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; background-color: var(--surface); } .requests-view-header { position: sticky; top: 0; z-index: 10; padding: 1.25rem 2rem 0.75rem; background-color: var(--surface); border-bottom: 1px solid var(--border); } .requests-view-header h2 { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); } /* Filter pills */ .requests-filter-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; } .requests-filter-pill { padding: 0.3rem 0.75rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.15); background: none; color: rgba(255, 255, 255, 0.6); font-size: 0.8125rem; cursor: pointer; transition: all 0.15s ease; } .requests-filter-pill:hover { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.8); } .requests-filter-pill.active { background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .requests-filter-pill .pill-count { margin-left: 0.35rem; opacity: 0.7; } /* Scrollable content area */ .requests-view-content { flex: 1; overflow-y: auto; padding: 1rem 2rem 2rem; } .requests-view-content::-webkit-scrollbar { width: 8px; } .requests-view-content::-webkit-scrollbar-track { background: transparent; } .requests-view-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } .requests-view-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } /* Inner wrapper for max-width centering */ .requests-view-inner { max-width: 800px; margin: 0 auto; } /* Loading and empty states */ .requests-view-loading { display: flex; justify-content: center; padding: 3rem 1rem; color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; } .requests-view-empty { text-align: center; padding: 4rem 2rem; color: rgba(255, 255, 255, 0.4); font-size: 0.9rem; line-height: 1.6; } /* New requests banner */ .new-requests-banner { display: block; width: auto; margin: 0 auto 0.75rem; padding: 0.4rem 1rem; border-radius: 16px; border: none; background-color: var(--accent); color: var(--accent-contrast); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease; text-align: center; } .new-requests-banner:hover:not(:disabled) { background-color: var(--accent-hover); } .new-requests-banner:disabled { opacity: 0.7; cursor: not-allowed; } /* Request card */ .request-card { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; background-color: #222222; transition: border-color 0.15s ease; } .request-card.open { border-color: rgb(var(--accent-rgb) / 0.4); } .request-card.executed { border-color: rgba(80, 200, 120, 0.25); opacity: 0.85; } .request-card.denied, .request-card.stopped { border-color: rgba(255, 100, 100, 0.2); opacity: 0.7; } /* Card header row */ .request-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .request-type-name { font-weight: 600; font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); } .request-id-badge { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.08); padding: 0.1rem 0.4rem; border-radius: 4px; font-family: monospace; } .request-status-pill { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: 10px; margin-left: auto; } .request-status-pill.open { background-color: rgb(var(--accent-rgb) / 0.15); color: var(--accent-text); } .request-status-pill.executed { background-color: rgba(80, 200, 120, 0.15); color: #50c878; } .request-status-pill.denied, .request-status-pill.stopped { background-color: rgba(255, 100, 100, 0.12); color: #ff8080; } /* Context row */ .request-context { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.4rem; } .request-context-routine { font-weight: 500; color: rgba(255, 255, 255, 0.65); } .request-context-project { color: rgba(255, 255, 255, 0.4); } /* Conversation link */ .request-conversation-link { display: inline-block; font-size: 0.8rem; color: var(--accent); cursor: pointer; margin-bottom: 0.5rem; text-decoration: none; transition: color 0.15s; } .request-conversation-link:hover { color: var(--accent-text); text-decoration: underline; } /* Reasoning */ .request-reasoning { font-style: italic; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.5rem; line-height: 1.4; } /* Preview */ .request-preview { background-color: rgba(0, 0, 0, 0.25); border-radius: 6px; padding: 0.75rem; margin-bottom: 0.5rem; } .request-preview-field { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.85rem; line-height: 1.5; } .request-preview-field:last-child { margin-bottom: 0; } .request-preview-key { font-weight: 600; color: rgba(255, 255, 255, 0.5); flex-shrink: 0; } .request-preview-value { color: rgba(255, 255, 255, 0.85); word-break: break-word; white-space: pre-wrap; } /* Thread context */ .request-thread-context { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .request-thread-context > .request-preview-key { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; } .request-thread-messages { border-left: 2px solid rgb(var(--accent-rgb) / 0.3); padding-left: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; } .request-thread-parent, .request-thread-reply { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8rem; line-height: 1.4; } .request-thread-parent { padding-bottom: 0.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .request-thread-user { font-weight: 600; color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; } .request-thread-text { color: rgba(255, 255, 255, 0.5); word-break: break-word; white-space: pre-wrap; } .request-thread-gap { font-size: 0.75rem; color: rgba(255, 255, 255, 0.3); font-style: italic; padding: 0.1rem 0; } .request-preview pre { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); white-space: pre-wrap; word-break: break-word; } /* Action buttons */ .request-actions { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .request-btn { padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid transparent; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .request-btn.approve { background-color: #2ea043; color: white; } .request-btn.approve:hover:not(:disabled) { background-color: #268a38; } .request-btn.revise { background-color: #d99f34; color: #1a1a1a; } .request-btn.revise:hover:not(:disabled) { background-color: #c08c2c; } .request-btn.deny, .request-btn.stop { background-color: #cf3030; color: white; } .request-btn.deny:hover:not(:disabled), .request-btn.stop:hover:not(:disabled) { background-color: #b22828; } .request-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Error */ .request-error { color: #ff6464; font-size: 0.85rem; margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; background-color: rgba(255, 100, 100, 0.1); border-radius: 6px; border: 1px solid rgba(255, 100, 100, 0.2); } /* Timestamp */ .request-timestamp { font-size: 0.75rem; color: rgba(255, 255, 255, 0.3); } /* Light mode support */ @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .requests-view-header h2 { color: rgba(0, 0, 0, 0.85); } :where(:root:not([data-theme="dark"])) .requests-filter-pill { border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.55); } :where(:root:not([data-theme="dark"])) .requests-filter-pill:hover { border-color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .requests-filter-pill.active { background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } :where(:root:not([data-theme="dark"])) .requests-view-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); } :where(:root:not([data-theme="dark"])) .requests-view-content::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } :where(:root:not([data-theme="dark"])) .requests-view-loading { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .requests-view-empty { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .new-requests-banner { background-color: var(--accent); color: var(--accent-contrast); } :where(:root:not([data-theme="dark"])) .new-requests-banner:hover:not(:disabled) { background-color: var(--accent-hover); } :where(:root:not([data-theme="dark"])) .request-card { border-color: rgba(0, 0, 0, 0.1); background-color: #fafafa; } :where(:root:not([data-theme="dark"])) .request-card.open { border-color: rgb(var(--accent-rgb) / 0.35); } :where(:root:not([data-theme="dark"])) .request-card.executed { border-color: rgba(80, 200, 120, 0.3); } :where(:root:not([data-theme="dark"])) .request-card.denied, :where(:root:not([data-theme="dark"])) .request-card.stopped { border-color: rgba(255, 100, 100, 0.2); } :where(:root:not([data-theme="dark"])) .request-type-name { color: rgba(0, 0, 0, 0.85); } :where(:root:not([data-theme="dark"])) .request-id-badge { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .request-status-pill.open { background-color: rgb(var(--accent-rgb) / 0.1); color: var(--accent-text); } :where(:root:not([data-theme="dark"])) .request-status-pill.executed { background-color: rgba(80, 200, 120, 0.1); color: #2e8b57; } :where(:root:not([data-theme="dark"])) .request-status-pill.denied, :where(:root:not([data-theme="dark"])) .request-status-pill.stopped { background-color: rgba(255, 100, 100, 0.08); color: #cc4444; } :where(:root:not([data-theme="dark"])) .request-context { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .request-context-routine { color: rgba(0, 0, 0, 0.65); } :where(:root:not([data-theme="dark"])) .request-context-project { color: rgba(0, 0, 0, 0.4); } :where(:root:not([data-theme="dark"])) .request-conversation-link { color: var(--accent); } :where(:root:not([data-theme="dark"])) .request-conversation-link:hover { color: var(--accent-text); } :where(:root:not([data-theme="dark"])) .request-reasoning { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .request-preview { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); } :where(:root:not([data-theme="dark"])) .request-preview-key { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .request-preview-value { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .request-preview pre { color: rgba(0, 0, 0, 0.8); } :where(:root:not([data-theme="dark"])) .request-thread-context { border-top-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .request-thread-messages { border-left-color: rgb(var(--accent-rgb) / 0.25); } :where(:root:not([data-theme="dark"])) .request-thread-parent { border-bottom-color: rgba(0, 0, 0, 0.06); } :where(:root:not([data-theme="dark"])) .request-thread-user { color: rgba(0, 0, 0, 0.65); } :where(:root:not([data-theme="dark"])) .request-thread-text { color: rgba(0, 0, 0, 0.5); } :where(:root:not([data-theme="dark"])) .request-thread-gap { color: rgba(0, 0, 0, 0.3); } :where(:root:not([data-theme="dark"])) .request-error { color: #cc3333; background-color: rgba(255, 100, 100, 0.08); border-color: rgba(255, 100, 100, 0.15); } :where(:root:not([data-theme="dark"])) .request-timestamp { color: rgba(0, 0, 0, 0.35); } } :where(:root[data-theme="light"]) .requests-view-header h2 { color: rgba(0, 0, 0, 0.85); } :where(:root[data-theme="light"]) .requests-filter-pill { border-color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.55); } :where(:root[data-theme="light"]) .requests-filter-pill:hover { border-color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .requests-filter-pill.active { background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } :where(:root[data-theme="light"]) .requests-view-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); } :where(:root[data-theme="light"]) .requests-view-content::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } :where(:root[data-theme="light"]) .requests-view-loading { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .requests-view-empty { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .new-requests-banner { background-color: var(--accent); color: var(--accent-contrast); } :where(:root[data-theme="light"]) .new-requests-banner:hover:not(:disabled) { background-color: var(--accent-hover); } :where(:root[data-theme="light"]) .request-card { border-color: rgba(0, 0, 0, 0.1); background-color: #fafafa; } :where(:root[data-theme="light"]) .request-card.open { border-color: rgb(var(--accent-rgb) / 0.35); } :where(:root[data-theme="light"]) .request-card.executed { border-color: rgba(80, 200, 120, 0.3); } :where(:root[data-theme="light"]) .request-card.denied, :where(:root[data-theme="light"]) .request-card.stopped { border-color: rgba(255, 100, 100, 0.2); } :where(:root[data-theme="light"]) .request-type-name { color: rgba(0, 0, 0, 0.85); } :where(:root[data-theme="light"]) .request-id-badge { color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .request-status-pill.open { background-color: rgb(var(--accent-rgb) / 0.1); color: var(--accent-text); } :where(:root[data-theme="light"]) .request-status-pill.executed { background-color: rgba(80, 200, 120, 0.1); color: #2e8b57; } :where(:root[data-theme="light"]) .request-status-pill.denied, :where(:root[data-theme="light"]) .request-status-pill.stopped { background-color: rgba(255, 100, 100, 0.08); color: #cc4444; } :where(:root[data-theme="light"]) .request-context { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .request-context-routine { color: rgba(0, 0, 0, 0.65); } :where(:root[data-theme="light"]) .request-context-project { color: rgba(0, 0, 0, 0.4); } :where(:root[data-theme="light"]) .request-conversation-link { color: var(--accent); } :where(:root[data-theme="light"]) .request-conversation-link:hover { color: var(--accent-text); } :where(:root[data-theme="light"]) .request-reasoning { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .request-preview { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); } :where(:root[data-theme="light"]) .request-preview-key { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .request-preview-value { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .request-preview pre { color: rgba(0, 0, 0, 0.8); } :where(:root[data-theme="light"]) .request-thread-context { border-top-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .request-thread-messages { border-left-color: rgb(var(--accent-rgb) / 0.25); } :where(:root[data-theme="light"]) .request-thread-parent { border-bottom-color: rgba(0, 0, 0, 0.06); } :where(:root[data-theme="light"]) .request-thread-user { color: rgba(0, 0, 0, 0.65); } :where(:root[data-theme="light"]) .request-thread-text { color: rgba(0, 0, 0, 0.5); } :where(:root[data-theme="light"]) .request-thread-gap { color: rgba(0, 0, 0, 0.3); } :where(:root[data-theme="light"]) .request-error { color: #cc3333; background-color: rgba(255, 100, 100, 0.08); border-color: rgba(255, 100, 100, 0.15); } :where(:root[data-theme="light"]) .request-timestamp { color: rgba(0, 0, 0, 0.35); } /* Token-usage breakdown cell shared by the System Reports tables. */ .tokens-cell-empty { color: rgba(255, 255, 255, 0.35); } .tokens-total { font-weight: 600; color: rgba(255, 255, 255, 0.9); } .tokens-by-model { margin-top: 0.15rem; display: flex; flex-direction: column; gap: 0.05rem; } .tokens-model-row { display: flex; justify-content: space-between; gap: 0.5rem; color: rgba(255, 255, 255, 0.55); font-size: 0.6875rem; } .tokens-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, 0.6); } /* Labeled native numbers can outgrow one line; wrap instead of clipping. */ .tokens-model-counts { white-space: normal; text-align: right; color: rgba(255, 255, 255, 0.7); } /* Estimated-cost suffix ("· ~$0.42") in the total line and per-model rows; slightly green so dollars stand out from the token counts around them. */ .tokens-cost { color: rgba(134, 239, 172, 0.85); white-space: nowrap; } .latest-active-conversations { background-color: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; } .latest-active-conversations-header { display: flex; align-items: baseline; justify-content: space-between; padding: 0.375rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .latest-active-conversations-header h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 0.03em; } .latest-active-conversations-header .header-actions { display: flex; align-items: center; gap: 0.375rem; } .latest-active-conversations-header .routines-toggle { display: flex; align-items: center; gap: 0.3em; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.6); cursor: pointer; user-select: none; } .latest-active-conversations-header .routines-toggle input { margin: 0; accent-color: rgba(255, 255, 255, 0.7); cursor: pointer; } .latest-active-conversations-header .meta { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; } .latest-active-conversations-header .refresh-button { display: flex; align-items: center; justify-content: center; padding: 0.125rem; background: transparent; border: none; border-radius: 4px; color: rgba(255, 255, 255, 0.45); cursor: pointer; } .latest-active-conversations-header .refresh-button:hover:not(:disabled) { color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.06); } .latest-active-conversations-header .refresh-button:disabled { cursor: default; color: rgba(255, 255, 255, 0.3); } .latest-active-conversations-header .refresh-button .spinning { animation: latest-active-refresh-spin 0.8s linear infinite; } @keyframes latest-active-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .latest-active-conversations table { width: 100%; border-collapse: collapse; table-layout: fixed; } .latest-active-conversations thead th { text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding: 0.25rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.02); } .latest-active-conversations tbody td { padding: 0.25rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.8125rem; line-height: 1.35; color: rgba(255, 255, 255, 0.85); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .latest-active-conversations tbody tr:last-child td { border-bottom: none; } .col-title { width: 20%; } .col-user { width: 15%; } /* Wide: provider-native rows carry labeled numbers ("prompt P (cached C) · out O (+T thoughts)") instead of a bare triple. */ .col-tokens { width: 30%; vertical-align: top; white-space: normal; overflow: visible; text-overflow: clip; font-variant-numeric: tabular-nums; font-size: 0.75rem; } /* Latest top-level call's input-side context size. */ .col-context { width: 8%; vertical-align: top; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); font-size: 0.75rem; } /* Distinct UTC days with user messages. */ .col-active-days { width: 7%; vertical-align: top; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); font-size: 0.75rem; } .col-model { width: 11%; vertical-align: top; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); font-size: 0.75rem; } .col-last-active { width: 9%; vertical-align: top; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.65); font-size: 0.75rem; } .cell-empty { color: rgba(255, 255, 255, 0.35); } .user-cell-name { font-weight: 500; color: rgba(255, 255, 255, 0.9); } /* Inline email next to name; truncates with the cell. */ .user-cell-email { margin-left: 0.4em; font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); } .latest-active-conversations-empty, .latest-active-conversations-loading { padding: 0.625rem 0.75rem; color: rgba(255, 255, 255, 0.5); font-size: 0.8125rem; text-align: center; } .latest-active-conversations-error { padding: 0.375rem 0.75rem; border-top: 1px solid rgba(255, 80, 80, 0.25); background-color: rgba(255, 80, 80, 0.08); color: rgba(255, 150, 150, 0.9); font-size: 0.75rem; } /* Shared date-range picker for the ranged System Reports sections. Styling matches the section-header controls in CostAnalysisTable.css (where these rules lived before extraction). */ .report-range-select { background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; color: rgba(255, 255, 255, 0.85); font-size: 0.6875rem; padding: 0.125rem 0.25rem; cursor: pointer; } .report-custom-range { display: flex; align-items: center; gap: 0.25rem; } .report-custom-range input[type='date'] { background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; color: rgba(255, 255, 255, 0.85); font-size: 0.6875rem; padding: 0.125rem 0.25rem; color-scheme: dark; } .report-custom-range-sep { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.45); } /* System Reports "Cost Analysis" section: ranked most-expensive table with a date-range selector. Mirrors LatestActiveConversationsTable.css styling so the two report sections read as one dashboard. */ .cost-analysis { background-color: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; } .cost-analysis-header { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .cost-analysis-header h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 0.03em; } .cost-analysis-header .header-actions { display: flex; align-items: center; gap: 0.375rem; } /* The range select + custom date inputs are the shared ReportDateRange component (ReportDateRange.css). */ .cost-analysis-header .refresh-button { display: flex; align-items: center; justify-content: center; padding: 0.125rem; background: transparent; border: none; border-radius: 4px; color: rgba(255, 255, 255, 0.45); cursor: pointer; } .cost-analysis-header .refresh-button:hover:not(:disabled) { color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.06); } .cost-analysis-header .refresh-button:disabled { cursor: default; color: rgba(255, 255, 255, 0.3); } .cost-analysis-header .refresh-button .spinning { animation: cost-analysis-refresh-spin 0.8s linear infinite; } @keyframes cost-analysis-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .cost-analysis table { width: 100%; border-collapse: collapse; table-layout: fixed; } .cost-analysis thead th { text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding: 0.25rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.02); } .cost-analysis tbody td { padding: 0.25rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.8125rem; line-height: 1.35; color: rgba(255, 255, 255, 0.85); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cost-analysis tbody tr:last-child td { border-bottom: none; } /* Column widths override the generic .col-* widths shared with the latest-conversations table (scoped selectors win on specificity). */ .cost-analysis .col-rank { width: 3%; vertical-align: top; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; } .cost-analysis .col-title { width: 19%; } .cost-analysis .col-user { width: 14%; } /* The ranking column: prominent estimated cost. */ .cost-analysis .col-cost { width: 8%; vertical-align: top; font-variant-numeric: tabular-nums; } .cost-analysis .col-tokens { width: 28%; } .cost-analysis .col-context { width: 8%; } .cost-analysis .col-active-days { width: 7%; } .cost-analysis .col-last-active { width: 9%; } .cost-analysis .cost-value { font-weight: 600; color: rgba(134, 239, 172, 0.9); } .cost-analysis-empty, .cost-analysis-loading { padding: 0.625rem 0.75rem; color: rgba(255, 255, 255, 0.5); font-size: 0.8125rem; text-align: center; } .cost-analysis-error { padding: 0.375rem 0.75rem; border-top: 1px solid rgba(255, 80, 80, 0.25); background-color: rgba(255, 80, 80, 0.08); color: rgba(255, 150, 150, 0.9); font-size: 0.75rem; } /* System Reports "Users" section: per-user activity/cost table with a date-range selector. Mirrors CostAnalysisTable.css styling so the report sections read as one dashboard. */ .users-report { background-color: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; } .users-report-header { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .users-report-header h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 0.03em; } .users-report-header .header-actions { display: flex; align-items: center; gap: 0.375rem; } .users-report-header .refresh-button { display: flex; align-items: center; justify-content: center; padding: 0.125rem; background: transparent; border: none; border-radius: 4px; color: rgba(255, 255, 255, 0.45); cursor: pointer; } .users-report-header .refresh-button:hover:not(:disabled) { color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.06); } .users-report-header .refresh-button:disabled { cursor: default; color: rgba(255, 255, 255, 0.3); } .users-report-header .refresh-button .spinning { animation: users-report-refresh-spin 0.8s linear infinite; } @keyframes users-report-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .users-report table { width: 100%; border-collapse: collapse; table-layout: fixed; } .users-report thead th { text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding: 0.25rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.02); } .users-report tbody td { padding: 0.25rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.8125rem; line-height: 1.35; color: rgba(255, 255, 255, 0.85); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .users-report tbody tr:last-child td { border-bottom: none; } /* Column widths override the generic .col-* widths shared with the latest-conversations table (scoped selectors win on specificity). */ .users-report .col-user { width: 22%; vertical-align: top; } .users-report .col-active-days { width: 8%; vertical-align: top; font-variant-numeric: tabular-nums; } .users-report .col-conversations { width: 8%; vertical-align: top; font-variant-numeric: tabular-nums; } .users-report .col-cost { width: 10%; vertical-align: top; font-variant-numeric: tabular-nums; } .users-report .col-routines { width: 20%; vertical-align: top; /* Rows wrap-free but the cell itself must not clip the "+N more" toggle. */ white-space: normal; } .users-report .col-tokens { width: 32%; } /* Per-routine itemization of the routine spend: mirrors the token cell's per-model rows (name left, figure right) so the two breakdown columns read alike. */ .routine-costs-cell { display: flex; flex-direction: column; gap: 0.05rem; } .routine-cost-row { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.6875rem; line-height: 1.35; } .routine-cost-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, 0.7); } .routine-cost-project { color: rgba(255, 255, 255, 0.4); } .routine-cost-value { flex-shrink: 0; font-variant-numeric: tabular-nums; color: rgba(134, 239, 172, 0.85); } .routine-costs-toggle { align-self: flex-start; margin-top: 0.1rem; padding: 0; background: transparent; border: none; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.45); cursor: pointer; } .routine-costs-toggle:hover { color: rgba(255, 255, 255, 0.85); text-decoration: underline; } .users-report .cost-value { font-weight: 600; color: rgba(134, 239, 172, 0.9); } .users-report-empty, .users-report-loading { padding: 0.625rem 0.75rem; color: rgba(255, 255, 255, 0.5); font-size: 0.8125rem; text-align: center; } .users-report-error { padding: 0.375rem 0.75rem; border-top: 1px solid rgba(255, 80, 80, 0.25); background-color: rgba(255, 80, 80, 0.08); color: rgba(255, 150, 150, 0.9); font-size: 0.75rem; } /* System Reports "Guides" section: deprecation-tracking table listing every user guide and project guide with its owner. Mirrors UsersReportTable.css so the report sections read as one dashboard. */ .guides-report { background-color: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; } .guides-report-header { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .guides-report-header h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 0.03em; } .guides-report-header .header-actions { display: flex; align-items: center; gap: 0.625rem; } .guides-report-summary { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; } .guides-report-toggle { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); cursor: pointer; user-select: none; } .guides-report-toggle input { margin: 0; cursor: pointer; } .guides-report-header .refresh-button { display: flex; align-items: center; justify-content: center; padding: 0.125rem; background: transparent; border: none; border-radius: 4px; color: rgba(255, 255, 255, 0.45); cursor: pointer; } .guides-report-header .refresh-button:hover:not(:disabled) { color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.06); } .guides-report-header .refresh-button:disabled { cursor: default; color: rgba(255, 255, 255, 0.3); } .guides-report-header .refresh-button .spinning { animation: guides-report-refresh-spin 0.8s linear infinite; } @keyframes guides-report-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .guides-report table { width: 100%; border-collapse: collapse; table-layout: fixed; } .guides-report thead th { text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding: 0.25rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.02); } .guides-report tbody td { padding: 0.25rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.8125rem; line-height: 1.35; color: rgba(255, 255, 255, 0.85); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guides-report tbody tr:last-child td { border-bottom: none; } .guides-report .col-owner { width: 26%; } .guides-report .col-kind { width: 12%; } .guides-report .col-name { width: 32%; } .guides-report .col-size, .guides-report .col-routines { width: 9%; font-variant-numeric: tabular-nums; } .guides-report .col-updated { width: 12%; color: rgba(255, 255, 255, 0.6); } .guides-report .owner-cell-name { display: block; overflow: hidden; text-overflow: ellipsis; } .guides-report .owner-cell-email { display: block; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.45); overflow: hidden; text-overflow: ellipsis; } .guides-report .kind-badge { display: inline-block; padding: 0 0.375rem; border-radius: 3px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; } .guides-report .kind-user { background-color: rgba(251, 191, 36, 0.14); color: rgba(253, 224, 71, 0.9); } .guides-report .kind-project { background-color: rgba(96, 165, 250, 0.14); color: rgba(147, 197, 253, 0.9); } .guides-report .name-tag { margin-left: 0.375rem; padding: 0 0.3125rem; border-radius: 3px; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); background-color: rgba(255, 255, 255, 0.08); } .guides-report .cell-empty { color: rgba(255, 255, 255, 0.3); } .guides-report-empty, .guides-report-loading { padding: 0.625rem 0.75rem; color: rgba(255, 255, 255, 0.5); font-size: 0.8125rem; text-align: center; } .guides-report-error { padding: 0.375rem 0.75rem; border-top: 1px solid rgba(255, 80, 80, 0.25); background-color: rgba(255, 80, 80, 0.08); color: rgba(255, 150, 150, 0.9); font-size: 0.75rem; } .admin-system-reports-page { min-height: 100vh; background-color: #1a1a1a; color: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; } .admin-system-reports-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .admin-system-reports-header h1 { margin: 0; font-size: 0.9375rem; font-weight: 600; } .admin-system-reports-header .back-link { color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 0.8125rem; } .admin-system-reports-header .back-link:hover { color: rgba(255, 255, 255, 0.9); } /* Left-hand section nav + content, side by side. */ .admin-system-reports-body { flex: 1; display: flex; min-height: 0; } .admin-system-reports-nav { width: 180px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 0.5rem; border-right: 1px solid rgba(255, 255, 255, 0.08); } .admin-system-reports-nav-item { text-align: left; padding: 0.375rem 0.625rem; background: transparent; border: none; border-radius: 4px; color: rgba(255, 255, 255, 0.65); font-size: 0.8125rem; cursor: pointer; } .admin-system-reports-nav-item:hover { color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.05); } .admin-system-reports-nav-item.active { color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.08); font-weight: 500; } .admin-system-reports-content { flex: 1; min-width: 0; padding: 0.75rem 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; } .admin-system-reports-unauthorized { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 60vh; color: rgba(255, 255, 255, 0.6); } .admin-system-reports-unauthorized a { color: rgba(255, 255, 255, 0.8); } /* While the mobile shell is mounted (class set by MobileShell), the document * must never scroll or rubber-band — all scrolling happens in inner panes. * Prevents iOS Safari from panning the page into a stuck state (top bar * off-screen, gap under the composer). */ html.mobile-shell-lock, body.mobile-shell-lock { height: 100%; overflow: hidden; overscroll-behavior: none; } /* Mobile shell: top bar + single main pane + slide-in drawers. Fixed to the * viewport; 100dvh fallback until the visualViewport effect pins the height * to the visible area (keyboard-aware) in px. */ .mobile-shell { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; } /* iOS Safari auto-zooms the whole page when a focused form control's * font-size is under 16px — and the zoom/pan can stick after the keyboard * closes. Keep every focusable control in the shell at >= 16px. */ .mobile-shell input, .mobile-shell textarea, .mobile-shell select { font-size: 16px; } /* Inner scrollers absorb their own overscroll instead of chaining a * rubber-band to the document. */ .mobile-shell .messages-container, .mobile-shell .sidebar-panel, .mobile-shell .right-panel-section { overscroll-behavior: contain; } /* Top bar */ .mobile-topbar { /* Horizontal room taken by the widest button cluster (menu + new chat on the left): edge padding + two 40px buttons + the gaps around them. The title is centered inside a region that clears this much on BOTH sides so it stays at the middle of the window regardless of how many buttons each side has. */ --mobile-topbar-side: calc(80px + 0.875rem); position: relative; flex-shrink: 0; height: 48px; display: flex; align-items: center; gap: 0.25rem; padding: 0 0.375rem; background-color: #1a1a1a; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-topbar-title { position: absolute; top: 0; bottom: 0; left: var(--mobile-topbar-side); right: var(--mobile-topbar-side); display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 0; font-size: 1rem; font-weight: 600; color: rgba(255, 255, 255, 0.87); pointer-events: none; } .mobile-topbar-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Folder glyph shown before the project name while drilled into a project */ .mobile-topbar-title-icon { flex-shrink: 0; opacity: 0.7; } /* 40px square tap targets */ .mobile-topbar-button { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px; color: rgba(255, 255, 255, 0.75); cursor: pointer; padding: 0; } .mobile-topbar-button:active { background-color: rgba(255, 255, 255, 0.1); } /* Right-edge button; the title no longer occupies the flex gap */ .mobile-topbar-button-end { margin-left: auto; } /* Main pane */ .mobile-main { flex: 1; min-height: 0; display: flex; } /* Children written against the desktop layout size themselves 100vh; inside * the shell they must fill the remaining space under the top bar instead. * min-width: 0 is the mobile-shell analog of .main-content's shrink rule on * desktop (App.css): without it, wide intrinsic content (a code block's * unwrapped lines) props the whole panel out past the viewport instead of * scrolling inside its own pre. */ .mobile-shell .chat-panel, .mobile-shell .requests-view { height: 100%; min-width: 0; } /* Long unbroken tokens (URLs, ids) in message text: break rather than * overflow, since a phone viewport has no slack to absorb them. */ .mobile-shell .message-content { overflow-wrap: anywhere; } /* Drawer */ .mobile-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(85vw, 320px); z-index: 1000; transform: translateX(-105%); transition: transform 0.2s ease-in-out; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4); background-color: var(--surface-raised); } .mobile-drawer.open { transform: none; } /* The existing Sidebar renders inside the drawer: stretch it to the drawer's * box instead of its fixed desktop 260px x 100vh. */ .mobile-drawer .sidebar { width: 100%; height: 100%; border-right: none; } /* Workspace drawer (right side), hosting the existing RightPanel * (FileBrowser + ProjectTables). */ .mobile-workspace-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(85vw, 360px); z-index: 1000; transform: translateX(105%); transition: transform 0.2s ease-in-out; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); background-color: var(--surface-raised); } .mobile-workspace-drawer.open { transform: none; } /* RightPanel sizes itself for the desktop layout via an inline width style * (stored px width) and 100vh height; inside the drawer it must fill the * drawer's box instead — !important beats the inline style. */ .mobile-workspace-drawer .right-panel { width: 100% !important; height: 100%; } /* Mouse-only desktop affordance; inert and visually noisy on touch. */ .mobile-workspace-drawer .right-panel-resize-handle { display: none; } /* Larger tap targets in the drawer's sidebar: slightly bigger row text and * more vertical padding than the desktop density. */ .mobile-drawer .conversation-title, .mobile-drawer .routine-name, .mobile-drawer .routine-sub-item-timestamp { font-size: 0.875rem; } .mobile-drawer .conversation-item { padding-top: 0.5rem; padding-bottom: 0.5rem; } .mobile-drawer .routine-item, .mobile-drawer .project-header, .mobile-drawer .routine-group-header { padding-top: 0.5rem; padding-bottom: 0.5rem; } .mobile-drawer-overlay { position: fixed; inset: 0; z-index: 999; background-color: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; } .mobile-drawer-overlay.open { opacity: 1; pointer-events: auto; } @media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .mobile-topbar { background-color: #f5f5f5; border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root:not([data-theme="dark"])) .mobile-topbar-title { color: #213547; } :where(:root:not([data-theme="dark"])) .mobile-topbar-button { color: rgba(0, 0, 0, 0.65); } :where(:root:not([data-theme="dark"])) .mobile-topbar-button:active { background-color: rgba(0, 0, 0, 0.08); } :where(:root:not([data-theme="dark"])) .mobile-drawer { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); } :where(:root:not([data-theme="dark"])) .mobile-workspace-drawer { box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); } } :where(:root[data-theme="light"]) .mobile-topbar { background-color: #f5f5f5; border-bottom-color: rgba(0, 0, 0, 0.1); } :where(:root[data-theme="light"]) .mobile-topbar-title { color: #213547; } :where(:root[data-theme="light"]) .mobile-topbar-button { color: rgba(0, 0, 0, 0.65); } :where(:root[data-theme="light"]) .mobile-topbar-button:active { background-color: rgba(0, 0, 0, 0.08); } :where(:root[data-theme="light"]) .mobile-drawer { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); } :where(:root[data-theme="light"]) .mobile-workspace-drawer { box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); }