` and block `` text colour
* to --text-primary (white in dark theme, black in light theme). Reason:
* the user reported "code is rendered in green" inside the AI chat panel.
* Root cause was the inline-diff add-line text colour bleeding into the
* reader's perception of all code; here we make absolutely sure standard
* code blocks (NOT diff lines) inherit a neutral high-contrast text colour
* regardless of any theme stylesheet that loads later. */
.ai-msg__body code,
.ai-msg__reasoning-body code {
background: rgba(0, 0, 0, 0.30);
padding: 1px 4px;
border-radius: 3px;
font-size: 12px;
font-family: ui-monospace, 'JetBrains Mono', monospace;
color: var(--text-primary, #ffffff);
}
.ai-msg__body pre,
.ai-msg__reasoning-body pre {
background: rgba(0, 0, 0, 0.35);
padding: 8px 10px;
border-radius: 6px;
overflow-x: auto;
margin: 6px 0;
font-size: 12px;
font-family: ui-monospace, 'JetBrains Mono', monospace;
color: var(--text-primary, #ffffff);
}
.ai-msg__body pre code,
.ai-msg__reasoning-body pre code { background: transparent; padding: 0; color: inherit; }
.ai-msg__body table {
border-collapse: collapse;
margin: 6px 0;
font-size: 12px;
}
.ai-msg__body th, .ai-msg__body td {
border: 1px solid var(--border-color, #2a2e39);
padding: 4px 8px;
text-align: left;
}
.ai-msg__body th { background: var(--bg-quaternary, #2a2e39); }
/* [FIX] 2026-05-18 — Code block wrapper with Copy + Apply (YeScript) header.
Generated by enhanceCodeBlocks() after each content_delta. */
.ai-msg__body .ai-code {
margin: 8px 0;
border: 1px solid var(--border-color, #2a2e39);
border-radius: 6px;
overflow: hidden;
background: var(--bg-primary, #0c0f1a);
}
.ai-msg__body .ai-code__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px;
background: var(--bg-tertiary, #1c2030);
border-bottom: 1px solid var(--border-color, #2a2e39);
}
.ai-msg__body .ai-code__lang {
font-family: ui-monospace, 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-secondary, #989fa8);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.ai-msg__body .ai-code__actions { display: flex; gap: 4px; }
/* [FIX] 2026-05-18 — Code-block toolbar buttons (Copy / Apply).
*
* Before:
* color: var(--text-primary, #d1d4dc);
* background: var(--bg-secondary, #131722);
* :hover background: var(--bg-quaternary, #2a2e39);
*
* Problem (reported by user): in chart's light theme `:root` defines
* --bg-secondary: #ffffff, --text-primary: #000000, but `--bg-quaternary`
* was NEVER defined anywhere in the codebase → fallback `#2a2e39` (dark
* slate) kicked in on `:hover`. The result on a white panel was a
* dark-slate button with #000 text that read as nearly invisible.
*
* Fix: stop relying on the chart palette variables (which are incomplete
* for these accents) and define explicit dark/light tokens scoped to the
* AI code-block toolbar. Copy now has a strong contrast colour pair in
* both themes; Apply keeps its #2962ff brand identity. */
.ai-msg__body .ai-code__btn {
padding: 2px 8px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
font-size: 12px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ai-msg__body .ai-code__btn:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.32);
}
.ai-msg__body .ai-code__btn--apply {
background: rgba(41, 98, 255, 0.22);
border-color: rgba(41, 98, 255, 0.5);
color: #ffffff;
}
.ai-msg__body .ai-code__btn--apply:hover {
background: #2962ff;
border-color: #2962ff;
color: #ffffff;
}
/* Light theme: chart uses `body:not(.dark-theme)`.
* Per user request — Copy text MUST be white in light theme.
* So Copy becomes a dark chip on the white panel (charcoal background +
* white text) instead of a low-contrast white-on-white button. Apply stays
* a solid #2962ff blue with white text in both themes. */
body:not(.dark-theme) .ai-msg__body .ai-code__btn {
border: 1px solid #1c1f2a;
background: #1c1f2a;
color: #ffffff;
}
body:not(.dark-theme) .ai-msg__body .ai-code__btn:hover {
background: #2a2e39;
border-color: #2a2e39;
color: #ffffff;
}
body:not(.dark-theme) .ai-msg__body .ai-code__btn--apply {
background: #2962ff;
border-color: #2962ff;
color: #ffffff;
}
body:not(.dark-theme) .ai-msg__body .ai-code__btn--apply:hover {
background: #1c54f0;
border-color: #1c54f0;
color: #ffffff;
}
/* Pre inside .ai-code: remove its own borders (header already provides them). */
.ai-msg__body .ai-code pre {
margin: 0;
border: none;
border-radius: 0;
background: transparent;
}
/* Reasoning (thinking-mode trace) collapsible panel */
.ai-msg__reasoning {
margin-bottom: 6px;
border-radius: 6px;
background: rgba(140, 95, 255, 0.06);
border: 1px solid rgba(140, 95, 255, 0.20);
overflow: hidden;
}
.ai-msg__reasoning-toggle {
width: 100%;
padding: 6px 10px;
background: transparent;
border: none;
color: #b89aff;
font-size: 12px;
cursor: pointer;
text-align: left;
display: flex;
align-items: center;
gap: 6px;
}
.ai-msg__reasoning-toggle::before {
content: "▸";
transition: transform 150ms ease;
}
.ai-msg__reasoning.is-open .ai-msg__reasoning-toggle::before {
transform: rotate(90deg);
}
.ai-msg__reasoning-body {
padding: 8px 12px 10px;
color: var(--text-secondary, #989fa8);
font-size: 12px;
line-height: 1.5;
max-height: 240px;
overflow-y: auto;
display: none;
white-space: pre-wrap;
border-top: 1px solid rgba(140, 95, 255, 0.15);
}
.ai-msg__reasoning.is-open .ai-msg__reasoning-body {
display: block;
}
/* [FIX] 2026-05-18 — Tool-call pill is now collapsible.
Header is a button (icon + name + duration + caret); detail body shows
args/result JSON only after the user clicks. Cursor parity. */
.ai-toolcall {
margin: 6px 0;
border-radius: 6px;
background: var(--bg-tertiary, #1c2030);
border: 1px solid var(--border-color, #2a2e39);
overflow: hidden;
}
.ai-toolcall__header {
width: 100%;
padding: 6px 10px;
background: transparent;
border: none;
color: var(--text-secondary, #989fa8);
font-size: 12px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
text-align: left;
}
.ai-toolcall__header:hover { background: rgba(91, 141, 239, 0.08); }
.ai-toolcall__icon {
width: 14px; height: 14px;
color: #5b8def;
flex-shrink: 0;
}
.ai-toolcall__name {
color: var(--text-primary, #d1d4dc);
font-weight: 500;
font-family: ui-monospace, 'JetBrains Mono', monospace;
font-size: 12px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-toolcall__duration {
font-family: ui-monospace, 'JetBrains Mono', monospace;
font-size: 12px;
padding: 1px 6px;
border-radius: 4px;
background: rgba(91, 141, 239, 0.12);
color: #8aaef5;
}
.ai-toolcall__caret {
transition: transform 150ms ease;
color: var(--text-secondary, #989fa8);
}
.ai-toolcall.is-expanded .ai-toolcall__caret { transform: rotate(180deg); }
.ai-toolcall__detail {
border-top: 1px solid var(--border-color, #2a2e39);
padding: 6px 10px;
background: var(--bg-primary, #0c0f1a);
}
.ai-toolcall__section + .ai-toolcall__section { margin-top: 6px; }
.ai-toolcall__label {
display: block;
font-size: 12px;
color: var(--text-secondary, #989fa8);
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.ai-toolcall__detail pre {
margin: 0;
padding: 6px 8px;
background: rgba(0, 0, 0, 0.25);
border-radius: 4px;
font-family: ui-monospace, 'JetBrains Mono', monospace;
font-size: 12px;
line-height: 1.4;
color: var(--text-primary, #d1d4dc);
max-height: 200px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
.ai-toolcall.is-running .ai-toolcall__icon { color: #f7a800; animation: ai-spin 1.1s linear infinite; }
.ai-toolcall.is-done .ai-toolcall__icon { color: #26a69a; }
.ai-toolcall.is-error .ai-toolcall__icon { color: #ef5350; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
/* [FIX] 2026-05-19 — Tool-call GROUP container.
A single strategy-writing turn can fire 20-30 write/run cycles. Each
.ai-toolcall pill is ~40 px tall, so the run blew past the ~940 px
.ai-panel__messages viewport and forced manual scrolling. We wrap the
pills in an .ai-toolgroup that defaults to collapsed and presents a
one-line summary ("Tools · 18 calls · 1m 24s") — Cursor / Claude Code
parity. The inner pills keep their own per-pill expand for args/result. */
.ai-toolgroup {
margin: 6px 0;
border-radius: 6px;
background: var(--bg-tertiary, #1c2030);
border: 1px solid var(--border-color, #2a2e39);
overflow: hidden;
}
.ai-toolgroup__header {
width: 100%;
padding: 6px 10px;
background: transparent;
border: none;
color: var(--text-secondary, #989fa8);
font-size: 12px;
cursor: pointer;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.ai-toolgroup__header:hover { background: rgba(91, 141, 239, 0.08); }
.ai-toolgroup__caret {
color: var(--text-secondary, #989fa8);
transition: transform 150ms ease;
flex-shrink: 0;
width: 12px;
text-align: center;
}
.ai-toolgroup:not(.is-collapsed) .ai-toolgroup__caret { transform: rotate(90deg); }
.ai-toolgroup__summary {
color: var(--text-primary, #d1d4dc);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-toolgroup__pills {
/* Pills inside the group: kill outer margin so they don't double-space
with the group border; keep a thin top divider between group header
and first pill. */
border-top: 1px solid var(--border-color, #2a2e39);
padding: 4px 6px;
background: var(--bg-primary, #0c0f1a);
}
.ai-toolgroup__pills .ai-toolcall {
margin: 4px 0;
/* Inner pills lose their own outer border to avoid double frames inside
the group. They still keep the header/detail bands. */
border: 1px solid var(--border-color, #2a2e39);
background: var(--bg-tertiary, #1c2030);
}
/* [FIX] 2026-05-19 — Inline diff: neutral code-block presentation.
*
* Reason (user report 2026-05-19): the previous Cursor-style red/green tint
* pattern was reported as illegible — green text (#7ed3c4 add lines) on a
* tinted-green background (rgba(38,166,154,0.12)) gave ~2.4:1 contrast on
* the panel's near-black body, well below WCAG AA. Same problem on the
* red side. Users saw "alternating red/green stripes with green text"
* that obscured the actual code, while the `+` / `-` line prefixes added
* noise without aiding comprehension (Accept/Reject already conveys
* intent — line-level direction is decorative).
*
* Change: render the diff body as a plain monospace code block, exactly
* like a `.ai-code` block. Text colour is the panel body colour
* (--text-primary), background is the panel surface, no per-line tint,
* no line-through, no `+`/`-` text glyphs. The only diff cue we keep is
* a 2px coloured left rail (teal/red) — a quiet semantic marker that
* stays out of the reader's way.
*
* Warning: do NOT reintroduce the red/green stripe backgrounds or the
* coloured line text — both fail WCAG AA on chart's pitch-black panel
* and chart's white panel respectively, and were the root cause of the
* 2026-05-19 report. The header "+N / -N" summary is the only place
* where the add/del COUNTS may use the brand red/green tokens. */
.ai-diff {
margin: 8px 0;
border-radius: 8px;
border: 1px solid var(--border-color, #2a2e39);
background: var(--bg-primary, #0c0f1a);
overflow: hidden;
}
.ai-diff.is-resolved { opacity: 0.7; }
.ai-diff__header {
padding: 6px 10px;
border-bottom: 1px solid var(--border-color, #2a2e39);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: var(--bg-tertiary, #1c2030);
}
.ai-diff__title {
font-size: 12px;
font-weight: 600;
color: var(--text-primary, #d1d4dc);
display: inline-flex;
align-items: center;
gap: 6px;
}
.ai-diff__title-icon {
width: 12px;
height: 12px;
color: #c25fff;
}
.ai-diff__summary {
font-size: 12px;
color: var(--text-secondary, #989fa8);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Header summary keeps the add/del semantic colours — those are the brand
* up/down tokens used everywhere in the chart, applied to a 1-2 char count
* label not running text, so contrast is not a concern. */
.ai-diff__summary .add { color: #26a69a; }
.ai-diff__summary .del { color: #ef5350; }
/* [ADD] 2026-05-21 — "Applied" badge in the diff header (apply-first flow).
* Signals to the user that the change is ALREADY live in the editor and
* that Restore reverts. Uses the brand accent ring so it matches the
* checkpoint chip elsewhere in the chat. */
.ai-diff__applied-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
background: rgba(38, 166, 154, 0.18);
color: #26a69a;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
vertical-align: middle;
margin-right: 4px;
}
body:not(.dark-theme) .ai-diff__applied-badge {
background: rgba(38, 166, 154, 0.12);
color: #00897b;
}
.ai-diff__body {
max-height: 320px;
overflow: auto;
font-family: ui-monospace, 'JetBrains Mono', monospace;
font-size: 12px;
line-height: 1.45;
color: var(--text-primary, #ffffff);
background: var(--bg-primary, #000000);
}
.ai-diff__line {
display: block;
padding: 0 10px;
white-space: pre;
color: inherit;
background: transparent;
}
/* Add/del lines: only a 2px coloured left rail. No tint, no text colour
* change, no line-through. Context lines render with a transparent rail of
* the same width so the indentation aligns. */
.ai-diff__line--add { box-shadow: inset 2px 0 0 #26a69a; }
.ai-diff__line--del { box-shadow: inset 2px 0 0 #ef5350; }
.ai-diff__line--ctx { box-shadow: inset 2px 0 0 transparent; }
/* Light theme: same neutral code-block presentation against a white panel. */
body:not(.dark-theme) .ai-diff__body {
background: #ffffff;
color: var(--text-primary);
}
/* [FIX] 2026-05-18 — AI panel light-theme audit (comprehensive).
*
* After the header-icon-button fix the user pointed out that many OTHER
* AI panel widgets still read poorly in light theme. A full audit
* uncovered these failure modes:
*
* A. Inline `` and `` blocks paint a 30-35% black overlay
* (`rgba(0,0,0,0.30/0.35)`) on top of the panel background. On a
* black panel that's a subtle ink mark; on a white panel that's a
* DARK GREY block with the inherited black text underneath →
* invisible. Same problem inside .ai-toolcall__detail pre.
*
* B. Table headers used var(--bg-quaternary) which has just been
* defined as #e0e3eb light-grey. Fine for the chip itself, but
* the th text was inheriting --text-primary=#000 — OK now, but
* the dark-theme th text was relying on the #2a2e39 fallback so
* we re-anchor th color explicitly.
*
* C. .ai-btn (used by Diff Accept / Reject and Checkpoint Restore)
* hover background was the undefined --bg-quaternary fallback,
* same diagnosis as .ai-icon-btn. Now resolved by the new var,
* but anchor the text colour for stronger contrast.
*
* D. Accent text colours tuned for dark surfaces (#b89aff thinking
* toggle, #8aaef5 toolcall duration / slash command name) read
* as washed-out pastels on white. Switch to deeper shades of the
* same hue.
*
* E. .ai-send-btn.is-stop used 18%-red on the dark-theme panel; on
* the white panel that becomes a pale pink chip with red text —
* still readable but lacks the destructive weight Cursor / TV
* conventions expect. Bump the tint and switch to a deeper red.
*
* F. .ai-history__item.is-active was a 15%-blue chip — visible on
* black, washed out on white. Bump to 22%-blue + accent border.
*
* Each override is scoped to body:not(.dark-theme) so dark theme is
* untouched. All colours target WCAG AA (4.5:1) or better against
* the new panel chrome. */
/* (A) Code blocks — flip the inky overlay into a subtle grey wash so the
inherited black text becomes readable, and keep code legible inside
tool-call detail panes too. */
body:not(.dark-theme) .ai-msg__body code,
body:not(.dark-theme) .ai-msg__reasoning-body code {
background: rgba(0, 0, 0, 0.06);
color: var(--text-primary);
}
body:not(.dark-theme) .ai-msg__body pre,
body:not(.dark-theme) .ai-msg__reasoning-body pre {
background: #f1f3f7;
color: var(--text-primary);
}
body:not(.dark-theme) .ai-toolcall__detail pre {
background: #f1f3f7;
color: var(--text-primary);
}
/* (B) Tables inside an assistant message — explicit text colour so the
header chip + body cells stay legible in both themes. */
body:not(.dark-theme) .ai-msg__body th { color: #000000; }
body:not(.dark-theme) .ai-msg__body td { color: #000000; }
/* (C) Diff Accept / Reject / Checkpoint Restore buttons — anchor text
colour so the rule cascades correctly with the new --bg-quaternary. */
body:not(.dark-theme) .ai-btn { color: #000000; }
body:not(.dark-theme) .ai-btn:hover { color: #000000; }
body:not(.dark-theme) .ai-btn--primary,
body:not(.dark-theme) .ai-btn--primary:hover { color: #ffffff; }
/* (D) Accent text deepened for light surfaces. */
body:not(.dark-theme) .ai-msg__reasoning-toggle { color: #6b3fd6; }
body:not(.dark-theme) .ai-toolcall__duration {
background: rgba(41, 98, 255, 0.16);
color: #1c54f0;
}
body:not(.dark-theme) .ai-slash__name { color: #1c54f0; }
/* Tool-call header text + caret on the light-grey pill. */
body:not(.dark-theme) .ai-toolcall__header { color: #555555; }
body:not(.dark-theme) .ai-toolcall__name { color: #000000; }
body:not(.dark-theme) .ai-toolcall__caret { color: #555555; }
body:not(.dark-theme) .ai-toolcall__label { color: #555555; }
body:not(.dark-theme) .ai-toolcall__header:hover { background: #e0e3eb; }
/* Diff title + summary text on the light-grey diff header. */
body:not(.dark-theme) .ai-diff__title { color: #000000; }
body:not(.dark-theme) .ai-diff__summary { color: #555555; }
/* History items + meta. */
body:not(.dark-theme) .ai-history__item { color: #000000; }
body:not(.dark-theme) .ai-history__meta { color: #666666; }
body:not(.dark-theme) .ai-history__empty { color: #666666; }
/* Welcome chips on the empty-conversation panel. */
body:not(.dark-theme) .ai-welcome__hint { color: #555555; }
body:not(.dark-theme) .ai-chip { color: #000000; }
/* User / assistant role labels — darker shade for white background. */
body:not(.dark-theme) .ai-msg--user .ai-msg__role { color: #1c54f0; }
body:not(.dark-theme) .ai-msg--assistant .ai-msg__role { color: #6b3fd6; }
/* (E) Stop button in light theme — bolder pink chip, deeper red glyph. */
body:not(.dark-theme) .ai-send-btn.is-stop {
background: rgba(239, 83, 80, 0.32);
color: #b31d28;
}
body:not(.dark-theme) .ai-send-btn.is-stop:hover {
background: #b31d28;
color: #ffffff;
}
/* (F) Active-history chip — bumped blue tint + accent left border. */
body:not(.dark-theme) .ai-history__item.is-active {
background: rgba(41, 98, 255, 0.18);
box-shadow: inset 2px 0 0 #2962ff;
}
/* Message-action hover (edit / regenerate icons next to each bubble). */
body:not(.dark-theme) .ai-msg__action { color: #555555; }
body:not(.dark-theme) .ai-msg__action:hover {
background: #e0e3eb;
color: var(--text-primary);
border-color: #d1d4dc;
}
/* History per-row delete affordance — keep destructive red even at rest. */
body:not(.dark-theme) .ai-history__del { color: #666666; }
body:not(.dark-theme) .ai-history__del:hover { color: #b31d28; }
.ai-diff__actions {
padding: 6px 10px;
border-top: 1px solid var(--border-color, #2a2e39);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
background: var(--bg-tertiary, #1c2030);
}
.ai-diff__status {
margin-right: auto;
font-size: 12px;
color: var(--text-secondary, #989fa8);
}
.ai-diff.is-accepted .ai-diff__status { color: #26a69a; }
.ai-diff.is-rejected .ai-diff__status { color: #ef5350; }
.ai-diff.is-resolved .ai-diff__actions .ai-btn { display: none; }
/* [ADD] 2026-05-19 v7 — Guardrail micro-banner.
Appears at the TOP of an active assistant bubble when the orchestrator
short-circuits the ReAct loop due to repetition / no-progress / error
streak detection. Single-line, low-contrast, auto-dismisses after 6 s.
Intentionally subtler than .ai-checkpoint so the user reads it as
"informational" rather than "action required". */
.ai-guardrail-hint {
margin: 0 0 8px 0;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid rgba(255, 167, 38, 0.35);
background: rgba(255, 167, 38, 0.10);
color: #d1d4dc;
font-size: 12px;
line-height: 1.4;
}
/* [ADD] 2026-05-19 v7 — Auto-Continue countdown chip.
Rendered inside the assistant bubble when the orchestrator emits
budget_exhausted. Stacks horizontally on desktop, wraps on mobile.
The Continue button is primary because the default action after
the countdown IS "continue"; Cancel is ghost-styled because most
users will let it auto-fire. */
.ai-continue-chip {
margin: 8px 0 0 0;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid var(--border-color, #2a2e39);
background: rgba(41, 98, 255, 0.06);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.ai-continue-chip__label {
flex: 1;
min-width: 120px;
font-size: 12px;
color: var(--text-primary, #d1d4dc);
}
.ai-continue-chip .ai-btn { padding: 4px 10px; font-size: 12px; }
.ai-continue-chip .ai-btn:disabled { opacity: 0.55; cursor: default; }
/* [ADD] 2026-05-20 — Inline "Reconnecting (1/3)…" chip.
Appears at the bottom of the in-flight assistant bubble whenever the
SSE stream is being re-established after a transient drop (network
hiccup / pm2 restart / nginx idle). Cursor-style: small, low-noise,
one Cancel affordance. Removed automatically as soon as the next
/chat fetch succeeds. */
.ai-reconnect-chip {
margin: 6px 0 0 0;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid rgba(247, 168, 0, 0.30);
background: rgba(247, 168, 0, 0.10);
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-primary, #d1d4dc);
}
.ai-reconnect-chip__spinner {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid rgba(247, 168, 0, 0.30);
border-top-color: #f7a800;
animation: ai-reconnect-spin 0.9s linear infinite;
flex: 0 0 auto;
}
@keyframes ai-reconnect-spin {
to { transform: rotate(360deg); }
}
.ai-reconnect-chip__label {
flex: 1;
min-width: 0;
}
.ai-reconnect-chip__cancel {
padding: 2px 8px;
font-size: 12px;
line-height: 1.4;
}
body:not(.dark-theme) .ai-reconnect-chip {
background: rgba(247, 168, 0, 0.16);
color: #000;
}
/* The reconnect-failed card reuses .ai-stop-card --errors variant
styling; no extra rule needed beyond the .ai-reconnect-failed-card
marker class for diagnostic / future-tuning purposes. */
/* [ADD] 2026-05-20 — Guardrail stop card. Replaces the hard-coded
English wrap-up text the orchestrator used to stream into content
when sameToolStreak / no_progress / errors crossed their threshold,
or when maxToolSteps was hit. Title + short explanation + row of
action buttons (Retry / Rephrase / [Continue, budget-only]). Tone
is amber for loop/no_progress/errors (warning) and blue for budget
(informational continuation prompt). Sits inside .ai-msg__body of
the same bubble that would have held the wrap-up text. */
.ai-stop-card {
margin: 4px 0;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid rgba(255, 167, 38, 0.35);
background: rgba(255, 167, 38, 0.08);
display: flex;
flex-direction: column;
gap: 8px;
}
.ai-stop-card--budget {
border-color: rgba(41, 98, 255, 0.35);
background: rgba(41, 98, 255, 0.08);
}
.ai-stop-card--errors {
border-color: rgba(239, 83, 80, 0.45);
background: rgba(239, 83, 80, 0.10);
}
.ai-stop-card__title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary, #d1d4dc);
}
.ai-stop-card__msg {
font-size: 13px;
line-height: 1.5;
color: var(--text-primary, #d1d4dc);
opacity: 0.85;
}
.ai-stop-card__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.ai-stop-card__btn { padding: 6px 12px; font-size: 12px; }
.ai-stop-card__btn:disabled { opacity: 0.55; cursor: default; }
/* Light-theme contrast tweaks so the amber/red/blue surfaces remain
readable on a white background. */
body:not(.dark-theme) .ai-stop-card {
background: rgba(255, 167, 38, 0.14);
color: #000;
}
body:not(.dark-theme) .ai-stop-card--budget {
background: rgba(41, 98, 255, 0.12);
}
body:not(.dark-theme) .ai-stop-card--errors {
background: rgba(239, 83, 80, 0.14);
}
body:not(.dark-theme) .ai-stop-card__title,
body:not(.dark-theme) .ai-stop-card__msg {
color: #000;
}
/* [FIX] 2026-05-18 — Checkpoint card (inline). Appears after each accepted
YeScript change. Restore button rolls the editor back to the snapshot. */
.ai-checkpoint {
margin: 6px 0;
border-radius: 6px;
border: 1px solid var(--border-color, #2a2e39);
background: rgba(38, 166, 154, 0.06);
padding: 6px 10px;
}
.ai-checkpoint.is-restored { opacity: 0.6; }
.ai-checkpoint__row {
display: flex;
align-items: center;
gap: 8px;
}
.ai-checkpoint__icon {
width: 14px; height: 14px;
color: #26a69a;
flex-shrink: 0;
}
.ai-checkpoint__label {
flex: 1;
color: var(--text-primary, #d1d4dc);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-checkpoint__restore { padding: 2px 10px; }
/* [FIX] 2026-05-20 — Checkpoint GROUP container (collapsible wrapper).
When the AI iterates on a strategy it can write 5-15 checkpoints in a
single turn. Cards used to stack vertically, drowning the actual
answer. We wrap them in an .ai-cp-group that defaults collapsed,
header reads "Checkpoints · N · ". Same UX model as
.ai-toolgroup so the user has one consistent interaction across
sub-turn artifacts (tools + checkpoints). The inner cards are
unchanged — once expanded each still has its own Restore button. */
.ai-cp-group {
margin: 6px 0;
border-radius: 6px;
background: var(--bg-tertiary, #1c2030);
border: 1px solid var(--border-color, #2a2e39);
overflow: hidden;
}
.ai-cp-group__header {
width: 100%;
padding: 6px 10px;
background: transparent;
border: none;
color: var(--text-secondary, #989fa8);
font-size: 12px;
cursor: pointer;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
}
.ai-cp-group__header:hover { background: var(--bg-hover); }
.ai-cp-group__caret {
color: var(--text-secondary, #989fa8);
transition: transform 150ms ease;
flex-shrink: 0;
width: 12px;
text-align: center;
}
.ai-cp-group:not(.is-collapsed) .ai-cp-group__caret { transform: rotate(90deg); }
.ai-cp-group__icon {
width: 14px; height: 14px;
color: #26a69a;
flex-shrink: 0;
}
.ai-cp-group__summary {
color: var(--text-primary, #d1d4dc);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-cp-group__items {
border-top: 1px solid var(--border-color, #2a2e39);
padding: 4px 6px;
background: var(--bg-primary, #0c0f1a);
}
.ai-cp-group__items .ai-checkpoint {
margin: 4px 0;
}
.ai-btn {
padding: 6px 12px;
border-radius: 4px;
border: 1px solid var(--border-color, #2a2e39);
background: var(--bg-tertiary, #1c2030);
color: var(--text-primary, #d1d4dc);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.ai-btn:hover { background: var(--bg-quaternary, #2a2e39); }
.ai-btn--primary {
background: #2962ff;
border-color: #2962ff;
color: #fff;
}
.ai-btn--primary:hover {
background: #1c54f0;
border-color: #1c54f0;
}
.ai-btn--ghost {
background: transparent;
}
/* Deep backtest progress */
.ai-panel__deep-progress {
flex: 0 0 auto;
padding: 10px 12px;
border-top: 1px solid var(--border-color, #2a2e39);
background: rgba(247, 168, 0, 0.06);
}
.ai-deep__label {
font-size: 12px;
color: #f7a800;
margin-bottom: 6px;
font-weight: 500;
}
.ai-deep__bar {
height: 4px;
border-radius: 2px;
background: rgba(247, 168, 0, 0.15);
overflow: hidden;
}
.ai-deep__fill {
height: 100%;
background: linear-gradient(90deg, #f7a800, #ef5350);
transition: width 250ms ease;
}
.ai-deep__meta {
font-size: 12px;
color: var(--text-secondary, #989fa8);
margin-top: 4px;
}
/* [ADD] 2026-05-21 v6 — Command Queue (Cursor parity).
Sits between the chat scroll area and the composer. Visible only when
the user has queued one or more messages while a turn is mid-flight.
Each row is draggable (HTML5 drag), inline-editable (contenteditable),
and removable. After the active turn's SSE stream completes, the head
item is dequeued and auto-sent. See tt.ai.js#queue.
Theme rules below mirror .ai-panel__composer (same border, same bg). */
.ai-queue {
flex: 0 0 auto;
max-height: 168px; /* ~ 4 rows before scroll */
overflow-y: auto;
border-top: 1px solid var(--popover-border);
background: var(--bg-secondary, #131722);
}
.ai-queue__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 12px 4px;
color: var(--text-secondary, #989fa8);
font-size: 12px;
line-height: 1.2;
}
.ai-queue__title {
font-weight: 500;
letter-spacing: 0.02em;
}
.ai-queue__title #aiQueueCount {
color: var(--text-primary, #d1d4dc);
font-variant-numeric: tabular-nums;
}
.ai-queue__clear {
width: 22px;
height: 22px;
padding: 0;
background: transparent;
border: none;
border-radius: 4px;
color: var(--text-secondary, #989fa8);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ai-queue__clear svg { width: 14px; height: 14px; display: block; }
.ai-queue__clear:hover {
color: #ef5350;
background: rgba(239, 83, 80, 0.10);
}
.ai-queue__list {
list-style: none;
margin: 0;
padding: 0 8px 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ai-queue__item {
display: flex;
align-items: stretch;
gap: 6px;
padding: 6px 8px;
background: var(--bg-primary, #0c0f1a);
border: 1px solid var(--border-color, #2a2e39);
border-radius: 6px;
transition: border-color 120ms ease, background 120ms ease;
}
.ai-queue__item:hover {
border-color: rgba(41, 98, 255, 0.45);
}
.ai-queue__item.is-dragging {
opacity: 0.4;
}
.ai-queue__item.is-drop-target {
border-color: rgba(41, 98, 255, 0.85);
background: rgba(41, 98, 255, 0.07);
}
.ai-queue__handle {
flex: 0 0 14px;
padding: 2px 0;
color: var(--text-secondary, #989fa8);
cursor: grab;
user-select: none;
line-height: 1;
align-self: center;
}
.ai-queue__handle:active { cursor: grabbing; }
.ai-queue__handle svg { width: 12px; height: 12px; display: block; }
/* HTML5 native drag-drop is a no-op on touch devices. We keep the
handle visible on mobile as a visual cue and rely on edit + remove
for reordering. Future improvement: add touch drag via pointerdown
if user feedback requests it. */
.ai-queue__text {
flex: 1 1 auto;
min-width: 0;
padding: 2px 4px;
color: var(--text-primary, #d1d4dc);
font-size: 12px;
line-height: 1.4;
outline: none;
word-break: break-word;
white-space: pre-wrap;
/* Cap at ~3 visual lines to keep queue compact. Overflow scrolls
via the outer .ai-queue container. */
max-height: 60px;
overflow-y: auto;
}
.ai-queue__text:focus {
background: rgba(41, 98, 255, 0.06);
border-radius: 4px;
}
.ai-queue__remove {
flex: 0 0 18px;
align-self: center;
width: 18px;
height: 18px;
padding: 0;
background: transparent;
border: none;
color: var(--text-secondary, #989fa8);
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ai-queue__remove svg { width: 12px; height: 12px; display: block; }
.ai-queue__remove:hover {
color: #ef5350;
background: rgba(239, 83, 80, 0.10);
}
/* Light theme overrides: app uses [body:not(.dark-theme)] for light. */
body:not(.dark-theme) .ai-queue { background: #f6f8fc; }
body:not(.dark-theme) .ai-queue__item {
background: #ffffff;
border-color: #d8dce4;
}
body:not(.dark-theme) .ai-queue__item:hover { border-color: rgba(41, 98, 255, 0.5); }
body:not(.dark-theme) .ai-queue__text { color: #1f2434; }
body:not(.dark-theme) .ai-queue__header { color: #555555; }
body:not(.dark-theme) .ai-queue__title #aiQueueCount { color: #1f2434; }
/* Composer */
.ai-panel__composer {
flex: 0 0 auto;
padding: 10px 12px;
border-top: 1px solid var(--chart-popup-border);
background: var(--chart-popup-bg);
display: flex;
align-items: flex-end;
gap: 8px;
position: relative;
}
/* [FIX] 2026-05-18 — Slash command floater. Anchored above the composer. */
.ai-slash {
position: absolute;
left: 12px;
right: 100px;
bottom: calc(100% + 4px);
max-height: 220px;
overflow-y: auto;
background: var(--popover-bg);
border: 1px solid var(--popover-border);
border-radius: 6px;
box-shadow: var(--popover-shadow);
z-index: 10;
}
.ai-slash__item {
width: 100%;
padding: 6px 10px;
background: transparent;
border: none;
color: var(--text-primary, #d1d4dc);
font-size: 12px;
text-align: left;
cursor: pointer;
display: flex;
align-items: baseline;
gap: 10px;
}
.ai-slash__item.is-selected,
.ai-slash__item:hover { background: rgba(91, 141, 239, 0.14); }
.ai-slash__name {
font-family: ui-monospace, 'JetBrains Mono', monospace;
color: #8aaef5;
flex-shrink: 0;
}
.ai-slash__desc {
color: var(--text-secondary, #989fa8);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-panel__composer textarea {
flex: 1 1 auto;
min-height: 36px;
max-height: 140px;
resize: none;
padding: 8px 10px;
border-radius: 6px;
border: none;
background: #000000;
color: var(--text-primary, #d1d4dc);
font-family: inherit;
font-size: 14px;
line-height: 1.4;
outline: none;
transition: none;
}
.ai-panel__composer textarea:focus {
border: none;
box-shadow: none;
}
body:not(.dark-theme) .ai-panel__composer textarea {
border: 1px solid var(--chart-popup-border);
background: var(--chart-popup-bg);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
body:not(.dark-theme) .ai-panel__composer textarea:focus {
border: 1px solid #2962ff;
box-shadow: 0 0 0 1px rgba(41, 98, 255, 0.18);
}
.ai-voice-btn {
width: 36px;
height: 36px;
border-radius: 6px;
border: 1px solid var(--chart-popup-border);
background: transparent;
color: var(--text-secondary, #989fa8);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
flex-shrink: 0;
position: relative;
}
.ai-voice-btn:hover {
color: var(--text-primary, #d1d4dc);
border-color: rgba(41, 98, 255, 0.45);
background: rgba(41, 98, 255, 0.08);
}
.ai-voice-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
}
.ai-voice-btn svg { width: 16px; height: 16px; }
.ai-voice-btn.is-listening {
color: #ef5350;
border-color: rgba(239, 83, 80, 0.55);
background: rgba(239, 83, 80, 0.12);
animation: ai-voice-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-voice-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.35); }
50% { box-shadow: 0 0 0 6px rgba(239, 83, 80, 0); }
}
body:not(.dark-theme) .ai-voice-btn {
background: var(--chart-popup-bg);
}
.ai-send-btn {
width: 36px;
height: 36px;
border-radius: 6px;
border: none;
background: #2962ff;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 150ms ease, transform 150ms ease;
flex-shrink: 0;
position: relative;
}
.ai-send-btn:hover { background: #1c54f0; transform: translateY(-1px); }
.ai-send-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ai-send-btn svg { width: 16px; height: 16px; }
/* [FIX] 2026-05-18 — Stop affordance.
While streaming, JS adds `.is-stop` to the send button which flips it into
a red square-icon stop button. Clicking it calls abortController.abort()
which lets the SSE fetch tear down → backend orchestrator receives the
`req.raw close` event → cancels upstream model stream + bridge waits.
Two SVGs are stacked: send is default-visible, stop is shown only with the
modifier class, so we never repaint inner HTML mid-stream. */
.ai-send-btn__send { display: inline-block; }
.ai-send-btn__stop { display: none; }
.ai-send-btn.is-stop { background: rgba(239, 83, 80, 0.18); color: #ef5350; }
.ai-send-btn.is-stop:hover { background: #ef5350; color: #fff; transform: none; }
.ai-send-btn.is-stop .ai-send-btn__send { display: none; }
.ai-send-btn.is-stop .ai-send-btn__stop { display: inline-block; }
/* [CHG] 2026-05-19 v3 — User reported the white stop square inside the
red button looked "too small". Root cause: previous v1 forced the
stop SVG to 12px (vs the send icon's 16px), making the stop affordance
visually weaker than the send icon it replaces. Industry convention
(Cursor / Copilot / ChatGPT / Claude composer): the stop icon is the
SAME size or LARGER than the send icon, because cancelling an
in-flight stream is a critical user intervention and must be an
obvious, easy-to-hit target — not a tiny dot.
Stop SVG is now 18px (vs 16px send) so the filled square reads with
confident weight inside the 36px button — a 50% icon-to-button ratio
that matches the Material/iOS notion of "primary action affordance". */
.ai-send-btn.is-stop .ai-send-btn__stop { width: 18px; height: 18px; }
/* [FIX] 2026-05-18 — Typing indicator (three pulsing dots).
* Shown inside the empty assistant bubble between turn_start and the first
* reasoning_delta / content_delta. Without this the chat felt frozen for
* 1-5 s while the model buffered hidden chain-of-thought.
* Standard 3-dot pattern used by iMessage / WhatsApp / ChatGPT / Slack. */
.ai-typing {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 0;
}
.ai-typing > span {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
animation: ai-typing-bounce 1.2s infinite ease-in-out both;
}
.ai-typing > span:nth-child(1) { animation-delay: -0.32s; }
.ai-typing > span:nth-child(2) { animation-delay: -0.16s; }
@keyframes ai-typing-bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
body:not(.dark-theme) .ai-typing > span { background: rgba(0, 0, 0, 0.45); }
/* ───────────────────────────────────────────────────────────────────────
AI panel — mobile / touch-tablet full-screen adaptation (2026-05-19)
Activated via media query (≤768px OR ≤1366px+coarse touch, matching the
global isMobile breakpoint used by tt.ui.manager.js + .right-toolbar
hide rule) AND the .ai-panel--mobile class injected by tt.ai.js when
window.tt.device.isMobile is true. Two-layer guard keeps desktop
pixel-perfect even at narrow window widths.
Design: industry-standard mobile AI chat (Claude / ChatGPT app) —
- Full-screen overlay between top bar (44px) and bottom tab bar (48px)
- 100% width (no more 92vw with awkward right gutter)
- Header bumped to 48px with a Back button on the left (≥44×44 touch)
- Composer textarea font-size 16px (prevents iOS Safari auto-zoom)
- Resize handle hidden (full-screen has no need to drag-resize)
- Slide-up + fade-in animation (translateY 20px → 0, opacity 0 → 1)
────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px),
(max-width: 1366px) and (hover: none) and (pointer: coarse) {
.ai-panel.ai-panel--mobile {
top: 44px;
left: 0;
right: 0;
bottom: calc(48px + env(safe-area-inset-bottom, 0px));
width: 100%;
max-width: 100%;
min-width: 0;
border-radius: 0;
border-left: none;
z-index: 9700; /* above bottom tabs (9500) and More sheet (9600) */
transform: translateY(20px);
opacity: 0;
transition: transform 220ms ease, opacity 220ms ease;
}
.ai-panel.ai-panel--mobile.is-open {
transform: translateY(0);
opacity: 1;
}
/* Full-screen mode has no resize handle */
.ai-panel.ai-panel--mobile #aiPanelResize { display: none !important; }
/* [CHG] 2026-05-19 v3 — Mobile header simplified: removed the redundant
Back '<' button on the left. The right-side X close button serves
the same dismiss role and keeping both was visual duplication that
crowded the LOGO + brand name. Header now reads: LOGO+name (left)
→ action chips → X close (right), matching desktop layout. */
.ai-panel.ai-panel--mobile .ai-panel__header {
height: 48px;
/* [FIX] 2026-05-19 v8 — kill the right-side 8 px padding so the
* Close X chip can sit flush against the viewport edge (Apple HIG
* + Material both pin destructive close to the absolute edge in
* full-screen sheets). Left padding stays for the brand title's
* breathing room. The X button below grows its own padding so the
* 44×44 tap target is preserved. */
padding: 0 0 0 8px;
}
/* Touch-friendly action buttons in the header (close only; head icons stay 24px) */
.ai-panel.ai-panel--mobile .ai-icon-btn:not(.ai-panel__head-icon),
.ai-panel.ai-panel--mobile #aiPanelClose {
min-width: 44px;
min-height: 44px;
}
/* [FIX] 2026-05-19 v8 — Close X flush-right on mobile.
* Reason: user reported visible white gap to the right of the X in
* full-screen mobile mode. Header had `padding: 0 8px` AND the
* button had no edge-pin, so X sat 8 px in from the viewport edge.
* Change: header right padding now 0 (above); Close X gains a small
* internal right padding so the SVG glyph still reads centred but
* the chip's right edge IS the viewport edge — the chip extends
* into where the gap used to be and is fully tappable to the
* corner (matches iOS sheet + Cursor close affordance). */
.ai-panel.ai-panel--mobile #aiPanelClose {
padding-right: 12px;
padding-left: 8px;
}
/* [FIX] 2026-05-19 v8 — Bubble + message row fill 100% of panel.
* Reason: iPad Pro (1024–1366 px wide) hits the mobile media query
* but a `max-width: 92%` on .ai-msg / .ai-msg__bubble left a
* visible ~80–100 px white strip on the right of the chat. 92%
* only makes sense on phones (<480 px) where it preserves a
* left-right asymmetry between user / assistant lanes.
* Change: phone (<=480 px) keeps 92% (see next media block); tablet
* + larger mobile width are 100%. .ai-panel__messages already
* controls inner padding so the chat still reads with breathing
* room — bubble itself goes edge-to-edge inside it. */
.ai-panel.ai-panel--mobile .ai-msg__bubble,
.ai-panel.ai-panel--mobile .ai-msg {
max-width: 100%;
}
.ai-panel.ai-panel--mobile .ai-panel__messages {
padding: 12px;
font-size: 14px;
}
/* Composer: 16px font prevents iOS Safari from auto-zooming on focus.
min-height 44px gives a proper touch target. extra bottom padding
handles the safe-area + leaves room for the keyboard accessory bar. */
.ai-panel.ai-panel--mobile .ai-panel__composer {
padding: 8px 10px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.ai-panel.ai-panel--mobile .ai-panel__composer textarea {
font-size: 16px !important;
min-height: 44px;
padding: 12px 14px;
line-height: 1.4;
}
.ai-panel.ai-panel--mobile .ai-send-btn {
min-width: 44px;
min-height: 44px;
}
/* History sub-panel full-width inside the overlay */
.ai-panel.ai-panel--mobile .ai-panel__history {
max-height: 50%;
}
/* When mobile overlay is open, lock background scroll. Class added by
tt.ai.js on body so the chart underneath doesn't scroll-through. */
body.ai-panel-mobile-open {
overflow: hidden;
touch-action: none;
}
}
/* Legacy: keep desktop behaviour intact at <=768px BUT WITHOUT the mobile
class (some QA paths force narrow viewport without isMobile JS detection).
Falls back to the old 92vw right-anchored drawer so nothing breaks. */
@media (max-width: 768px) {
.ai-panel:not(.ai-panel--mobile) {
right: 0;
width: 92vw;
max-width: 92vw;
top: 44px;
transform: translateX(100%);
}
}
/* [FIX] 2026-05-18 — Scrollbars inside the AI panel follow the CHART page
industry-standard convention: 3px wide, fully transparent at rest, only
the thumb becomes visible while the user is hovering inside the container.
Same physical metrics as `.liquidation-body`, `.bp-sub-pane`, `.sc-list`
et al. so the AI panel does not feel like a foreign UI surface. */
.ai-panel ::-webkit-scrollbar { width: 3px; height: 3px; }
.ai-panel ::-webkit-scrollbar-track { background: transparent; }
.ai-panel ::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.ai-panel__messages:hover::-webkit-scrollbar-thumb,
.ai-panel__history:hover::-webkit-scrollbar-thumb,
.ai-msg--tool .ai-msg__body:hover::-webkit-scrollbar-thumb,
.ai-msg__reasoning-body:hover::-webkit-scrollbar-thumb,
.ai-diff__body:hover::-webkit-scrollbar-thumb,
.ai-msg__body pre:hover::-webkit-scrollbar-thumb,
.ai-panel__composer textarea:hover::-webkit-scrollbar-thumb { background: #c8ccd8; }
/* Visual hint while user drags the resize handle into the close zone. */
.ai-panel.is-collapse-armed { box-shadow: -8px 0 24px rgba(239, 83, 80, 0.32); }
.ai-panel.is-collapse-armed .ai-panel__resize { background-image: none; }
.ai-panel ::-webkit-scrollbar-thumb:hover { background: #a0a4b0; }
/* Firefox path — thin track + transparent thumb that lights up on hover */
.ai-panel ::-webkit-scrollbar { }
.ai-panel__messages,
.ai-panel__history,
.ai-msg--tool .ai-msg__body,
.ai-msg__reasoning-body,
.ai-diff__body,
.ai-panel__composer textarea { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.ai-panel__messages:hover,
.ai-panel__history:hover,
.ai-msg--tool .ai-msg__body:hover,
.ai-msg__reasoning-body:hover,
.ai-diff__body:hover,
.ai-panel__composer textarea:hover { scrollbar-color: #c8ccd8 transparent; }
/* ── Toast stack ───────────────────────────────────────────────────────── */
#tt-toast-stack {
position: fixed;
top: 56px;
right: 16px;
z-index: 12000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.tt-toast {
pointer-events: auto;
min-width: 240px;
max-width: 360px;
padding: 10px 12px;
border-radius: 6px;
background: #171c28;
border: 1px solid #2a3242;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
color: #ecf1fb;
font-size: 12.5px;
line-height: 1.45;
display: flex;
align-items: flex-start;
gap: 10px;
transform: translateX(20px);
opacity: 0;
transition: transform 200ms ease, opacity 200ms ease;
}
.theme--light .tt-toast {
background: #ffffff;
border-color: #d9dee8;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
color: #111827;
}
.tt-toast.is-visible { transform: translateX(0); opacity: 1; }
.tt-toast.is-leaving { transform: translateX(20px); opacity: 0; }
.tt-toast--info { border-left: 3px solid #2962ff; background: #132a4e; border-color: #1f4f96; color: #e8f1ff; }
.tt-toast--success { border-left: 3px solid #26a69a; background: #103c35; border-color: #1f756a; color: #d9fff8; }
.tt-toast--warn { border-left: 3px solid #f7a800; background: #3f2d05; border-color: #8b6408; color: #ffe8b4; }
.tt-toast--error { border-left: 3px solid #ef5350; background: #4a1b1d; border-color: #8f3f43; color: #ffd9da; }
.theme--light .tt-toast--info { background: #eaf2ff; border-color: #9ec0ff; color: #0f2f62; }
.theme--light .tt-toast--success { background: #e8fff7; border-color: #8fd7c7; color: #0f4f43; }
.theme--light .tt-toast--warn { background: #fff4db; border-color: #e6c073; color: #6a4a00; }
.theme--light .tt-toast--error { background: #ffe9ea; border-color: #e09ca0; color: #711a1e; }
.tt-toast__msg { flex: 1 1 auto; }
.tt-toast__close {
flex: 0 0 auto;
width: 18px;
height: 18px;
border: none;
background: transparent;
color: var(--text-tertiary, #6a717b);
cursor: pointer;
border-radius: 3px;
font-size: 16px;
line-height: 1;
padding: 0;
transition: color 120ms ease, background 120ms ease;
}
.tt-toast__close:hover { color: var(--text-primary, #d1d4dc); background: rgba(255, 255, 255, 0.06); }
/* [ADD] 2026-05-19 v3 — actionable toast CTA (Material Snackbar pattern).
* Used by AI write_strategy_to_editor success path so the user gets a
* one-tap "Open Editor" jump straight into the YeScript pane. */
.tt-toast__action {
flex: 0 0 auto;
border: none;
background: transparent;
color: var(--text-accent, #2962ff);
cursor: pointer;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 4px;
transition: background 120ms ease;
}
.tt-toast__action:hover { background: rgba(41, 98, 255, 0.10); }
.tt-toast__action:active { background: rgba(41, 98, 255, 0.18); }
/* ===== [AI-ASSISTANT-2026-05-18] END ===== */
/* ===== [AI-COMPLIANCE-2026-05-22] BEGIN =====
* AI panel compliance widgets:
* 1. .ai-panel__disclaimer — always-visible single-line disclaimer pinned
* below the composer inside .ai-panel.
* 2. .ai-first-use-modal — first-open / 30-day-recurring modal that
* spells out the no-investment-advice posture
* in detail (rendered at root level,
* outside .ai-panel).
* Both surfaces draw labels from data-i18n keys (ai.disclaimer.*,
* ai.firstUseModal.*) and follow the chart's existing dark surface tokens
* (var(--popover-bg)/--popover-border) so they sit naturally next to the
* existing composer and AI panel chrome.
*/
.ai-panel__disclaimer {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 14px;
border-top: 1px solid var(--chart-popup-border);
background: var(--chart-popup-bg);
color: var(--text-tertiary, #9598a1);
font-size: 11.5px;
line-height: 1.35;
}
.ai-panel__disclaimer-main {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.ai-panel__disclaimer-icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
color: var(--text-tertiary, #9598a1);
opacity: .85;
}
.ai-panel__disclaimer-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-panel__disclaimer-link {
flex: 0 0 auto;
color: var(--text-accent, #2962ff);
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: border-color 120ms ease, color 120ms ease;
}
.ai-panel__disclaimer-link:hover {
color: var(--text-accent, #2962ff);
border-bottom-color: var(--text-accent, #2962ff);
}
.ai-panel__billing {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
}
.ai-panel__balance {
color: var(--text-secondary, #b7bcc8);
font-size: 12px;
white-space: nowrap;
}
@media (max-width: 860px) {
.ai-panel__disclaimer {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 720px) {
.ai-panel__disclaimer { padding: 6px 12px; font-size: 11px; }
.ai-panel__disclaimer-text { white-space: normal; }
}
/* ----- First-use modal ----- */
.ai-first-use-modal {
position: fixed;
inset: 0;
z-index: 1090;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.ai-first-use-modal[hidden] { display: none !important; }
.ai-first-use-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(2px);
}
.ai-first-use-modal__card {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 48px);
overflow: auto;
background: var(--popover-bg, #1e222d);
border: 1px solid var(--popover-border, #2a2e39);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
padding: 24px 26px 20px;
color: var(--text-primary, #d1d4dc);
}
.ai-first-use-modal__title {
margin: 0 0 8px;
font-size: 14px;
font-weight: 700;
color: var(--text-primary, #d1d4dc);
}
.ai-first-use-modal__lead {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.5;
color: var(--text-secondary, #b2b5be);
}
.ai-first-use-modal__list {
list-style: none;
margin: 0 0 14px;
padding: 0;
}
.ai-first-use-modal__list > li {
position: relative;
padding: 8px 0 8px 22px;
font-size: 12px;
line-height: 1.5;
color: var(--text-secondary, #b2b5be);
border-top: 1px solid var(--popover-border, #2a2e39);
}
.ai-first-use-modal__list > li:first-child { border-top: none; }
.ai-first-use-modal__list > li::before {
content: '';
position: absolute;
left: 4px;
top: 17px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-accent, #2962ff);
opacity: .85;
}
.ai-first-use-modal__list strong {
display: inline-block;
margin-right: 4px;
color: var(--text-primary, #d1d4dc);
font-weight: 600;
}
.ai-first-use-modal__links {
margin: 6px 0 16px;
font-size: 12px;
color: var(--text-tertiary, #9598a1);
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ai-first-use-modal__links a {
color: var(--text-accent, #2962ff);
text-decoration: none;
}
.ai-first-use-modal__links a:hover { text-decoration: underline; }
.ai-first-use-modal__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--popover-border, #2a2e39);
padding-top: 14px;
}
.ai-first-use-modal__hint {
margin: 0;
font-size: 12px;
color: var(--text-tertiary, #9598a1);
flex: 1 1 auto;
}
.ai-first-use-modal__btn {
flex: 0 0 auto;
appearance: none;
border: none;
border-radius: 8px;
padding: 8px 14px;
background: var(--text-accent, #2962ff);
color: #ffffff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease;
}
.ai-first-use-modal__btn:hover { background: #1e4dd1; }
.ai-first-use-modal__btn:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
@media (max-width: 600px) {
.ai-first-use-modal { padding: 12px; }
.ai-first-use-modal__card { padding: 18px 18px 14px; max-height: calc(100vh - 24px); }
}
/* ===== [AI-COMPLIANCE-2026-05-22] END ===== */
/* ===== [PANE-SEPARATOR-HITAREA-2026-05-22] BEGIN =====
* Slim the lightweight-charts sub-pane resize hit area.
*
* Root cause:
* The bundled lightweight-charts library (web_app/public/js/lib/
* lightweight-charts.standalone.production.js) injects a hit-area div
* above every pane separator with inline styles:
* position: absolute; z-index: 50; top: -4px; height: 9px;
* width: 100%; cursor: row-resize;
* That makes the draggable cursor zone 9px tall — 4px above and 4px
* below the 1px visible separator. Users perceive this as "the line
* gets thick when I hover" even though the visible line stays 1px:
* anywhere inside the 9-pixel band turns the cursor into ↕ row-resize
* and starts a potential drag.
*
* Why not patch the bundle:
* The values are hardcoded into the minified vendor file. Patching it
* would not survive the next lightweight-charts upgrade and we lose
* the library's official build provenance.
*
* Fix:
* The hit-area div has no class but its inline styles are unique
* enough to target by attribute selector: it is an absolute child of
* the pane's | , has `cursor: row-resize` AND height `9px`. CSS
* `!important` is allowed to override inline styles (per the cascade),
* so we narrow the hit area to 5px (2px above + 1px line + 2px below).
* This matches TradingView desktop and Cursor's own pane splitter
* feel, while still being draggable on touch.
*
* Warning:
* If lightweight-charts ever changes the inline `height` value or
* stops using `row-resize` (e.g. switches to `ns-resize`), this rule
* silently stops working. Re-verify after any LWC upgrade by hovering
* a sub-pane boundary in DevTools and inspecting the .style.height of
* the hit-area div.
*/
.chart-container td > div[style*="row-resize"][style*="height: 9px"] {
top: -2px !important;
height: 5px !important;
}
/* ===== [PANE-SEPARATOR-HITAREA-2026-05-22] END ===== */
/* ===== [SYMBOL-INSIGHTS-TAIL-2026-05-22] ===== */
/* Chart-page Symbol Insights tail styles.
*
* Scope: only `.symbol-insights-tail` (the merged tail inside the
* Symbol Details module) and descendants (`.si-*` classes). This block
* is intentionally NOT covered by web_app_styling.mdc — chart.ejs is the
* "app.css 自管" zone and uses its own theme tokens (--text-primary /
* --text-secondary / --price-up / --price-down / --border-color), not
* the --tt-fg-* variables that govern home/aggregations pages.
*
* 2026-05-22 — restructured from independent dock module to a tail
* section appended to #symbolDetailPanel. The previous Panel B dedicated
* module duplicated funding-rate / OI / L-S which were already rendered
* by symbol-details controller; the tail now extends those metrics with
* countdown / basis / cross-ex / OI dominance / whale KPI + tape / mini
* sparklines / liquidation levels.
*
* Composition rules:
* · All text colours fall back to --text-primary / --text-secondary.
* · Price up/down = --price-up / --price-down (consistent with rest
* of chart-page surfaces such as Symbol Detail and Orderbook).
* · No hardcoded hex outside of borders/shadows.
* · Backgrounds defer to the panel's own surface; only subtle hover
* tints are introduced to mark interactive rows.
*/
.symbol-insights-tail {
margin-top: 10px;
padding-top: 10px;
border-top: none;
}
.si-body {
display: flex;
flex-direction: column;
gap: 6px;
overflow: visible;
}
/* Row 1 — Countdown + Basis side-by-side */
.si-row-2col {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 6px;
}
.si-card {
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 8px 10px;
background: transparent;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 64px;
}
.si-card-title {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.si-card-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.si-countdown-time {
font-size: 14px;
color: var(--text-primary);
font-family: var(--font-price);
letter-spacing: 0.03em;
}
.si-countdown-meta,
.si-basis-meta {
display: flex;
align-items: baseline;
gap: 6px;
}
.si-meta-label {
color: var(--text-secondary);
font-size: 12px;
}
.si-meta-value {
color: var(--text-primary);
font-family: var(--font-price);
font-size: 14px;
}
.si-basis-value {
font-size: 14px;
color: var(--text-primary);
font-family: var(--font-price);
}
.si-basis-value.up { color: var(--price-up); }
.si-basis-value.down { color: var(--price-down); }
.si-basis-value.neutral { color: var(--text-primary); }
/* Row 2 — 24h Whale KPI strip */
.si-kpi-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border: 1px solid var(--border-color);
border-radius: 4px;
overflow: hidden;
}
/* [ADD] 2026-05-24 r14 — Symbol Insights 4-tab navigation.
Industry pattern: Binance / Coinglass / OKX all use a 4–5 tab strip on
their symbol-detail panels to group ~15 metric cards into themes. This
replaces a single linear scroll of 14 unrelated cards. The always-visible
blocks above (symbol header / price / 24h grid / futures metrics / Whale
KPI) live OUTSIDE the tab system — they are the "instant snapshot" and
are intentionally not hidden behind a tab.
Mobile: horizontal scroll (Binance App style) — never wraps to 2 lines
because a 2-line tab bar in a docked module would steal too much height.
Active tab indicator: 2px bottom border in the brand-accent color so it
reads as "currently selected" without needing a fill swap.
Warning: do NOT add a fill background to the active tab — the docked
module already has a tinted background and the fill swap renders muddy
in the dark theme. Stay with the border-bottom indicator. */
.si-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
border-bottom: 1px solid var(--border-color);
margin: 4px 0 6px;
gap: 0;
/* [EXCEPTION] web_app_styling.mdc rule 4 default behaviour is "scrollbar
hidden, visible on hover". The tab bar is a *navigation* element, not
a content list — a scrollbar appearing under the tabs (even on hover)
reads as visual noise. Permanently hiding the horizontal scrollbar
here is the industry pattern (Binance App, Coinglass mobile, OKX
futures detail) and is explicitly opted in. Users still scroll via
touch-swipe (mobile) or trackpad/shift-wheel (desktop). */
scrollbar-width: none;
}
.si-tabs::-webkit-scrollbar { display: none; }
.si-tab {
flex: 0 0 auto;
padding: 6px 12px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--tt-fg-0);
opacity: 0.7;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.12s ease, border-color 0.12s ease;
}
.si-tab:hover { opacity: 1; }
.si-tab--active {
opacity: 1;
border-bottom-color: #2962ff;
font-weight: 600;
}
.si-tab:focus-visible {
outline: 1px solid #2962ff;
outline-offset: -1px;
}
/* Tab pane visibility — [FIX] 2026-05-24 r17
`.si-mini-row` / `.si-section` / `.si-row-2col` each set their own
`display` LATER in this file with the same (0,1,0) specificity as
`.si-tab-pane { display:none }`, so inactive panes stayed visible
(tab buttons switched but content did not). Inactive panes MUST use
`:not(.si-tab-pane--active)` + `!important` to beat layout rules.
Active panes restore the correct display mode per component class.
Optional API-empty sections: `data-si-empty="1"`. No inline style.display
on tab panes — that breaks tab switching. */
.si-tab-pane:not(.si-tab-pane--active),
.si-tab-pane[data-si-empty="1"] {
display: none !important;
}
.si-tab-pane.si-tab-pane--active:not([data-si-empty="1"]) {
display: block;
}
.si-section.si-tab-pane.si-tab-pane--active:not([data-si-empty="1"]) {
display: flex;
}
.si-mini-row.si-tab-pane.si-tab-pane--active:not([data-si-empty="1"]) {
display: grid;
}
.si-row-2col.si-tab-pane.si-tab-pane--active:not([data-si-empty="1"]) {
display: grid;
}
/* Spot mode visibility — [ADD] 2026-05-24 r21 / [CHANGE] r22
When the active symbol is spot, tt.symbol-insights.js adds
`si-spot-mode` to . Every Symbol Insights block marked
`data-si-market="futures"` becomes display:none. r22 expansion:
the Liquidation tab + its three "global liquidation" cards are
now also futures-only (liquidations are a perp-only concept;
spot can't be liquidated by definition — Binance/Coinbase/Kraken
spot pages all omit liquidation views).
futures-only nodes (18 total, all carrying data-si-market="futures"):
· #siTabs container (entire tab nav — when only 1 of 4 tabs
would remain visible, a lone highlighted button looks broken)
· 3 tab buttons: Funding / Positioning / Liquidation
· #futuresMetricsContainer (OI / Funding / L-S / OI L-S)
· 13 panes:
overview tab: Funding Countdown + Basis, CVD-Z / OI-Base,
OI 24h / Funding 8x / L-S 24h, ±1% Depth
funding tab: Funding Arb, Funding Flow, Cross-Ex Funding
positioning tab: TopTrader L/S, OI Exchange Dominance
liquidation tab: Predicted Liq Levels, Cascade Events,
Market Liquidation Pulse, 24h Global Liq Ratio
Visible on spot (2 nodes, no data-si-market attribute):
· #siWhaleKpi strip (Whale flow aggregates spot+futures via
market=all — meaningful per-symbol trading signal)
· Market Sentiment pane (Greed + AltSeason, global macro
sentiment with no per-symbol scope — meaningful anywhere)
Spot UX on a perp-converted page therefore renders:
[8-cell 24h price grid] + [Whale 4 KPI] + [Market Sentiment]
That matches industry conventions for spot detail pages.
Why CSS instead of inline style/JS: ① one selector covers 18
DOM nodes; ② futures⇆spot toggle is instant (no layout-thrash from
per-element style writes); ③ no greyed-out look — element is
simply gone (per virtu Hu's "不要变灰" rule).
The `!important` is required because some children re-declare
display:flex/grid with the same specificity (see si-tab-pane
fallback rules right above this block). */
body.si-spot-mode [data-si-market="futures"] {
display: none !important;
}
.si-kpi-cell {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 8px;
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.si-kpi-cell:nth-child(4n) {
border-right: none;
}
.si-kpi-cell:nth-last-child(-n + 4) {
border-bottom: none;
}
.si-kpi-label {
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.si-kpi-value {
font-size: 14px;
color: var(--text-primary);
font-family: var(--font-price);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.si-kpi-value.up { color: var(--price-up); }
.si-kpi-value.down { color: var(--price-down); }
.si-kpi-value.neutral { color: var(--text-primary); }
@media (max-width: 760px) {
.si-kpi-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.si-kpi-cell:nth-child(4n) {
border-right: 1px solid var(--border-color);
}
.si-kpi-cell:nth-last-child(-n + 4) {
border-bottom: 1px solid var(--border-color);
}
.si-kpi-cell:nth-child(2n) {
border-right: none;
}
.si-kpi-cell:nth-last-child(-n + 2) {
border-bottom: none;
}
}
/* Row 3 — Mini sparklines (OI/Funding/L-S) */
.si-mini-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 6px;
min-width: 0;
}
.si-mini-cell {
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 6px 8px 4px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 70px;
min-width: 0;
}
.si-mini-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.si-mini-label {
font-size: 12px;
color: var(--text-secondary);
}
.si-mini-value {
font-size: 14px;
color: var(--text-primary);
font-family: var(--font-price);
min-width: 0;
white-space: nowrap;
}
.si-mini-chart {
flex: 1 1 auto;
min-height: 36px;
min-width: 0;
overflow: hidden;
position: relative;
}
/* Generic section header */
.si-section {
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 6px 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* [REMOVE] 2026-05-24 r14 — .si-section-grid wrapper deleted from chart.ejs
(its two children — Cross-Exchange Funding + OI Dominance — were split
into separate panes for the 4-tab nav). No other view uses this class. */
.si-flow-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 6px;
}
.si-flow-cell {
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 6px 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.si-flow-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.si-flow-label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
}
.si-flow-net {
font-size: 14px;
font-family: var(--font-price);
color: var(--text-primary);
}
.si-flow-net.up { color: var(--price-up); }
.si-flow-net.down { color: var(--price-down); }
.si-flow-net.neutral { color: var(--text-secondary); }
.si-flow-bar {
height: 6px;
background: var(--border-color);
border-radius: 3px;
overflow: hidden;
display: flex;
}
.si-flow-bar-long {
height: 100%;
background: rgba(38, 166, 154, 0.8);
}
.si-flow-bar-short {
height: 100%;
background: rgba(239, 83, 80, 0.8);
}
.si-flow-legend {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--text-secondary);
}
.si-flow-legend-long { color: var(--price-up); }
.si-flow-legend-short { color: var(--price-down); }
.si-section-title {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.si-section-title-row {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.si-section-hint {
font-size: 12px;
color: var(--text-secondary);
font-family: var(--font-price);
}
.si-empty {
font-size: 12px;
color: var(--text-secondary);
text-align: center;
padding: 10px 0;
font-style: italic;
}
/* [ADD] 2026-07-06 — BACKLOG-009 per-venue pair-history chart (funding / OI). */
.si-pairhist-controls {
display: inline-flex;
gap: 6px;
align-items: center;
}
.si-pairhist-select {
font-size: 12px;
color: var(--text-primary);
background: var(--popover-bg);
border: 1px solid var(--popover-border);
border-radius: 4px;
padding: 2px 6px;
text-transform: capitalize;
}
.si-pairhist-chart {
position: relative;
width: 100%;
height: 260px;
margin-top: 8px;
}
.si-pairhist__empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--text-secondary);
font-style: italic;
pointer-events: none;
text-align: center;
padding: 0 12px;
}
/* Row 4 — Cross-Exchange Funding list */
.si-xex-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.si-xex-row {
display: grid;
grid-template-columns: 80px 1fr 80px;
align-items: center;
gap: 8px;
padding: 4px 0;
border-bottom: 1px dashed var(--border-color);
}
.si-xex-row:last-child {
border-bottom: none;
}
.si-xex-ex {
font-size: 12px;
color: var(--text-primary);
text-transform: capitalize;
}
.si-xex-rate {
font-size: 14px;
color: var(--text-primary);
font-family: var(--font-price);
text-align: right;
}
.si-xex-rate.up { color: var(--price-up); }
.si-xex-rate.down { color: var(--price-down); }
.si-xex-cd {
font-size: 14px;
color: var(--text-secondary);
font-family: var(--font-price);
text-align: right;
}
/* Row 5 — OI Exchange Dominance */
.si-dom-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.si-dom-row {
display: grid;
grid-template-columns: 80px 1fr 50px 80px;
align-items: center;
gap: 8px;
}
.si-dom-ex {
font-size: 12px;
color: var(--text-primary);
text-transform: capitalize;
}
.si-dom-bar {
height: 6px;
background: var(--border-color);
border-radius: 3px;
overflow: hidden;
}
.si-dom-bar-fill {
height: 100%;
background: var(--accent-color);
border-radius: 3px;
transition: width 0.3s ease;
}
.si-dom-pct {
font-size: 14px;
color: var(--text-secondary);
font-family: var(--font-price);
text-align: right;
}
.si-dom-usd {
font-size: 14px;
color: var(--text-primary);
font-family: var(--font-price);
text-align: right;
}
/* [REMOVED] 2026-05-22 — .si-tape-* styles for the inline Whale Tape.
* Reason: Whale Tape was moved into the orderbook module as a new
* "Large Trades" tab. The tab uses its own .lt-* class hierarchy
* (see "Large Trades Tab" block above) which mirrors the recent-
* trades row layout for visual consistency with the surrounding
* orderbook tabs. */
/* Row 7 — Liquidation Levels
*
* [FIX] 2026-05-22 — left-align the price column. The earlier
* grid `100px 1fr 80px` + `text-align:right` on .si-liq-price
* left an empty 30-40 px gutter on shorter prices (e.g. 84.55),
* which read as "missing content" on the left edge. We now use
* `auto` + left-align so the price hugs the row's left side and
* the bar fills the remaining space. */
.si-liq-levels {
display: flex;
flex-direction: column;
gap: 2px;
}
.si-liq-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
padding: 2px 0;
}
.si-liq-price {
font-size: 14px;
font-weight: 400;
color: var(--text-primary);
font-family: var(--font-price);
text-align: left;
min-width: 56px;
}
.si-liq-bar {
height: 6px;
background: var(--border-color);
border-radius: 3px;
overflow: hidden;
}
.si-liq-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 0.3s ease;
}
.si-liq-bar-fill.up { background: var(--price-up); }
.si-liq-bar-fill.down { background: var(--price-down); }
.si-liq-usd {
font-size: 14px;
font-weight: 400;
font-family: var(--font-price);
text-align: right;
}
.si-liq-usd.up { color: var(--price-up); }
.si-liq-usd.down { color: var(--price-down); }
/* Light theme: ensure mini sparkline transparent backgrounds stay clean */
body:not(.dark-theme) .si-mini-chart canvas {
background: transparent !important;
}
/* [ADD] 2026-05-24 — Symbol Insights P0/P1 batch:
· P0-5 Market Liquidation Pulse → .si-pulse-row / .si-pulse-chip
· P0-1 ±1% Depth Liquidity → .si-depth-grid / .si-depth-row
· P1-1 Cascade Events → .si-collapsible / .si-cascade-*
· P1-2 Cross-Ex view toggle → .si-view-toggle / .si-cxf-heat
· P1-5 24h Global Liq Ratio → .si-liqratio-*
· P1-4 Markets Scanner mode → .symbol-mode-*
· P1-3 Top Predicted Strip → REMOVED 2026-05-24 r7 (low value vs. topbar real-estate)
· P0-4 OI vs Price Divergence — REMOVED 2026-05-24 r11 (no value for majors)
All colours use var(--tt-fg-0) or the up/down exception palette per
web_app_styling.mdc constraint #1. Font sizes restricted to
{12,14,16,18,22,28} per constraint #2. */
/* P0-5 Market Pulse */
.si-pulse-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.si-pulse-chip {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
min-width: 0;
}
.si-pulse-win {
font-size: 12px;
color: var(--tt-fg-0, var(--text-secondary));
opacity: 0.7;
text-transform: uppercase;
}
.si-pulse-total {
font-size: 14px;
color: var(--tt-fg-0, var(--text-primary));
font-family: var(--font-price);
white-space: nowrap;
}
.si-pulse-bar {
height: 4px;
background: var(--border-color);
border-radius: 2px;
display: flex;
overflow: hidden;
}
.si-pulse-bar-long { height: 100%; background: rgba(38, 166, 154, 0.85); width: 0%; }
.si-pulse-bar-short { height: 100%; background: rgba(239, 83, 80, 0.85); width: 0%; }
/* P0-1 Depth Liquidity */
.si-depth-grid {
display: flex;
flex-direction: column;
gap: 4px;
}
.si-depth-row {
display: grid;
grid-template-columns: 80px 1fr auto;
align-items: center;
gap: 8px;
padding: 2px 0;
}
.si-depth-label {
font-size: 12px;
color: var(--tt-fg-0, var(--text-secondary));
opacity: 0.7;
}
.si-depth-value {
font-size: 14px;
color: var(--tt-fg-0, var(--text-primary));
font-family: var(--font-price);
text-align: right;
grid-column: 2 / span 2;
white-space: nowrap;
}
.si-depth-bid .si-depth-value { color: var(--price-up); }
.si-depth-ask .si-depth-value { color: var(--price-down); }
.si-depth-imb .si-depth-value { grid-column: auto; }
.si-depth-bar {
height: 6px;
background: var(--border-color);
border-radius: 3px;
position: relative;
overflow: hidden;
}
.si-depth-bar-fill {
height: 100%;
background: var(--accent-color, #2962ff);
border-radius: 3px;
transition: width 0.3s ease;
}
.si-depth-bar-fill.up { background: var(--price-up); }
.si-depth-bar-fill.down { background: var(--price-down); }
.si-depth-bar-fill.neutral { background: var(--accent-color, #2962ff); }
.si-depth-pct {
font-size: 14px;
color: var(--tt-fg-0, var(--text-primary));
font-family: var(--font-price);
text-align: right;
min-width: 56px;
}
/* P1-5 24h Global Liq Ratio */
.si-liqratio-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.si-liqratio-bar {
height: 8px;
background: var(--border-color);
border-radius: 4px;
display: flex;
overflow: hidden;
}
.si-liqratio-bar-long { height: 100%; background: rgba(38, 166, 154, 0.85); width: 0%; }
.si-liqratio-bar-short { height: 100%; background: rgba(239, 83, 80, 0.85); width: 0%; }
.si-liqratio-legend {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--tt-fg-0, var(--text-secondary));
}
.si-liqratio-legend-long { color: var(--price-up); }
.si-liqratio-legend-short { color: var(--price-down); }
/* P1-1 Cascade Events collapsible */
.si-collapsible-head {
cursor: pointer;
user-select: none;
}
.si-collapsible-head:focus-visible {
outline: 1px solid var(--accent-color, #2962ff);
outline-offset: 2px;
border-radius: 2px;
}
.si-collapsible-arrow {
width: 12px;
height: 12px;
margin-left: 6px;
transition: transform 0.18s ease;
vertical-align: middle;
}
.si-collapsible[data-collapsed="0"] .si-collapsible-arrow {
transform: rotate(180deg);
}
.si-cascade-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.si-cascade-row {
display: grid;
grid-template-columns: 64px 60px 1fr auto;
align-items: center;
gap: 8px;
padding: 2px 0;
border-bottom: 1px dashed var(--border-color);
}
.si-cascade-row:last-child { border-bottom: none; }
.si-cascade-time {
font-size: 12px;
color: var(--tt-fg-0, var(--text-secondary));
font-family: var(--font-price);
}
.si-cascade-sym {
font-size: 12px;
color: var(--tt-fg-0, var(--text-primary));
font-weight: 600;
}
.si-cascade-usd {
font-size: 14px;
color: var(--tt-fg-0, var(--text-primary));
font-family: var(--font-price);
text-align: right;
}
.si-cascade-usd.up { color: var(--price-up); }
.si-cascade-usd.down { color: var(--price-down); }
.si-cascade-usd.neutral { color: var(--tt-fg-0, var(--text-primary)); }
.si-cascade-meta {
font-size: 12px;
color: var(--tt-fg-0, var(--text-secondary));
opacity: 0.7;
text-align: right;
white-space: nowrap;
}
/* P1-2 Cross-Ex Funding view toggle + heat view */
.si-view-toggle {
display: inline-flex;
border: 1px solid var(--border-color);
border-radius: 4px;
overflow: hidden;
}
.si-view-tab {
background: transparent;
border: none;
padding: 2px 8px;
font-size: 12px;
color: var(--tt-fg-0, var(--text-secondary));
cursor: pointer;
font-family: inherit;
}
.si-view-tab + .si-view-tab {
border-left: 1px solid var(--border-color);
}
.si-view-tab.active {
background: var(--accent-color, #2962ff);
color: #ffffff;
}
.si-cxf-heat {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 4px;
}
.si-cxf-heat-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 4px;
border-radius: 4px;
border: 1px solid var(--border-color);
background: color-mix(in srgb, var(--border-color) calc(20% + (var(--si-cxf-i, 0) * 50%)), transparent);
}
.si-cxf-heat-cell.up {
background: color-mix(in srgb, rgba(38, 166, 154, 1) calc(15% + (var(--si-cxf-i, 0) * 55%)), transparent);
}
.si-cxf-heat-cell.down {
background: color-mix(in srgb, rgba(239, 83, 80, 1) calc(15% + (var(--si-cxf-i, 0) * 55%)), transparent);
}
.si-cxf-heat-ex {
font-size: 12px;
color: var(--tt-fg-0, var(--text-primary));
text-transform: capitalize;
}
.si-cxf-heat-rate {
font-size: 12px;
font-family: var(--font-price);
color: var(--tt-fg-0, var(--text-primary));
}
/* [REMOVE] 2026-05-24 r11 — P0-4 OI vs Price Divergence card removed.
Reason: only top 28+30 extreme small-caps are surfaced by the backend
divergence aggregation; majors (BTC/ETH/SOL/DOGE/HYPE) never appear in
that leaderboard, so the card always rendered "No divergence" for the
active base — pure noise. Per virtu Hu 2026-05-24. */
/* P1-4 Scanner mode toggle (inside #symbolColumnsMenu) */
.symbol-mode-toggle {
display: flex;
gap: 4px;
padding: 4px 8px 8px;
}
.symbol-mode-btn {
flex: 1 1 auto;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
color: var(--tt-fg-0, var(--text-primary));
cursor: pointer;
font-family: inherit;
}
.symbol-mode-btn.active {
background: var(--accent-color, #2962ff);
color: #ffffff;
border-color: var(--accent-color, #2962ff);
}
/* [REMOVED 2026-05-24 r7] P1-3 Top toolbar Predicted Funding strip.
Reason: per-user audit — the chip occupied scarce topbar pixels for a
single base + percent with no actionable context (no historical, no
per-base relation to the active chart). Cross-exchange funding extremes
are already surfaced in the Symbol Insights "Cross-Ex Funding" card and
in the dedicated /movers landing page; no need for a top-bar duplicate. */
/* Mobile: trim per-section grid columns for the Symbol Insights cards
that overflow on narrow viewports (Pulse / Cascade / Cross-Ex heatmap). */
@media (max-width: 768px),
(max-width: 1366px) and (hover: none) and (pointer: coarse) {
.si-pulse-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.si-pulse-total {
font-size: 12px;
}
.si-cascade-row {
grid-template-columns: 56px 56px 1fr auto;
}
.si-cxf-heat {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
}
@media (max-width: 768px),
(max-width: 1366px) and (hover: none) and (pointer: coarse) {
.si-flow-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.si-flow-cell {
min-width: 0;
}
.si-flow-net {
font-size: 12px;
}
}
/* ===== [SYMBOL-INSIGHTS-2026-05-22] END ===== */
/* ===== [MODULE-ICON-2026-05-23] BEGIN =====
*
* Standardized "round-disc + glyph" icon for every dockable module
* title (Markets / Liquidations / Orderbook / Paper Trading) and for
* the orderbook tab triggers (Orderbook / Recent Trades / Large
* Trades). The visual reference is the BTC asset logo in the Symbol
* Details header (.symbol-detail-icon) — same 24×24 disc, same
* border-radius:50%. The glyph inside is drawn with currentColor so
* it inherits whatever color the surrounding text uses (e.g. accent
* blue when the parent tab is active).
*
* Industry reference: every modern trading dashboard (Binance UI,
* OKX desktop, TradingView's Trading Platform) uses a uniform disc-
* sized icon system in module headers so the sidebar reads as a
* coherent toolbar rather than mismatched ad-hoc glyphs.
*
* Sizing:
* .module-icon — 24×24 disc, used by every module title
* AND by every Orderbook tab trigger
* (.module-icon--tab is just a marker
* class for tab context; geometry is
* intentionally identical to the title
* disc so the active tab reads as the
* same visual weight as a full module
* identity icon).
*/
.module-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
/* [CHANGED] 2026-05-23 — theme-inverted disc colors.
*
* Light theme: BLACK disc + WHITE glyph (maximum contrast on
* the bright #ffffff page surface).
* Dark theme: WHITE disc + BLACK glyph (maximum contrast on
* the pure #000000 page surface).
*
* Industry reference: Bloomberg Terminal and TradingView Pro
* use solid black/white module identity discs in their dark
* mode toolbars precisely because pure black-on-white (and
* inverted) yields a 21:1 WCAG contrast, the highest possible
* for any glyph — eliminating any ambiguity about which module
* a header refers to even at a glance.
*
* The default block below sets the LIGHT-theme colors; the
* `body.dark-theme .module-icon { ... }` override further down
* flips them for the dark theme. */
background: #000000;
color: #ffffff;
flex-shrink: 0;
}
/* Dark-theme inversion — white disc + black glyph on #000 surface. */
body.dark-theme .module-icon {
background: #ffffff;
color: #000000;
}
/* Icon ↔ drag-handle distance is the canonical "1px" used by the
* Symbol Details header (`.symbol-detail-header .symbol-detail-drag-
* handle + .symbol-detail-icon { margin-left: 1px }`) — see CSS line
* around 5857. We achieve it implicitly: every dock-module header
* already sets `.module-drag-handle { margin-right: 1px }` and
* `gap: 0`, so the 1px sits naturally between the handle and the
* icon without needing any margin on `.module-icon` itself.
*
* Icon ↔ title distance is set to 8px (matches the panel-header
* default flex gap of 8px). We state it explicitly via margin-right
* because the various dock-module headers override the parent flex
* gap to 0 in several places (e.g. `.panel-header.dock-module-
* header { gap: 0 }`), so relying on parent `gap` would collapse
* the spacing inconsistently. */
.dock-module-header > .module-icon {
margin-left: 0;
margin-right: 8px;
}
.module-icon svg {
width: 14px;
height: 14px;
display: block;
stroke: currentColor;
fill: none;
}
/* [CHANGED] 2026-05-23 — two-state tab disc sizing:
* - active tab → 24×24 disc (matches module-title icons; the
* active tab is "promoted" to module-identity
* weight per user requirement: "订单簿 左边的
* 图标 ... 要和爆仓 市场的图标一样的大小").
* - inactive tab → 16×16 disc (the two tabs not currently in
* view stay smaller so they don't compete with
* the active tab visually — same affordance
* pattern Binance / OKX use for their order-
* book sub-tabs).
*
* The tab strip is 48px tall (`.right-tabs { height: 48px }`), so
* both 16px and 24px discs fit comfortably with vertical centring.
*
* Higher-specificity `.right-tab .module-icon--tab` selectors below
* defeat the legacy `.right-tab svg { width: 16px; height: 16px }`
* rule that lives upstream in this file. */
.module-icon--tab {
width: 16px;
height: 16px;
}
.right-tab .module-icon--tab {
width: 16px;
height: 16px;
}
.right-tab .module-icon--tab svg,
.module-icon--tab svg {
width: 10px;
height: 10px;
}
/* Active tab is promoted to the full 24×24 module-identity disc
* size so it visually anchors the strip the same way the
* Liquidations / Markets / Paper Trading module discs anchor their
* headers. The inner SVG glyph follows the same 14×14 proportion
* used by the title-icon variant for consistency. */
.right-tab.active .module-icon--tab {
width: 24px;
height: 24px;
}
.right-tab.active .module-icon--tab svg {
width: 14px;
height: 14px;
}
/* ===== [MODULE-ICON-2026-05-23] END ===== */
/* ===== [TT-SETTINGS-POPOVER-2026-05-23] BEGIN =====
*
* Non-modal draggable settings popover used by chart-page modules
* (Large Trades + Liquidations). Visual language mirrors the
* chart-indicator settings dialog (`.ind-settings-dialog`):
* - same `--popover-bg / --popover-border / --popover-shadow`
* - same 12px corner radius
* - same 16/20 header padding
* - same `cursor: move` on the header
* Differences vs ind-settings:
* - position: fixed (JS-driven), not transform-centered
* - smaller default width (300-360px)
* - non-modal (no scrim, pointer-events on body OK)
* - higher z-index (8000) above panel headers but below the
* top-bar dropdowns (which use 9999)
*/
.tt-settings-popover {
position: fixed;
background: var(--popover-bg);
border: 1px solid var(--popover-border);
border-radius: 12px;
box-shadow: var(--popover-shadow);
color: var(--text-primary);
font-size: 14px;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
.tt-settings-popover__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--popover-border);
cursor: move;
background: var(--popover-bg);
}
.tt-settings-popover__title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.tt-settings-popover__close {
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.tt-settings-popover__close:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.tt-settings-popover__body {
padding: 12px 14px 14px;
max-height: 70vh;
overflow-y: auto;
}
/* Generic row inside the popover body: a stacked label + control
* pair, mirroring the .lt-ctrl pattern used previously inline. The
* body is a flex column with consistent gaps so the popover keeps
* rhythm regardless of how many rows the caller emits. */
.tt-settings-popover__body .tt-set-row {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.tt-settings-popover__body .tt-set-row:last-child {
margin-bottom: 0;
}
.tt-settings-popover__body .tt-set-label {
font-size: 12px;
color: var(--text-secondary);
}
.tt-settings-popover__body .tt-set-select {
width: 100%;
height: 28px;
padding: 0 8px;
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
color: var(--text-primary);
border-radius: 3px;
font-size: 14px;
font-family: inherit;
}
.tt-settings-popover__body .tt-set-select:hover {
border-color: var(--accent);
}
.tt-settings-popover__body .tt-set-actions {
display: flex;
justify-content: flex-start;
margin-top: 4px;
}
.tt-settings-popover__body .tt-set-reset {
background: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 3px;
color: var(--text-secondary);
cursor: pointer;
height: 28px;
padding: 0 12px;
font-size: 12px;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
}
.tt-settings-popover__body .tt-set-reset:hover {
color: var(--text-primary);
border-color: var(--accent);
}
.tt-settings-popover__body .tt-set-reset svg {
width: 14px;
height: 14px;
}
/* Gear button that lives inside the host module's stats bar and
* opens the popover. 22×22 disc so it blends with the existing
* stat-item baselines without dominating. */
.tt-module-gear {
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
width: 24px;
height: 24px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
flex-shrink: 0;
}
.tt-module-gear:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.tt-module-gear svg {
width: 20px;
height: 20px;
}
/* ===== [TT-SETTINGS-POPOVER-2026-05-23] END ===== */
/* ============================================================================
* [ADD] 2026-05-24 r3 — Chart-page focus / select theming reset.
*
* virtuou-哥 reported:
* "过滤按钮在桌面版上 点击后, 选择下拉框的焦点颜色不对.
* 在白色主题下是黄色 在黑色主题下是白黄色.
* 我需要你去除选择后的焦点. 保留原来的主题颜色.
* CHART 页面所有的按钮 选择等都要这样处理."
*
* Root cause:
* 1. Chrome / Edge default `:focus` outline picks the OS accent
* color, which on Windows defaults to a dark amber-yellow on
* dark backgrounds and a bright golden on light backgrounds —
* the exact "黄色 / 白黄色" the user described.
* 2. Inside |