/* ── Main menu + Usage modal (credits feature, final 2026-08-21) ────────── Entry: one plain-text "Menu" header button — no balance chip, no caret, no alert dot (user decisions). The dropdown and the Usage modal speak the B2 dialog grammar (hairline popover = the base-select picker language, modal = the char-dialog skeleton from character.css). Percentages only — raw credit numbers never render anywhere. */ /* Legacy header buttons live on in the DOM for their modal wiring (the menu clicks them), but the menu is the only visible entry. !important beats team.js's operator probe re-showing #teamBtn via inline style — that inline flip doubles as the menu's "is operator" signal. */ .chat-header #teamBtn, .chat-header #agentProfileBtn, .chat-header #legacySignOutBtn { display: none !important; } .main-menu-wrap { position: relative; display: inline-block; } .main-menu-pop { /* Portaled to by main-menu.js and anchored to the button at open time: inside the header subtree the popover lost the paint battle against chat content (message rows keep a transform from their slide-in animation, minting stacking contexts) no matter its z-index (user report 2026-08-21: "menu opens under the chat text"). Body-level fixed positioning is immune; 10500 clears every in-content overlay (drag targets 9999, context menus 10005). Modals never coexist with an open menu — activating a row closes it first. */ position: fixed; z-index: 10500; display: none; width: 198px; background: var(--b2-surface, #fff); border: 1px solid var(--b2-line-2, #D1D5DB); border-radius: 10px; box-shadow: 0 8px 24px rgba(17, 18, 22, 0.10), 0 2px 6px rgba(17, 18, 22, 0.06); padding: 5px; font-size: 12.5px; color: var(--b2-ink, #111216); text-align: left; } .main-menu-pop .mm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-family: 'Geist', -apple-system, system-ui, sans-serif; font-weight: 400; } .main-menu-pop .mm-row:hover { background: var(--b2-sunken, #F3F4F6); } .main-menu-pop .mm-sub { font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 11px; color: var(--b2-ink-3, #6B7280); } .main-menu-pop .mm-sep { height: 1px; background: var(--b2-line, #E5E7EB); margin: 5px 4px; } .main-menu-pop .mm-quiet { color: var(--b2-ink-3, #6B7280); } /* ── Usage modal content (rides the char-dialog/char-backdrop skeleton) ── */ .cr-balance { font-size: 26px; font-weight: 650; font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); letter-spacing: -0.01em; } .cr-meter { height: 8px; border-radius: 999px; background: #F8EED3; /* used portion: one shade under the honey fill */ border: 1px solid var(--b2-line, #E5E7EB); overflow: hidden; margin: 10px 0 2px; } /* Fill = REMAINING allowance in soft honey #F0DBA8 — the platform's pale * gold (login-button press tone). User 2026-08-24: the saturated amber * #E0B65E reads too heavy here, same 土黄 verdict as the login button. */ .cr-meter > i { display: block; height: 100%; background: #F0DBA8; border-radius: 999px; } /* ≤20% remaining (user 2026-08-24): number AND bar go alert — the track * itself tints so the warning survives a 0%-wide fill. */ .cr-balance.warn { color: var(--team-alert, #D97757); } .cr-meter.warn { background: #F9EBE6; border-color: #F4D6CD; } .cr-meter.warn > i { background: var(--team-alert, #D97757); } .cr-cred-line { font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 11px; font-weight: 500; color: var(--b2-ink-4, #9CA3AF); margin: 2px 0 6px; } /* ── Team-pool rows (variant P, decided 2026-08-24): one quiet row per * pool, NO divider between them; both fills from the chat-bubble gold * family — yours the deeper soft honey, the team pool one shade paler * (both are documented login-button tones). Warn at ≤20% remaining. ── */ /* Row anatomy (reference-image round, 2026-08-24): label with the figure * BENEATH it on the left, a modest percent on the right, a hairline divider * between the two rows, and a thick gradient bar. */ .cr-row + .cr-row { border-top: 1px solid var(--b2-line, #E5E7EB); margin-top: 14px; padding-top: 14px; } .cr-head { display: flex; justify-content: space-between; align-items: center; } /* Labels take the subtitle's (.char-sub) exact treatment — user 2026-08-24. */ .cr-lab { font-family: 'Geist', -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 400; color: var(--b2-ink-3, #6B7280); } .cr-val { font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 15px; font-weight: 650; } /* Figure line: UI text face like the labels, one step smaller — user * 2026-08-24 final round. */ .cr-cred { font-family: 'Geist', -apple-system, system-ui, sans-serif; font-size: 9.5px; font-weight: 400; color: var(--b2-ink-4, #9CA3AF); margin-top: 5px; } /* Size decision 2026-08-24 (variant A): the Usage dialog narrows to 380px * (scoped by id — the shared char-dialog skeleton keeps 470px for * Character) and the bars thicken to 8px. */ #usageDialog { width: 380px; } .cr-bar { height: 7px; border-radius: 999px; overflow: hidden; margin-top: 11px; } .cr-bar > i { display: block; height: 100%; border-radius: 999px; } /* Gradient fills: both rows share the team bar's pale register (user * 2026-08-25: Personal matches Team — the deeper marigold sweep retired). * The USED portion stays the same hue one shade lighter than its fill — * never grey. */ .cr-bar.mine { background: #FBF5E9; } .cr-bar.mine > i { background: linear-gradient(90deg, #EDD194, #F6E6BC); } .cr-bar.team { background: #FBF5E9; } .cr-bar.team > i { background: linear-gradient(90deg, #EDD194, #F6E6BC); } .cr-row.warn .cr-val { color: var(--team-alert, #D97757); } .cr-row.warn .cr-bar { background: #F9EBE6; } .cr-row.warn .cr-bar > i { background: linear-gradient(90deg, #D97757, #E8987B); }