/* Genie — Gemini-style design system. Dark by default, light via [data-theme]. No external assets: the Google Sans stack is progressive (falls back to system-ui where the font isn't installed; nothing is fetched). */ :root { /* ---- dark palette (default) — Gemini's warm near-black ---- */ --bg: #131314; --bg-elev: #1e1f20; --bg-elev-1: #232425; --bg-elev-2: #2a2b2d; --bg-elev-3: #333537; --border: #3a3b3d; --border-strong: #5f6063; --text: #e3e3e3; --text-dim: #c4c7c5; --text-faint: #9aa0a6; /* Mono accent — white on dark (black on light, see the light palette). --on-accent flips the text drawn on accent fills so it stays legible. The composed --grad/--grad-h below also flatten to this accent. */ --accent: #ffffff; --accent-2: #ffffff; --on-accent: #131314; /* Tonal accent wash for selected/active surfaces (e.g. active pill tabs). Derived from --accent so it follows the theme (a faint white tint on dark, a faint black tint on light) — never a hardcoded hue. */ --accent-dim: color-mix(in srgb, var(--accent) 14%, transparent); /* Selected pill fill for the 聪明钱/Quant tab rows. It LIVES here, not only on .sm-root, because the surfaces that use it escape that scope: the Quant pane mounts in .sm-mount and the positions sheet mounts on (a .sm-root descendant can't hold a position:fixed scrim — see .sm-sheet-scrim). An undefined custom property makes `background` invalid at computed-value time, so the ACTIVE tab fell back to transparent while every inactive tab kept its --bg-elev-1 pill — the selection read exactly backwards, and the owner tapped "Recent activity" believing they were leaving it (2026-07-31). */ --sm-chip-on: color-mix(in srgb, var(--text) 16%, transparent); --grad-a: #4285f4; --grad-b: #9b72cb; --grad-c: #d96570; /* Functional accents (gradient text, progress bars, buttons) flatten to the mono accent — white on dark, black on light, theme-aware via var(--accent). The raw --grad-a/b/c stops above stay multi-color for the hero card + the two-color earn/team charts (which need distinguishable segments). */ --grad: var(--accent); --grad-h: var(--accent); /* Text selection — a soft Gemini-blue wash. --grad-a is the same #4285f4 in both themes while --bg flips, so this single value stays a medium blue on dark and a light periwinkle on light; pairing it with --text keeps the selected copy legible. (Before, no ::selection rule existed and the OS default rendered the dim hint text dark-on-dark in the light theme.) */ --selection-bg: color-mix(in srgb, var(--grad-a) 38%, var(--bg)); --selection-fg: var(--text); --user-bubble: #2a3441; --user-bubble-border: #38465c; --ok: #6dd58c; --warn: #f3c969; --err: #f28b82; /* Smart-money palette — matched to the 预测市场 (predict) screen so the two sibling surfaces share one identity: bright green + coral-red. */ --sm-up: #00D907; --sm-down: #FF5A3C; /* Ink on an --sm-up fill (CTAs, NEW chip, home badge): near-black on the bright dark-theme green, white on the deeper light-theme green. */ --sm-on-up: #04140b; /* Destructive actions (delete / revert / failed). */ --danger: #f28b82; --danger-text: #ffb4ab; --danger-bg: #3a1a1d; --danger-border: #6e2b2f; /* Banner tints. */ --banner-info-bg: #1b2740; --banner-info-fg: #cdddff; --banner-info-bd: #2c4170; --banner-warn-bg: #3a3015; --banner-warn-fg: #f2dca0; --banner-warn-bd: #5e4d1f; --banner-error-bg: #3a1a1d; --banner-error-fg: #ffc9c9; --banner-error-bd: #6e2b2f; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6); /* Rounded-geometry scale. --radius-hero/-lg cover the larger Gemini-generous surfaces (heroes, modals, big cards) that previously hardcoded 20–28px. */ --radius-hero: 28px; --radius-lg: 20px; --radius: 16px; --radius-md: 14px; --radius-sm: 12px; /* Small squircle for icon tiles / badge squares (was a sprawl of 8–11px). */ --radius-tile: 10px; --gap: 16px; /* Material 3 "emphasized" easing. */ --ease: cubic-bezier(0.2, 0, 0, 1); /* Type — Gemini's families. Text for body/UI, Flex for display/brand. Loaded from Google Fonts in index.html; falls back to the system font. */ --font-ui: "Google Sans Text", "Google Sans Flex", "Google Sans", Roboto, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: "Google Sans Flex", "Google Sans Text", "Google Sans", Roboto, system-ui, sans-serif; --font-mono: "Google Sans Code", var(--font-mono); } /* ---- light palette — Gemini's soft blue-grey on white ---- */ :root[data-theme="light"] { /* Pure-white base so the installed PWA's status-bar strip (black-translucent shows the app bg through it) reads white in light theme, matching the app. The elevation ramp below was at/under the old grey --bg, so on white it now GAINS definition: flat panels (--bg-elev-1) read as a soft grey, inputs (--bg-elev-2/3) as deeper grey, and white cards/dialogs (--bg-elev) separate via their shadows/borders. */ --bg: #ffffff; --bg-elev: #ffffff; --bg-elev-1: #f1f4f9; --bg-elev-2: #e9eef6; --bg-elev-3: #dde3ea; --border: #dadce0; --border-strong: #c4c7c5; --text: #1f1f1f; --text-dim: #444746; --text-faint: #80868b; --accent: #000000; --accent-2: #000000; --on-accent: #ffffff; --user-bubble: #d3e3fd; --user-bubble-border: #a8c7fa; --ok: #1a7f37; --warn: #b06000; --err: #d93025; /* Light theme keeps DARKER greens/reds: #00D907 as text on white fails contrast, and smart-money uses the accent for large PnL numbers (unlike predict, which uses white text). Coral-shifted red echoes #FF5A3C. */ --sm-up: #008f04; --sm-down: #d9432a; --sm-on-up: #ffffff; --danger: #d93025; --danger-text: #b3261e; --danger-bg: #fce8e6; --danger-border: #f3b4ad; --banner-info-bg: #e8f0fe; --banner-info-fg: #1967d2; --banner-info-bd: #aecbfa; --banner-warn-bg: #fef7e0; --banner-warn-fg: #b06000; --banner-warn-bd: #fde293; --banner-error-bg: #fce8e6; --banner-error-fg: #c5221f; --banner-error-bd: #f3b4ad; --shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.16); --shadow-md: 0 4px 18px rgba(60, 64, 67, 0.18); --shadow-lg: 0 12px 42px rgba(60, 64, 67, 0.24); } * { box-sizing: border-box; } /* Themed text selection (must follow :root so the tokens resolve). ::selection and ::-moz-selection are kept as separate rules — an unknown pseudo in a shared selector list drops the whole rule in some engines. */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } ::-moz-selection { background: var(--selection-bg); color: var(--selection-fg); } /* Material Symbols Rounded (Gemini-style menu icons) — SELF-HOSTED (was a Google Fonts ). The CDN font failed to load on flaky mobile connections and, because it uses font-display:block, glyphs fell back to raw ligature text ("chevron_right", "more_vert", …) that overflowed every layout. Serving the subset from our own origin (same connection as the app itself) removes that dependency. The @font-face + the base class below replicate what Google's stylesheet used to provide; styles.css then sets our thin optical axes. */ @font-face { font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 100 700; font-display: block; /* ?v=N is LOAD-BEARING: the server serves this file immutable/1y, so a changed font MUST change its URL or installed clients keep the old glyph set forever (the bell rendered as raw "NOTIFICATIONS" on prod). Bump the version every time the woff2 is regenerated. */ src: url("/material-symbols.woff2?v=2") format("woff2"); } .material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-size: 20px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; vertical-align: middle; user-select: none; } .nav-drawer-icon.material-symbols-rounded { font-size: 22px; } /* App-wide currency convention: an icon + the number (Power = bolt ⚡, Credits = toll ◉), never the spelled-out word. The icon inherits the surrounding color so it reads on any surface; it sits slightly larger than the digits and optically aligned. */ .cur { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; } .cur .cur-icon { font-size: 1.1em; line-height: 1; } .cur .cur-val { line-height: 1; } /* Match the sizes of the bespoke number styles these chips replaced. */ .store-bal-cur .cur { font-size: 17px; font-weight: 700; color: var(--text); } .store-card-amount .cur { font-size: 26px; font-weight: 700; color: var(--text); } .store-card-cost .cur { font-size: 15px; font-weight: 700; } .agentset-stat-cur .cur { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--text); } html, body { margin: 0; height: 100%; } /* Dark ground behind the body so any sub-pixel height gap never flashes the page's default white — a belt for the iOS standalone viewport quirk handled below. */ html { background: var(--bg); } body { background: var(--bg); color: var(--text); /* Gemini's reading scale: 16px body / 1.5 line-height. */ font: 16px/1.5 var(--font-ui); display: flex; flex-direction: column; height: 100dvh; overflow: hidden; -webkit-font-smoothing: antialiased; transition: background 0.3s var(--ease), color 0.3s var(--ease); } /* Installed to the Home Screen (PWA): with no forcing apple status-bar style, iOS reserves the status bar and the web view sits BELOW it (inset). -webkit-fill-available resolves to that inset web-view height, filling it with no bottom gap; 100vh is the fallback. Scoped to standalone so the browser keeps 100dvh (correct there against Safari's dynamic toolbars). */ @media (display-mode: standalone) { body { height: 100vh; height: -webkit-fill-available; } } /* ---------------- system notification (Gemini dropdown) ---------------- A compact, rounded alert that slides down from the top — NOT a full-width bar. Centered, capped width, with a kind icon + a dismiss button. */ .banner { position: fixed; top: 12px; left: 50%; z-index: 50; display: none; align-items: flex-start; gap: 10px; width: max-content; max-width: min(460px, calc(100vw - 28px)); padding: 11px 10px 11px 14px; font-size: 13.5px; font-weight: 500; line-height: 1.42; text-align: left; border-radius: var(--radius); border: 1px solid transparent; box-shadow: var(--shadow-md); transform: translate(-50%, -12px); opacity: 0; transition: opacity 200ms var(--ease), transform 200ms var(--ease); } .banner.show { display: flex; } .banner.is-in { transform: translate(-50%, 0); opacity: 1; } .banner-icon { flex: none; font-size: 20px; margin-top: -1px; opacity: 0.95; } .banner-msg { flex: 1 1 auto; min-width: 0; padding-top: 1px; } .banner-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px 0 0 2px; padding: 0; background: none; border: none; cursor: pointer; border-radius: 999px; color: inherit; opacity: 0.6; font-size: 18px; transition: opacity 0.15s var(--ease), background 0.15s var(--ease); } .banner-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); } .banner-action { flex: none; display: inline-flex; align-items: center; gap: 4px; margin: -1px 0 0; padding: 4px 11px; background: color-mix(in srgb, currentColor 14%, transparent); border: none; border-radius: 999px; cursor: pointer; color: inherit; font: inherit; font-weight: 600; font-size: 12.5px; white-space: nowrap; transition: background 0.15s var(--ease); } .banner-action:hover { background: color-mix(in srgb, currentColor 24%, transparent); } .banner-action-icon { font-size: 15px; margin-left: -2px; } .banner-info { background: var(--banner-info-bg); color: var(--banner-info-fg); border-color: var(--banner-info-bd); } .banner-warn { background: var(--banner-warn-bg); color: var(--banner-warn-fg); border-color: var(--banner-warn-bd); } .banner-error { background: var(--banner-error-bg); color: var(--banner-error-fg); border-color: var(--banner-error-bd); } @media (prefers-reduced-motion: reduce) { .banner { transition: opacity 120ms linear; transform: translate(-50%, 0); } } /* ---------------- floating menu button (no top bar) ---------------- */ /* The hamburger floats over the content, top-left (Gemini sidebar pattern). Sits below the session overlay (z 80) so a full-screen mobile session covers it; on the home view and desktop split-view it's visible over empty space. */ .nav-fab { position: fixed; top: 12px; left: 12px; z-index: 40; width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--text-dim); border: none; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .nav-fab:hover { background: var(--bg-elev-2); color: var(--text); } .nav-fab .material-symbols-rounded { font-size: 24px; } /* Home loop strip — explicit "you can act now" rows under the earnings widget: a free-pull CTA with the exact count, and a card-progress bar that flips to a bold Ready-to-upgrade CTA. */ /* Home hub — a fixed top-right corner cluster on the tasks screen (mirrors the top-left hamburger): the star-up progress/CTA + a free-gacha count. Sits in the viewport corner, never in the composer's flow. Collapses when there's nothing to act on. */ .home-hub-slot:empty { display: none; } .home-hub { position: fixed; top: 12px; right: 12px; z-index: 40; /* Match the hamburger's 48px box at the same top so the pills' centers line up with it (they're only 40px tall) — stays aligned across breakpoints since both share `top`. */ height: 48px; display: flex; align-items: center; gap: 8px; } /* Hidden while a task is open (home chrome collapses to the task list) — matches the earn/mascot slots. Every other screen hides it via the .tasks-view display cascade. */ .layout.session-active .home-hub { display: none; } .hub-pill { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 11px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--bg-elev-1) 86%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); cursor: pointer; font: inherit; transition: transform 0.12s var(--ease), filter 0.12s var(--ease), background 0.12s var(--ease); } .hub-pill:hover { background: var(--bg-elev-2); } .hub-pill:active { transform: translateY(1px); } .hub-pill .material-symbols-rounded { font-size: 22px; } .hub-count { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.2px; } /* Free-gacha gift pill — brand gradient so it reads as a reward waiting to be opened. */ .hub-gift { border-color: transparent; color: #fff; background: linear-gradient(135deg, #0036ff, #c600ff); box-shadow: 0 8px 20px -12px rgba(120, 40, 255, 0.9); animation: hub-gift-pulse 2.4s var(--ease) infinite; } .hub-gift:hover { filter: brightness(1.06); background: linear-gradient(135deg, #0036ff, #c600ff); } @keyframes hub-gift-pulse { 0%, 100% { box-shadow: 0 8px 20px -12px rgba(120, 40, 255, 0.9); } 50% { box-shadow: 0 8px 26px -10px rgba(160, 60, 255, 1); } } /* Star-up in-progress — a compact progress bar toward the next star + the exact fraction, so "2/5 towards ★N" reads at a glance. */ .hub-up:not(.is-ready) .hub-up-star { color: #a78bfa; } .hub-bar { flex: none; width: 46px; height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 15%, transparent); } .hub-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0036ff, #c600ff); transition: width 0.5s var(--ease); } /* Star-up ready — a glowing brand pill that periodically WIGGLES to invite the upgrade tap (it's a live CTA: tapping stars the agent up). Rest for most of the cycle, then a quick left-right shake with a tiny pop — attention without a constant distraction. */ .hub-up.is-ready { border-color: transparent; color: #fff; background: linear-gradient(135deg, #6d28d9, #c600ff); box-shadow: 0 10px 26px -10px rgba(170, 70, 255, 1); transform-origin: center; animation: hub-up-wiggle 2.4s var(--ease) infinite; } .hub-up.is-ready:hover { filter: brightness(1.07); background: linear-gradient(135deg, #6d28d9, #c600ff); } .hub-up.is-ready .material-symbols-rounded { color: #fff; } .hub-up-star { font-size: 13px; font-weight: 800; letter-spacing: 0.2px; } @keyframes hub-up-wiggle { 0%, 58%, 100% { transform: rotate(0) scale(1); } 64% { transform: rotate(-9deg) scale(1.06); } 70% { transform: rotate(7deg) scale(1.06); } 76% { transform: rotate(-6deg) scale(1.04); } 82% { transform: rotate(4deg) scale(1.03); } 88% { transform: rotate(-2deg) scale(1.02); } 94% { transform: rotate(1deg) scale(1.01); } } @media (prefers-reduced-motion: reduce) { .hub-gift, .hub-up.is-ready { animation: none; } .hub-bar-fill { transition: none; } } /* Mobile: align the hub's top edge with the hamburger (both drop under the safe-area inset). */ @media (max-width: 720px) { .home-hub { top: calc(env(safe-area-inset-top) + 4px); } } /* Agent chooser dropdown — now the head of the nav drawer (full width). */ .agent-switch { position: relative; } .agent-switch-btn { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; color: var(--text); border: none; border-radius: 999px; padding: 10px 14px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease); } .agent-switch-btn:hover { background: var(--bg-elev-2); } /* Push the caret to the far right so the pill reads as a full-width selector. */ .agent-switch-btn .agent-switch-caret { margin-left: auto; } .agent-switch-btn .agent-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agent-switch-btn .agent-switch-mark { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .agent-switch-btn .agent-switch-caret { color: var(--text-faint); font-size: 20px; } /* Shared dropdown menu surface (hamburger menu + agent list). */ .nav-menu { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; z-index: 50; display: flex; flex-direction: column; gap: 1px; } /* Agent menu drops down under the full-width switcher at the drawer head. A long agent list must scroll INSIDE the menu instead of running off the bottom of the viewport — cap to the viewport height and scroll; keep the "Your agents" head pinned so it stays visible. */ .nav-menu.from-agent { left: 0; right: 0; max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; } .nav-menu.from-agent .nav-menu-head { position: sticky; top: 0; z-index: 1; background: var(--bg-elev); } .nav-menu.from-right { right: 0; } /* Account menu sits at the drawer foot, so it opens upward. */ .nav-menu.from-user { left: 0; right: 0; bottom: calc(100% + 8px); top: auto; } /* Agent card in the chooser dropdown: name + power/credits/expiry, with a settings button. Tall enough to host the stats comfortably. Main area switches agents. */ .agent-card { display: flex; align-items: stretch; gap: 2px; } .agent-card-main { flex: 1 1 auto; display: flex; align-items: center; gap: 11px; min-width: 0; text-align: left; background: transparent; border: none; cursor: pointer; border-radius: var(--radius-sm); padding: 11px 8px 11px 12px; color: var(--text); transition: background 0.15s var(--ease); } .agent-card-main:hover { background: var(--bg-elev-2); } .agent-card.is-current .agent-card-main { background: color-mix(in srgb, var(--accent) 12%, transparent); } .agent-card-radio { flex: none; font-size: 18px; color: var(--text-dim); } .agent-card.is-current .agent-card-radio { color: var(--accent); } .agent-card-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; } .agent-card-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .agent-card-name { /* No flex-grow: the star badge should hug the name, not float to the far edge. */ flex: 0 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Admin-suspended mark — same "bad" red used for a suspended USER elsewhere in admin. */ .agent-card-suspended { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; color: var(--err); background: color-mix(in srgb, var(--err) 16%, transparent); } /* Stats stack on two lines (credits, then days left) — a single row truncates or wraps unpredictably as numbers and translations grow. */ .agent-card-stats { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; } .agent-card-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .agent-card-stat .material-symbols-rounded { font-size: 15px; color: var(--accent); } .agent-card-divider { color: var(--text-faint); font-size: 12px; opacity: 0.6; } .agent-card-sub { font-size: 12px; color: var(--text-faint); white-space: nowrap; } .agent-card-sub.is-warn { color: var(--warn); } .agent-card-sub.is-danger { color: var(--danger-text); } .agent-card-gear { flex: none; width: 40px; height: 40px; align-self: center; display: grid; place-items: center; background: transparent; border: none; cursor: pointer; color: var(--text-dim); border-radius: 999px; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .agent-card-gear:hover { background: var(--bg-elev-2); color: var(--text); } .agent-card-gear .material-symbols-rounded { font-size: 19px; } /* Star tier pill — a tier-colored "★ N" badge shared across every agent surface (picker, dropdown, settings, Earn card) so a high-star agent reads as different at a glance. Tint escalates with tier; the buy-agent card uses its own frosted badge. See src/web/star.ts. */ .star-pill { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .star-pill-ic { font-size: 13px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; } .star-pill--md { font-size: 13px; padding: 4px 11px; } .star-pill--md .star-pill-ic { font-size: 15px; } .star-pill--low { color: var(--text-dim); background: var(--bg-elev-3); } .star-pill--mid { color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); } .star-pill--high { color: #fff; background: linear-gradient(135deg, var(--grad-a), var(--grad-b) 55%, var(--grad-c)); } .user-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; font-weight: 600; color: var(--on-accent); background: var(--grad); } /* Account profile row at the bottom of the drawer. */ .nav-drawer-foot { margin-top: auto; position: relative; display: flex; align-items: center; gap: 4px; padding-top: 8px; } .nav-foot-gear { flex: 0 0 auto; } .user-profile-btn { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; background: transparent; border: none; border-radius: 999px; padding: 8px 10px; cursor: pointer; color: var(--text); text-align: left; transition: background 0.15s var(--ease); } .user-profile-btn:hover { background: var(--bg-elev-2); } .user-profile-meta { display: flex; flex-direction: column; min-width: 0; } .user-profile-name { font-size: 14px; font-weight: 600; } .user-profile-email { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .user-profile-email:empty { display: none; } .nav-menu[hidden] { display: none; } .nav-menu-head { padding: 8px 10px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); } .nav-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font-size: 13.5px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; } .nav-menu-item:hover { background: var(--bg-elev-2); } .nav-menu-item .nav-menu-icon { width: 20px; text-align: center; color: var(--text-dim); } .nav-menu-item.is-current { color: var(--accent); } .nav-menu-item .nav-menu-sub { margin-left: auto; font-size: 11px; color: var(--text-faint); } .nav-menu-sep { height: 1px; background: var(--border); margin: 10px 2px; } /* Hamburger menu — left slide-in drawer overlaying the chat. */ .nav-drawer-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0); transition: background 0.25s ease; } .nav-drawer-overlay.open { background: rgba(0, 0, 0, 0.45); } .nav-drawer-overlay[hidden] { display: none; } .nav-drawer { position: absolute; top: 0; left: 0; bottom: 0; width: 300px; max-width: 82vw; background: var(--bg-elev); border: none; box-shadow: var(--shadow-lg); /* Rounded right edge so the panel reads as a floating sheet, not a full-bleed slab (its left edge is off-screen, so only the right corners show). Generous radius to match the reference. */ border-radius: 0 var(--radius-hero) var(--radius-hero) 0; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; transform: translateX(-100%); transition: transform 0.25s var(--ease); } .nav-drawer-overlay.open .nav-drawer { transform: translateX(0); } /* Head holds the agent switcher; leave room for the floating hamburger above. */ .nav-drawer-head { padding: 2px 0 10px; margin-bottom: 6px; } .nav-drawer-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font-size: 15px; padding: 14px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s var(--ease); } .nav-drawer-item:hover { background: var(--bg-elev-2); } /* Current screen: the same rounded pill, kept lit so the drawer always shows where you are. */ .nav-drawer-item.is-current { background: var(--bg-elev-2); } .nav-drawer-item.is-current .nav-drawer-icon { color: var(--text); } .nav-drawer-icon { width: 22px; text-align: center; color: var(--text-dim); } /* ---------------- Tasks home (Gemini-style) + session slide-in ---------------- */ /* A centered column positioned in the upper-middle: gradient greeting, pill composer, then the Recent task list. The whole view scrolls if long. */ .tasks-view { display: flex; flex-direction: column; align-items: center; width: 100%; flex: 1 1 auto; min-height: 0; background: transparent; /* The view itself doesn't scroll — the greeting/composer/recent header is pinned and only the task list scrolls (Gemini's home layout). */ overflow: hidden; } .home-center { width: 100%; max-width: 760px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 24px; } /* Hero band: occupies the top ~half of the desktop home. The greeting sits in the top-middle as the focal point (padding-top) with the composer cluster below it; the Recent row and task list follow as siblings underneath. */ .home-header { flex: 0 0 auto; min-height: 50vh; display: flex; flex-direction: column; justify-content: flex-start; /* Tight — the mascot is the focal point and sits close to the top. */ padding-top: 5vh; position: relative; z-index: 2; } .home-greeting, .home-composer-wrap, .recent-bar { flex: 0 0 auto; } /* The greeting as a speech bubble the mascot appears to be saying — a small centered tonal pill sitting just under the mascot, with a triangular tail (::after) poking up to touch it. Replaces the old full-width gradient hero heading now that the mascot itself (not the text) is the focal point. */ .home-greeting { position: relative; width: fit-content; max-width: min(88%, 380px); margin: 0 auto 40px; text-align: center; font-family: var(--font-display); font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -0.1px; color: var(--text); background: var(--bg-elev-1); padding: 13px 20px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .home-greeting::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; background: var(--bg-elev-1); transform: translateX(-50%) rotate(45deg); } /* "New task" button — only shown in the split view, where it replaces the hero composer (the full composer lives on the full-screen home instead). */ .home-new-task { display: none; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 4px auto 18px; background: var(--bg-elev-2); color: var(--text); border: none; border-radius: 999px; padding: 15px 32px 15px 26px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease); } .home-new-task:hover { background: var(--bg-elev-3); } .home-new-task .material-symbols-rounded { font-size: 22px; color: var(--text-dim); } /* ── Home earnings widget (home-earn.ui.ts) ───────────────────────────────── A light card with two parts: a MUST-HAVE primary figure (total earned — always there) over a DYNAMIC good-to-know note (agent expiring, funds ready, today's gain, daily rate…). The number stays put while the note keeps it current, without the overload of a full dashboard. Taps through to the Earn screen. */ /* Mascot hero: a large, purely-decorative live mascot centered above the greeting (Gemini's centered-orb pattern) — no card chrome, no text. ~1/6 of the viewport height, clamped so it stays sane on very short/tall screens. */ /* NEGATIVE gap: the canvas renders the ball at ~48% of its own box (the rest is jump-arc headroom), leaving ~26% (≈9.6vh at the current 37vh canvas) of empty space below the ball. Pull the greeting up through part of that dead space — -5.1vh leaves ≈4.5vh of visual air between ball and bubble (1.5x the previous gap, per feedback). The canvas overlap is transparent and harmless. */ .home-mascot-slot { flex: 0 0 auto; margin: 0 0 clamp(-90px, -5.1vh, -16px); display: flex; justify-content: center; transition: opacity 0.35s ease; } /* While the splash celebration plays, keep the hero slot empty (one mascot on screen at a time); it eases in as the overlay fades — the mascot settles home. */ html.is-app-ready:not(.is-splash-gone):not(.is-splash-skip) .home-mascot-slot { opacity: 0; } .home-mascot-canvas { display: block; /* Sized up twice by feedback (1.5x, then 1.5x again) — the mascot IS the hero of the tasks screen, and the Recent list is capped at 3 cards to make the room. The 2D port frames the ball at ~48% of the canvas (jump headroom), so the visible ball is about half these values. */ width: clamp(158px, 37vh, 470px); height: clamp(158px, 37vh, 470px); cursor: pointer; transition: filter 0.15s var(--ease); } .home-mascot-canvas:hover { filter: brightness(1.08); } /* Static pre-WebGL placeholder (index.html): the canvas footprint, with the flat mascot scaled to ~48% to match where the live ball renders inside its frame (jump headroom). scale() keeps the layout box, so the header band doesn't jump when the live mascot mounts. */ .home-mascot-ph { display: block; width: clamp(158px, 37vh, 470px); height: clamp(158px, 37vh, 470px); object-fit: contain; transform: scale(0.48); animation: mascot-ph-breathe 2s ease-in-out infinite; } @keyframes mascot-ph-breathe { 50% { transform: scale(0.5); opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { .home-mascot-ph { animation: none; } } /* Narrower than the composer column and outlined rather than filled, so the stats widget reads as a distinct info card, not another input. */ .home-earn-slot { flex: 0 0 auto; width: 100%; max-width: 560px; margin: 0 auto 44px; } .home-earn-slot:empty { display: none; } /* collapse when there's nothing to show (or toggled off) */ .home-earn { display: flex; flex-direction: column; width: 100%; padding: 14px 17px; border-radius: var(--radius-lg); background: transparent; border: 1px solid var(--border); cursor: pointer; text-align: left; transition: transform 0.13s var(--ease), background 0.15s var(--ease); } .home-earn:hover { background: var(--bg-elev-2); } .home-earn:active { transform: scale(0.992); } .home-earn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .home-earn-chev { flex: none; font-size: 22px; color: var(--text-faint); } /* Primary — the must-have earnings figure (always shown). */ .home-earn-primary { display: flex; align-items: center; gap: 12px; } .home-earn-primary-main { flex: 1 1 auto; min-width: 0; } .home-earn-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); } .home-earn-value { font-family: var(--font-display); font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; } /* The running total with today's gain riding alongside it, baseline-aligned so the small "Today +$…" tag sits neatly against the big figure. */ .home-earn-value-row { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; flex-wrap: wrap; } .home-earn-today { flex: 0 0 auto; font-size: 13px; font-weight: 650; line-height: 1; color: var(--ok); font-variant-numeric: tabular-nums; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 15%, transparent); white-space: nowrap; } /* Note — the dynamic good-to-know line under a divider. */ .home-earn-note { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--text-faint) 16%, transparent); } .home-earn-note-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-tile); background: color-mix(in srgb, var(--accent) 16%, var(--bg-elev-2)); color: var(--accent); } .home-earn-note-ic .material-symbols-rounded { font-size: 19px; } .home-earn-note-body { flex: 1 1 auto; min-width: 0; } .home-earn-note-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-earn-note-sub { font-size: 12px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-earn-note-action { flex: none; border: none; cursor: pointer; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600; transition: filter 0.14s var(--ease), background 0.14s var(--ease); } .home-earn-note-action.is-primary { background: var(--grad); color: var(--on-accent); } .home-earn-note-action.is-primary:hover { filter: brightness(1.08); } .home-earn-note-action.is-warn { background: color-mix(in srgb, var(--warn) 22%, var(--bg-elev-2)); color: var(--warn); } .home-earn-note-action.is-warn:hover { background: color-mix(in srgb, var(--warn) 32%, var(--bg-elev-2)); } /* Note tones — the icon chip color. */ .home-earn-note.is-warn .home-earn-note-ic { background: color-mix(in srgb, var(--warn) 18%, var(--bg-elev-2)); color: var(--warn); } .home-earn-note.is-positive .home-earn-note-ic { background: color-mix(in srgb, var(--ok) 18%, var(--bg-elev-2)); color: var(--ok); } .home-earn-note.is-info .home-earn-note-ic { background: color-mix(in srgb, var(--accent) 16%, var(--bg-elev-2)); color: var(--accent); } .home-earn-note.is-neutral .home-earn-note-ic { background: var(--bg-elev-2); color: var(--text-dim); } /* New-user brand card — a single inviting row, no primary figure. */ .home-earn--brand { flex-direction: row; align-items: center; gap: 13px; } .home-earn--brand .home-earn-note-ic { width: 40px; height: 40px; background: color-mix(in srgb, var(--grad-b) 22%, var(--bg-elev-2)); color: var(--text); } .home-earn--brand .home-earn-note-ic .material-symbols-rounded { font-size: 22px; } .home-earn--brand .home-earn-note-title { font-size: 15px; } /* Skeleton: a value bar over a note row, reserving the card height on a cold load. */ .home-earn--skeleton { cursor: default; pointer-events: none; } .home-earn-skel { background: var(--bg-elev-2); border-radius: 8px; animation: home-earn-pulse 1.3s ease-in-out infinite; } .home-earn-skel-value { width: 42%; height: 26px; } .home-earn-skel-note { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--text-faint) 16%, transparent); } .home-earn-skel-ic { width: 34px; height: 34px; border-radius: var(--radius-tile); flex: none; } .home-earn-skel-line { height: 13px; flex: 1 1 auto; max-width: 58%; } @keyframes home-earn-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { .home-earn-skel { animation: none; } } /* ── Home self-improvement notice (home-improve.ui.ts) ────────────────────── Part of the stats widget: renders as a divider row INSIDE the earnings card (only when the daemon has unseen passes — the slot collapses otherwise). Brand-new-user fallback: as a sibling below the "Start earning" row card, where the default standalone-card look below applies. */ .home-earn-improve-slot:empty { display: none; } .home-earn-slot > .home-earn-improve-slot { margin-top: 10px; } .home-earn .home-earn-improve-slot { margin-top: 0; } .home-earn .home-improve { background: transparent; border-radius: 0; padding: 13px 0 0; margin-top: 13px; border-top: 1px solid color-mix(in srgb, var(--text-faint) 16%, transparent); } .home-earn .home-improve:hover { background: transparent; } .home-earn .home-improve:active { transform: none; } .home-earn .home-improve-ic { width: 34px; height: 34px; } .home-earn .home-improve-ic .material-symbols-rounded { font-size: 19px; } .home-improve { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 17px; border-radius: var(--radius-lg); background: var(--bg-elev-1); cursor: pointer; text-align: left; transition: transform 0.13s var(--ease), background 0.15s var(--ease); } .home-improve:hover { background: var(--bg-elev-2); } .home-improve:active { transform: scale(0.992); } .home-improve:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .home-improve-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-tile); background: color-mix(in srgb, var(--grad-b) 22%, var(--bg-elev-2)); color: var(--text); } .home-improve-ic .material-symbols-rounded { font-size: 22px; } /* Needs-review tint when there are staged (ask-first) changes. */ .home-improve.is-review .home-improve-ic { background: color-mix(in srgb, var(--warn) 18%, var(--bg-elev-2)); color: var(--warn); } .home-improve-body { flex: 1 1 auto; min-width: 0; } .home-improve-title { font-size: 14px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-improve-sub { font-size: 12px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-improve-action { flex: none; border: none; cursor: pointer; border-radius: 999px; font-size: 12px; font-weight: 600; padding: 6px 13px; background: color-mix(in srgb, var(--warn) 22%, var(--bg-elev-2)); color: var(--warn); } .home-improve-action:hover { background: color-mix(in srgb, var(--warn) 32%, var(--bg-elev-2)); } .home-improve-chev { flex: none; font-size: 22px; color: var(--text-faint); } /* Pill composer — in-flow between the stats widget and the Recent list (per feedback; it used to be pinned to the viewport bottom). position:relative is load-bearing: the slash palette anchors to this wrap and opens upward. */ .home-composer-wrap { position: relative; width: 100%; z-index: 30; margin: 0 0 26px; } .home-composer { display: flex; align-items: center; gap: 12px; background: var(--bg-elev-1); border: none; border-radius: var(--radius-hero); /* Spacious, Gemini-style: the input floats in generous padding rather than hugging a slim pill. */ padding: 19px 24px; box-shadow: var(--shadow-md); transition: box-shadow 0.15s var(--ease); } .home-composer:focus-within { box-shadow: var(--shadow-md); } .home-composer-plus { flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--text-dim); } .home-input { flex: 1 1 auto; resize: none; max-height: 200px; background: transparent; color: var(--text); border: none; outline: none; padding: 4px 0; font: inherit; font-size: 16px; line-height: 1.5; } .home-input::placeholder { color: var(--text-faint); } /* The home palette opens UPWARD — the composer is pinned to the viewport bottom now, so a downward drop would run off-screen. Higher-specificity selector so it beats the base `.cmd-palette` bottom/left/right (defined later in this file). */ .home-composer-wrap .home-palette { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; } /* Assist chips — a horizontally-scrollable row of shortcut pills above BOTH composers (home + session; Gemini's mobile pattern). Tapping one fills the composer; 聪明钱 opens its board. Always visible (owner call 2026-07-13). */ .home-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; margin: 0 0 10px; padding: 2px; scroll-snap-type: x proximity; } .home-chips::-webkit-scrollbar { display: none; } .home-chips:empty, .home-chips.is-hidden { display: none; } .home-chip { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 9px 15px; border: none; border-radius: 999px; background: var(--bg-elev-1); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 550; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.14s var(--ease), transform 0.1s var(--ease); } .home-chip:hover { background: var(--bg-elev-2); } .home-chip:active { transform: scale(0.97); } .home-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .home-chip .material-symbols-rounded { font-size: 18px; color: var(--text-dim); } .home-chip .home-chip-emoji { font-size: 15px; line-height: 1; } /* Recent header: sort dropdown on the left, keyword search on the right. Now a sibling of the task list (sits just below the ~50vh hero band on desktop; pins beneath the nav on mobile — see the phone media block). */ .recent-bar { display: flex; align-items: center; gap: 12px; margin: 0 4px 6px; } .recent-sort { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 4px 6px 4px 0; font-size: 13.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; border-radius: var(--radius-sm); } .recent-sort:hover { color: var(--text); } .recent-caret { font-size: 20px; color: var(--text-faint); } /* Collapses to a single search icon; clicking it expands the pill (see main.ts). */ .recent-search-wrap { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; width: 260px; max-width: 55%; /* Constant height in both states so expanding/collapsing the search never changes the header height (which would make the composer jump). */ height: 40px; margin-left: auto; padding: 0 14px; overflow: hidden; background: var(--bg-elev-1); border: none; border-radius: 999px; transition: width 0.22s var(--ease), padding 0.22s var(--ease), background 0.15s var(--ease); } /* No stroke — matches the rest of the borderless UI; just a tonal fill on focus. */ .recent-search-wrap:focus-within { background: var(--bg-elev-2); } .recent-search-ic { flex: 0 0 auto; display: grid; place-items: center; background: transparent; border: none; padding: 0; color: var(--text-faint); cursor: pointer; } .recent-search-ic .material-symbols-rounded { font-size: 19px; } .recent-search { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font: inherit; font-size: 13.5px; } .recent-search::placeholder { color: var(--text-faint); } /* Collapsed: just a round icon button; the input is clipped to zero width. */ .recent-search-wrap.is-collapsed { width: 40px; padding: 0; gap: 0; background: transparent; border-color: transparent; } .recent-search-wrap.is-collapsed .recent-search-ic { width: 40px; height: 40px; border-radius: 50%; color: var(--text-dim); transition: background 0.15s var(--ease), color 0.15s var(--ease); } .recent-search-wrap.is-collapsed .recent-search-ic .material-symbols-rounded { font-size: 22px; } .recent-search-wrap.is-collapsed .recent-search-ic:hover { background: var(--bg-elev-2); color: var(--text); } .recent-search-wrap.is-collapsed .recent-search { width: 0; flex: 0 0 0; opacity: 0; pointer-events: none; } /* Relative time tag on a task row (revealed with the kebab on hover/focus). */ .task-time { flex: 0 0 auto; font-size: 12px; color: var(--text-faint); white-space: nowrap; opacity: 0; transition: opacity 0.12s ease; } .task-row:focus-within .task-time { opacity: 1; } @media (hover: hover) { .task-row:hover .task-time { opacity: 1; } } .tasks-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; /* The composer sits in-flow above the list now — just a small tail gap. */ padding-bottom: 28px; gap: 12px; } .tasks-empty { color: var(--text-faint); padding: 20px 4px; font-size: 13.5px; } /* Inline "Retry" link in the task-fetch error state (see renderTasksError). */ .tasks-retry { background: none; border: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-decoration: underline; } .tasks-retry:hover { opacity: 0.7; } /* Loading indicator shown while the task list is first fetched. */ .tasks-loading { display: flex; align-items: center; gap: 9px; color: var(--text-faint); padding: 18px 4px; font-size: 13.5px; } .spinner { width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Skeleton placeholders for the Recent task list while it loads. The list lives in the agent's sandbox, so a cold fetch can take many seconds; shimmer rows shaped like real task rows read as "loading" instead of a blank screen. */ .tasks-skeleton { display: flex; flex-direction: column; } .task-skel-row { display: flex; align-items: center; gap: 12px; padding: 20px 14px 20px 18px; } .task-skel-main { display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; min-width: 0; } .skel { background: var(--bg-elev-2); border-radius: 7px; animation: skel-pulse 1.3s ease-in-out infinite; animation-delay: var(--skel-d, 0s); } .skel-dot { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; } .skel-line { height: 11px; border-radius: 6px; } .skel-line--title { max-width: 100%; } .skel-line--sub { width: 32%; height: 9px; } @keyframes skel-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { .skel { animation: none; opacity: 0.5; } } /* Taller, calmer task cards with a relaxed rhythm (Gemini). Background stays transparent — elevation comes from hover only, not a resting fill. */ .task-row { display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; background: transparent; border: none; border-radius: var(--radius-hero); padding: 20px 14px 20px 18px; cursor: pointer; width: 100%; transition: background 0.12s var(--ease); } @media (hover: hover) { .task-row:hover { background: var(--bg-elev-1); } } .task-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; } @media (hover: hover) { .task-row:hover .task-title { color: var(--accent); } } /* Kebab on a task row: hidden until the row is hovered/focused or its menu is open. */ .task-kebab { flex: 0 0 auto; opacity: 0; width: 30px; height: 30px; font-size: 18px; line-height: 1; border-radius: 50%; transition: opacity 0.12s ease, background 0.12s ease; } .task-row:focus-within .task-kebab, .task-kebab[aria-expanded="true"] { opacity: 1; } @media (hover: hover) { .task-row:hover .task-kebab { opacity: 1; } } /* Touch devices have no hover to reveal these, and a sticky :hover would force a double-tap (first tap highlights the row, second opens it). Show the time + kebab always so a single tap opens the task. */ @media (hover: none) { .task-time { opacity: 1; } .task-kebab { opacity: 1; } } .task-pin-mark { color: var(--text-faint); margin-right: 4px; font-size: 16px; } .task-title { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .task-subtitle { font-size: 13px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Live-state chip on a task row (working / needs your reply / interrupted). Only rendered while the state is known (agent warm) — idle tasks carry no chip. */ .task-state { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; border-radius: 999px; padding: 2px 10px; background: var(--bg-elev-2); color: var(--text-dim); white-space: nowrap; } .task-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .task-state-working { color: var(--accent); } .task-state-working::before { animation: task-state-pulse 1.4s ease-in-out infinite; } .task-state-needs_input { color: var(--warn, #e0a63d); } .task-state-stopped { color: var(--text-faint); } @keyframes task-state-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .session-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0); transition: background 0.25s ease; } .session-overlay.open { background: rgba(0, 0, 0, 0.4); } .session-overlay[hidden] { display: none; } .session-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 760px; max-width: 100%; border: none; border-left: 1px solid transparent; border-radius: 0; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.25s var(--ease); } .session-overlay.open .session-panel { transform: translateX(0); } .session-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid transparent; /* Sit above the transcript so its fade mask paints over the scrolling text. */ position: relative; z-index: 2; background: var(--bg-elev); } /* Gemini-style fade: text scrolling up under the title bar dissolves into the bg. Kept SHORT (owner 2026-07-29: "reduce the drop shadow from the nav bar") — at 40px it read as a heavy drop shadow on the client surfaces, which don't scroll text under the bar at all; 12px is enough to soften the edge for the ones that do. */ .session-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: linear-gradient(to bottom, var(--bg-elev), transparent); pointer-events: none; } .session-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } /* Status pill (Gemini "Complete" / "Working") between the title and the kebab. */ .session-status { flex: 0 0 auto; font-size: 12px; font-weight: 500; color: var(--text-dim); background: var(--bg-elev-2); border-radius: 999px; padding: 4px 12px; white-space: nowrap; } .session-status[hidden] { display: none; } .session-status.working { color: var(--accent); } .session-menu-btn { flex: 0 0 auto; font-size: 20px; line-height: 1; } /* Back chevron: only on mobile/narrow, where the session is a full-screen overlay (no task list beside it). On desktop the split-view already shows the list. Selector is `.session-bar .session-back` (specificity 0,2,0) so it beats the later `.icon-btn { display: grid }` rule the button also matches. */ .session-back { flex: 0 0 auto; } .session-back svg { display: block; } .session-bar .session-back { display: none; } @media (max-width: 899px) { .session-bar .session-back { display: inline-flex; align-items: center; justify-content: center; } } /* …unless back means "the screen you came from" rather than "the task list": a deep-linked sub-screen (Quant → asset detail) hides its own inner back row because the header carries one, so on desktop the chevron IS the only exit (owner 2026-07-29). main.ts sets .has-back with the override. */ .session-bar.has-back .session-back { display: inline-flex; align-items: center; justify-content: center; } /* Kebab dropdown menu (task rename / pin / delete / close) ----------------- */ .kebab-menu { position: fixed; z-index: 200; min-width: 184px; padding: 6px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .kebab-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--text); font-size: 14px; text-align: left; cursor: pointer; } .kebab-item:hover { background: var(--bg-elev-1); } .kebab-item.danger { color: var(--danger); } .kebab-ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-faint); } .kebab-ic .material-symbols-rounded { font-size: 18px; } .kebab-item.danger .kebab-ic { color: var(--danger); } .kebab-sep { height: 1px; margin: 6px 4px; background: var(--border); } /* Desktop split-view: opening a task slides the list into a left column and the session becomes the right pane (instead of a full-screen modal overlay). */ /* Gemini-style edge handle: a slim pill anchored just inside the session pane's left edge at mid-height, so it stays in the same spot relative to the pane whether the task list is expanded or folded. Only meaningful in the desktop split view — hidden everywhere else (mobile session is already full-screen). */ .session-edge-toggle { display: none; } @media (min-width: 900px) { .tasks-view { transition: flex-basis 0.3s var(--ease), max-width 0.3s var(--ease), opacity 0.25s var(--ease); } .layout.session-active .session-edge-toggle { display: flex; align-items: center; justify-content: center; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 16px; height: 52px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev-2); color: var(--text-dim); cursor: pointer; z-index: 5; opacity: 0.75; transition: opacity 0.15s var(--ease), background 0.15s var(--ease); } .layout.session-active .session-edge-toggle:hover { opacity: 1; background: var(--bg-elev-3); color: var(--text); } .layout.session-active .session-edge-toggle .material-symbols-rounded { font-size: 16px; } /* Full-width mode (Gemini-style expand): collapse the left task column so the session pane takes the whole viewport. Toggled by the edge handle. */ .layout.session-active.session-wide .tasks-view { flex-basis: 0%; max-width: 0; min-width: 0; opacity: 0; pointer-events: none; border-right: none; } /* With the left column gone the session pane owns the whole viewport, so the floating hamburger has nothing left to float over: it sat right against the back arrow and the title, and the bar had to be padded 64px to dodge it (owner 2026-07-29: "should not be here visibly blocking"). Hide it and give the padding back — this is the same rule a full-screen mobile session already follows, where the overlay covers the FAB outright. The drawer stays one tap away: the edge handle restores the split, and the FAB with it. */ body:has(.layout.session-active.session-wide) .nav-fab { display: none; } .layout.session-active { justify-content: flex-start; } .layout.session-active .tasks-view { flex: 0 0 40%; max-width: 560px; align-items: stretch; border-right: 1px solid transparent; /* The column itself doesn't scroll — only the task list inside it does. */ overflow: hidden; } /* Split the left column into a fixed header (New task + Recent/search) and a scrollable task list below — like Gemini's sidebar. */ .layout.session-active .home-center { max-width: none; width: 100%; height: 100%; min-height: 0; padding: 0; display: flex; flex-direction: column; } /* No 1/3 band in the narrow split column — the header is just the compact New-task button + Recent/search, anchored at the top. */ .layout.session-active .home-header { min-height: 0; justify-content: flex-start; padding-top: 0; } .layout.session-active .home-new-task { display: flex; flex: 0 0 auto; margin: 28px auto 18px; } .layout.session-active .recent-bar { flex: 0 0 auto; margin: 0 0 4px; padding: 0 28px; } .layout.session-active .tasks-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 28px 24px; } /* The big hero greeting is a home-screen flourish; hide it in the narrow split-view column. The hero composer collapses to the "New task" button. */ .layout.session-active .home-greeting { display: none; } .layout.session-active .home-composer-wrap { display: none; } /* The earnings widget is a home-screen flourish too — hide it in the narrow column. */ .layout.session-active .home-earn-slot { display: none; } .layout.session-active .home-mascot-slot { display: none; } /* Session becomes an in-flow right pane (not a fixed full-screen modal). */ .layout.session-active .session-overlay { position: relative; inset: auto; flex: 1 1 0; min-width: 0; background: transparent; z-index: 1; } .layout.session-active .session-panel { position: relative; width: 100%; height: 100%; max-width: none; border-left: 1px solid transparent; box-shadow: none; } } .model-indicator { font-size: 12.5px; color: var(--text-dim); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; } .model-indicator.no-model { color: var(--warn); border-color: var(--banner-warn-bd); } .icon-btn { background: transparent; color: var(--text-dim); border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 17px; cursor: pointer; display: grid; place-items: center; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .icon-btn:hover { background: var(--bg-elev-2); color: var(--text); } /* ---------------- layout ---------------- */ .layout { flex: 1 1 auto; display: flex; justify-content: center; min-height: 0; overflow: hidden; } .chat-col { display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 860px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } /* ---------------- transcript ---------------- */ .transcript { flex: 1 1 auto; overflow-y: auto; /* Bottom padding halved with the fade (owner 2026-08-03: "reduce the shadow area by 50%") — still clears the 16px gradient at rest. */ padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 24px; scroll-behavior: smooth; } /* A client surface (Quant, the board, Predict) leads with its OWN tab bar, so the 24px of chat-message breathing room under the title bar only pushed it away from the nav (owner 2026-07-29). A conversation still gets the full inset. */ .transcript:has(> .sm-mount) { padding-top: 8px; } /* ---- conversational message rows (Gemini layout) ---- User: a right-aligned tonal bubble, no avatar, no label. Assistant: full-width text with just the gradient "spark" to its left. */ .msg { display: flex; gap: 14px; align-items: flex-start; } .msg-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 650; line-height: 1; user-select: none; } /* Assistant pfp: a filled circular avatar with the Genie spark. Solid color so it ALWAYS paints — the old transparent `background-clip:text` spark could render blank if the gradient/clip didn't paint, leaving the reply with no avatar at all. */ .msg-assistant .msg-avatar { background: var(--bg-elev-2); color: var(--accent); font-size: 25px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } /* The live mascot avatar (main.ts's shared, reparented canvas) — the one assistant row it's currently attached to swaps its icon avatar for this. The canvas renders the ball at ~48% of its own box (jump headroom), so at 100% the pfp read tiny; per feedback it's 1.5x — done by overflowing the canvas out of the SAME 42px layout slot (negative margins) so message indentation stays identical across rows. The visible ball lands at ~30px, still inside the slot; only jump/celebrate arcs spill past it, over transparent background. */ .msg-avatar.msg-avatar-mascot { background: transparent; overflow: visible; } .msg-avatar-mascot .msg-avatar-mascot-canvas { width: 150%; height: 150%; margin: -25%; } .msg-avatar-mascot-canvas { display: block; width: 100%; height: 100%; } /* No sender labels — the bubble (user) and spark (assistant) carry the role. */ .msg-sender { display: none; } /* User turn → right-aligned tonal bubble. */ .msg-user { justify-content: flex-end; } .msg-user .msg-avatar { display: none; } .msg-user .msg-content { flex: 0 1 auto; align-items: flex-end; max-width: 82%; } .msg-user .msg-body { background: var(--user-bubble); color: var(--text); padding: 11px 17px; border-radius: var(--radius-lg); width: fit-content; max-width: 100%; } /* Assistant turn → airy, full-width reading column. */ .msg-assistant .msg-content { line-height: 1.7; } .msg-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .msg-body { font-size: 16px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; position: relative; } .msg-body.busy { /* Reserve space so the absolutely-positioned working dot never overlaps the last line of streamed text. */ padding-bottom: 14px; } .msg-body.busy::after { /* The body holds BLOCK-level children (.bubble-thinking, .bubble-text, .bubble-activity), so an inline-block dot would drop onto its own line. Anchor it to the body (which is position: relative) so it reads as a steady "working" indicator at the bottom-left in every phase — including agent_start when .bubble-text is still empty. */ content: ""; position: absolute; left: 0; bottom: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } } /* "Genie is working" indicator: a pulsing dot + a cycling playful line, shown in the gap before the first output so model latency reads as activity, not a hang. */ .working-indicator { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--text-dim); font-size: 14px; font-style: normal; } .working-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; } .working-label { animation: workingFade 2.6s ease-in-out infinite; } @keyframes workingFade { 0% { opacity: 0.45; } 12% { opacity: 0.95; } 88% { opacity: 0.95; } 100% { opacity: 0.45; } } /* Suppress the bare busy dot while the richer indicator is up (avoid two dots). */ .msg-body.busy:has(.working-indicator)::after { display: none; } .bubble-text { white-space: pre-wrap; } .bubble-text:empty { display: none; } /* ---------------- markdown (assistant body) ---------------- */ /* Rendered markdown owns its own block spacing, so the pre-wrap whitespace used for plain streamed text is turned off here. */ .markdown { white-space: normal; } .markdown:empty { display: none; } /* Collapse outer margins so a bubble doesn't gain leading/trailing whitespace. */ .markdown > :first-child { margin-top: 0; } .markdown > :last-child { margin-bottom: 0; } .markdown p { margin: 0 0 8px; } .markdown h1, .markdown h2, .markdown h3 { margin: 14px 0 6px; line-height: 1.3; font-weight: 650; } .markdown h1 { font-size: 19px; } .markdown h2 { font-size: 17px; } .markdown h3 { font-size: 15px; color: var(--text-dim); } .markdown ul, .markdown ol { margin: 6px 0 8px; padding-left: 22px; } .markdown li { margin: 2px 0; } .markdown li::marker { color: var(--text-faint); } .markdown blockquote { margin: 8px 0; padding: 2px 0 2px 11px; border-left: 3px solid var(--border); color: var(--text-dim); } /* GFM tables (md.ts): themed like the view tables, scrolling in their own wrapper so a wide table never stretches the chat bubble. */ .markdown .md-table-wrap { margin: 8px 0; overflow-x: auto; } .markdown table { border-collapse: collapse; font-size: 13px; min-width: 60%; } .markdown th, .markdown td { padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .markdown th { font-weight: 600; color: var(--text-dim); white-space: nowrap; } .markdown tr:last-child td { border-bottom: none; } .markdown th.md-right, .markdown td.md-right { text-align: right; } .markdown th.md-center, .markdown td.md-center { text-align: center; } .markdown strong { font-weight: 650; } .markdown em { font-style: italic; } .markdown code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; } .markdown pre { margin: 8px 0; padding: 11px 13px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; } .markdown pre code { display: block; background: none; border: none; padding: 0; font-size: 12.5px; line-height: 1.5; white-space: pre; color: var(--text); } .markdown a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; } .markdown a:hover { text-decoration: underline; } /* Collapsible "process" block — folded one-line summary the user can unfold to see the streamed reasoning + tool activity (Gemini pattern). Folded by default. */ .process { margin: 0 0 12px; } .process-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 3px 0; cursor: pointer; color: var(--text-dim); font: inherit; font-size: 13.5px; font-weight: 500; transition: color 0.15s var(--ease); } .process-toggle:hover { color: var(--text); } .process-caret { font-size: 18px; color: var(--text-faint); transition: transform 0.2s var(--ease); } .process.open .process-caret { transform: rotate(90deg); } .process-detail { display: none; margin-top: 10px; } .process.open .process-detail { display: block; } /* Process timeline (Gemini-style): reasoning + tool steps as nodes on a rail. */ .process-timeline { position: relative; padding: 2px 0; } /* The vertical rail connecting node icons. */ .process-timeline::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1.5px; background: var(--border); } .tl-step { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: start; } .tl-icon { position: relative; z-index: 1; grid-column: 1; display: grid; place-items: center; width: 24px; height: 22px; color: var(--text-faint); background: var(--bg-elev); /* mask the rail so the icon reads as a node */ font-size: 18px; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20; } .tl-icon.ok { color: var(--ok); } .tl-icon.failed { color: var(--err); } .tl-body { grid-column: 2; min-width: 0; padding-bottom: 12px; font-size: 13.5px; line-height: 1.65; color: var(--text-dim); word-wrap: break-word; overflow-wrap: anywhere; } .tl-line { margin: 0; } /* Tool nodes: name reads a touch stronger than reasoning lines. */ .tl-step.tl-tool .tl-line { color: var(--text); font-weight: 500; } /* Compact markdown inside reasoning nodes — proper numbered lists, code, breaks. */ .tl-body.markdown p { margin: 0 0 5px; } .tl-body.markdown ol, .tl-body.markdown ul { margin: 3px 0 5px; padding-left: 22px; } .tl-body.markdown li { margin: 1px 0; } .tl-body.markdown li::marker { color: var(--text-faint); } .tl-body.markdown h1, .tl-body.markdown h2, .tl-body.markdown h3 { font-size: 13.5px; margin: 5px 0 2px; color: var(--text-dim); } /* Streamed reasoning — Gemini style: small, muted, NOT italic. */ .bubble-thinking { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); white-space: pre-wrap; border-left: 2px solid var(--border); padding-left: 12px; margin: 0; } .bubble-activity { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .tool-chip { font-size: 11.5px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; } .tool-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); } .tool-chip.pending::before { background: var(--accent); animation: pulse 1s ease-in-out infinite; } .tool-chip.ok::before { background: var(--ok); } .tool-chip.failed { color: var(--danger-text); border-color: var(--danger-border); } .tool-chip.failed::before { background: var(--err); } /* ---------------- composer ---------------- */ /* Positioning context so the slash palette can float ABOVE the composer. */ .composer-wrap { flex: 0 0 auto; position: relative; } /* Quant is full-bleed (owner 2026-08-03): the composer — and the HUD row under it (Chill · credits · Top up) and the context hint, which read as one section — slides off while that screen is up; a downward swipe brings it back (quant.ts owns the class). IN FLOW both ways: a position:fixed variant shoved the whole column up past the top edge on the phone, so the hide is a max-height collapse + slide, which cannot move anything above it. The 40vh ceiling only exists to give the transition endpoints. */ .composer-wrap, .usage-hud, .context-hint { transition: transform 0.26s ease, opacity 0.18s ease, max-height 0.26s ease; max-height: 40vh; } body.qn-composer-off .composer-wrap, body.qn-composer-off .usage-hud, body.qn-composer-off .context-hint { max-height: 0; overflow: hidden; transform: translateY(18px); opacity: 0; pointer-events: none; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } /* Gemini-style fade: a gradient mask above the composer so transcript text dissolves into the panel background instead of being hard-cut at the edge. */ .composer-wrap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; /* 16px, was 32 (owner 2026-08-03: "reduce the shadow area by 50%"). */ height: 16px; background: linear-gradient(to top, var(--bg-elev), transparent); pointer-events: none; } /* Gemini-style centered "island" composer: a rounded pill, max-width, centered in the panel, floating above the usage HUD (no full-width top border). Roomier padding than a typical chat input — Gemini's composer reads spacious, not cramped around the text. */ .composer { flex: 0 0 auto; display: flex; gap: 12px; align-items: flex-end; width: 100%; max-width: 768px; margin: 0 auto; padding: 18px 16px 18px 26px; border: none; border-radius: var(--radius-hero); background: var(--bg-elev-1); box-shadow: var(--shadow-md); transition: box-shadow 0.15s var(--ease); } /* No stroke, no focus highlight — elevation comes from the shadow alone. */ .composer:focus-within { box-shadow: var(--shadow-md); } .composer-plus { flex: 0 0 auto; font-size: 23px; line-height: 1; color: var(--text-dim); align-self: center; } .composer-wrap { padding: 9px 24px 22px; } /* Credit readout — shares the usage-hud row with the context/cost labels. */ .credit-balance { flex: 0 0 auto; display: inline-flex; /* centers the coin glyph + number on the row's vertical axis */ align-items: center; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; } .credit-balance.low { color: var(--warn); } .credit-balance[hidden] { display: none; } /* display:inline-flex above beats the UA [hidden] rule */ /* Weekly allowance bar (docs/WEEKLY_ALLOWANCE.md) — replaces the raw balance while the subscription allowance is active: progress through the week, not a draining number. Full detail (credits used/granted, wallet) lives in the tooltip. */ .allowance-hud { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; margin-left: auto; /* takes over the balance's right-alignment while it's hidden */ font-size: 11.5px; line-height: 1; /* shrink text boxes to glyph height so flex centering is optical, not box math */ font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; } .allowance-hud[hidden] { display: none; } .allowance-track { width: 64px; height: 6px; border-radius: 999px; background: var(--bg-elev-3); overflow: hidden; } .allowance-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.3s var(--ease); } .allowance-hud.warn .allowance-fill { background: var(--warn); } .allowance-pct { color: var(--text); font-weight: 500; } .allowance-hud.warn .allowance-pct { color: var(--warn); } .allowance-reset { color: var(--text-dim); opacity: 0.75; } /* Session savings pill — a summary line at the bottom of the newest reply ("−12% credits saved"). Plain words, no glyph; percentage, not a raw credit count; the number flips up odometer-style when the session rate changes. */ .savings-pill { display: inline-flex; align-items: center; gap: 4px; /* leading spaces inside the label spans collapse — gap owns spacing */ margin-top: 10px; padding: 3px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 14%, var(--bg-elev-2)); color: var(--ok); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; user-select: none; } .savings-pill-pre:empty, .savings-pill-post:empty { display: none; } .savings-pill { line-height: 1.25; } /* one shared line box → labels + digits share an optical center */ .savings-pill-num { position: relative; display: inline-block; overflow: hidden; height: 1.25em; } /* block, not inline-block: baseline alignment inside the clipped window pushed the digits ~2px below the labels' center. A block child fills from the top. */ .savings-pill-digit { display: block; line-height: 1.25; } .savings-pill-digit.flip-in { animation: savings-flip-in 0.35s var(--ease); } .savings-pill-digit.flip-out { position: absolute; left: 0; top: 0; animation: savings-flip-out 0.35s var(--ease) forwards; } @keyframes savings-flip-in { from { transform: translateY(115%); } to { transform: translateY(0); } } @keyframes savings-flip-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-115%); opacity: 0; } } .credit-topup { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--bg-elev-2); border: none; cursor: pointer; padding: 4px 13px; border-radius: 999px; transition: background 0.15s var(--ease); } .credit-topup:hover { background: var(--bg-elev-3); } .credit-topup:focus { outline: none; } .credit-topup:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Receipts sheet — recent credit_ledger movements, opened by tapping the HUD balance or the weekly bar. Transparency on demand, no ambient taxi meter. */ .receipts-backdrop { position: fixed; inset: 0; z-index: 12000; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; justify-content: center; /* Side + bottom insets so the sheet FLOATS with margins (Gemini style), never edge-to-edge; also clears the phone's home indicator. */ padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); } .receipts-sheet { width: min(560px, 100%); max-height: 62vh; display: flex; flex-direction: column; background: var(--bg-elev-1, var(--bg)); /* Fully rounded — a floating card, not a docked panel. */ border-radius: 28px; padding: 20px 20px 12px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45); } .receipts-title { font-size: 14px; font-weight: 650; margin-bottom: 10px; } .receipts-list { overflow-y: auto; font-size: 13px; } .receipt-row { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--bg-elev-2); } .receipt-row:last-child { border-bottom: none; } .receipt-ic { font-size: 18px; color: var(--text-dim); } .receipt-text { flex: 1 1 auto; min-width: 0; } .receipt-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .receipt-time { font-size: 11px; color: var(--text-dim); } .receipt-amt { flex: 0 0 auto; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; color: var(--text-dim); } .receipt-amt.pos { color: var(--ok); } /* The HUD money elements now open the receipts sheet. */ .credit-balance, .allowance-hud { cursor: pointer; } /* Long-conversation hint — a quiet line above the HUD, not a scary banner. */ .context-hint { padding: 4px 24px 0; font-size: 11.5px; color: var(--warn); opacity: 0.9; white-space: normal; } .context-hint[hidden] { display: none; } /* Budget-guard select (Settings → Agent) — matches the switch rows' scale. */ .agentset-select { flex: 0 0 auto; font: inherit; font-size: 13px; color: var(--text); background: var(--bg-elev-2); border: 1px solid var(--bg-elev-3); border-radius: 8px; padding: 5px 8px; } /* Composer-HUD Effort toggle — a compact pill that flips Chill ⇄ YOLO. Chill reads muted (the safe default); YOLO lights up to signal the agent is in autonomous mode. */ .effort-hud { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--text-faint); background: var(--bg-elev-2); border: none; cursor: pointer; padding: 3px 11px; border-radius: 999px; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .effort-hud:hover { background: var(--bg-elev-3); } .effort-hud:focus { outline: none; } .effort-hud:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .effort-hud.is-yolo { color: var(--on-accent); background: var(--accent); } /* ---------------- slash command palette ---------------- */ .cmd-palette { position: absolute; left: 24px; right: 24px; max-width: 768px; margin: 0 auto; bottom: calc(100% + 2px); z-index: 50; max-height: 320px; overflow-y: auto; padding: 6px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); -webkit-overflow-scrolling: touch; } .cmd-palette[hidden] { display: none; } /* "↓ New messages" — appears when the transcript's auto-follow is suppressed because the user scrolled up mid-stream. Tapping snaps back to the bottom and it hides once the user is there. Mirrors .cmd-palette's anchor: absolute, centered, floating just above the composer. */ .scroll-resume { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 40; margin: 0 auto; width: fit-content; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font: 500 13px/1 system-ui, -apple-system, sans-serif; box-shadow: var(--shadow-lg); cursor: pointer; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .scroll-resume .material-symbols-rounded { font-size: 18px; } .scroll-resume.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .scroll-resume { transition: opacity 0.18s ease; transform: none; } } .cmd-group { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); padding: 6px 8px 4px; } .cmd-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; } .cmd-item.selected { background: var(--bg-elev-2); border-color: var(--accent); } .cmd-name { flex: 0 0 auto; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); } .cmd-desc { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-empty { padding: 9px 10px; font-size: 12.5px; color: var(--text-faint); font-style: italic; } .composer-input { flex: 1 1 auto; resize: none; max-height: 200px; background: transparent; color: var(--text); border: none; border-radius: 0; padding: 11px 0; align-self: center; font: inherit; font-size: 16.5px; line-height: 1.55; outline: none; } .composer-input::placeholder { color: var(--text-faint); } /* Icon-only round button. Gemini-style: a monochrome light/dark circle (not the brand gradient); the stop state just swaps the arrow glyph for a square. */ .composer-send { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; background: var(--text); color: var(--bg); border: none; border-radius: 50%; padding: 0; cursor: pointer; transition: filter 0.15s, transform 0.1s var(--ease); } .composer-send .material-symbols-rounded { font-size: 22px; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; } .composer-send:hover { filter: brightness(0.9); } .composer-send:active { transform: scale(0.94); } .composer-send:focus { outline: none; } .composer-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Empty + idle: drop the button out of layout (used by the home composer). */ .composer-send.is-hidden { display: none; } /* …except on the home composer, where we keep the button's box RESERVED (just invisible) so the pill's height and the input's width don't jump the instant the user starts typing and the send arrow appears. */ .home-composer .composer-send.is-hidden { display: grid; visibility: hidden; } /* Idle + empty (Gemini): a plain mic, not the filled circle. */ .composer-send.is-mic { background: transparent; color: var(--text-dim); } .composer-send.is-mic:hover { background: var(--bg-elev-2); color: var(--text); filter: none; } .composer-send.is-listening { color: var(--accent); animation: pulse 1.1s ease-in-out infinite; } /* Processing: same monochrome button, square glyph (set in JS). */ .composer-send.is-stop { background: var(--text); color: var(--bg); } .composer-send.is-stop:hover { filter: brightness(0.9); } .composer-send.is-stop .material-symbols-rounded { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } /* ---------------- usage HUD (statusline under composer) ---------------- */ /* Clean status line, no hard divider — blends into the panel like the rest of the UI. Deliberately minimal: effort toggle · credits left · Top up (token/ context/cost telemetry lives in the admin panel, not user chrome). The Top-up pill rides the far edge so the strip still spans the composer. */ .usage-hud { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 2px 24px 12px; background: transparent; font-family: var(--font-ui); } /* Chill anchors the left edge; the credits chip + Top-up pill ride together on the right (credits immediately left of the button it feeds). */ .usage-hud .credit-balance { margin-left: auto; } /* ---------------- surfaces (inline in transcript) ---------------- */ .surface-card { flex-shrink: 0; /* prevent transcript flex from collapsing the surface */ align-self: stretch; /* Inset to align with the assistant content column (avatar width + row gap), so generated surfaces read as part of the assistant's turn. */ margin-left: 56px; display: flex; flex-direction: column; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .surface-header { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; background: var(--bg-elev); border-bottom: 1px solid var(--border); } .surface-title { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Header icon buttons (pin, collapse) — dim until hover, accent when active. */ .surface-btn { flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .surface-btn:hover { opacity: 1; background: var(--bg-elev-1); } .surface-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .surface-btn.active { opacity: 1; color: var(--accent); } /* Refresh in flight: spin until the next render frame lands for this surface. */ .surface-refresh.is-refreshing { opacity: 1; color: var(--accent); animation: surface-refresh-spin 1s linear infinite; } @keyframes surface-refresh-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .surface-refresh.is-refreshing { animation: none; } } .surface-pin.active { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } /* Pinned: the card sticks to the top of the transcript so an interactive surface (a game, a live dashboard) stays visible while chat streams below. CSS-only — the card keeps its DOM slot, so an iframe surface never reloads. The FRAME (not the whole card) is height- capped, so a tall surface scrolls INTERNALLY and chat keeps a readable strip below. */ .surface-card.pinned { position: sticky; top: 6px; z-index: 6; box-shadow: var(--shadow-lg); } .surface-card.pinned .surface-frame { max-height: min(62dvh, 900px); } /* Phones: the desktop pinned cap clips an interactive surface's bottom controls (a game's action bar ends up below the fold, reachable only by scrolling inside the frame). Give pinned iframes most of the viewport — chat still peeks below, and fullscreen is one tap away. */ @media (max-width: 720px) { .surface-card.pinned .surface-frame { max-height: min(78dvh, 900px); } } /* Fullscreen: the card takes over the viewport IN PLACE — CSS-only, like pinning, because re-parenting an iframe reloads its srcdoc and resets the game. Declared after .pinned so position:fixed wins when both classes are set. The frame drops every height cap (including the JS px height from content reports) and flexes to fill under the header. */ .surface-card.fullscreen { position: fixed; inset: 0; z-index: 90; margin: 0; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .surface-card.fullscreen .surface-frame { flex: 1 1 auto; height: auto !important; max-height: none !important; } /* Desktop: the nav hamburger is a fixed FAB in the ROOT stacking context, so it paints over the fullscreen card's top-left corner — inset the header so the title doesn't run under it. (A full-width SESSION solves the same collision by hiding the FAB instead; a card can't, because the FAB is still the only nav while a card is open over the split view.) Mobile needs none: the session overlay (z 80) covers the FAB there. */ @media (min-width: 721px) { .surface-card.fullscreen .surface-header { padding-left: 64px; } } /* Collapse: hide the body via display:none — an iframe keeps its state, so pausing a game/dashboard never resets it. */ .surface-card.collapsed .surface-frame, .surface-card.collapsed .surface-view { display: none; } .surface-frame { display: block; width: 100%; height: 340px; border: 0; background: transparent; } /* render_ui state: "loading" — a subtle in-progress cue on the card header, whether the surface has real (partial) content yet or is a bare skeleton. */ .surface-card.surface-loading .surface-header { animation: surface-header-pulse 1.3s ease-in-out infinite; } @keyframes surface-header-pulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .surface-card.surface-loading .surface-header { animation: none; } } /* ---------------- structured view surfaces (chart/table) ---------------- */ /* Rendered in-page by views.ts from a data spec — no iframe. Series palette + semantic colors are defined here so the canvas renderer can read them. */ .surface-view { /* Vibrant trading-desk palette (matches the approved report mockup): gold-first series (the classic EMA look), crypto-desk green/red for candles. */ --view-c1: #e8c447; --view-c2: #6fa8ff; --view-c3: #c77dff; --view-c4: #5ad8cc; --view-c5: #ff9f6e; --view-up: #16c784; --view-down: #ea3943; padding: 12px 14px 14px; } .view-stack { display: flex; flex-direction: column; gap: 12px; } .view-stack-horizontal { flex-direction: row; flex-wrap: wrap; } .view-stack-horizontal > .view-stack-item { flex: 1 1 0; min-width: 140px; } .view-grid { display: grid; gap: 12px; } .view-stack-item, .view-grid-item { min-width: 0; } /* Bare loading placeholder (no view/html yet) — an instant "something is coming" shape instead of a blank card for the whole wait. */ .view-skeleton-line, .view-skeleton-block { background: var(--bg-elev-2); border-radius: 6px; animation: view-skeleton-pulse 1.3s ease-in-out infinite; } .view-skeleton-line { height: 13px; width: 38%; margin-bottom: 10px; } .view-skeleton-line.long { width: 62%; } .view-skeleton-block { height: 120px; width: 100%; } @keyframes view-skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { .view-skeleton-line, .view-skeleton-block { animation: none; } } .view-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .view-caption { font-size: 12px; color: var(--text-dim); margin-top: 8px; } .view-chart-wrap { position: relative; width: 100%; } .view-canvas { display: block; width: 100%; } /* Interactive chart: crosshair on hover, grabbing while panning. touch-action pan-y lets the page scroll vertically while horizontal drag / pinch are ours. */ .view-chart-wrap .view-canvas { cursor: crosshair; touch-action: pan-y; } .view-chart-wrap .view-canvas.is-panning { cursor: grabbing; } .view-chart-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 11.5px; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); } .view-chart-tip-h { font-weight: 600; margin-bottom: 2px; color: var(--text-dim); } .view-chart-tip-r { color: var(--text); } /* Dataset switcher (e.g. timeframes) above an interactive chart. */ .view-chart-tabs { display: flex; gap: 4px; margin: 2px 0 6px; } .view-chart-tab { appearance: none; background: none; border: 1px solid transparent; border-radius: 8px; padding: 3px 10px; font: 500 11.5px/1.4 inherit; font-family: inherit; font-variant-numeric: tabular-nums; color: var(--text-dim); cursor: pointer; } .view-chart-tab:hover { color: var(--text); } .view-chart-tab:focus-visible { outline: 2px solid var(--accent, #8ab4f8); outline-offset: 1px; } .view-chart-tab.is-active { background: var(--bg-elev-2); border-color: var(--border); color: var(--text); } /* Series legend: one toggleable chip per line (click = show/hide, scale re-fits). */ .view-chart-legend { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 0 4px; } .view-chart-key { appearance: none; background: none; border: 0; border-radius: 6px; padding: 2px 8px 2px 6px; display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1.4 inherit; font-family: inherit; color: var(--text-dim); cursor: pointer; } .view-chart-key:hover { color: var(--text); background: var(--bg-elev-1); } .view-chart-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .view-chart-key-dot { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; } .view-chart-key.is-off { opacity: 0.45; } .view-chart-key.is-off .view-chart-key-name { text-decoration: line-through; } .view-table-wrap { width: 100%; overflow-x: auto; } .view-table { width: 100%; border-collapse: collapse; font-size: 13px; } .view-table th, .view-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .view-table th { font-weight: 600; color: var(--text-dim); font-size: 12px; } .view-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .view-table tbody tr:last-child td { border-bottom: 0; } /* card */ .view-card-headline { font-size: 30px; font-weight: 650; line-height: 1.1; color: var(--text); letter-spacing: -0.01em; } .view-arrow { font-size: 0.6em; vertical-align: middle; } .view-card-subhead { font-size: 13px; color: var(--text-dim); margin-top: 2px; } .view-card-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .view-card-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding-top: 6px; border-top: 1px solid var(--border); } .view-card-label { color: var(--text-dim); } .view-card-value { color: var(--text); font-variant-numeric: tabular-nums; } /* kpi grid */ .view-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .view-kpi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .view-kpi-label { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .view-kpi-value { font-size: 20px; font-weight: 600; color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; } .view-kpi-delta { font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; } /* list */ .view-list { margin: 0; padding: 0; list-style: none; counter-reset: viewlist; } .view-list[class] { /* keep zero default padding for both ol/ul */ } ol.view-list { counter-reset: viewlist; } .view-list-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .view-list-item:last-child { border-bottom: 0; } ol.view-list .view-list-main::before { counter-increment: viewlist; content: counter(viewlist) ". "; color: var(--text-dim); } .view-list-main { min-width: 0; } .view-list-text { color: var(--text); } .view-list-secondary { color: var(--text-dim); margin-left: 8px; font-size: 12.5px; } .view-list-value { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } /* form */ .view-form { display: flex; flex-direction: column; gap: 10px; } .view-field { display: flex; flex-direction: column; gap: 4px; } .view-field-label { font-size: 12px; color: var(--text-dim); } .view-input { width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; } .view-input:focus { outline: none; border-color: var(--accent); } textarea.view-input { min-height: 64px; resize: vertical; } .view-checkbox { width: 16px; height: 16px; accent-color: var(--accent); align-self: flex-start; } .view-form-status { font-size: 12px; color: var(--text-dim); min-height: 14px; } /* buttons */ .view-buttons-text { font-size: 13.5px; color: var(--text); margin-bottom: 8px; } .view-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .view-btn { font: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); cursor: pointer; transition: filter 0.12s, opacity 0.12s; } .view-btn:hover:not(:disabled) { filter: brightness(1.12); } .view-btn.primary { background: var(--accent); border-color: var(--accent); color: #06121f; } .view-btn.danger { background: #f28b82; border-color: #f28b82; color: #2a0a08; } .view-btn.selected { outline: 2px solid var(--accent); outline-offset: 1px; } .view-btn:disabled { opacity: 0.55; cursor: default; } .view-form .view-btn { align-self: flex-start; } /* ---------------- explorer (interactive filter/search/sort/drill) ---------------- */ .view-explorer { display: flex; flex-direction: column; gap: 12px; } .view-exp-toolbar { display: flex; align-items: center; gap: 10px; } .view-exp-search { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); } .view-exp-search:focus { outline: none; border-color: var(--border-strong); } .view-exp-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-faint); white-space: nowrap; } .view-exp-facets { display: flex; flex-wrap: wrap; gap: 14px; } .view-exp-facet-group { display: flex; flex-direction: column; gap: 6px; } .view-exp-facet-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .view-exp-chips { display: flex; flex-wrap: wrap; gap: 6px; } .view-exp-chip { font: inherit; font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-dim); cursor: pointer; transition: background 0.14s, border-color 0.14s, color 0.14s; } .view-exp-chip:hover { border-color: var(--border-strong); color: var(--text); } .view-exp-chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--text); } .view-exp-summary { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--bg-elev-1); } .view-exp-summary-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); } .view-exp-summary-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .view-exp-donut { flex: 0 0 auto; } .view-exp-donut.interactive { cursor: pointer; } .view-exp-summary-body .view-exp-bars { flex: 1 1 220px; min-width: 200px; } .view-exp-bars { display: flex; flex-direction: column; gap: 6px; } .view-exp-bar-row { display: grid; grid-template-columns: minmax(64px, 24%) 1fr auto; align-items: center; gap: 10px; transition: background 0.12s, opacity 0.2s; } .view-exp-bar-row.clickable { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: 0 -4px; } .view-exp-bar-row.clickable:hover { background: var(--bg-elev-2); } .view-exp-bar-row.active { background: var(--accent-dim); } .view-exp-bar-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .view-exp-bar-name { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .view-exp-bar-track { height: 8px; border-radius: 999px; background: var(--bg-elev-3); overflow: hidden; } .view-exp-bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--view-c1, #6ea8fe); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .view-exp-bar-val { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); min-width: 40px; text-align: right; } .view-exp-map-wrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); overflow: hidden; } .view-exp-map { display: block; width: 100%; cursor: crosshair; } /* Standalone `map` view wrapper — hosts the canvas + the Google Maps chip. */ .view-map-wrap { position: relative; } .view-map-wrap .view-canvas { cursor: pointer; } /* Google Maps handoff chip, overlaid top-right of every map card. A plain link (no SDK/key/third-party script); href resolves to the filtered pins on tap. */ .view-map-glink { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); opacity: 0.92; font-size: 11.5px; font-weight: 600; color: var(--text); text-decoration: none; } .view-map-glink:hover { opacity: 1; background: var(--bg-elev-1); } .view-map-glink .material-symbols-rounded { font-size: 13px; } .view-exp-table-wrap { overflow-x: auto; } /* Row-windowing sentinel: extends the rendered window on tap (and auto-fires via IntersectionObserver as it scrolls into view). */ .view-exp-more-row td { padding: 0; } .view-exp-more { display: block; width: 100%; padding: 8px 10px; border: none; background: none; color: var(--text-dim); font-size: 12.5px; cursor: pointer; } .view-exp-more:hover { color: var(--text); } .view-exp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .view-exp-table th { position: sticky; top: 0; text-align: left; font-weight: 600; color: var(--text-dim); padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-elev); cursor: pointer; white-space: nowrap; user-select: none; } .view-exp-table th:hover { color: var(--text); } .view-exp-table th.num { text-align: right; } .view-exp-sort-ind { color: var(--accent); font-size: 11px; } .view-exp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text); } .view-exp-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .view-exp-row { cursor: pointer; transition: background 0.12s; } .view-exp-row:hover { background: var(--bg-elev-1); } .view-exp-row.expanded { background: var(--accent-dim); } .view-exp-row.hl { background: var(--accent-dim); } .view-exp-row.expanded td { border-bottom-color: transparent; } .view-exp-tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-dim); } .view-exp-tag.clickable { cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .view-exp-tag.clickable:hover { border-color: var(--border-strong); color: var(--text); } .view-exp-tag.on { background: var(--accent-dim); border-color: var(--accent); color: var(--text); } .view-exp-detail-row td { padding: 0 10px 12px; background: var(--accent-dim); } .view-exp-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 18px; padding: 4px 4px 2px; } .view-exp-detail-pair { display: flex; flex-direction: column; gap: 1px; } /* Actions footer inside the drill-in: drill chip + Google Maps link on one full-width row, aligned and vertically centered. */ .view-exp-detail-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 2px; } .view-exp-detail-actions .view-exp-maplink { margin-top: 0; } .view-exp-detail-actions .view-act { margin-top: 0; } .view-exp-detail-key { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); } .view-exp-maplink { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--link, #8ab4f8); text-decoration: none; } .view-exp-maplink:hover { text-decoration: underline; } .view-exp-maplink .material-symbols-rounded { font-size: 14px; } .view-exp-detail-val { font-size: 13px; color: var(--text); } /* Tappable follow-up chip (docs/TAPPABLE_ACTIONS.md): one tap = one agent turn. */ .view-act { display: inline-flex; align-items: center; gap: 4px; align-self: center; margin-top: 4px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: none; font-size: 12px; font-weight: 600; color: var(--link, #8ab4f8); cursor: pointer; white-space: nowrap; } .view-act:hover { background: var(--bg-elev-1); } .view-act:disabled { opacity: 0.5; cursor: default; } .view-act .material-symbols-rounded { font-size: 13px; } .view-list-item .view-act { margin-left: 8px; } .view-kpi .view-act { margin-top: 6px; } /* ---------------- gallery (filterable image grid + lightbox) ---------------- */ .view-gallery { display: flex; flex-direction: column; gap: 12px; } .view-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .view-gallery-tile { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-elev-1); cursor: pointer; transition: border-color 0.14s, transform 0.14s; } .view-gallery-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); } .view-gallery-thumb { aspect-ratio: 1 / 1; background: var(--bg-elev-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .view-gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; } .view-gallery-tile.broken .view-gallery-thumb::after { content: "🖼"; font-size: 26px; opacity: 0.4; } .view-gallery-tile.broken .view-gallery-img { display: none; } .view-gallery-cap { padding: 8px 10px; } .view-gallery-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .view-gallery-sub { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .view-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.82); display: flex; align-items: center; justify-content: center; padding: 24px; } .view-lightbox-box { position: relative; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; gap: 10px; align-items: center; } .view-lightbox-img { max-width: 92vw; max-height: 78vh; object-fit: contain; border-radius: 8px; background: var(--bg-elev); } .view-lightbox-meta { text-align: center; color: var(--text); } .view-lightbox-title { font-size: 15px; font-weight: 600; } .view-lightbox-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; } .view-lightbox-link { font-size: 13px; color: var(--accent); text-decoration: none; } .view-lightbox-close { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-size: 14px; line-height: 1; cursor: pointer; } .view-lightbox-close:hover { background: var(--bg-elev-2); } /* ---------------- web-search sources (Path 2) ---------------- */ .sources-panel { /* Align under the assistant content column, matching surface cards. */ margin: 10px 0 2px; padding: 10px 14px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius-sm); } .sources-head { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; } .sources-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .sources-list li { font-size: 13px; line-height: 1.45; } .sources-list a.src-link { color: var(--accent); text-decoration: none; } .sources-list a.src-link:hover { text-decoration: underline; } .sources-list .src-host { margin-left: 6px; color: var(--text-faint); font-size: 11.5px; } /* ---------------- settings modal ---------------- */ .settings-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 20px; /* Above the auth/agent gate (.auth-overlay z 1000) so the buy-agent modal, reachable from the agent picker, layers on top of it. */ z-index: 1100; } .settings-panel { width: min(560px, 100%); max-height: 90dvh; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .settings-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-elev); /* Above ALL scrolling content — the gacha card's animated transform and the buy-modal value card (z-index 3, rides over the hero deck) would otherwise paint over this sticky bar. */ z-index: 4; } .settings-titlebar h2 { margin: 0; font-size: 17px; } .settings-close { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; background: transparent; border: none; border-radius: 999px; color: var(--text-dim); font-size: 24px; line-height: 1; cursor: pointer; } .settings-close:hover { color: var(--text); background: var(--bg-elev-2); } /* ---------------- in-app confirm / prompt dialog (confirm.ui.ts) ---------------- Tonal Gemini replacement for window.confirm()/prompt(); centered, --ease motion. */ .confirm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 20px; z-index: 1400; } .confirm-dialog { width: min(400px, 100%); background: var(--bg-elev); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px; animation: confirm-in 0.2s var(--ease); } @keyframes confirm-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } } .confirm-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text); line-height: 1.3; } .confirm-msg { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-dim); } .confirm-input { width: 100%; margin-top: 16px; background: var(--bg-elev-2); border: none; border-radius: var(--radius-sm); padding: 12px 14px; font: inherit; font-size: 15px; color: var(--text); outline: 2px solid transparent; transition: outline-color 0.15s var(--ease); } .confirm-input::placeholder { color: var(--text-faint); } .confirm-input:focus { outline-color: color-mix(in srgb, var(--accent) 50%, transparent); } .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .confirm-btn { border: none; border-radius: 999px; padding: 11px 20px; min-height: 44px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease), filter 0.15s var(--ease); } .confirm-btn-cancel { background: var(--bg-elev-2); color: var(--text); } .confirm-btn-cancel:hover { background: var(--bg-elev-3); } .confirm-btn-ok { background: var(--accent); color: var(--on-accent); } .confirm-btn-ok:hover { filter: brightness(1.08); } .confirm-btn-danger { background: var(--danger); color: var(--on-accent); } .confirm-btn-danger:hover { filter: brightness(1.08); } .settings-section { padding: 18px 20px; border-bottom: 1px solid var(--border); } .settings-section:last-child { border-bottom: none; } /* Admin panels: each section is its own Gemini card (elevated surface, rounded, gapped) instead of a divider-separated block, so sections read as distinct — matches the settings-view treatment but without its narrow width cap (admin holds wide tables/charts). */ .admin-body .settings-section { background: var(--bg-elev-1); border: none; border-radius: var(--radius-lg); padding: 28px 32px; margin: 0 0 20px; } .admin-body .settings-section:last-child { margin-bottom: 0; } @media (max-width: 640px) { .admin-body .settings-section { padding: 22px 20px; } } .settings-section h3 { margin: 0 0 12px; font-size: 14px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; } .settings-radios { display: flex; gap: 20px; margin-bottom: 14px; font-size: 14px; } /* Billing modal (M6) — reuses .settings-overlay/.settings-panel/.settings-section. */ .billing-body { max-height: 70vh; overflow-y: auto; } /* Buy-agent: let the panel itself own the scroll (90dvh) so the popup runs as tall as it can and content rarely needs scrolling. No nested scroll region. */ .buy-agent-body { max-height: none; overflow: visible; } .billing-note { padding: 24px 20px; color: var(--text-faint); font-size: 14px; } /* One-line heads-up under the buy CTA (on-chain): payment comes from your wallet. */ .buy-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; text-align: center; margin-top: 2px; } /* Trial terms at the reinvest checkout — amber, icon + text, matching the yield card's trial banner so the "unlock at first fee" deal reads the same at the point of decision. */ .buy-hint--trial { display: flex; align-items: center; gap: 8px; text-align: left; color: var(--text); margin-top: 8px; padding: 9px 11px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 12%, var(--bg-elev-1)); } .buy-hint--trial .material-symbols-rounded { flex: none; font-size: 18px; color: var(--warn); } /* Buy-agent titlebar: groups the "New agent" heading with the reinvest "Locked liquidity" badge so the funding source reads as a header-level fact, not fine print. */ .buy-title-group { display: flex; align-items: center; gap: 10px; min-width: 0; } .buy-locked-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; background: color-mix(in srgb, var(--grad-b) 18%, var(--bg-elev-1)); color: var(--text); } .buy-locked-badge .material-symbols-rounded { font-size: 14px; color: var(--grad-b); } /* Funding modal (self-custodial deposit) — same Gemini design language as the Wallet Receive modal: wallet-modal panel (24px radius, display-font title), wallet QR + address + white pill, with a guided amount card / network / withdrawal checklist. The 90dvh panel owns the scroll (wallet-modal-body has no inner clip). */ /* wallet-modal sets overflow:visible (its modals are short); the funding modal is taller, so restore the panel's own 90dvh scroll (3-class beats .wallet-modal). */ .settings-panel.wallet-modal.fund-panel { overflow-y: auto; } .fund-body { display: flex; flex-direction: column; gap: 14px; } .fund-body .wallet-qr, .fund-body .wallet-receive-addr, .fund-body .wallet-modal-intro, .fund-body .auth-btn { margin: 0; } .fund-card { background: var(--bg-elev-1); border-radius: var(--radius); padding: 16px 18px; } .fund-card-label { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); } .fund-amount { text-align: center; } .fund-amount-big { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 7px; } .fund-amount-sub { font-size: 13px; color: var(--text-faint); margin-top: 7px; } .fund-guide { display: flex; flex-direction: column; gap: 12px; } .fund-guide-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .fund-net-value { font-size: 14px; font-weight: 600; color: var(--text); } .fund-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); } .fund-warn { font-size: 12.5px; color: var(--warn); line-height: 1.5; text-align: center; } .fund-reassure { font-size: 12.5px; color: var(--text-faint); line-height: 1.55; text-align: center; } .fund-status { font-size: 13px; color: var(--text-faint); text-align: center; } .billing-balance { font-size: 14px; color: var(--text); margin-bottom: 12px; } .billing-balance.billing-warn { color: var(--warn); } .billing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .billing-buy { display: block; width: 100%; min-height: 44px; padding: 12px; background: var(--bg-elev-2); color: var(--text); border: none; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: center; transition: background 0.12s var(--ease); } .billing-buy:hover:not(:disabled) { background: var(--bg-elev-3); } .billing-buy:disabled { opacity: 0.5; cursor: default; } .billing-grid-1 { grid-template-columns: 1fr; } .settings-radios label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } /* ------------------------------------------------------------------ */ /* Buy-agent screen (Gemini design) */ /* ------------------------------------------------------------------ */ .buy-agent { display: flex; flex-direction: column; gap: 15px; } .buy-agent .settings-label { margin-top: 0; } /* Buy-agent modal (owner redesign v4): a single-column DROP STAGE at every width — hero deck, money block, configure, CTA, fine print — centered on one 430px axis. */ .settings-panel.buy-agent-panel { width: min(620px, 100%); } .buy-agent { position: relative; } /* Theatrical vignette behind the stage (static — motion lives in the mascot/rays). */ .buy-agent::before { content: ""; position: absolute; inset: -10px; pointer-events: none; background: radial-gradient(56% 32% at 50% 20%, rgba(80, 40, 255, 0.12), transparent 70%); } .buy-agent-grid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; } .buy-agent-card-col { display: flex; flex-direction: column; gap: 18px; width: 100%; align-items: center; } .buy-agent-form-col { display: flex; flex-direction: column; gap: 16px; width: min(430px, 100%); min-width: 0; } /* Pre-sheet loading veil: while the catalog/quote load, the overlay holds only a shimmering mystery card (aurora drift + a soft pulse around the Genie mark) — the New-agent sheet then appears fully formed instead of opening half-empty. */ .buy-loading-stage { display: grid; place-items: center; pointer-events: none; } .buy-card-skel { width: min(58vw, 216px); aspect-ratio: 5 / 7; border-radius: var(--radius-lg); display: grid; place-items: center; color: #fff; background: linear-gradient(125deg, var(--grad-a), var(--grad-b) 42%, var(--grad-c) 72%, var(--grad-a) 100%); background-size: 240% 240%; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6); animation: buy-card-aurora 4.5s ease-in-out infinite, buy-skel-pulse 1.6s ease-in-out infinite; } .buy-card-skel .material-symbols-rounded { font-size: 46px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4)); animation: buy-skel-spark 1.6s ease-in-out infinite; } @keyframes buy-skel-pulse { 0%, 100% { transform: scale(0.98); } 50% { transform: scale(1); } } @keyframes buy-skel-spark { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.18); opacity: 1; } } /* The aurora drift these cards animate with — referenced by the gacha mystery back too, which previously pointed at keyframes that were never defined. */ @keyframes buy-card-aurora { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } } @media (prefers-reduced-motion: reduce) { .buy-card-skel, .buy-card-skel .material-symbols-rounded { animation: none; } } /* Hero card — the Genie mascot (Three.js/WebGL orb) on a calm dark back (a portrait collectible card). The card lives on a "stage" so entrance (scale/fade) and the floating idle animation don't fight over `transform` (they're on different elements). */ /* No perspective/preserve-3d here: a 3D context forces the card + ghost fan into separate compositor layers, and WebKit updates those a frame late inside an overflow scroller — the deck visibly trailed the rest of the sheet during momentum scroll on iOS. Nothing uses 3D transforms (hover is filter-only). */ .buy-card-stage { width: 100%; max-width: 264px; margin: 0 auto; animation: buy-card-in 0.6s var(--ease) both; } .buy-card { position: relative; width: 100%; aspect-ratio: 5 / 7; max-height: 370px; margin: 0 auto; padding: 14px 14px 16px; border-radius: var(--radius-lg); border: 1.5px solid rgba(255, 255, 255, 0.14); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; /* Calm dark backdrop — the mascot's own rim glow is the color story here, so the card behind it stays quiet instead of competing for attention. */ background: radial-gradient(120% 90% at 50% 8%, #1d1e26, var(--bg-elev-1) 60%, #0c0c10 100%); animation: buy-card-float 6s ease-in-out infinite, buy-card-glow 4.5s ease-in-out infinite; transition: filter 0.25s var(--ease); } /* Static top gloss for depth. */ .buy-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 75% at 22% 0%, rgba(255, 255, 255, 0.12), transparent 55%); pointer-events: none; } /* Prismatic ray burst behind the mascot (the star-upgrade sheet's backdrop recipe: near-black card base + burst at half opacity). The WebGL2 canvas fills the host; the card's overflow:hidden clips it to the rounded corners. */ .buy-card-burst { position: absolute; inset: 0; pointer-events: none; /* Golden/purple ray field (owner call). A coherent two-hue burst (set in billing.ui.ts) reads far calmer than the old rainbow, so it can sit at a visible opacity while the mascot's rim glow stays the focal point. */ opacity: 0.42; } .buy-card-mascot { position: absolute; top: 8%; left: 0; width: 100%; height: 68%; display: block; cursor: pointer; } /* Head row: NAME (left) + star-tier pill (right), riding above the mascot canvas. */ .buy-card-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; } /* Foot: the price alone, centred, dressed as a swing tag. The drop-shadow lives HERE (not on the tag) because clip-path on the tag would clip its own box-shadow. */ .buy-card-foot { position: relative; z-index: 1; display: flex; justify-content: center; color: #fff; filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.45)); } .buy-card-name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Price tag: a light ticket with a pointed left end and a punched string-hole, so the number reads as THE PRICE — echoing the light CTA button — not as another data pill. */ .buy-card-price { position: relative; flex: 0 0 auto; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: #14151a; background: linear-gradient(180deg, #ffffff, #e8eaf1); padding: 6px 14px 6px 24px; border-radius: 3px 8px 8px 3px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); } .buy-card-price::before { content: ""; position: absolute; left: 11px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%); border-radius: 50%; background: rgba(20, 21, 26, 0.55); /* the punched hole */ } /* Star-tier badge in the head row — a frosted dark pill so the star reads on the bright card (the generic tier-colored .star-pill would clash with it). */ .buy-card-star { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(2px); } .buy-card-star-ic { font-size: 15px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; } /* Hover: brighten + saturate (not transform — that's owned by the float animation). */ .buy-card-stage:hover .buy-card { filter: brightness(1.08) saturate(1.12); } /* Light theme (owner call: the card must look BRIGHT, not a dark slab). The burst canvas is opaque (webgl2 alpha:false — black bg + rays), so invert+hue-rotate turns it into a white burst with the same ray hues; the card ground and head ink flip to match. */ :root[data-theme="light"] .buy-card { background: radial-gradient(120% 90% at 50% 8%, #ffffff, #eef0f8 60%, #e2e6f3 100%); border-color: rgba(25, 28, 48, 0.12); } :root[data-theme="light"] .buy-card-burst { filter: invert(1) hue-rotate(180deg); opacity: 0.45; } :root[data-theme="light"] .buy-card-head { color: #14151a; } :root[data-theme="light"] .buy-card-name { text-shadow: 0 1px 8px rgba(255, 255, 255, 0.5); } :root[data-theme="light"] .buy-card-reroll { background: rgba(20, 21, 26, 0.08); } @keyframes buy-card-in { from { opacity: 0; transform: translateY(16px) scale(0.93); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes buy-card-float { 0%, 100% { transform: translateY(0) rotate(-0.4deg); } 50% { transform: translateY(-8px) rotate(0.4deg); } } @keyframes buy-card-glow { 0%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 rgba(120, 90, 220, 0); } 50% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 34px rgba(120, 90, 220, 0.45); } } @media (prefers-reduced-motion: reduce) { .buy-card-stage, .buy-card { animation: none; } } /* Tier / supply progress */ .buy-tier { display: flex; flex-direction: column; gap: 8px; } .buy-tier-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; } .buy-tier-label { color: var(--text-dim); } .buy-tier-count { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .buy-progress { height: 8px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; } .buy-progress-fill { height: 100%; min-width: 6px; border-radius: 999px; background: var(--grad); transition: width 0.3s var(--ease); } .buy-tier-sub { font-size: 12px; color: var(--text-faint); } /* Earn pitch (billing.ui.ts yieldPreview). Gold hero number (count-up) + always-visible, color-coded value lines. Calm, Gemini-organized: a soft static gold wash, no animation, no horizontal scroll — the value reads at a glance. Cash-math detail sits in the "How payouts work" disclosure. */ .buy-earn--hype { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid color-mix(in srgb, #ffd166 26%, var(--border)); border-radius: var(--radius-lg, 18px); background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, #ffd166 10%, transparent), transparent 55%), var(--bg-elev-1); } .buy-earn-ic { font-size: 20px; flex: 0 0 auto; } .buy-earn-kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: color-mix(in srgb, #ffd166 60%, var(--text)); } .buy-earn-kicker .buy-earn-ic { font-size: 18px; color: #ffd166; } .buy-earn-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); } .buy-earn-bignum { display: flex; align-items: baseline; gap: 10px; } .buy-earn-bignum-val { font-size: 38px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .buy-earn-bignum-unit { display: flex; flex-direction: column; line-height: 1.25; } .buy-earn-bignum-unit-day { font-size: 14px; font-weight: 600; color: var(--text-dim); } .buy-earn-bignum-unit-mo { font-size: 12px; color: var(--text-faint); } /* Always-visible color-coded value lines (no scroll, nothing hidden). */ .buy-earn-values { display: flex; flex-direction: column; gap: 10px; } .buy-earn-v { display: flex; align-items: flex-start; gap: 11px; } .buy-earn-v-ic { font-size: 22px; flex: 0 0 auto; margin-top: 1px; } .buy-earn-v-main { display: flex; flex-direction: column; gap: 1px; } .buy-earn-v-title { font-size: 14px; font-weight: 700; color: var(--text); } .buy-earn-v-sub { font-size: 12px; line-height: 1.35; color: var(--text-faint); } .buy-earn-rows { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; } .buy-earn-row { display: flex; align-items: center; gap: 10px; font-size: 13px; } .buy-earn-row .buy-earn-ic { font-size: 18px; color: var(--text-faint); } .buy-earn-row-label { color: var(--text-dim); flex: 1 1 auto; } .buy-earn-row-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* Fields */ .buy-field { display: flex; flex-direction: column; gap: 7px; } /* Coupon: input + Apply button, with a validity message below. */ .buy-coupon-row { display: flex; gap: 8px; align-items: stretch; } .buy-coupon-row .settings-input { flex: 1 1 auto; } .buy-coupon-apply { flex: 0 0 auto; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease), opacity 0.15s var(--ease); } .buy-coupon-apply:hover:not(:disabled) { background: var(--bg-elev-3); } .buy-coupon-apply:disabled { opacity: 0.55; cursor: default; } .buy-coupon-msg { font-size: 12.5px; line-height: 1.4; text-align: center; margin-top: 6px; } .buy-coupon-msg.is-ok { color: var(--ok); } .buy-coupon-msg.is-err { color: var(--warn); } /* Original price struck through next to the discounted one on the hero card. */ .buy-card-price-was { text-decoration: line-through; opacity: 0.6; font-weight: 500; margin-right: 7px; } /* Quantity: quick chips + numeric stepper */ .buy-qty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .buy-qty-chips { display: flex; gap: 7px; } .buy-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text-dim); font: inherit; font-size: 13.5px; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .buy-chip:hover { border-color: var(--accent); } .buy-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .buy-chip.is-danger { color: var(--err); } .buy-chip.is-danger:hover { border-color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); } .buy-stepper { display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev-1); } .buy-step-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.12s; } .buy-step-btn:hover:not(:disabled) { background: var(--bg-elev-2); } .buy-step-btn:disabled { opacity: 0.35; cursor: default; } .buy-qty-input { width: 44px; text-align: center; background: transparent; border: none; outline: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; -moz-appearance: textfield; } .buy-qty-input::-webkit-outer-spin-button, .buy-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Implicit consent (owner call): a quiet caption under the CTA; it shakes on press as the "you just agreed to this" beat. */ /* Consent line inside the gradient CTA — quiet white, normal weight against the 800-weight price row it inherits from the button. */ .buy-consent { display: block; text-align: center; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.78); } .buy-cta .buy-terms-link { cursor: pointer; } .buy-consent.is-shake { animation: buy-consent-shake 0.4s ease; } @keyframes buy-consent-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } .buy-terms-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .buy-terms-link:hover { color: var(--text); } /* CTA — always armed (implicit consent), brand gradient use #3, shimmer sweep. Live price leads; the struck MSRP total + −N% chip trail on the right. */ .buy-cta-group { display: flex; flex-direction: column; gap: 8px; } .buy-cta { position: relative; overflow: hidden; width: 100%; padding: 13px 22px 10px; border: none; border-radius: 999px; background: linear-gradient(100deg, #0036ff, #7b2bff 55%, #c600ff); color: #fff; font-size: 16.5px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 14px 40px rgba(90, 30, 230, 0.4); } .buy-cta-main { display: flex; align-items: center; justify-content: center; gap: 10px; } .buy-cta:hover:not(:disabled) { /* .billing-buy:hover swaps in a flat elev-3 at higher specificity — re-pin the gradient. */ background: linear-gradient(100deg, #0036ff, #7b2bff 55%, #c600ff); filter: brightness(1.07); } .buy-cta:disabled { opacity: 0.7; } .buy-cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; left: -90px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: buy-cta-sweep 2.8s ease-in-out infinite; } @keyframes buy-cta-sweep { 0%, 55% { left: -90px; } 85%, 100% { left: 115%; } } .buy-cta-was { text-decoration: line-through; opacity: 0.55; font-weight: 600; font-size: 0.78em; } .buy-cta-off { background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 3px 10px; font-size: 0.68em; font-weight: 800; } @media (prefers-reduced-motion: reduce) { .buy-cta::after { animation: none; display: none; } } .settings-fields { display: flex; flex-direction: column; gap: 7px; } .settings-label { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; } .settings-input, .settings-textarea { width: 100%; background: var(--bg-elev-1); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; font-size: 14px; outline: none; } .settings-input:focus, .settings-textarea:focus { border-color: var(--accent); } .settings-textarea { resize: vertical; font-family: var(--font-mono); font-size: 12.5px; } /* Warn-only cash-safety notice under the settings Save button (the save still succeeds). */ .settings-cash-warning { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--banner-warn-bg); color: var(--banner-warn-fg); border: 1px solid var(--banner-warn-bd); font-size: 12.5px; line-height: 1.5; display: grid; gap: 4px; } .settings-cash-warning strong { font-weight: 700; } /* ── Admin → Danger zone: live-money master switches (yield & payments) ─────── */ /* Red-accented nav item so the destructive panel reads as set-apart at a glance. */ .admin-nav-item.is-danger .admin-nav-icon { color: var(--danger-text); } .admin-nav-item.is-danger.is-active .admin-nav-label, .admin-nav-item.is-danger.is-active .admin-nav-icon { color: var(--danger-text); } .admin-danger-banner { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; padding: 16px 22px; border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); font-size: 13px; line-height: 1.5; } .admin-danger-banner .material-symbols-rounded { font-size: 20px; flex: none; } .admin-danger-banner strong { font-weight: 700; } .danger-toggle { border: 1px solid var(--danger-border); background: color-mix(in srgb, var(--danger-bg) 55%, var(--bg-elev-1)); border-radius: var(--radius-lg); padding: 24px 28px; display: grid; gap: 12px; } .danger-toggle + .danger-toggle { margin-top: 18px; } @media (max-width: 640px) { .danger-toggle { padding: 18px 20px; } } .danger-toggle-title { font-size: 15px; font-weight: 700; color: var(--text); } .danger-toggle-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-top: 3px; } .danger-seg { display: flex; gap: 8px; flex-wrap: wrap; } .danger-opt { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-md); cursor: pointer; background: var(--bg-elev-1); border: none; color: var(--text-dim); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: inset 0 0 0 1.5px transparent; transition: color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease); } .danger-opt:hover { color: var(--text); background: var(--bg-elev-2); } .danger-opt:disabled { opacity: 0.55; cursor: default; } /* Selected state: neutral for Off, amber for partial (admins only), red for fully Live. */ .danger-opt.is-active { color: var(--text); background: var(--bg-elev-2); box-shadow: inset 0 0 0 1.5px var(--border); } .danger-opt.is-active.is-partial { color: var(--banner-warn-fg); background: var(--banner-warn-bg); box-shadow: inset 0 0 0 1.5px var(--banner-warn-bd); } .danger-opt.is-active.is-live { color: #fff; background: var(--danger); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 60%, transparent); } .danger-status { font-size: 12.5px; color: var(--text-dim); min-height: 16px; } .danger-status.is-ok { color: var(--ok); } .danger-status.is-warn { color: var(--banner-warn-fg); } .danger-status.is-err { color: var(--danger-text); } .settings-actions { display: flex; gap: 10px; margin-top: 16px; } .settings-inline-row { display: flex; gap: 8px; } .settings-inline-row .settings-input { flex: 1 1 auto; } .settings-btn { background: var(--bg-elev-2); color: var(--text); border: none; border-radius: 999px; padding: 10px 20px; font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; white-space: nowrap; transition: background 0.15s var(--ease); } .settings-btn:hover { background: var(--bg-elev-3); } .settings-btn.primary { background: var(--grad); color: var(--on-accent); border: none; font-weight: 650; } .settings-btn.primary:hover { filter: brightness(1.08); } .settings-status { font-size: 13px; margin-top: 10px; min-height: 18px; color: var(--text-dim); } .settings-status.ok { color: var(--ok); } .settings-status.err { color: var(--err); } /* Language picker (International settings) — selectable cards, one per language. */ .settings-lang-options { display: flex; flex-direction: column; gap: 8px; max-width: 420px; } .settings-lang-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev-1); color: var(--text); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .settings-lang-option:hover { background: var(--bg-elev-2); } .settings-lang-option.is-active { border-color: var(--accent); background: var(--bg-elev-2); } .settings-lang-name { flex: 1 1 auto; font-weight: 500; } .settings-lang-check { font-size: 20px; color: var(--accent, #6b9fff); opacity: 0; } .settings-lang-option.is-active .settings-lang-check { opacity: 1; } .skill-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .skill-empty { color: var(--text-faint); font-size: 13px; } .skill-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius-sm); } .skill-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .skill-name { font-size: 13.5px; font-weight: 600; } .skill-desc { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .skill-del { flex: 0 0 auto; background: transparent; color: var(--danger-text); border: 1px solid var(--danger-border); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 14px; font: inherit; font-size: 12.5px; cursor: pointer; } .skill-del:hover { background: var(--danger-bg); } /* Neutral counterpart to .skill-del for non-destructive row actions (e.g. Edit). */ .skill-edit { flex: 0 0 auto; background: var(--bg-elev-2); color: var(--text); border: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 14px; font: inherit; font-size: 12.5px; cursor: pointer; } .skill-edit:hover { background: var(--bg-elev-3); } /* ---------------- self-improvement section ---------------- */ .settings-hint { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); } /* Composer-shortcut editor (admin → Home screen): one row per pill — auto emoji, name input, prompt textarea, remove. */ .chip-editor-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .chip-editor-row { display: flex; align-items: flex-start; gap: 10px; } .chip-editor-emoji { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; line-height: 1; background: var(--bg-elev-1); border-radius: 12px; } .chip-editor-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .chip-editor-prompt { min-height: 40px; resize: vertical; } .chip-editor-remove { flex: 0 0 auto; width: 32px; height: 40px; border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 15px; border-radius: 10px; } .chip-editor-remove:hover { background: var(--bg-elev-1); color: var(--text); } .chip-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; } .chip-editor-add { background: var(--bg-elev-1); color: var(--text); } /* Master + per-pass toggles share this row layout: checkbox + label/hint stack. */ .settings-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; } .settings-toggle input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; } .settings-toggle input[type="checkbox"]:disabled { cursor: default; } .settings-toggle-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .settings-toggle-label { font-size: 14px; color: var(--text); } .settings-toggle-hint { font-size: 12px; color: var(--text-faint); } /* Per-pass toggles are indented under the master switch and dim when it's off. */ .settings-subtoggles { display: flex; flex-direction: column; margin-left: 26px; padding-left: 12px; border-left: 1px solid var(--border); } .settings-subtoggles.disabled { opacity: 0.45; pointer-events: none; } .improve-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .improve-empty { color: var(--text-faint); font-size: 13px; font-style: italic; } .improve-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius-sm); } .improve-item.reverted { opacity: 0.55; } .improve-item.reverted .improve-summary { text-decoration: line-through; } .improve-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .improve-summary { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .improve-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .improve-time { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .improve-tags { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .improve-phase { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-elev-2); } /* Phase tags are mono tonal chips — distinguished by their text label, not color (reflect/dreaming/curator inherit the base; manual reads quieter). */ .improve-phase.phase-manual { color: var(--text-faint); } .improve-kinds { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .improve-revert { flex: 0 0 auto; background: transparent; color: var(--danger-text); border: 1px solid var(--danger-border); border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12.5px; cursor: pointer; transition: background 0.15s; } .improve-revert:hover { background: var(--danger-bg); } .improve-revert:disabled { opacity: 0.5; cursor: default; } /* Pending-approval card (Material/Gemini): content stacked, then one aligned action footer — a neutral outline Reject (dismissive, left) and a filled primary Approve (affirmative, right), both equal-height pill icon+label buttons. Replaces the old mismatched plain-text Approve + red outline Reject. */ .approval-card { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 13px 14px; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius-md); } .approval-actions { display: flex; justify-content: flex-end; gap: 8px; } .approval-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; padding: 0 15px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s var(--ease), filter 0.15s var(--ease), color 0.15s var(--ease), transform 0.1s var(--ease); } .approval-btn .material-symbols-rounded { font-size: 17px; } .approval-btn:disabled { opacity: 0.5; cursor: default; } .approval-btn--reject { background: transparent; color: var(--text-dim); border-color: var(--border); } .approval-btn--reject:not(:disabled):hover { background: var(--bg-elev-2); color: var(--text); } .approval-btn--approve { background: var(--accent); color: var(--on-accent); } .approval-btn--approve:not(:disabled):hover { filter: brightness(1.06); } .approval-btn:not(:disabled):active { transform: scale(0.97); } .improve-reverted-tag { flex: 0 0 auto; font-size: 11px; font-style: italic; color: var(--text-faint); } /* ---------------- shared toast (toast.ui.ts) ---------------- */ /* Above sheets/modals/confirm dialogs so an action taken inside an overlay (e.g. the admin Details sheet) still surfaces its confirmation. Mirrors .sched-toast. */ .genie-toast { /* Centered via inset-0 + auto margins, NOT left:50%: a fixed box at left:50% shrink-to-fits into the space right of center (HALF the viewport), so long messages wrapped into a skinny multi-line blob on phones. fit-content sizes to the text; max-width caps it; the 16px insets are the phone edge gutter. */ position: fixed; left: 16px; right: 16px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; width: fit-content; max-width: 560px; transform: translateY(6px); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--bg-elev-3); color: var(--text); font-size: 13.5px; line-height: 1.35; opacity: 0; pointer-events: none; z-index: 20000; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32); transition: opacity var(--ease) 160ms, transform var(--ease) 160ms; } .genie-toast.is-shown { opacity: 1; transform: translateY(0); } .genie-toast.is-error { background: var(--danger-bg); color: var(--danger); } .genie-toast-icon { font-size: 18px; color: var(--ok); } .genie-toast.is-error .genie-toast-icon { color: var(--danger); } /* ---------------- toast ---------------- */ /* (legacy .toast removed — main.ts now uses the shared .genie-toast snackbar) */ /* ---------------- slide-up options modal (ui_request) ---------------- */ .modal-overlay { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(0, 0, 0, 0); z-index: 300; transition: background 0.25s ease; } .modal-overlay.show { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); } .modal-sheet { width: 100%; max-width: 860px; max-height: 80dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--bg-elev); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .modal-overlay.show .modal-sheet { transform: translateY(0); } .modal-question { font-size: 15px; color: var(--text); } .modal-question p:first-child { margin-top: 0; } /* The facts under the question. The sheet covers the chat, so this is what the user decides on — quieter than the question, scrolls if long, never taller than a third of the screen so the options stay reachable. */ .modal-context { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); max-height: 32vh; overflow-y: auto; } .modal-context p:first-child { margin-top: 0; } .modal-context p:last-child { margin-bottom: 0; } .modal-options { display: flex; flex-direction: column; gap: 8px; } .modal-option { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--bg-elev-1); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font: inherit; font-size: 14.5px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .modal-option:hover, .modal-option.selected { background: var(--bg-elev-2); border-color: var(--accent); } .modal-option:focus-visible { outline: none; border-color: var(--accent); } .modal-option-num { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .modal-option.selected .modal-option-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .modal-option-num:empty { display: none; } .modal-option-text { flex: 1 1 auto; min-width: 0; } .modal-input { width: 100%; resize: none; max-height: 160px; background: var(--bg-elev-1); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; font: inherit; font-size: 14.5px; line-height: 1.45; outline: none; } .modal-input:focus { border-color: var(--accent); } .modal-input::placeholder { color: var(--text-faint); } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } .modal-btn { background: var(--bg-elev-2); color: var(--text); border: none; border-radius: 999px; padding: 10px 20px; font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; transition: background 0.15s var(--ease); } .modal-btn:hover { background: var(--bg-elev-3); } .modal-btn.primary { background: var(--grad); color: var(--on-accent); border: none; font-weight: 650; } .modal-btn.primary:hover { filter: brightness(1.08); } @media (prefers-reduced-motion: reduce) { .modal-sheet { transition: none; } .modal-overlay { transition: none; } } /* ---------------- responsive ---------------- */ @media (max-width: 860px) { .model-indicator { max-width: 38vw; } } @media (max-width: 520px) { /* --- Phone home: the WHOLE column scrolls as one (mascot → bubble → earnings scroll away as you browse), and only the Recent row pins — right beneath the floating hamburger — so task browsing stays anchored (Gemini's mobile home). Shared gutter so the earnings card and the task list are the same width and centered, and their content aligns on a single left edge (gutter + 16px). --- */ /* The single scroll container is .home-center now (not just the list), so the hero scrolls with everything else. .tasks-view is just the clipping frame; the fixed composer + top scrim escape it via position:fixed. The gutter var is scoped here so every descendant (card, Recent bar, list) shares it. */ .tasks-view { overflow: hidden; } .home-center { --home-gutter: 16px; padding: 0; overflow-y: auto; /* Never scroll sideways — the assist-chip row scrolls within its own box, so the page itself must not pick up a stray horizontal scroll. */ overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Opaque top strip: as the hero and task rows scroll up they dissolve behind the floating hamburger, above the pinned Recent bar. Sits under the hamburger (z 40) but over the scrolling content. */ .home-center::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top) + 52px); background: var(--bg); z-index: 20; pointer-events: none; } /* The hero is now just the top of the scroll — no min-height, no pin. Mascot rides high; its transparent canvas headroom tucks under the top scrim. */ .home-header { min-height: 0; padding-top: calc(env(safe-area-inset-top) + 4.5vh); z-index: 2; } /* Hamburger floats top-left over the scrim. */ .nav-fab { top: calc(env(safe-area-inset-top) + 4px); } /* Even vertical rhythm below the ball: bubble → earnings → Recent step 24 / 24, and the ball-to-bubble gap is tightened to ~16 by pulling the bubble up through more of the canvas' below-ball headroom. No slack band, so a third task row clears the fold. */ .home-mascot-canvas { width: clamp(150px, 37vh, 330px); height: clamp(150px, 37vh, 330px); } .home-mascot-ph { width: clamp(150px, 37vh, 330px); height: clamp(150px, 37vh, 330px); } .home-mascot-slot { margin: 0 0 clamp(-78px, -6.5vh, -26px); } .home-greeting { margin: 0 auto 24px; padding: 11px 18px; font-size: 15.5px; line-height: 1.35; } /* Earnings card and task list share the gutter → same width, centered. */ .home-earn-slot { width: auto; margin: 0 var(--home-gutter) 24px; } .home-earn { padding: 14px 16px; } /* Recent row: pinned beneath the top scrim as the hero scrolls away. Solid fill with a short fade below so task rows dissolve as they pass under it. Its label lines up with the task titles (gutter + 16); its search icon with the kebabs. */ .recent-bar { position: sticky; top: calc(env(safe-area-inset-top) + 52px); z-index: 15; margin: 0; padding: 6px var(--home-gutter) 8px calc(var(--home-gutter) + 16px); background: var(--bg); } .recent-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(to bottom, var(--bg), transparent); pointer-events: none; } /* ≥44px hit area for the sort dropdown. */ .recent-sort { min-height: 44px; } /* The list flows in the shared scroll (no inner scroll of its own) and clears the docked composer at the bottom (composer + assist chips + safe area). */ .tasks-list { flex: 0 0 auto; overflow: visible; padding: 0 var(--home-gutter); padding-bottom: calc(150px + env(safe-area-inset-bottom)); gap: 4px; } /* Title aligns with the earnings label (gutter + 16); kebab hugs the right. */ .task-row { padding: 16px 6px 16px 16px; } .task-title { font-size: 16px; } .task-subtitle { font-size: 13.5px; } /* Always-visible on touch (see the hover:none rule); ≥44px for the kebab. */ .task-time { font-size: 12.5px; } .task-kebab { width: 44px; height: 44px; font-size: 20px; } /* Docked composer, thumb-zone: anchored to the viewport bottom with a scrim so list rows dissolve beneath it. The assist-chip row rides just above the pill. */ .home-composer-wrap { position: fixed; left: 12px; right: 12px; bottom: 0; width: auto; margin: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 72%, transparent); } .home-composer { padding: 18px 18px 18px 22px; border-radius: var(--radius-hero); gap: 14px; } .home-composer-plus { font-size: 26px; } .home-input { font-size: 16.5px; line-height: 1.55; } /* Search + drawer/menu rows: ≥44–48px hit areas. */ .recent-search-wrap { height: 44px; } .recent-search-wrap.is-collapsed, .recent-search-wrap.is-collapsed .recent-search-ic { width: 44px; height: 44px; } .nav-drawer-item { min-height: 52px; } .nav-menu-item { min-height: 44px; } .brand-name { display: none; } /* Tighter side margins on a phone so the chat + composer use the full width (matches the home composer's 12px inset). */ .transcript { gap: 14px; padding-left: 12px; padding-right: 12px; } .composer-wrap { padding-left: 12px; padding-right: 12px; } .msg { gap: 9px; } .msg-avatar { width: 36px; height: 36px; font-size: 17.5px; } .surface-card { margin-left: 45px; } .cmd-palette { left: 8px; right: 8px; max-height: 50dvh; } .cmd-desc { font-size: 12px; } } /* ------------------------------------------------------------------ */ /* Auth overlay (login / invite gate) */ /* ------------------------------------------------------------------ */ .auth-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, var(--bg-elev) 0%, var(--bg) 60%); } .auth-card { position: relative; width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px 24px; box-shadow: var(--shadow-lg); } .auth-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 50%; background: transparent; color: var(--text-faint); cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .auth-close:hover { background: var(--bg-elev-2); color: var(--text); } .auth-close .material-symbols-rounded { font-size: 20px; } .auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } .auth-mark { font-size: 30px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; /* The first impression — the one sanctioned use of the signature blue→purple→pink gradient on the brand mark (mirrors the profile avatar hero). */ background: linear-gradient(135deg, var(--grad-a), var(--grad-b) 55%, var(--grad-c)); -webkit-background-clip: text; background-clip: text; color: transparent; } .auth-brand-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.2px; } .auth-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; margin-bottom: 6px; } .auth-sub { color: var(--text-dim); font-size: 13.5px; line-height: 1.45; margin-bottom: 18px; } /* Loading / wallet-finalize state: indeterminate spinner + label (the wallet setup can take several seconds — never a static line that reads as hung). */ .auth-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0 6px; color: var(--text-dim); font-size: 13.5px; text-align: center; } .auth-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bg-elev-3); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce) { .auth-spinner { animation-duration: 2.4s; } } .auth-body { display: flex; flex-direction: column; gap: 10px; } .auth-input { width: 100%; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 15px; min-height: 44px; padding: 13px; outline: none; } .auth-input:focus { border-color: var(--accent); } .auth-btn { width: 100%; min-height: 44px; background: var(--grad); color: var(--on-accent); border: none; border-radius: 999px; font-size: 14.5px; font-weight: 600; padding: 13px; cursor: pointer; transition: filter 0.15s ease, opacity 0.15s ease; } .auth-btn:hover { filter: brightness(1.08); } .auth-btn:disabled { opacity: 0.55; cursor: default; } /* Secondary / ghost button (e.g. "Skip for now" in the delegation step). */ .auth-btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); } .auth-btn-ghost:hover { filter: none; opacity: 1; color: var(--text); border-color: var(--border-strong); } /* Send success summary (wallet-send island) — our own post-send breakdown, replacing Privy's gas-only "Total". */ .send-summary { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev-1); } .send-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; } .send-summary-label { color: var(--text-dim); } .send-summary-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } /* The Total row sits below a divider and reads a touch larger — it's the headline number. */ .send-summary-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 15px; } .send-summary-total .send-summary-label { color: var(--text); font-weight: 600; } .send-summary-link { display: inline-block; margin-bottom: 16px; color: var(--accent); font-size: 13.5px; text-decoration: none; } .send-summary-link:hover { text-decoration: underline; } /* Info modal (profile / wallet / team) — reuses .auth-overlay / .auth-card. */ .info-card { min-width: 320px; } .info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .info-row-label { color: var(--text-dim); flex: 0 0 auto; } .info-row-value { color: var(--text); text-align: right; word-break: break-all; font-family: var(--font-mono); font-size: 12.5px; } .info-card .auth-sub { margin-top: 14px; margin-bottom: 16px; } .auth-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-dim); font-size: 12.5px; padding: 4px; cursor: pointer; align-self: flex-start; } .auth-link-icon { font-size: 16px; } .auth-link:hover { color: var(--text); } .auth-link:disabled { opacity: 0.5; cursor: default; } .auth-link:disabled:hover { color: var(--text-dim); } .auth-err { margin-top: 14px; color: var(--err); font-size: 12.5px; line-height: 1.4; } /* Agent picker (reuses .auth-overlay / .auth-card) */ .agent-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .agent-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 13px 15px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .agent-row:hover { border-color: var(--accent); background: var(--bg-elev-2); } .agent-name { font-size: 14.5px; font-weight: 600; } .agent-meta { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; } /* ── Schedules screen (standalone view, not a modal) ──────────────────────── Lives in #schedules-view inside .layout; shown when .layout.schedules-active replaces the home (tasks) view. Reuses .settings-btn/.settings-input/.settings-*. */ .schedules-view { display: none; width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .layout.schedules-active .tasks-view, .layout.brain-active .tasks-view, .layout.skills-active .tasks-view, .layout.earn-active .tasks-view, .layout.earnings-active .tasks-view, .layout.store-active .tasks-view, .layout.wallet-active .tasks-view, .layout.profile-active .tasks-view, .layout.team-active .tasks-view, .layout.settings-active .tasks-view, .layout.admin-active .tasks-view, .layout.partner-active .tasks-view { display: none; } .layout.schedules-active #schedules-view { display: block; } .layout.brain-active #brain-view { display: block; } .layout.skills-active #skills-view { display: block; } .layout.earn-active #earn-view { display: block; } /* Earn screen: on desktop it scrolls wholesale like the other screens (full headline + subtitle at the top). On mobile (≤720) it switches to a pinned header + inner scroll (see the earnings media block below). */ .layout.earnings-active #earnings-view { display: block; } .layout.store-active #store-view { display: block; } .layout.wallet-active #wallet-view { display: block; } .layout.profile-active #profile-view { display: block; } .layout.team-active #team-view { display: block; } .layout.settings-active #settings-view { display: block; } .layout.admin-active #admin-view { display: block; } .layout.partner-active #partner-view { display: block; } /* Partner screen (Agent Sales System). Reuses .sched-* / .earn-tile primitives. */ .partner-tier { margin: 8px 0 4px; padding: 18px 20px; border: none; border-radius: var(--radius); background: var(--bg-elev-1); } .partner-tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .partner-tier-name { font-size: 1.15rem; font-weight: 650; color: var(--text); } .partner-tier-rates { font-size: 0.85rem; color: var(--text-dim); } .partner-tier-next { margin-top: 8px; font-size: 0.85rem; color: var(--text-faint); } .partner-list { display: flex; flex-direction: column; gap: 2px; } .partner-section-label { margin: 16px 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .partner-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); transition: background 0.12s var(--ease); } .partner-row:hover { background: var(--bg-elev-1); } .partner-row-main { flex: 1 1 auto; font-weight: 500; color: var(--text); } .partner-row-sub { color: var(--text-dim); font-size: 0.85rem; } .partner-row-date { color: var(--text-faint); font-size: 0.8rem; min-width: 90px; text-align: right; } .partner-amount { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 110px; text-align: right; color: var(--text); } .partner-amount.is-pos { color: var(--ok); } .partner-amount.is-neg { color: var(--text-dim); } /* Admin screen: categorized sidebar + content panels. */ .admin-layout { display: flex; gap: 28px; max-width: 1100px; margin: 0 auto; padding: 56px 24px 96px; align-items: flex-start; } .admin-nav { position: sticky; top: 56px; flex: 0 0 220px; display: flex; flex-direction: column; gap: 2px; } .admin-nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-radius: var(--radius-tile); background: transparent; color: var(--text-dim); font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .admin-nav-item { border-radius: 999px; } .admin-nav-item:hover { background: var(--bg-elev-1); color: var(--text); } .admin-nav-item.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 600; } .admin-nav-item.is-active .admin-nav-icon { color: var(--accent); } .admin-nav-icon { font-size: 20px; } .admin-nav-label { flex: 1 1 auto; } /* Unread-improvements badge on a nav tab (Self-improvement). Accent pill with a count; sits at the row's trailing edge on desktop, floats on the icon on mobile. */ .admin-nav-badge { flex: none; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1; } /* Transparent wrapper on desktop (items stay direct flex children of the vertical sidebar); becomes the horizontal scroller only in the mobile bottom-bar rule. */ .admin-nav-scroll { display: contents; } .admin-content { flex: 1 1 auto; min-width: 0; } /* Settings/Admin panels reuse .billing-body for spacing but are NOT a modal — drop the modal's `max-height: 70vh; overflow-y: auto` so the panel grows with its content and the page (#…-view) scrolls naturally, instead of clipping the list with dead space below. */ .admin-body { max-height: none; overflow: visible; } .admin-panel-head { margin-bottom: 18px; } .admin-panel-head .sched-headline { margin: 0 0 4px; } .admin-panel-head .sched-subtitle { margin: 0; } @media (max-width: 720px) { /* The sidebar becomes a bottom-anchored tab bar (icon + name per tab). It fills the width when there are few items (Settings, 3) and scrolls horizontally when there are many (Admin, 12). Content gets bottom padding so it isn't hidden behind the fixed bar. */ /* Column layout: stretch content to full width (the base align-items:flex-start would otherwise shrink each panel to its content width). */ .admin-layout { flex-direction: column; padding: 0 16px 88px; align-items: stretch; } .admin-nav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50; flex-basis: auto; width: 100%; padding: 6px 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); /* Read as a distinct elevated bar (the old --surface-0 fallback was nearly the page bg, so the bar vanished and content looked hard-"cut off" against it). */ background: var(--bg-elev); border-top: 1px solid var(--border); /* The inner .admin-nav-scroll does the horizontal scrolling; the nav itself must NOT clip, so its ::before fade can paint above the bar. */ overflow: visible; } /* Fade above the bar so scrolling content dissolves into it instead of slicing flat at the top edge. Absolute + bottom:100% pins it directly above the fixed bar — no magic numbers — and the gradient ends on the bar's own color for a seamless join. */ .admin-nav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: linear-gradient(to top, var(--bg-elev), transparent); pointer-events: none; } /* Right-edge fade hinting more tabs to scroll to — only when the bar actually overflows (the JS toggles .is-scrollable via a ResizeObserver), so the 3-tab Settings bar doesn't get a misleading fade. Fixes "couldn't find Pricing/Grants" (admin tabs 7-12 were scrolled off with no affordance). */ .admin-nav.is-scrollable::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 24px; background: linear-gradient(to right, transparent, var(--bg-elev)); pointer-events: none; z-index: 1; } .admin-nav-scroll { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; width: 100%; overflow-x: auto; scrollbar-width: none; /* hide the scrollbar; the bar still scrolls by touch */ } .admin-nav-scroll::-webkit-scrollbar { display: none; } /* Gemini / Material-3 nav bar: the active indicator is a pill behind the ICON (not the whole tab — that read as a wide, short slab with dead space), with the label below. Tabs are evenly distributed at a comfortable height. */ /* flex: 1 0 auto — grow to fill the bar when there are few tabs (Settings, 3), but never shrink below a comfortable min-width when there are many (Admin, 12), so the bar scrolls horizontally instead of cramming every tab to ~38px. */ .admin-nav-item { flex: 1 0 auto; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; width: auto; min-width: 64px; padding: 8px 6px 7px; border-radius: 0; background: transparent; text-align: center; font-size: 0.72rem; line-height: 1.15; } .admin-nav-item:hover { background: transparent; } .admin-nav-item.is-active { background: transparent; color: var(--text); font-weight: 400; } .admin-nav-icon { display: grid; place-items: center; width: 48px; height: 30px; border-radius: 999px; font-size: 21px; color: var(--text-dim); transition: background 0.15s var(--ease), color 0.15s var(--ease); } .admin-nav-item.is-active .admin-nav-icon { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); } .admin-nav-label { display: block; flex: 0 0 auto; white-space: nowrap; color: var(--text-faint); } .admin-nav-item.is-active .admin-nav-label { color: var(--text); font-weight: 600; } } /* Mobile fit for the rest of the account & settings screens (the nav above is handled separately). Without these, label/value rows, the admin data tables, the partner dashboard, and the billing grid overflow or crush at ~390px. */ @media (max-width: 720px) { /* Label+value rows (Profile, Team, Admin Sales, Connected agents): the label was flex:0 0 auto and the row never wrapped, so a long label or trailing action buttons pushed past the edge. Let it wrap and let the label shrink. */ .info-row { flex-wrap: wrap; } .info-row-label { flex: 1 1 auto; min-width: 0; } .admin-row-actions, .profile-wallet-actions { margin-left: auto; } /* Admin data tables: give the table a real min-width so the .dt-wrap's overflow-x:auto actually scrolls horizontally instead of crushing 6 columns into ~358px. Tighten cell padding to claw back a little room. */ .dt-table { min-width: 620px; } .dt-table th, .dt-table td { padding: 10px 12px; } /* Billing modal: stack the 2-up credit/pass purchase buttons to a single column so "50 USDT → 100,000"-style labels don't wrap raggedly at ~150px. */ .billing-grid { grid-template-columns: 1fr; } /* Partner / Sales (and Earn) dashboard: 4 stat tiles wrap to 2×2 instead of being squeezed to ~76px each; ledger rows drop their fixed date/amount min-widths so the main column keeps room (and can wrap). */ .earn-dash { flex-wrap: wrap; } .earn-tile { flex: 1 1 calc(50% - 6px); } .partner-row { flex-wrap: wrap; } .partner-row-main { min-width: 0; } .partner-row-date, .partner-amount { min-width: 0; } } /* Mobile nav-bar headers: across every screen the headline becomes a left-aligned title in a ~56px top bar sitting just to the right of the floating hamburger (.nav-fab, fixed top:12, 48px, z-40), vertically centered with it; the subtitle is hidden and content scrolls UNDER the pinned bar. The bar stays under the hamburger on the z-axis (z-30) so the menu stays tappable, and paints the page bg so scrolling content disappears cleanly. Covers .sched-intro (Profile / Team / Partner / Schedules / Skills / Store / XP) and .admin-panel-head (Admin / Settings). Earnings (.earnings-topbar) and Tasks (.home-greeting) already do this themselves. */ @media (max-width: 720px) { /* Center the hamburger in the 56px bar so it lines up with the title. */ .nav-fab { top: calc(env(safe-area-inset-top) + 4px); } /* Kill the desktop top padding on mobile (.layout > … specificity beats the base `.sched-center { padding: 72px … }` defined later in the file). */ .layout .sched-center { padding-top: 0; } .admin-panel-head, .sched-intro { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0 68px; /* left pad clears the hamburger */ background: var(--bg); } /* Break each header out of its container's side padding so the bar spans full width and the title lands ~60px from the viewport edge (tight to the hamburger), matching the Earnings/Tasks bars. */ .sched-intro { margin: 0 -24px 8px; } /* .sched-center has 24px side padding */ .admin-panel-head { margin: 0 -16px 8px; } /* .admin-layout has 16px side padding */ .admin-panel-head .sched-headline, .sched-intro .sched-headline { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.2px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-panel-head .sched-subtitle, .sched-intro .sched-subtitle { display: none; } } /* Breathing room above an action button that follows a field group, so the Save/Grant/Create button never sits flush against the input above it. */ .admin-body .admin-save-row { margin-top: 16px; } /* Overview stat tiles. */ .admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 24px; } .admin-stat { padding: 18px 20px; border: none; border-radius: var(--radius); background: var(--bg-elev-1); transition: background 0.12s var(--ease); } .admin-stat:hover { background: var(--bg-elev-2); } .admin-stat-value { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.5px; color: var(--text); font-variant-numeric: tabular-nums; } .admin-stat-label { margin-top: 4px; font-size: 0.8rem; color: var(--text-faint); } /* Money-safety anomaly badge: a non-zero count is a warning the owner should notice at a glance. */ .admin-stat-alert { background: color-mix(in srgb, var(--danger, #e5484d) 14%, var(--bg-elev-1)); box-shadow: inset 0 0 0 1px var(--danger, #e5484d); } .admin-stat-alert .admin-stat-value { color: var(--danger, #e5484d); } .admin-inline-action { margin-bottom: 14px; max-width: 280px; } /* CRM sales dashboard: section sub-heads, tier bars, daily-GMV sparkline. */ #admin-view .admin-subhead { margin: 22px 0 8px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .crm-tier-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; } .crm-tier-name { flex: 0 0 96px; font-size: 13.5px; color: var(--text-dim); } .crm-tier-count { flex: 0 0 auto; min-width: 36px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); } .crm-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; } .crm-bar-fill { height: 100%; border-radius: 999px; background: var(--grad); min-width: 2px; transition: width 0.3s var(--ease); } /* Daily-GMV bar chart + time-frame selector. */ .crm-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .crm-range { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .crm-range .buy-chip { min-width: 0; min-height: 36px; padding: 6px 12px; font-size: 12.5px; } .crm-range-custom { margin-top: 8px; } .crm-range-custom.is-collapsed { display: none; } .crm-date { background: var(--bg-elev-1); color: var(--text); border: none; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; outline: none; color-scheme: light dark; /* native picker adapts to the active theme */ } .crm-date:focus { background: var(--bg-elev-2); } .crm-date-sep { color: var(--text-faint); } /* Inline label + control, e.g. the drill-down sheet's Agent picker — lighter-weight than a full admin-subhead eyebrow since it sits directly beside its control. */ .crm-field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .crm-field-label { flex: 0 0 auto; font-size: 0.8rem; color: var(--text-faint); } .crm-field-row .dt-filter { flex: 1 1 auto; } .crm-chart-wrap { position: relative; margin-top: 8px; padding: 14px 14px 10px; border-radius: var(--radius); background: var(--bg-elev-1); } .crm-chart { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 150px; } /* Y-axis gridlines (max down to 0), appended as the last child of .crm-chart so they sit ABOVE the bars — each line's value label carries its own background chip, so a tall bar passing behind never blots out the scale. Replaces a single top-right max figure with the full intermediate scale. `pointer-events: none` keeps it out of the tooltip's hit-testing (see chart.ui.ts's attachChartTooltip, which reads the column beneath via elementFromPoint). */ .crm-chart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; } .crm-chart-gridline { position: relative; border-top: 1px dashed color-mix(in srgb, var(--border-strong) 70%, transparent); } .crm-chart-gridline-label { position: absolute; right: 0; top: 0; transform: translateY(-50%); background: var(--bg-elev-1); border-radius: 4px; padding: 1px 5px; font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .crm-chart-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; cursor: pointer; } .crm-chart-bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--grad); min-height: 2px; opacity: 0.88; transition: opacity 0.12s var(--ease); } .crm-chart-col:hover .crm-chart-bar { opacity: 1; } /* Stacked cost chart (admin-models.ui.ts): segments fill a column bottom-up. */ .crm-chart-stack { display: flex; flex-direction: column-reverse; width: 100%; height: 100%; } .crm-chart-seg { width: 100%; min-height: 0; opacity: 0.9; } .crm-chart-col:hover .crm-chart-seg { opacity: 1; } /* --- Admin model routing chain + catalog picker + cost legend (admin-models.ui.ts) --- */ .mdl-chain { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .mdl-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev-2); } .mdl-rank { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--bg-elev-2); color: var(--text-dim); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .mdl-main { flex: 1 1 auto; min-width: 0; } .mdl-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; line-height: 1.3; } .mdl-meta { font-size: 12px; color: var(--text-dim); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .mdl-actions { flex: 0 0 auto; display: inline-flex; gap: 2px; } .mdl-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; color: var(--text-dim); border-radius: 8px; cursor: pointer; } .mdl-iconbtn:hover:not(:disabled) { background: var(--bg-elev-3); color: var(--text); } .mdl-iconbtn:disabled { opacity: 0.3; cursor: default; } .mdl-iconbtn.is-danger:hover { color: var(--err); } .mdl-iconbtn .material-symbols-rounded { font-size: 20px; } .mdl-tag { flex: 0 0 auto; font-size: 11px; color: var(--text-faint); } .mdl-picker { border: 1px solid var(--border); border-radius: 12px; margin-top: 8px; overflow: hidden; background: var(--bg-elev-2); } .mdl-pick-search { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); padding: 10px 12px; font: inherit; font-size: 14px; } .mdl-pick-search:focus { outline: none; } .mdl-pick-list { max-height: 300px; overflow: auto; } .mdl-pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); } .mdl-pick-row:last-child { border-bottom: none; } .mdl-pick-row:hover { background: var(--bg-elev-2); } .mdl-score { flex: 0 0 auto; min-width: 34px; text-align: center; padding: 2px 6px; border-radius: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .mdl-score.is-none { background: var(--bg-elev-2); color: var(--text-faint); } .mdl-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: 12px; } .mdl-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); } .mdl-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; } .mdl-recon { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 2px; font-size: 13px; color: var(--text-dim); } .mdl-recon strong { color: var(--text); font-variant-numeric: tabular-nums; } .crm-chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* Hover (mouse) / tap (touch) value readout — see chart.ui.ts's attachChartTooltip. Positioned relative to .crm-chart-wrap (its offset parent), just above the pointed-at column; hidden until a pointer lands on a column. */ .crm-chart-tooltip { position: absolute; z-index: 2; transform: translateX(-50%); white-space: pre-line; text-align: center; background: var(--bg-elev-2); color: var(--text); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 11.5px; line-height: 1.4; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.1s var(--ease); } .crm-chart-tooltip.is-visible { opacity: 1; visibility: visible; } /* Sales / admin grouped lists as Gemini tonal cards (GMV overview, partners, payouts): a single rounded surface with hairline row dividers, no outer stroke. */ #admin-view .admin-card, #admin-view .admin-list { background: var(--bg-elev-1); border-radius: var(--radius); padding: 2px 16px; margin-top: 10px; } #admin-view .admin-card .info-row, #admin-view .admin-list .info-row { padding: 13px 0; } #admin-view .admin-card .info-row:last-child, #admin-view .admin-list .info-row:last-child { border-bottom: none; } /* A muted empty-state line ("No payouts yet.") shouldn't look like a card. */ #admin-view .admin-list > .admin-note:only-child { padding: 14px 0; } /* Partner/payout row action buttons → compact tonal pills (not full-width). */ #admin-view .admin-row-actions .billing-buy { width: auto; padding: 7px 16px; background: var(--bg-elev-2); border: none; font-size: 0.82rem; } #admin-view .admin-row-actions .billing-buy:hover:not(:disabled) { background: var(--bg-elev-3); } /* Mascot test panel: centered WebGL preview + expression-trigger chips. */ .admin-mascot-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 32px 16px 24px; background: var(--bg-elev-1); border-radius: var(--radius); margin-top: 10px; } .admin-mascot-stage { width: 220px; height: 220px; } .admin-mascot-canvas { display: block; width: 100%; height: 100%; cursor: pointer; } .admin-mascot-chips { justify-content: center; } /* Primary CTAs in admin (Save, Enroll, Grant, Create, Run rebate) → spark gradient. */ #admin-view .billing-grid-1 > .billing-buy { background: var(--grad); color: var(--on-accent); border: none; font-weight: 600; padding: 13px 16px; } #admin-view .billing-grid-1 > .billing-buy:hover:not(:disabled) { background: var(--grad); filter: brightness(1.06); } #admin-view .billing-grid-1 > .billing-buy:disabled { opacity: 0.5; } /* Admin data table (search / sort / filter / paginate) — Gemini: borderless tonal fills, rounded pills, elevation via fill not stroke. */ .dt-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .dt-search { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 200px; padding: 9px 14px; border: none; border-radius: 999px; background: var(--bg-elev-1); } .dt-search .material-symbols-rounded { font-size: 19px; color: var(--text-faint); } .dt-search-input { flex: 1 1 auto; border: none; background: transparent; color: var(--text); font: inherit; outline: none; } .dt-filter { padding: 9px 14px; border: none; border-radius: 999px; background: var(--bg-elev-1); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer; transition: background 0.12s var(--ease); } .dt-filter:hover { background: var(--bg-elev-2); } .dt-wrap { overflow-x: auto; border: none; border-radius: var(--radius); background: var(--bg-elev-1); } .dt-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .dt-table th, .dt-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); } .dt-table tbody tr:last-child td { border-bottom: none; } .dt-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); font-weight: 600; white-space: nowrap; } .dt-table tbody tr { transition: background 0.1s var(--ease); } .dt-table tbody tr:hover { background: var(--bg-elev-2); } .dt-table td.is-num, .dt-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; } /* Trial-monitor: flag likely sybil farms (many trials, zero conversions). */ .admin-trial-tbl tbody tr.is-suspect td:first-child { color: var(--danger-text); font-weight: 600; } .admin-trial-tbl tbody tr.is-suspect { background: var(--danger-bg); } /* Cap a column's width (e.g. a long email) so it doesn't crowd out the more important numeric columns; full value is still available via title on hover. */ .dt-col-narrow { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-th-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; } .dt-th-btn:hover { color: var(--text); } .dt-table th.is-sorted { color: var(--text); } .dt-sort-ind { font-size: 0.8rem; color: var(--accent); } .dt-msg { text-align: center; padding: 28px 14px; color: var(--text-faint); } .dt-actions-col { width: 1%; } .dt-actions { text-align: right; white-space: nowrap; } .dt-row-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dt-action { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border: none; border-radius: 999px; background: var(--bg-elev-2); color: var(--text); font: inherit; font-size: 0.82rem; cursor: pointer; transition: background 0.12s var(--ease); } .dt-action:hover:not(:disabled) { background: var(--bg-elev-3); } .dt-action:disabled { opacity: 0.5; cursor: default; } .dt-action-danger { color: var(--err); } .dt-action-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 16%, transparent); } .dt-link { color: var(--accent); text-decoration: none; } .dt-link:hover { text-decoration: underline; } .dt-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.82rem; color: var(--text-dim); } /* Copyable code token (e.g. a user's invite code): tonal pill, fill-based, accent-tint confirm. */ .dt-code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.8rem; letter-spacing: 0.02em; padding: 3px 10px; border: none; border-radius: 999px; background: var(--bg-elev-2); color: var(--text-dim); cursor: pointer; transition: background 0.12s var(--ease), color 0.12s var(--ease); } .dt-code:hover { background: var(--bg-elev-3); color: var(--text); } .dt-code.is-copied { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); } .dt-badges { display: inline-flex; gap: 5px; flex-wrap: wrap; } .dt-badge { padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 500; } .dt-badge-good { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .dt-badge-bad { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); } .dt-badge-info { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .dt-badge-muted { background: var(--bg-elev-3); color: var(--text-dim); } .dt-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } .dt-summary { font-size: 0.85rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .dt-page-btns { display: flex; gap: 6px; } .dt-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--bg-elev-1); color: var(--text); cursor: pointer; transition: background 0.12s var(--ease); } .dt-page-btn:hover:not(:disabled) { background: var(--bg-elev-2); } .dt-page-btn:disabled { opacity: 0.35; cursor: default; } .dt-page-btn .material-symbols-rounded { font-size: 18px; } /* Coupon create form — labeled fields, each with an inline "?" help toggle that expands a detailed explanation card. Gemini-style: calm tonal surfaces, generous spacing, soft rounded geometry, restrained accents. */ .coupon-form { gap: 16px; } .coupon-field { display: flex; flex-direction: column; gap: 6px; } .coupon-field-head { display: flex; align-items: center; gap: 6px; min-height: 18px; } .coupon-field-label { margin-top: 0; font-weight: 500; letter-spacing: 0.1px; } .coupon-info { display: inline-flex; align-items: center; justify-content: center; padding: 1px; flex: 0 0 auto; border: none; border-radius: 50%; background: transparent; color: var(--text-faint); cursor: pointer; line-height: 1; font-size: 16px; /* Material symbol glyph size (overrides the 20px base) */ transition: color 0.15s ease, background 0.15s ease; } .coupon-info:hover { color: var(--text); background: var(--bg-elev-2); } .coupon-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .coupon-info.is-active { color: var(--accent); background: var(--accent-dim); } .coupon-help { display: none; margin-top: 2px; font-size: 12px; line-height: 1.55; color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } .coupon-help.is-open { display: block; animation: coupon-help-in 0.16s ease; } @keyframes coupon-help-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } } /* Coupons: multi-select table + bulk action bar */ .coupon-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.85rem; } .coupon-table th { text-align: left; padding: 7px 8px; white-space: nowrap; color: var(--text-faint); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.02em; border-bottom: 1px solid var(--border); } .coupon-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .coupon-table tbody tr:last-child td { border-bottom: none; } .coupon-table tbody tr:hover td { background: var(--bg-elev-2); } .coupon-th-check { width: 1%; white-space: nowrap; } .coupon-th-check input { cursor: pointer; vertical-align: middle; } .coupon-code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-weight: 600; letter-spacing: 0.04em; } .coupon-row-actions { width: 1%; text-align: right; } .coupon-copy { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 3px; border-radius: 6px; color: var(--text-dim); font-size: 18px; line-height: 1; } .coupon-copy:hover { color: var(--text); background: var(--bg-elev-2); } .coupon-bulk-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .coupon-bulk-count { margin-right: auto; color: var(--text-dim); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .billing-buy.is-compact { width: auto; padding: 6px 14px; font-size: 0.85rem; } .billing-buy.is-danger { background: var(--danger); color: var(--on-accent); } /* Re-assert the red on hover: the base .billing-buy:hover rule is more specific and would otherwise repaint it neutral gray exactly as the user goes to click. */ .billing-buy.is-danger:hover:not(:disabled) { background: var(--danger); filter: brightness(1.08); } /* Admin sales section helpers. */ .admin-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .admin-row-actions { display: flex; gap: 6px; margin-left: 12px; } .admin-note { color: var(--text-faint); font-size: 0.85rem; padding: 8px 2px; } .admin-warn { padding: 12px 14px; margin-bottom: 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warn) 16%, transparent); border: none; color: var(--text); font-size: 0.85rem; } .sched-center { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; } /* Intro */ .sched-headline { font-family: "Google Sans Flex", "Google Sans Text", Roboto, system-ui, sans-serif; font-size: 32px; font-weight: 400; letter-spacing: -0.2px; margin: 0 0 10px; } .sched-subtitle { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; margin: 0; max-width: 620px; } /* Create actions */ .sched-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; } .sched-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: none; background: var(--bg-elev-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--ease) 150ms, filter var(--ease) 150ms; } .sched-cta:hover { background: var(--bg-elev-3); } .sched-cta .material-symbols-rounded { font-size: 20px; } .sched-cta-primary { background: var(--grad); color: var(--on-accent); font-weight: 600; } .sched-cta-primary:hover { filter: brightness(1.08); background: var(--grad); } /* Empty state */ .sched-empty { padding: 48px 8px; text-align: center; color: var(--text-dim); } .sched-empty p { margin: 4px 0; } .sched-empty-sub { font-size: 13px; color: var(--text-faint); } /* Grouped list of cards */ .sched-group-label { font-size: 13px; font-weight: 600; color: var(--text); margin: 30px 0 12px; } .sched-cards { display: flex; flex-direction: column; gap: 12px; } .sched-card { position: relative; background: var(--bg-elev-1); border-radius: var(--radius); padding: 18px 20px; cursor: pointer; transition: background var(--ease) 150ms; } .sched-card:hover { background: var(--bg-elev-2); } .sched-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Keep the title/meta clear of the absolutely-positioned kebab. */ .sched-card-info { padding-right: 40px; } .sched-card-title { font-size: 15px; font-weight: 500; color: var(--text); } .sched-card-when { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; } .sched-card-last { font-size: 13px; color: var(--text-faint); margin-top: 2px; } .sched-card-last.is-err { color: var(--danger); } /* Overflow ("⋯") button + popover menu — Run / Edit / Pause / Delete (Gemini style) */ .sched-kebab { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: transparent; border: none; color: var(--text-dim); cursor: pointer; transition: background var(--ease) 120ms, color var(--ease) 120ms; } .sched-kebab:hover { background: var(--bg-elev-3); color: var(--text); } .sched-kebab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sched-kebab .material-symbols-rounded { font-size: 20px; } .sched-menu { position: fixed; z-index: 1200; min-width: 188px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } .sched-menu-item { display: flex; align-items: center; gap: 12px; background: transparent; border: none; color: var(--text); font-size: 14px; text-align: left; padding: 9px 12px; border-radius: var(--radius-tile); cursor: pointer; transition: background var(--ease) 120ms; } .sched-menu-item:hover { background: var(--bg-elev-3); } .sched-menu-item .material-symbols-rounded { font-size: 20px; color: var(--text-dim); } .sched-menu-item.is-danger { color: var(--danger); } .sched-menu-item.is-danger .material-symbols-rounded { color: var(--danger); } .sched-menu-sep { height: 1px; background: var(--border); margin: 6px 6px; } /* Create / edit form */ .sched-form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .sched-form-head { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .sched-field { display: flex; flex-direction: column; gap: 5px; } .sched-field[hidden] { display: none; } .sched-objective { min-height: 78px; font-family: inherit; font-size: 14px; } /* Tonal select — drop native OS chrome, draw a Gemini chevron instead. */ .sched-select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; } .sched-select::-ms-expand { display: none; } /* Toast for run-now / errors — fixed to the viewport since there's no modal panel. z-index above EVERYTHING, including the confetti canvas (10000) and welcome-overlay (9999) — verified live that a gacha-win toast's ~3.2s window overlaps the confetti burst's ~5s window for most realistic dismiss timings, and confetti (being decorative, full-screen, z-index 10000) was rendering ON TOP of the toast for that whole overlap. bottom offset adds env(safe-area-inset-bottom) — every OTHER bottom-pinned element in this app (composer, home header, nav) already accounts for it; this one didn't, so on a real phone with the browser's bottom toolbar/home-indicator showing, the toast could be rendering fine (confirmed via headless testing at every viewport) while sitting fully behind that OS chrome — invisible despite being "there." */ .sched-toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--bg-elev-3); color: var(--text); font-size: 13px; opacity: 0; pointer-events: none; z-index: 20000; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32); transition: opacity var(--ease) 160ms, transform var(--ease) 160ms; } .sched-toast.is-shown { opacity: 1; transform: translate(-50%, 0); } .sched-toast.is-error { background: var(--danger-bg); color: var(--danger); } /* Optional leading icon (see flash()'s iconName param) — same size/role as the top banner's info/warn/error glyph. */ .sched-toast .material-symbols-rounded { font-size: 16px; flex: none; color: var(--text-dim); } .sched-toast.is-error .material-symbols-rounded { color: var(--danger); } /* ── Skills screen (standalone view; Marketplace | Installed) ──────────────── Reuses .sched-center/.sched-intro/.sched-headline/.sched-subtitle/.sched-empty/ .sched-toast and the .sched-menu popover. Gemini-style: pill controls, tonal surfaces, an expandable search mirroring the recent-tasks search. */ /* Controls row: sort chip on the left, expandable search pinned right. */ .skills-controls { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 16px; } .skills-sort-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-elev-1); border: none; cursor: pointer; color: var(--text); font-size: 13.5px; font-weight: 500; height: 40px; padding: 0 8px 0 16px; border-radius: 999px; transition: background var(--ease) 120ms; } .skills-sort-chip:hover { background: var(--bg-elev-2); } .skills-chip-label { color: var(--text-faint); font-weight: 400; } .skills-chip-arrow { color: var(--text-dim); font-size: 13px; } .skills-sort-chip .material-symbols-rounded { font-size: 20px; color: var(--text-dim); margin-left: -2px; } .skills-sort-menu { min-width: 210px; } .skills-menu-check { width: 20px; display: inline-flex; justify-content: center; flex: none; } .skills-menu-check .material-symbols-rounded { font-size: 18px; color: var(--accent); } .skills-sort-menu .sched-menu-item { gap: 8px; } /* Expandable search — same behavior as the recent-tasks search. */ .skills-search-wrap { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; width: 260px; max-width: 60%; height: 40px; margin-left: auto; padding: 0 14px; overflow: hidden; background: var(--bg-elev-1); border: none; border-radius: 999px; transition: width 0.22s var(--ease), padding 0.22s var(--ease), background 0.15s var(--ease); } .skills-search-wrap:focus-within { background: var(--bg-elev-2); } .skills-search-ic { flex: 0 0 auto; display: grid; place-items: center; background: transparent; border: none; padding: 0; color: var(--text-faint); cursor: pointer; } .skills-search-ic .material-symbols-rounded { font-size: 19px; } .skills-search { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font: inherit; font-size: 13.5px; } .skills-search::placeholder { color: var(--text-faint); } .skills-search-wrap.is-collapsed { width: 40px; padding: 0; gap: 0; background: transparent; } .skills-search-wrap.is-collapsed .skills-search-ic { width: 40px; height: 40px; border-radius: 50%; color: var(--text-dim); transition: background 0.15s var(--ease), color 0.15s var(--ease); } .skills-search-wrap.is-collapsed .skills-search-ic .material-symbols-rounded { font-size: 22px; } .skills-search-wrap.is-collapsed .skills-search-ic:hover { background: var(--bg-elev-2); color: var(--text); } .skills-search-wrap.is-collapsed .skills-search { width: 0; flex: 0 0 0; opacity: 0; pointer-events: none; } /* Cards */ .skills-cards { display: flex; flex-direction: column; gap: 10px; } .skills-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg-elev-1); border-radius: var(--radius-lg); padding: 16px 20px; cursor: pointer; transition: background var(--ease) 150ms; } .skills-card:hover { background: var(--bg-elev-2); } .skills-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .skills-card-info { min-width: 0; flex: 1; } .skills-card-title { font-size: 15px; font-weight: 600; color: var(--text); } /* "Update available" chip beside an installed skill's name — accent-tinted so a stale skill reads at a glance without shouting. */ .skills-badge-update { display: inline-block; margin-left: 8px; padding: 2px 8px; vertical-align: 1px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-dim); } .skills-card-desc { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .skills-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font-size: 12px; color: var(--text-faint); } .skills-stats > span { position: relative; } .skills-stats > span + span::before { content: "·"; position: absolute; left: -8px; color: var(--text-faint); } .skills-rate { display: inline-flex; align-items: center; gap: 3px; } .skills-rate .material-symbols-rounded { font-size: 14px; } .skills-action { flex: none; align-self: center; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter var(--ease) 120ms, background var(--ease) 120ms, color var(--ease) 120ms; } .skills-action:hover { filter: brightness(1.08); } .skills-action:disabled { cursor: default; } .skills-action.is-installed { background: transparent; color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border); filter: none; } .skills-action.is-danger { background: transparent; color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--border); filter: none; } .skills-action.is-danger:hover { color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); background: var(--danger-bg); } /* Skill detail modal — a centered popup. Reuses the .settings-overlay backdrop, but centers with flexbox (grid place-items can mis-place a single auto-sized child). A column layout caps the height and lets the description scroll while the header, KPIs, and action stay pinned. */ .skills-modal-overlay { display: flex; align-items: center; justify-content: center; } .skills-sheet { display: flex; flex-direction: column; width: min(460px, 100%); max-height: 86dvh; background: var(--bg-elev); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-lg); transform: scale(0.96); opacity: 0; transition: transform 0.18s var(--ease), opacity 0.18s var(--ease); } .skills-sheet.is-open { transform: scale(1); opacity: 1; } .skills-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .skills-sheet-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; } .skills-sheet-sub { font-size: 13px; color: var(--text-dim); margin-top: 6px; flex: none; } .skills-kpis { display: flex; gap: 10px; margin: 20px 0; flex: none; } .skills-kpis[hidden] { display: none; } .skills-kpi { flex: 1; background: var(--bg-elev-1); border-radius: var(--radius); padding: 14px 10px; text-align: center; } .skills-kpi-value { font-size: 18px; font-weight: 600; color: var(--text); } .skills-kpi-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; } /* The description takes the remaining height and scrolls when long. */ .skills-sheet-desc { flex: 1 1 auto; min-height: 64px; overflow-y: auto; font-size: 14px; color: var(--text); line-height: 1.6; margin: 4px 0 20px; padding-right: 4px; } .skills-sheet-actions { display: flex; flex: none; } .skills-sheet-action { width: 100%; text-align: center; padding: 12px; font-size: 14px; } /* ── Earn screen (standalone view) ────────────────────────────────────────── Reuses .sched-center/.sched-intro/.sched-headline/.sched-subtitle/.sched-region/ .sched-empty/.sched-toast and the .tabs-primary underline tabs. */ .earn-jackpot { margin: 18px 0 14px; padding: 22px 24px; border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--bg-elev-1)), var(--bg-elev-1)); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); } .earn-jackpot-head { display: flex; align-items: center; justify-content: space-between; } .earn-jackpot-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); } .earn-jackpot-edit { background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; border-radius: 999px; } .earn-jackpot-edit:hover { color: var(--text); background: var(--bg-elev-2); } .earn-jackpot-edit .material-symbols-rounded { font-size: 18px; } .earn-jackpot-value { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; } .earn-jackpot-xp { font-size: 40px; font-weight: 700; line-height: 1; color: var(--text); } .earn-jackpot-unit { font-size: 16px; font-weight: 600; color: var(--accent); } .earn-jackpot-editor { display: flex; flex-direction: column; gap: 6px; } .earn-dash { display: flex; gap: 12px; margin-bottom: 6px; } .earn-tile { flex: 1; background: var(--bg-elev-1); border-radius: var(--radius); padding: 16px; text-align: center; } .earn-tile-value { font-size: 22px; font-weight: 700; color: var(--text); } .earn-tile-label { font-size: 12px; color: var(--text-faint); margin-top: 4px; } .earn-bounties { display: flex; flex-direction: column; gap: 12px; } .earn-new { align-self: flex-start; } .earn-bounty-list { display: flex; flex-direction: column; gap: 10px; } .earn-bounty { display: flex; align-items: center; gap: 14px; background: var(--bg-elev-1); border-radius: var(--radius); padding: 14px 16px; } .earn-bounty-icon { flex: none; width: 46px; height: 46px; border-radius: var(--radius-sm); overflow: hidden; display: grid; place-items: center; background: var(--bg-elev-2); color: var(--accent); } .earn-bounty-icon img { width: 100%; height: 100%; object-fit: cover; } .earn-bounty-icon .material-symbols-rounded { font-size: 26px; } .earn-bounty-meta { min-width: 0; flex: 1; } .earn-bounty-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .earn-bounty-name { font-size: 15px; font-weight: 600; color: var(--text); } .earn-bounty-reward { font-size: 11.5px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 2px 8px; border-radius: 999px; } .earn-bounty-desc { font-size: 13px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .earn-bounty-sub { font-size: 12px; color: var(--text-faint); margin-top: 4px; } .earn-bounty-actions { flex: none; display: flex; align-items: center; gap: 6px; } .earn-icon-btn { width: 40px; height: 40px; border-radius: 999px; flex: none; cursor: pointer; background: transparent; border: none; color: var(--text-dim); display: inline-grid; place-items: center; transition: background var(--ease) 120ms, color var(--ease) 120ms; } .earn-icon-btn:hover { background: var(--bg-elev-2); color: var(--text); } .earn-icon-btn .material-symbols-rounded { font-size: 19px; } .earn-icon-btn.is-danger:hover { color: var(--danger); background: var(--danger-bg); } .skills-action.is-ghost { background: transparent; color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border); filter: none; } .earn-ranks { display: flex; flex-direction: column; gap: 22px; } .earn-rank-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 8px; } .earn-rank-list { display: flex; flex-direction: column; gap: 4px; } .earn-rank-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--bg-elev-1); } .earn-rank-row.is-me { background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev-1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } .earn-rank-pos { font-size: 13px; font-weight: 700; color: var(--text-dim); width: 40px; flex: none; } .earn-rank-name { flex: 1; min-width: 0; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .earn-rank-xp { font-size: 13px; font-weight: 600; color: var(--text-dim); flex: none; } /* Congrats notif — slides up from the bottom when a reward lands. */ .earn-congrats { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 1300; display: flex; align-items: center; gap: 14px; background: var(--bg-elev-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-lg); max-width: min(440px, calc(100vw - 32px)); transition: transform 0.34s var(--ease); } .earn-congrats.is-shown { transform: translate(-50%, 0); } .earn-congrats-emoji { font-size: 28px; line-height: 1; color: var(--accent); } .earn-congrats-title { font-size: 15px; font-weight: 700; color: var(--text); } .earn-congrats-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } .earn-congrats-view { margin-left: 6px; flex: none; background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } /* Earn: season end text + Ranks sub-tabs (Agents | Team) */ .earn-jackpot-ends { font-size: 12px; color: var(--text-dim); } .earn-subtabs { display: flex; gap: 8px; margin-bottom: 16px; } .earn-subtab { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; background: var(--bg-elev-1); border: none; cursor: pointer; color: var(--text-dim); font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 999px; transition: color var(--ease) 120ms, background var(--ease) 120ms; } .earn-subtab:hover { color: var(--text); } .earn-subtab.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev-1)); } /* ── Two clear levels of navigation ──────────────────────────────────────── Primary: the Activity | Ranks section tabs render as bold underline tabs (not pills) so they're unmistakably the top level. Secondary: the in-section filters (All/Yield/… and the Ranks sub-tabs) stay as small, quiet pills. */ /* Material-3 / Gemini primary tabs: text labels on a full-width rail (the divider), with a rounded active indicator that sits on the rail. */ .tabs-primary { gap: 6px; margin: 16px 0 16px; border-bottom: 1px solid var(--border); } .tabs-primary .earn-subtab { position: relative; align-items: flex-end; min-height: 40px; background: none; border-radius: 0; padding: 11px 14px 9px; font-size: 14.5px; font-weight: 600; letter-spacing: 0.2px; color: var(--text-dim); } .tabs-primary .earn-subtab:first-child { padding-left: 2px; } .tabs-primary .earn-subtab:hover { background: none; color: var(--text); } .tabs-primary .earn-subtab.is-active { background: none; color: var(--accent); } /* Active indicator: a rounded bar that spans the label (inset matches the side padding) and sits on the divider rail just below it. */ .tabs-primary .earn-subtab.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); } .tabs-primary .earn-subtab:first-child.is-active::after { left: 2px; } /* ── User-level Earn screen (earnings.ui.ts) ─────────────────────────────── Reward-pool overview + sub-dashboard tiles + Leaderboards/Details tabs. Reuses .earn-dash/.earn-tile, .earn-subtab, .earn-rank-* primitives. Desktop: a normal centered column that scrolls wholesale (headline + subtitle like the other screens). Mobile: a pinned header + inner scroll (media block). */ .earnings-screen { display: block; } /* Desktop header: big headline + subtitle, matching .sched-intro. */ .earnings-topbar { width: 100%; max-width: 760px; margin: 0 auto; padding: 72px 24px 4px; } .earnings-topbar-title { margin: 0 0 10px; font-family: "Google Sans Flex", "Google Sans Text", Roboto, system-ui, sans-serif; font-size: 32px; font-weight: 400; letter-spacing: -0.2px; line-height: 1.1; } .earnings-subtitle { margin: 0; max-width: 620px; font-size: 14.5px; color: var(--text-dim); line-height: 1.55; } /* One scroll column: giveaway + hero + actions all scroll together (nothing pinned). */ .earnings-scroll { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px 96px; } .earnings-jackpot-slot { margin: 12px 0 16px; } .earnings-hero-slot { margin-bottom: 6px; } /* Mobile: compact pinned top bar (title beside the hamburger); everything below scrolls together in one region, the tabs sticking just under the top bar. */ @media (max-width: 720px) { .layout.earnings-active #earnings-view { display: flex; flex-direction: column; overflow: hidden; } .earnings-screen { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .earnings-topbar { flex: 0 0 auto; display: flex; align-items: center; max-width: none; margin: 0; min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0 68px; /* left pad clears the wider hamburger */ background: var(--bg); } .earnings-topbar-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1; } .earnings-subtitle { display: none; } .earnings-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-width: none; padding: 0 16px 96px; } } .earnings-overview { background: var(--bg-elev-1); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 12px; } .earnings-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .earnings-overview-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); } .earnings-overview-expiry { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); } .earnings-overview-expiry .material-symbols-rounded { font-size: 16px; } .earnings-pool { font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1.05; margin-top: 10px; background: var(--grad-h); -webkit-background-clip: text; background-clip: text; color: transparent; } .earnings-progress { margin-top: 18px; } .earnings-progress-track { height: 10px; border-radius: 999px; background: var(--bg-elev-3); overflow: hidden; } .earnings-progress-bar { height: 100%; width: 0; border-radius: 999px; background: var(--grad-h); transition: width 0.7s var(--ease); } .earnings-progress-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 9px; font-size: 12.5px; color: var(--text-dim); } .earnings-progress-meta strong { color: var(--text); font-weight: 600; } /* Keep all 4 stat tiles on one line (override the shared 2×2 wrap rule); the value font scales down on narrow phones so "$3,847.55" still fits at 4-up. */ .earn-dash.earnings-dash { flex-wrap: nowrap; gap: 8px; } .earnings-dash .earn-tile { flex: 1 1 0; min-width: 0; padding: 15px 8px; } .earnings-dash .earn-tile-value { font-size: clamp(14px, 4.2vw, 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .earnings-dash .earn-tile-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "How yield works" primer — a foldable card directly under the yield dashboard. */ .yield-how { margin: 10px 0 4px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2, rgba(255, 255, 255, 0.03)); } .yield-how-summary { display: block; cursor: pointer; list-style: none; padding: 12px 14px; font-size: 13.5px; font-weight: 700; color: var(--text); } .yield-how-summary::-webkit-details-marker { display: none; } .yield-how-bar { display: flex; align-items: center; gap: 8px; } .yield-how-title { flex: 1 1 auto; min-width: 0; text-align: left; } .yield-how-summary .material-symbols-rounded { font-size: 18px; color: var(--accent); } /* Chevron rotates when open. */ .yield-how-summary .material-symbols-rounded:last-child { color: var(--text-dim); transition: transform 0.18s var(--ease); } .yield-how[open] .yield-how-summary .material-symbols-rounded:last-child { transform: rotate(180deg); } .yield-how-list { list-style: none; margin: 0; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; } .yield-how-row { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); } .yield-how-row .material-symbols-rounded { font-size: 17px; color: var(--accent); flex: none; margin-top: 1px; } /* Leaderboard amount (reuses .earn-rank-row layout, prominent value column). */ .earnings-rank-amount { flex: none; font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } /* Detail list rows (yield / referral). */ .earnings-list { display: flex; flex-direction: column; gap: 4px; } .earnings-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-elev-1); } .earnings-row-main { flex: 1 1 auto; min-width: 0; } .earnings-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 500; color: var(--text); } .earnings-row-sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; } .earnings-type { font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--bg-elev-2); padding: 2px 8px; border-radius: 999px; } .earnings-row-amount { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; } .earnings-row-amount.is-pos { color: var(--ok); } .earnings-row-date { font-size: 11.5px; color: var(--text-faint); text-align: right; margin-top: 3px; } /* ── Store screen (store.ui.ts) ──────────────────────────────────────────── Active-agent balance strip + two bundle grids (Power, Credits). Reuses the .sched-center scaffold and .skills-action button. */ /* Store header: the title and the wallet HUD share ONE row (so the HUD is always level with "Store"), with the subtitle on the line below. On mobile the row fills the sticky bar and centers with the floating hamburger. */ .store-intro-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 1 1 auto; min-width: 0; } .store-intro-row .sched-headline { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Wallet HUD: Power + Credits grouped in one bordered pill. */ .store-wallet { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; background: var(--bg-elev-1); border: 1px solid var(--border); } .store-wallet .cur { font-size: 14px; font-weight: 600; color: var(--text); } .store-wallet-sep { width: 1px; height: 14px; background: var(--border-strong); } .store-balance { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--bg-elev-1); border-radius: var(--radius); padding: 14px 18px; margin: 4px 0 22px; } .store-balance-agent { font-size: 14px; font-weight: 600; color: var(--text); } .store-balance-pills { display: flex; gap: 22px; } .store-bal { display: flex; align-items: center; gap: 9px; } .store-bal .material-symbols-rounded { font-size: 22px; color: var(--accent); } .store-bal-value { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; } .store-bal-label { font-size: 11.5px; color: var(--text-faint); } .store-section { margin-top: 26px; } .store-section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin: 0 0 4px; } .store-section-hint { font-size: 12.5px; color: var(--text-faint); margin: 0 0 14px; line-height: 1.5; } .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .store-card { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--bg-elev-1); border-radius: var(--radius); padding: 16px; } /* Best-value card: accent ring + a faint accent wash so the promotion reads at a glance. */ .store-card.is-best { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev-1)); } .store-badge { position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .store-card-name { font-size: 13px; font-weight: 600; color: var(--text-dim); } /* Reserve room under the absolute "Best value" badge so a long name can't slide beneath it. */ .store-card.is-best .store-card-name { max-width: calc(100% - 88px); } /* Per-bundle discount / bonus chip — its own line (never crowds the price+Buy row), nowrap. */ .store-card-save { align-self: flex-start; font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.3; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 999px; padding: 2px 9px; } .store-card-save.is-best { color: var(--on-accent); background: var(--accent); } .store-card-amount { display: flex; align-items: baseline; gap: 6px; } .store-card-amount .material-symbols-rounded { font-size: 22px; color: var(--accent); align-self: center; } .store-card-amount > span:nth-of-type(1) { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; } .store-card-unit { font-size: 13px; font-weight: 600; color: var(--text-faint); } .store-card-sub { font-size: 12px; color: var(--text-faint); } /* Price ABOVE a full-width button (two lines) — in the narrow 2-column grid a side-by-side row squeezes/misaligns the button (esp. with CJK labels). */ .store-card-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: auto; padding-top: 6px; } .store-card-price { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } /* Price shown as the locked-earnings chip: shrink to its content, don't stretch to the card-foot's full width (the foot is a stretch column). */ .store-card-foot .earn-lock-chip { align-self: flex-start; } .store-card-cost { display: inline-flex; align-items: center; gap: 3px; } .store-card-cost .material-symbols-rounded { font-size: 17px; color: var(--accent); } .store-buy { width: 100%; align-self: stretch; padding: 11px 18px; min-height: 44px; } /* ── Top-up modal (topup.ui.ts) — one job: allocate Credits pool → agent. Gemini language: a centered balance hero, quick-amount chips, one primary action. Reuses .settings-overlay/.settings-panel + .buy-chip + .auth-btn. ── */ .settings-panel.topup-panel { width: min(440px, 100%); } .topup-body { padding: 8px 22px 24px; } /* Hero: the pool balance, in the app's balance-card treatment (mirrors .wallet-hero). */ .topup-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px; margin: 4px 0 22px; border-radius: var(--radius-hero); background: radial-gradient(125% 80% at 50% -10%, color-mix(in srgb, var(--grad-b) 16%, transparent), transparent 62%), var(--bg-elev-1); text-align: center; } .topup-hero-label { font-family: var(--font-display); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.1px; color: var(--text-faint); } .topup-hero-num { display: inline-flex; align-items: center; gap: 8px; } .topup-hero-num .cur-icon { font-size: 32px; color: var(--accent); } .topup-hero-num .cur-val { font-family: var(--font-display); font-size: 46px; font-weight: 500; line-height: 1.02; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; color: var(--accent); } .topup-label { font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 0 0 10px; } .topup-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .topup-input { width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-elev-1); color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; } .topup-input:focus { outline: none; border-color: var(--border-strong); } .topup-primary { width: 100%; } .topup-foot { text-align: center; font-size: 12.5px; color: var(--text-faint); margin: 14px 0 0; } .topup-empty { text-align: center; font-size: 14px; color: var(--text-dim); margin: 2px 0 16px; } .topup-note { padding: 14px 2px 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; text-align: center; } .topup-note.is-error { color: var(--err); } /* ── Wallet screen (portfolio · receive · send) — Gemini-style ─────────────── */ /* Fill the .sched-center column so the hero card / actions / asset rows share the exact left+right edges of the headline + subtitle (no indented, off-balance card). */ .wallet-body { width: 100%; margin: 12px 0 0; } /* Hero: the headline number rendered in Gemini's signature blue→purple→pink gradient (Google Sans Flex display face), on a softly gradient-lit card. */ .wallet-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 36px 20px 30px; margin: 6px 0 22px; border-radius: var(--radius-hero); background: radial-gradient(125% 80% at 50% -10%, color-mix(in srgb, var(--grad-b) 16%, transparent), transparent 62%), var(--bg-elev-1); text-align: center; } .wallet-hero-label { font-family: var(--font-display); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.1px; color: var(--text-faint); } .wallet-hero-total { font-family: var(--font-display); font-size: 56px; font-weight: 500; line-height: 1.02; letter-spacing: -1.6px; font-variant-numeric: tabular-nums; /* Mono accent: white on dark, black on light (matches the app's greeting). */ color: var(--accent); } .wallet-address { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; min-height: 40px; background: var(--bg-elev-2); border: none; border-radius: 999px; padding: 8px 16px; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .wallet-address:hover { color: var(--text); background: var(--bg-elev-3); } .wallet-address .material-symbols-rounded { font-size: 16px; } .wallet-degraded { font-size: 12px; color: var(--warn); margin-top: 6px; } /* Network badge — quiet/neutral on mainnet, a loud warning on any test network. */ .wallet-net { display: inline-flex; align-items: center; gap: 5px; align-self: center; margin-top: 10px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; background: var(--bg-elev-2); color: var(--text-faint); } .wallet-net.is-test { background: color-mix(in srgb, var(--warn) 18%, var(--bg-elev-2)); color: var(--warn); } .wallet-net .material-symbols-rounded { font-size: 15px; } /* Receive-screen test-network warning — sits above the address/QR. */ .wallet-receive-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 11px 13px; border-radius: var(--radius-md); line-height: 1.5; font-size: 13px; background: color-mix(in srgb, var(--warn) 14%, var(--bg-elev-1)); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); } .wallet-receive-warn .material-symbols-rounded { font-size: 19px; color: var(--warn); flex: none; } /* Manual refresh — a subtle icon button in the hero's top-right corner. */ .wallet-refresh { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: transparent; color: var(--text-faint); transition: background 0.15s var(--ease), color 0.15s var(--ease); } .wallet-refresh:hover { background: var(--bg-elev-2); color: var(--text); } .wallet-refresh:disabled { cursor: default; } .wallet-refresh .material-symbols-rounded { font-size: 20px; } /* Earnings shortcut pinned to the balance card (top-left, mirrors refresh top-right). */ .wallet-hero-earn { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 9px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 35%, transparent); color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .wallet-hero-earn:hover { background: var(--bg-elev-2); color: var(--text); } .wallet-hero-earn .material-symbols-rounded { font-size: 16px; } .wallet-refresh.is-spinning .material-symbols-rounded { animation: wallet-spin 0.8s linear infinite; } @keyframes wallet-spin { to { transform: rotate(360deg); } } /* Receive / Send — Gemini tonal pills. */ .wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; } .wallet-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 16px; border-radius: 999px; border: none; cursor: pointer; background: var(--bg-elev-1); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; transition: background 0.15s var(--ease), transform 0.15s var(--ease); } .wallet-action:hover { background: var(--bg-elev-2); } .wallet-action:active { transform: scale(0.985); } .wallet-action .material-symbols-rounded { font-size: 20px; color: var(--text-dim); } /* Asset list — Gemini list rows with a tonal hover. */ .wallet-tokens { display: flex; flex-direction: column; margin: 0 -8px; } .wallet-token { display: flex; align-items: center; gap: 13px; padding: 12px 12px; border-radius: var(--radius); transition: background 0.15s var(--ease); } .wallet-token:hover { background: var(--bg-elev-1); } .wallet-token-logo { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; background: var(--bg-elev-2); } .wallet-token-logo-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--text-dim); } .wallet-token-main { flex: 1 1 auto; min-width: 0; } .wallet-token-symbol { font-size: 15px; font-weight: 600; color: var(--text); } .wallet-token-name { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wallet-token-right { text-align: right; flex: none; } .wallet-token-usd { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .wallet-token-bal { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .wallet-token-empty { font-size: 13.5px; color: var(--text-faint); padding: 16px 12px; } .wallet-empty { color: var(--text-faint); } .wallet-spam-toggle { background: none; border: none; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; padding: 12px; margin: 4px -8px 0; text-align: left; border-radius: var(--radius-sm); } .wallet-spam-toggle:hover { color: var(--text); background: var(--bg-elev-1); } /* Activity (in/out history) — rows are explorer links; incoming amounts are green, settled-withdrawal arrivals get an accent highlight. */ .wallet-tabs { margin-top: 22px; } .wallet-tab-content { min-height: 80px; } .wallet-activity { display: flex; flex-direction: column; margin: 0 -8px; } .wallet-act-row { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: var(--radius); text-decoration: none; color: inherit; transition: background 0.15s var(--ease); } .wallet-act-row:hover { background: var(--bg-elev-1); } .wallet-act-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--bg-elev-2); color: var(--text-dim); font-size: 19px; } .wallet-act-main { flex: 1 1 auto; min-width: 0; } .wallet-act-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--text); } .wallet-act-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); padding: 2px 7px; border-radius: 999px; } .wallet-act-badge.is-pending { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); } .wallet-act-badge.is-failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); } /* Activity subcategory chips — All | Withdrawals. */ .wallet-act-filters { display: flex; gap: 6px; margin: 2px 0 10px; } .wallet-act-filter { border: 1px solid var(--border); background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .wallet-act-filter:hover { color: var(--text); background: var(--bg-elev-1); } .wallet-act-filter.is-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .wallet-act-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wallet-act-right { text-align: right; flex: none; } .wallet-act-amount { font-size: 14.5px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; } .wallet-act-amount.is-pos { color: var(--ok); } .wallet-act-date { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; } /* Settled earnings withdrawal landing — the highlighted "withdraw received" row. */ .wallet-act-row.is-withdrawal { background: color-mix(in srgb, var(--ok) 9%, transparent); } .wallet-act-row.is-withdrawal:hover { background: color-mix(in srgb, var(--ok) 14%, transparent); } .wallet-act-row.is-withdrawal .wallet-act-icon { background: color-mix(in srgb, var(--ok) 18%, var(--bg-elev-1)); color: var(--ok); } /* Receive modal: QR + address. */ .wallet-qr { display: flex; align-items: center; justify-content: center; margin: 18px 0; } .wallet-qr-img { width: 232px; height: 232px; image-rendering: pixelated; border-radius: var(--radius-lg); background: #fff; padding: 14px; box-shadow: var(--shadow-md); } .wallet-qr-loading { font-size: 13px; color: var(--text-faint); padding: 46px 0; } .wallet-receive-addr { background: var(--bg-elev-1); border-radius: var(--radius-md); padding: 13px 16px; margin-bottom: 12px; word-break: break-all; text-align: center; } .wallet-receive-addr code { font-size: 13px; color: var(--text-dim); font-family: var(--font-mono); letter-spacing: 0.2px; } /* Send modal: labeled fields (inputs reuse .auth-input / button reuses .auth-btn). */ .wallet-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .wallet-field-label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); } .wallet-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wallet-send-hint { font-size: 12px; color: var(--warn); margin: -6px 0 14px; min-height: 16px; line-height: 1.5; } /* Custom asset dropdown — a dark, themed replacement for the native