inside .ella-head.
* Variant modifiers: pill-run (green pulse dot), pill-warn (orange), pill-error.
* The default is the neutral "ready" style (white-alpha bg, leaf dot).
* NOTE: the existing per-card inline-styled pills work independently; this class
* is provided for new cards and future migration. */
.ella-status {
padding: 3px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 6px;
letter-spacing: 0.02em;
background: rgba(255, 255, 255, 0.14);
color: #eafbe7;
border: 1px solid rgba(255, 255, 255, 0.22);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ella-status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
background: var(--leaf);
}
.ella-status.pill-run::before {
background: var(--lightgreen);
box-shadow: 0 0 0 3px rgba(76, 183, 72, 0.3);
}
.ella-status.pill-warn {
background: rgba(242, 164, 54, 0.18);
color: var(--cream-soft);
border-color: rgba(242, 164, 54, 0.45);
}
.ella-status.pill-warn::before {
background: var(--orange);
}
.ella-status.pill-error {
background: rgba(179, 42, 42, 0.18);
color: #ffd9d6;
border-color: rgba(179, 42, 42, 0.45);
}
.ella-status.pill-error::before {
background: var(--danger-fg);
}
/* ── Code-block action buttons (Copy / Download) ───────────────────────────
* Injected by copy_code.js into every fenced markdown block and dark
* code_block(). Floated top-right as a small green button group so the
* "copy or download the whole instruction file in one click" workflow stays
* on-brand. Element green — never Bootstrap blue. */
.bubble-prose pre,
.custom-code-block {
position: relative;
}
.copy-btn,
.download-btn,
.save-btn {
position: absolute;
top: 6px;
font-family: Nunito, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 3px 9px;
border-radius: 6px;
border: 1px solid rgba(76, 183, 72, 0.55);
background: rgba(76, 183, 72, 0.16);
/* These sit on the CODE BLOCK, which is dark in BOTH themes — so the label
* must be a LIGHT green, not --darkgreen (2.29:1 on --code-bg, measured;
* the earlier "legible at rest" fix assumed a light ground). --leaf clears
* 9:1 there. Not --accent-ink: that flips per theme, and this surface does
* not. */
color: var(--leaf);
cursor: pointer;
opacity: 0.95;
transition: opacity 0.15s ease, background 0.15s ease;
/* copy_code.js appends these as literal DOM children of the that
* also holds the code text (position:absolute only changes where they're
* PAINTED, not their place in DOM/selection order). Without this, a user
* who drags to manually select+copy raw code/markdown — instead of
* clicking the Copy button — picks up "CopyDownloadSave" appended to
* their clipboard text, corrupting the paste. */
user-select: none;
}
.copy-btn {
right: 8px;
}
.download-btn {
right: 62px;
}
.copy-btn:hover,
.download-btn:hover,
.save-btn:hover {
opacity: 1;
background: var(--lightgreen);
/* Dark ink on the light-green fill — #fff on --lightgreen is 2.9:1, under
the 3:1 floor even for a control. --code-bg-head is theme-invariant, like
the surface these buttons live on. */
color: var(--code-bg-head);
}
/* Tab-focusing any of these three (no prior :focus-visible rule) showed the
browser's native BLUE ring (.claude/rules/dash-ui.md) — plain inline `style={}` on the
Python side cannot express :focus-visible. */
.copy-btn:focus-visible,
.download-btn:focus-visible,
.save-btn:focus-visible {
outline: 2px solid var(--lightgreen, #4cb748);
outline-offset: 2px;
}
.copy-btn.copied,
.download-btn.copied,
.save-btn.copied {
opacity: 1;
background: var(--lightgreen);
color: var(--code-bg-head);
border-color: var(--lightgreen);
}
/* Save button — sits left of the Download button. Copy ends ~46px from the
* right edge, Download (right:62px) ends ~138px from it; right:146px leaves an
* ~8px gap so the three never overlap, even when Save reads "Saving…". */
.save-btn {
right: 146px;
}
.save-btn:disabled {
opacity: 0.6;
cursor: default;
}
/* The SoXa Discrepancy Analyzer's five writer buttons (Limit/Unlimit, the fill
prompt's Confirm/Cancel, Apply) cross-disable while ANY staging/apply job
runs (running= on their background callbacks). Their inline styles hardcode
cursor: pointer, hence the !important — without this rule a disabled button
keeps its full colour and pointer and silently swallows clicks for the whole
background job. */
.sda-writer-btn:disabled {
opacity: 0.55;
cursor: default !important;
}
/* Degradation Matrix Explorer: everything else (buttons, Inspect, summaries,
focus rings) is deg-matrix.css (EL-668). */
/* EL-660: AG Grid's autoHeight layout reserves 150px for its "No Rows"
overlay, so the one-row Thermal domain grid trailed a blank band. These
grids always have rows, so let the body hug them. */
.deg-matrix-grid-wrap .ag-layout-auto-height .ag-center-cols-viewport,
.deg-matrix-grid-wrap .ag-layout-auto-height .ag-center-cols-container,
.deg-matrix-grid-wrap .ag-layout-auto-height .ag-center-cols-clipper {
min-height: 0 !important;
}
/* Inline filename editor opened by the Save button. */
.save-prompt-row {
position: absolute;
top: 32px;
right: 8px;
display: flex;
gap: 4px;
align-items: center;
background: #fff;
border: 1px solid var(--palegreen);
border-radius: 6px;
padding: 4px 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
z-index: 10;
}
.save-name-input {
width: 220px;
font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 11.5px;
border: 1px solid var(--palegreen);
border-radius: 4px;
padding: 2px 6px;
color: var(--darkgreen);
}
.save-name-input:focus {
outline: none;
border-color: var(--lightgreen);
}
.save-confirm-btn {
background: var(--lightgreen);
color: #fff;
border: none;
border-radius: 4px;
padding: 2px 8px;
cursor: pointer;
font-size: 12px;
font-weight: 700;
}
.save-confirm-btn:hover {
background: var(--darkgreen);
}
.save-cancel-btn {
background: var(--border);
color: var(--ink);
border: none;
border-radius: 4px;
padding: 2px 6px;
cursor: pointer;
font-size: 12px;
}
.save-cancel-btn:hover {
background: var(--border-strong);
}
/* State Tracker AI date-window picker — keep react-dates calendar green
* (never the library's default teal). The input border is already themed in
* custom.css; this covers the selected/hovered day cells and the in-range span. */
.custom-daterange .CalendarDay__selected,
.custom-daterange .CalendarDay__selected:active,
.custom-daterange .CalendarDay__selected:hover,
.custom-daterange .CalendarDay__selected_start,
.custom-daterange .CalendarDay__selected_end {
background: #0b6623 !important;
border-color: #0b6623 !important;
color: #fff !important;
}
.custom-daterange .CalendarDay__selected_span,
.custom-daterange .CalendarDay__hovered_span,
.custom-daterange .CalendarDay__hovered_span:hover {
background: #B7E2B6 !important;
border-color: #94D491 !important;
color: #0b6623 !important;
}
/* Single-date pickers (DatePickerSingle) — same rule set as the range picker so
* the selected/hovered day cell reads Element green, never react-dates' default
* teal/blue (.claude/rules/dash-ui.md: no Bootstrap blue). Applied via className=
* "custom-datepicker" on every DatePickerSingle. No __selected_span here — a
* single picker has no in-range span. */
.custom-datepicker .CalendarDay__selected,
.custom-datepicker .CalendarDay__selected:active,
.custom-datepicker .CalendarDay__selected:hover {
background: #0b6623 !important;
border-color: #0b6623 !important;
color: #fff !important;
}
.custom-datepicker .CalendarDay__hovered,
.custom-datepicker .CalendarDay:hover:not(.CalendarDay__selected) {
background: #B7E2B6 !important;
border-color: #94D491 !important;
color: #0b6623 !important;
}
/* ===== Micro-shorts fit-window range slider ===== */
/* Hide the raw Unix-timestamp tooltip that appears during drag; the formatted
date range is shown in the ins-ms-range-label div below the slider. */
.ms-range-slider .rc-slider-tooltip {
display: none !important;
}
/* SOH cell rail chips — clickable html.Div (role="button") drives the trend
highlight + OCV fit; needs its own visible keyboard-focus ring since a div
gets none by default. Activation (Enter/Space) is delegated in
keyboard.js. */
.ins-soh-cell-chip:focus-visible {
outline: 2px solid var(--lightgreen);
outline-offset: 1px;
}
/* ===== Agent Logs accordion (Capabilities modal "Logs" tab) ===== */
/* Re-theme dbc.Accordion from Bootstrap blue to the Element palette. */
.agent-logs-accordion .accordion-item {
border: 1px solid rgba(11, 102, 35, 0.14);
border-radius: 10px;
margin-bottom: 8px;
overflow: hidden;
}
.agent-logs-accordion .accordion-button {
background: #fff;
color: #1f2d3d;
font-family: inherit;
font-size: 12.5px;
padding: 10px 14px;
box-shadow: none;
}
.agent-logs-accordion .accordion-button:not(.collapsed) {
background: #d0f2d0;
/* PALEGREEN_BG */
color: #0b6623;
/* DARKGREEN */
box-shadow: inset 0 -1px 0 rgba(11, 102, 35, 0.14);
}
.agent-logs-accordion .accordion-button:focus {
border-color: #4CB748;
/* LIGHTGREEN */
box-shadow: 0 0 0 3px rgba(76, 183, 72, 0.25);
}
/* Default caret is a blue SVG chevron — recolor to dark green. */
.agent-logs-accordion .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230b6623'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.agent-logs-accordion .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230b6623'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.agent-logs-accordion .accordion-body {
padding: 14px 16px;
background: #fff;
}
/* ── Capabilities modal — "Cards" tab ─────────────────────────────────────
* Netflix-style script-card catalog (rail.py::_cards_tab_content, EL-642):
* per-category horizontal carousels (.cards-tab-row) of 2:3 poster tiles
* (.cards-tab-tile), and an inspect panel (.cards-tab-detail) a tile click
* opens under its row. Decoration only — the carousel, tile and panel sizing
* are inline styles in rail.py. Semantic tokens only — but in Dash the
* modal portals to , outside #app-shell[data-theme='dark'], so it
* renders light in dark mode like the rest of the Capabilities modal. /v2
* renders it inside the themed shell and picks up the dark tokens.
* .cards-tab-summary / -details / -cmd-label are the pre-EL-642
* card's classes, kept as aliases for anything still emitting them. */
.cards-tab-category {
font-size: 13px;
font-weight: 800;
color: var(--accent-ink);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 14px 0 10px;
}
.cards-tab-row {
scrollbar-width: thin;
scrollbar-color: var(--accent-border) transparent;
}
.cards-tab-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
color: var(--ink);
font-family: inherit;
cursor: pointer;
transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cards-tab-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.cards-tab-card:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--focus-ring);
}
/* A double-click launches the tile (EL-691) — don't select its text first. */
.cards-tab-tile {
user-select: none;
}
.cards-tab-card[open],
.cards-tab-tile--active {
border-color: var(--accent-ink);
box-shadow: 0 0 0 2px var(--focus-ring);
}
.cards-tab-summary {
cursor: pointer;
display: block;
list-style: none;
/* hide the default disclosure triangle */
}
.cards-tab-summary::-webkit-details-marker {
display: none;
}
.cards-tab-preview {
border-bottom: 1px solid var(--divider);
background: var(--bg-soft);
}
.cards-tab-title {
font-weight: 800;
font-size: 12.5px;
line-height: 1.3;
color: var(--ink);
}
.cards-tab-blurb {
font-size: 11px;
line-height: 1.4;
color: var(--muted);
}
.cards-tab-badge {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
line-height: 1.4;
color: var(--accent-ink);
background: var(--accent-bg);
border: 1px solid var(--accent-border);
border-radius: 999px;
padding: 1px 7px;
}
.cards-tab-detail {
background: var(--card-bg-soft);
border: 1px solid var(--accent-border);
border-radius: 12px;
padding: 14px;
margin-top: 6px;
}
.cards-tab-detail-preview {
border-radius: 8px;
border: 1px solid var(--border);
}
.cards-tab-detail-title {
font-size: 15px;
font-weight: 800;
color: var(--ink);
margin: 0 0 6px;
}
.cards-tab-details {
padding: 0 12px 12px;
}
.cards-tab-desc {
font-size: 12px;
color: var(--ink-soft);
line-height: 1.5;
margin: 0 0 8px;
}
.cards-tab-fact {
font-size: 12px;
color: var(--ink-soft);
line-height: 1.6;
}
.cards-tab-fact-label {
font-weight: 700;
color: var(--muted);
}
.cards-tab-cmd-label {
font-size: 11.5px;
font-weight: 700;
color: var(--accent-ink);
}
.cards-tab-cmd {
font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 11.5px;
color: var(--accent-ink);
background: var(--accent-bg);
border-radius: 6px;
padding: 2px 6px;
user-select: all;
/* one click selects the whole command for copying */
}
.cards-tab-copy {
color: var(--muted);
}
.cards-tab-copy:hover {
color: var(--accent-ink);
}
.cards-tab-launch {
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
color: var(--btn-accent-ink);
background: var(--btn-accent-bg);
border: 0;
border-radius: 8px;
padding: 6px 16px;
cursor: pointer;
}
.cards-tab-launch:hover:not(:disabled) {
background: var(--btn-accent-bg-hover);
}
.cards-tab-launch:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--focus-ring);
}
.cards-tab-launch:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* ── Capabilities modal — "Skills" tab ────────────────────────────────────
* Read-only skill rows (rail.py::_skill_row / _skill_category_section), each
* a native mirroring the Cards tab pattern above. Without these
* rules the rows had NO styling at all: 's default `list-item`
* display left the icon/title/desc stacking onto separate lines behind the
* browser's raw (unthemed, often blue) disclosure triangle. */
.skill-details {
border-bottom: 1px solid #e3e6f0;
}
.skill-details--last {
border-bottom: 0;
}
.skill-summary {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
list-style: none;
padding: 8px 10px;
transition: background 0.15s ease;
}
.skill-summary::-webkit-details-marker {
display: none;
}
.skill-summary:hover {
background: #f5f9f5;
}
.skill-summary:focus-visible {
outline: 2px solid #4cb748;
outline-offset: -2px;
}
/* Green chevron replaces the default marker, same SVG as the Logs accordion. */
.skill-summary::after {
content: "";
width: 16px;
height: 16px;
margin-left: auto;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230b6623'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
transition: transform 0.15s ease;
}
.skill-details[open] .skill-summary::after {
transform: rotate(180deg);
}
.skill-detail-body {
padding: 0 10px 10px 38px;
}
/* ───────────────────────────────────────────────────────────────────────
Left toolbar — narrow icon strip controlling the main left sidebar.
Structural sizing (width, layout) is set inline in left_toolbar.py;
these rules are decoration only (colour, hover, active state).
─────────────────────────────────────────────────────────────────────── */
/* .toolbar-icon-btn / --active / .toolbar-divider are the LEFT TOOLBAR block
in ella-frame.css now. Only the focus ring stays here: the component layer
does not define one, and a keyboard user needs it in both themes. */
.toolbar-icon-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* ── File-system viewer ─────────────────────────────────────────────────── */
.fsv-details>.fsv-summary {
list-style: none;
}
.fsv-details>.fsv-summary::-webkit-details-marker {
display: none;
}
.fsv-summary {
border-radius: 5px;
}
/* Rotate the caret glyph when its folder is open. */
.fsv-details[open]>.fsv-summary .fsv-caret {
transform: rotate(90deg);
display: inline-block;
}
.fsv-caret {
transition: transform 0.1s ease;
}
/* Collapsible Claude Code Execution Report bubble — reuses the fsv custom-caret
pattern so it matches every other disclosure widget in the app (no native OS
triangle). */
.claude-ella-log-summary {
list-style: none;
border-radius: 6px;
padding: 2px 4px;
}
.claude-ella-log-summary::-webkit-details-marker {
display: none;
}
.claude-ella-log-summary:hover {
background: #f0f7f0;
}
.claude-ella-log-caret {
transition: transform 0.1s ease;
display: inline-block;
}
details[open]>.claude-ella-log-summary .claude-ella-log-caret {
transform: rotate(90deg);
}
/* Slim, themed scrollbar for the tree. */
.fsv-tree::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.fsv-tree::-webkit-scrollbar-thumb {
background: #d0e6cf;
border-radius: 4px;
}
/* ── File viewer modal — read-only source with a line-number gutter ──────── */
.fv-modal-content {
border: 0;
border-radius: 14px;
overflow: hidden;
}
/* Clickable file rows in the tree — see the FILES VIEW block in
ella-frame.css. The rules that were here painted #f0f7f0/#0b6623 on hover
via a `span` descendant selector, which outranks .fsv-file-name and so
survived the theme flip as dark green on a dark row. */
/* Code surface: gutter + source share a horizontal scroll container. */
.fv-code-wrap {
display: flex;
align-items: stretch;
background: #fbfdfb;
max-height: 70vh;
overflow: auto;
margin: 0;
}
.fv-gutter {
margin: 0;
padding: 14px 10px 14px 16px;
text-align: right;
color: #b3bccb;
background: #f3f7f3;
border-right: 1px solid #e3e6f0;
user-select: none;
font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12.5px;
line-height: 1.6;
white-space: pre;
flex-shrink: 0;
}
.fv-code {
margin: 0;
padding: 14px 18px;
color: #1f2d3d;
font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12.5px;
line-height: 1.6;
white-space: pre;
flex: 1;
min-width: 0;
}
.fv-markdown {
padding: 18px 22px;
max-height: 70vh;
overflow: auto;
}
/* Rendered/Raw segmented toggle — now owned entirely by ella-frame.css's
token-based .fv-seg/.fv-seg-btn rules (dark-mode migration); this hardcoded
light-only block was left behind duplicating (and, via a since-removed
.fv-seg--on variant, briefly breaking) that migration. */
/* Themed dropdown for the root selector — keep it on-brand. */
.fsv-root-dropdown .Select-control,
.fsv-root-dropdown .is-focused .Select-control {
border-color: #B7E2B6 !important;
box-shadow: none !important;
}
/* Themed dropdown for card ui_type: "dropdown" pickers. */
.ella-q-dropdown .Select-control,
.ella-q-dropdown .is-focused .Select-control {
border-color: #B7E2B6 !important;
box-shadow: none !important;
}
.ella-q-dropdown .Select-option.is-selected,
.ella-q-dropdown .Select-option.is-focused {
background: #d0f2d0 !important;
color: #0b6623 !important;
}
/* ── dcc.Dropdown, Dash 4.x ──────────────────────────────────────────────
Dash 4 replaced the bundled react-select with its own component and renamed
the entire DOM: `.Select-control` / `.Select-menu-outer` / `.Select-option`
are now `.dash-dropdown-trigger` / `.dash-options-list` /
`.dash-options-list-option`. Every legacy `.Select-*` rule in this file (and
the ones in the dark block below) matches NOTHING on Dash 4.1 — which is why
the model picker opened as a white panel with near-black text and a
Bootstrap-blue selected row in dark mode, with no rule to point at.
Rules below are token-driven so they hold in BOTH themes; the legacy
`.Select-*` blocks are kept only for a Dash-3 rollback and are inert here.
If a dropdown ever goes white again, check the class names FIRST. */
.dash-dropdown {
background: transparent;
color: var(--ink);
}
.dash-dropdown-trigger,
.dash-dropdown-wrapper {
background: var(--card-bg);
color: var(--ink);
border-color: var(--border-strong);
}
.dash-dropdown-value-item,
.dash-dropdown-value {
color: var(--ink);
}
.dash-dropdown-trigger-icon {
color: var(--muted);
}
/* The open menu is a floating surface — it must use the overlay token, not
inherit whatever is behind it. */
.dash-options-list,
.dash-dropdown-options,
.dash-dropdown-content {
background: var(--overlay-bg) !important;
border: 1px solid var(--border) !important;
color: var(--ink) !important;
box-shadow: var(--shadow-md);
}
.dash-options-list-option,
.dash-dropdown-option {
color: var(--ink) !important;
background: transparent !important;
}
.dash-options-list-option:hover,
.dash-dropdown-option:hover,
.dash-options-list-option.selected,
.dash-dropdown-option.selected {
background: var(--accent-bg) !important;
color: var(--accent-ink-strong) !important;
}
/* A disabled option (the "… N more — refine your search" hint in the node
pickers) must not light up like a choice under the hover rule above. */
.dash-options-list-option:has(input:disabled) {
background: transparent !important;
color: var(--muted-2) !important;
font-style: italic;
cursor: default !important;
}
.dash-dropdown:focus-within .dash-dropdown-trigger,
.dash-dropdown:focus-within .dash-dropdown-wrapper {
border-color: var(--accent-border) !important;
box-shadow: 0 0 0 3px var(--focus-ring) !important;
outline: none !important;
}
/* Dash 4.1's own `.dash-dropdown:focus` border/outline reads
--Dash-Fill-Interactive-Strong, which custom.css re-points only for the
slider/datepicker — so a focused dropdown drew Dash's default PURPLE ring
(#7F4BC4) around the trigger above (EL-665 UI review). Re-point it here. */
.dash-dropdown,
.dash-dropdown-content {
--Dash-Fill-Interactive-Strong: var(--lightgreen);
--Dash-Fill-Interactive-Weak: var(--focus-ring);
}
.dash-dropdown:focus {
border-color: var(--accent-border) !important;
outline: none !important;
box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
/* LEGACY (Dash 3 react-select). Inert on Dash 4.x — see the note above.
Themed dropdown for the sidebar/account model selector (#model-select,
#acct-sb-model) — grew from 4 to 9 options (core/agent/streaming.py
MODEL_CATALOG), making the default Bootstrap-blue focus ring / selected-row
highlight far more visible on the taller open menu. */
.ella-model-select .Select-control,
.ella-model-select .is-focused .Select-control,
.ella-model-select .is-open .Select-control {
border-color: #B7E2B6 !important;
box-shadow: none !important;
}
.ella-model-select .Select-option.is-selected,
.ella-model-select .Select-option.is-focused {
background: #d0f2d0 !important;
color: #0b6623 !important;
}
/* Editable combo box for card ui_type: "combobox" — a text input
backed by a native