/* ── 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 <body> 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.
       Look (user 2026-10-09, row-style review option 5): the white card the
       menu always had (hairline, 10px, soft shadow, roomy rows, grey hover)
       plus a 16px icon box in front of every label — the same feather glyphs
       the Explorer's right-click menu uses. The first cut copied that menu's
       plate and blue hover 1:1; the user wanted the main menu to stay
       distinguishable from a right-click menu. */
    position: fixed;
    z-index: 10500;
    display: none;
    min-width: 176px;
    max-width: 320px;
    padding: 5px;
    background: var(--b2-surface, #fff);
    color: var(--b2-ink, #111216);
    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);
    font-family: var(--f-sans, 'Geist', -apple-system, system-ui, sans-serif);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    user-select: none;
    transform-origin: top right;
    animation: file-ctx-in 110ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
    .main-menu-pop { animation: none; }
}
.main-menu-pop .mm-row {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 10px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background .1s ease-out, color .1s ease-out;
}
.main-menu-pop .mm-row:hover,
.main-menu-pop .mm-row:focus-visible {
    background: var(--b2-sunken, #F3F4F6);
    color: var(--b2-ink, #111216);
    outline: none;
}
.main-menu-pop .mm-ic {
    width: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--b2-ink-3, #6B7280);
    transition: color .1s ease-out;
}
.main-menu-pop .mm-ic svg { width: 12px; height: 12px; flex: 0 0 12px; vertical-align: -1px; }
.main-menu-pop .mm-row:hover .mm-ic,
.main-menu-pop .mm-row:focus-visible .mm-ic { color: var(--b2-ink, #111216); }
.main-menu-pop .mm-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.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; margin: 5px 4px; background: var(--b2-line, #E5E7EB); }
.main-menu-pop .mm-quiet { color: var(--b2-ink-3, #6B7280); }
.main-menu-pop .mm-quiet:hover { color: var(--b2-ink, #111216); }

/* ── 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); }
/* Internal/staff logins (user decision 2026-10-07): one quiet note under the
 * team row — their usage is not charged to the customer's allowance. */
.cr-note {
    margin: 14px 0 0;
    font-size: 11.5px;
    color: var(--b2-ink-3, #6B7280);
    background: var(--b2-sunken, #F3F4F6);
    border-radius: 6px;
    padding: 7px 10px;
}
.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); }

/* (The one-day cream card around the rows — review A of 2026-10-09 — was taken
 * back the same afternoon: "usage 弹窗还是最开始的好看". The rows sit on the
 * dialog's white again; Licenses and the share dialogs keep their cream.) */

/* Clickable meters (user 2026-10-08): the Personal row opens My usage, the
 * Team row Team usage for admins only; non-admin Team rows stay plain. A
 * shared pot's lone Team row opens My usage for everyone (2026-10-16). A
 * quiet chevron after the label and a sunken hover mark what opens. */
.cr-open { position: relative; isolation: isolate; cursor: pointer; outline: none; }
.cr-open::before { content: ''; position: absolute; inset: -7px -10px; border-radius: 8px; z-index: -1; transition: background .12s; }
.cr-row + .cr-row.cr-open::before { top: 7px; }  /* stay below the divider */
.cr-open:hover::before { background: var(--b2-sunken, #F3F4F6); }
.cr-open:focus-visible::before { box-shadow: 0 0 0 2px var(--b2-line, #E5E7EB); }
.cr-chev { color: var(--b2-ink-4, #9CA3AF); transition: color .12s; }
.cr-open:hover .cr-chev { color: var(--b2-ink, #111216); }

/* ── Usage details page (user decisions 2026-10-07; look 2026-10-08) ───────
 * The page speaks the Team dialog's grammar: character.css's chrome (char-hd
 * title + ✕, char-sub, char-foot) and team.css's .team-seg / .team-table /
 * .team-mini are reused ON PURPOSE (team.css is linked on every page) — the
 * dialogs read as one family. On top: the Usage card's own allowance rows
 * (.cr-row above), two stat tiles, ONE cream filter bar in the Invite bar's
 * shape (search | period | sort), a hairline chart card with thin blue bars
 * and a per-day axis, column heads that sort in step with the dropdown,
 * Close in the footer. No section eyebrows and no row counts (user
 * 2026-10-08). Scoped under its own ids so nothing here reaches the rest of
 * the app. Review: static/_review_usage_card_style.html (variant F, chart 3
 * thin blue, sort S4; user 2026-10-09). */
#usageDetailsBackdrop { background: rgba(17, 18, 22, 0.42); }
/* Content-sized (user 2026-10-08: Team usage is short, no blank tail); past
 * 86vh the body scrolls inside while the title row stays put. */
#usageDetailsDialog { width: min(800px, calc(100vw - 64px)); max-width: none; height: auto; max-height: min(86vh, 900px); padding: 0; overflow: hidden; display: flex; flex-direction: column; outline: none; }
#usageDetails { flex: 1; min-height: 0; overflow: auto; padding: 0 20px 16px; font-size: 13px; line-height: 1.45; color: var(--b2-ink, #111216); }
#usageDetails .ud-loading, #usageDetails .ud-error { padding: 80px 0; text-align: center; color: var(--b2-ink-3, #6B7280); font-size: 12.5px; }
#usageDetails .char-hd { position: sticky; top: 0; z-index: 3; background: var(--b2-surface, #fff); padding: 18px 0 6px; }
#usageDetails .char-sub { margin: 0 0 10px; }
#usageDetails .ud-nav { margin: 2px 0 2px; }
#usageDetails .ud-nav[hidden] { display: none; }

/* Member drill-in: a hairline back button (30px, like the filter controls)
 * above that member's rows. */
#usageDetails .ud-crumb:empty { display: none; }
#usageDetails .ud-crumb { margin: 12px 0 0; }
#usageDetails .ud-back { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; background: var(--b2-surface, #fff); border: 1px solid var(--b2-line-2, #D1D5DB); border-radius: 6px; font-family: inherit; font-size: 12.5px; color: var(--b2-ink-2, #4B5563); cursor: pointer; }
#usageDetails .ud-back:hover { border-color: var(--b2-line-strong, #9CA3AF); color: var(--b2-ink, #111216); }
#usageDetails .ud-back:focus, #usageDetails .ud-back:focus-visible { outline: none !important; box-shadow: none !important; border-color: var(--b2-line-strong, #9CA3AF) !important; }
#usageDetails .ud-back-chev { font-size: 15px; line-height: 1; color: var(--b2-ink-4, #9CA3AF); position: relative; top: -1px; }
#usageDetails .ud-back:hover .ud-back-chev { color: var(--b2-ink, #111216); }

/* Allowance = the Usage card's rows, two columns, no divider, no eyebrow. */
#usageDetails .ud-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; margin-top: 12px; }
#usageDetails .ud-balances:empty { display: none; }
#usageDetails .ud-balances.single { grid-template-columns: 1fr; }
#usageDetails .ud-balances .cr-row + .cr-row { border-top: 0; margin-top: 0; padding-top: 0; }
#usageDetails .ud-balances .cr-note { margin: 0; align-self: center; }

/* Stat tiles: mono eyebrow, mono figure, one quiet line under it. */
#usageDetails .ud-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 14px 0 10px; }
#usageDetails .ud-stat { border-right: 1px solid var(--b2-line, #E5E7EB); }
#usageDetails .ud-stat:last-child { border: 0; }
#usageDetails .ud-eyebrow { font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--b2-ink-4, #9CA3AF); }
#usageDetails .ud-stat strong { display: block; font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin: 4px 0 2px; }
#usageDetails .ud-stat span { font-size: 11.5px; color: var(--b2-ink-3, #6B7280); }

/* Filter bar = the Invite bar: cream surface, three white hairline controls
 * (search | period | sort), our own chevron, no blue focus ring. */
#usageDetails .ud-filters { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; background: #F6F4EE; border: 1px solid var(--b2-line-2, #D1D5DB); border-radius: 8px; padding: 6px; margin: 8px 0 0; }
#usageDetails .ud-filters input, #usageDetails .ud-filters select { box-sizing: border-box; min-width: 0; height: 30px; padding: 0 10px; background-color: var(--b2-surface, #fff); border: 1px solid var(--b2-line-2, #D1D5DB); border-radius: 6px; font-family: inherit; font-size: 12.5px; color: var(--b2-ink, #111216); }
#usageDetails input::placeholder { color: var(--b2-ink-4, #9CA3AF); }
#usageDetails input:focus, #usageDetails input:focus-visible, #usageDetails select:focus, #usageDetails select:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border-color: var(--b2-line-strong, #9CA3AF) !important; }
#usageDetails select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%239CA3AF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px !important; cursor: pointer; }
#usageDetails select:hover { border-color: var(--b2-line-strong, #9CA3AF); }

/* Chart card: the month range in its head line, thin bars in the theme's
 * one accent family (pale blue at rest, mid blue on hover, the accent blue
 * when selected; the honey stays with the allowance bars), a hairline
 * baseline, one day number per bar. Hover also tints the bar's column; a
 * selected day fades the rest. */
#usageDetails .ud-chartbox { border: 1px solid var(--b2-line, #E5E7EB); border-radius: 8px; padding: 10px 12px 8px; margin-top: 10px; }
#usageDetails .ud-chart-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--b2-ink-3, #6B7280); }
#usageDetails .ud-chart { position: relative; height: 92px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--b2-line, #E5E7EB); margin-top: 6px; }
#usageDetails .ud-bar { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; border: 0; border-radius: 3px; padding: 0; background: transparent; min-width: 0; cursor: pointer; transition: opacity 160ms; }
#usageDetails .ud-bar i { display: block; width: clamp(4px, 36%, 40px); min-height: 0; background: #A9C7EE; border-radius: 3px 3px 0 0; transition: height 300ms ease; pointer-events: none; }
#usageDetails .ud-bar:hover, #usageDetails .ud-bar:focus-visible { background: var(--b2-sunken, #F3F4F6); outline: none !important; box-shadow: none !important; }
#usageDetails .ud-bar:hover i { background: #5F97DC; }
#usageDetails .ud-bar.muted-bar { opacity: .35; }
#usageDetails .ud-bar[aria-pressed="true"] i { background: var(--b2-acc, #2A78D6); }
#usageDetails .ud-chart:has(.ud-bar:hover) .ud-bar:not(:hover) { opacity: .4; }
/* Up to 10 days: each bar's credits printed above it (zero days stay bare). */
#usageDetails .ud-few .ud-bar::after { content: attr(data-credits); position: absolute; left: 0; right: 0; bottom: calc(var(--h, 0%) + 4px); text-align: center; font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10px; letter-spacing: 0.02em; color: var(--b2-ink-3, #6B7280); pointer-events: none; transition: bottom 300ms ease; }
#usageDetails .ud-few .ud-bar[data-credits="0"]::after { content: none; }
#usageDetails .ud-axis { margin-top: 5px; font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10px; color: var(--b2-ink-4, #9CA3AF); }
#usageDetails .ud-axis-days { display: grid; text-align: center; line-height: 1.3; }
#usageDetails .ud-axis-days span { min-width: 0; overflow: visible; white-space: nowrap; }   /* a two-digit label may be wider than a narrow cell — its neighbours are blank then */
#usageDetails .ud-axis-days .m1 { color: var(--b2-ink-2, #4B5563); font-weight: 700; }
#usageDetails .ud-chart-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; min-height: 24px; }
#usageDetails .ud-hint { font-size: 11.5px; color: var(--b2-ink-3, #6B7280); }
#usageDetails .team-mini { font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 11px; letter-spacing: 0.03em; }
#usageDetails .team-mini[hidden] { display: none; }
/* Hover tooltip: a hairline card (the menu popover's shadow), date small, figure bold. */
#usageDetailsTip { position: fixed; z-index: 1300; pointer-events: none; background: var(--b2-surface, #fff); color: var(--b2-ink-4, #9CA3AF); border: 1px solid var(--b2-line-2, #D1D5DB); border-radius: 8px; box-shadow: 0 8px 24px rgba(17, 18, 22, 0.10), 0 2px 6px rgba(17, 18, 22, 0.06); padding: 7px 10px; line-height: 1.5; font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
#usageDetailsTip strong { display: block; margin-top: 1px; font-family: 'Geist', -apple-system, system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--b2-ink, #111216); }

/* Table = team.css's .team-table; figures mono and right-aligned; the first
 * column takes the slack (user 2026-10-08: the table was too wide). */
#usageDetails .ud-table-scroll { overflow-x: auto; margin-top: 14px; }
#usageDetails .team-table { margin: 0; }
#usageDetails .team-table td { padding: 7px 8px; }
#usageDetails .team-table :is(th, td):first-child { width: 100%; }
#usageDetails .team-table :is(th, td) + :is(th, td) { padding-left: 36px; white-space: nowrap; }
#usageDetails .team-table .ud-right { text-align: right; }
/* Sortable heads (review S4): the head text is a bare button in the head's
 * own mono voice; hover steps it darker, the sorted column reads in ink with
 * its arrow; no focus ring (the Team dialog's rule). */
#usageDetails .ud-th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: pointer; }
#usageDetails .ud-th-sort:hover { color: var(--b2-ink-2, #4B5563); }
#usageDetails .ud-th-sort.on { color: var(--b2-ink, #111216); }
#usageDetails .ud-th-sort:focus, #usageDetails .ud-th-sort:focus-visible { outline: none !important; box-shadow: none !important; color: var(--b2-ink, #111216); }
#usageDetails .ud-sort-chev { font-weight: 400; }
#usageDetails .ud-num { font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 12px; color: var(--b2-ink-2, #4B5563); }
#usageDetails .ud-num b { font-weight: 650; color: var(--b2-ink, #111216); }
#usageDetails .ud-num.warn { color: var(--team-alert, #D97757); }
#usageDetails .ud-date { font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 11.5px; color: var(--b2-ink-2, #4B5563); }
#usageDetails .ud-sub { color: var(--b2-ink-4, #9CA3AF); font-size: 11px; margin-top: 1px; }
#usageDetails .ud-link { border: 0; padding: 0; background: none; font: inherit; color: var(--b2-ink, #111216); cursor: pointer; text-align: left; }
#usageDetails .ud-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--b2-line-strong, #9CA3AF); }
#usageDetails .ud-link:focus, #usageDetails .ud-link:focus-visible { outline: none !important; box-shadow: none !important; text-decoration: underline; }
#usageDetails .ud-chev { color: var(--b2-ink-4, #9CA3AF); }
#usageDetails .ud-link:hover .ud-chev { color: var(--b2-ink, #111216); }
#usageDetails .ud-badge { margin-left: 8px; font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--b2-ink-4, #9CA3AF); }
#usageDetails .ud-dash { color: var(--b2-ink-4, #9CA3AF); }
#usageDetails .ud-empty { padding: 28px 0; text-align: center; color: var(--b2-ink-4, #9CA3AF); font-size: 12px; }
#usageDetails .team-table tr.ud-grp.first td { border-top: 1px solid var(--b2-line-2, #D1D5DB); }
#usageDetails .team-table tr.ud-grp-int-head td { padding: 12px 8px 4px; border-top: 1px solid var(--b2-line-2, #D1D5DB); border-bottom: 0; font-family: var(--f-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--b2-ink-4, #9CA3AF); white-space: normal; }

/* Footer: the settled-credits note left, Close right (the Team footer). */
#usageDetails .ud-foot { justify-content: space-between; margin-top: 14px; }
#usageDetails .ud-foot .char-hint { margin: 0; }
@media (max-width: 640px) {
    #usageDetailsDialog { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
    #usageDetails { padding: 0 16px 16px; }
    #usageDetails .ud-balances, #usageDetails .ud-stats { grid-template-columns: 1fr; }
    #usageDetails .ud-balances .cr-row + .cr-row { margin-top: 14px; }
    #usageDetails .ud-stat { border-right: 0; }
    #usageDetails .ud-filters { grid-template-columns: 1fr 1fr; }
    #usageDetails .ud-filters input { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { #usageDetails *, #usageDetails *::before, #usageDetails *::after { transition: none !important; } }

/* Conversation drill-in (user 2026-10-12, review variant 3): inside a
   conversation the allowance rows give way to its heading — eyebrow +
   title — while the back button stays alone on its line like the member
   drill-in. A shared pot's member drill-in takes the same heading with the
   member's name (2026-10-16). */
#usageDetails .ud-convhead { padding: 2px 0 0; min-width: 0; }
#usageDetails .ud-convhead .ud-eyebrow { margin-bottom: 2px; }
#usageDetails .ud-convtitle { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }