/* ============================================================================ app.css — "intelligence terminal" aesthetic for the money-flow explorer. Ink-black canvas, signal-amber accent (money = gold), monospace display + Newsreader body. Sharp, dense, forensic. ========================================================================== */ :root { --ink: #0a0b0e; /* near-black canvas */ --ink-2: #101218; /* panel surface */ --ink-3: #161922; /* raised surface */ --line: #232733; /* hairline borders */ --line-soft: #1a1d26; --text: #e7e9ee; /* primary text */ --text-dim: #8d93a3; /* secondary text */ --text-faint: #565c6b; --gold: #f2b134; /* money / primary accent */ --gold-soft: #c8902a; --teal: #46c8c0; /* donor */ --rose: #ff6a8a; /* recipient */ --violet: #9a8cff; /* path / highlight */ --r: 4px; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--text); font-family: var(--serif); -webkit-font-smoothing: antialiased; /* Default = scrollable. Pages that need a fixed, non-scrolling full-screen shell (the explorer) opt in via . Every other page (account / login / signup / landing / use-cases) scrolls normally so their content is never clipped on mobile or short viewports. */ overflow-x: hidden; /* never scroll sideways on any page */ -webkit-text-size-adjust: 100%; } /* Let the document (html) be the vertical scroll container; body just grows. This avoids a nested/double scrollbar on scrollable pages. */ html { overflow-y: auto; } body { overflow-y: visible; } /* The explorer is a fixed full-viewport split/tabs layout: its panes are absolutely positioned inside a fixed-height .layout, the chat log scrolls internally, and the bottom nav is fixed — so the page itself must NOT scroll. Scope the lock to the explorer shell only (class on BOTH and so the .layout's percentage heights still resolve and the lock works without relying on :has() support). */ html.app-fixed, html.app-fixed body, body.app-fixed { height: 100%; min-height: 0; overflow: hidden; } /* Subtle film-grain over everything for atmosphere. */ .grain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.035; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------------- Top bar ---------------- */ .topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: linear-gradient(180deg, var(--ink-3), var(--ink)); border-bottom: 1px solid var(--line); position: relative; z-index: 30; } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { font-family: var(--mono); font-weight: 800; font-size: 22px; color: var(--ink); background: var(--gold); width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r); box-shadow: 0 0 0 1px var(--gold-soft), 0 4px 18px rgba(242,177,52,0.25); } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-title { font-family: var(--mono); font-weight: 800; font-size: 15px; letter-spacing: 0.14em; color: var(--text); } /* "Florida" appended after the title in a smaller, gold accent. */ .brand-state { font-weight: 600; font-size: 0.62em; letter-spacing: 0.1em; color: var(--gold); margin-left: 8px; vertical-align: baseline; } .brand-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-faint); margin-top: 3px; } .topbar-controls { display: flex; align-items: center; gap: 16px; } .cycle-field { display: flex; align-items: center; gap: 8px; } .cycle-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--text-faint); } .cycle-select { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--gold); background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; cursor: pointer; outline: none; letter-spacing: 0.04em; } .cycle-select:hover { border-color: var(--gold-soft); } .status-pill { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); transition: background 0.2s; } .status-pill[data-state="ready"] .status-dot { background: var(--teal); box-shadow: 0 0 8px var(--teal); } .status-pill[data-state="thinking"] .status-dot { background: var(--gold); animation: pulse 1s infinite; } .status-pill[data-state="error"] .status-dot { background: var(--rose); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } /* ---------------- Tab strip (Analyst | Map) ---------------- Shown on narrow/mobile screens to switch panes; hidden on wide desktops (>=1100px) where both panes show side-by-side. Also hidden on mobile (<=720px) because the fixed BOTTOM nav bar drives the tabs there. */ .tab-strip { display: flex; gap: 4px; padding: 8px 16px 0; background: linear-gradient(180deg, var(--ink), var(--ink-2)); border-bottom: 1px solid var(--line); } .tab-btn { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: var(--r) var(--r) 0 0; padding: 9px 18px; cursor: pointer; transition: color 0.15s, background 0.15s; position: relative; top: 1px; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--gold); background: var(--ink-2); border-color: var(--line); border-bottom: 1px solid var(--ink-2); } /* ---------------- Layout ---------------- The .layout is a positioned container; the two panes are absolutely stacked so the inactive one can be hidden WITHOUT display:none (which would size sigma's canvas to 0x0). On wide desktops the panes return to a side-by-side grid (see the >=1100px media query). */ .layout { position: relative; height: calc(100% - 58px - 39px); /* topbar (58) + tab strip (~39) */ } .layout > .chat-pane, .layout > .map-pane { position: absolute; inset: 0; } /* Active pane visible & interactive; inactive pane kept laid-out (so sigma stays sized) but invisible and click-through. */ .layout > .pane-active { visibility: visible; opacity: 1; z-index: 2; pointer-events: auto; } .layout > .pane-inactive { visibility: hidden; opacity: 0; z-index: 1; pointer-events: none; } /* ---------------- Chat pane ---------------- */ .chat-pane { display: flex; flex-direction: column; min-width: 0; /* min-height:0 lets the flex children (esp. the scrolling .chat-log) shrink below their content size so the log scrolls INSIDE the pane instead of pushing the input box off-screen. This is the fix for "doesn't scroll". */ min-height: 0; height: 100%; background: var(--ink-2); border-right: 1px solid var(--line); } .chat-head { padding: 14px 18px 12px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: baseline; gap: 10px; } .chat-head-title { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--text); } .chat-head-hint { font-family: var(--mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.04em; } .chat-new { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-dim); background: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .chat-new:hover { border-color: var(--gold-soft); color: var(--gold); } .chat-new .cn-ico { font-size: 12px; line-height: 1; } .chat-log { /* flex:1 + min-height:0 = grows to fill the pane but can shrink so its own overflow scrolls (instead of growing the pane). overflow-anchor:none keeps our manual stick-to-bottom logic in charge of the scroll position. */ flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; padding: 18px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .chat-log::-webkit-scrollbar { width: 8px; } .chat-log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .chat-log::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); } .msg { display: flex; flex-direction: column; max-width: 92%; animation: rise 0.35s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .msg-user { align-self: flex-end; align-items: flex-end; } .msg-ai { align-self: flex-start; } .msg-body { font-family: var(--sans); font-size: 14.5px; line-height: 1.62; color: var(--text); padding: 11px 14px; border-radius: var(--r); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: 0.005em; } .msg-user .msg-body { background: var(--gold); color: #14110a; font-family: var(--mono); font-size: 13px; font-weight: 500; } .msg-ai .msg-body { background: var(--ink-3); border: 1px solid var(--line); border-left: 2px solid var(--gold-soft); } /* AI bubble typography — paragraphs, headings, lists, inline code, emphasis. */ .msg-ai .msg-body p { margin: 0 0 9px; } .msg-ai .msg-body p:last-child { margin-bottom: 0; } .msg-ai .msg-body h4 { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin: 4px 0 8px; } .msg-ai .msg-body h4:first-child { margin-top: 0; } .msg-ai .msg-body ul { margin: 4px 0 9px; padding-left: 18px; list-style: none; } .msg-ai .msg-body ul:last-child { margin-bottom: 0; } .msg-ai .msg-body li { position: relative; margin: 0 0 5px; padding-left: 4px; } .msg-ai .msg-body li::before { content: '›'; position: absolute; left: -14px; color: var(--gold-soft); font-family: var(--mono); font-weight: 700; } .msg-ai .msg-body strong, .msg-ai .msg-body b { color: var(--text); font-weight: 600; } .msg-ai .msg-body em { color: var(--text); font-style: italic; } .msg-ai .msg-body code { font-family: var(--mono); font-size: 0.86em; background: rgba(242,177,52,0.10); color: var(--gold); border: 1px solid rgba(242,177,52,0.18); padding: 1px 5px; border-radius: 3px; white-space: pre-wrap; word-break: break-word; } .msg-ai .msg-body .err { color: var(--rose); font-family: var(--mono); font-size: 13px; } /* Markdown tables (e.g. "Top 10 donors"). Horizontal-scroll wrapper so wide tables never blow out the chat column on mobile. */ .msg-ai .msg-body .md-table-wrap { margin: 8px 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); } .msg-ai .msg-body .md-table-wrap:last-child { margin-bottom: 0; } .msg-ai .msg-body .md-table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-family: var(--mono); color: var(--text); } .msg-ai .msg-body .md-table th { text-align: left; font-weight: 700; letter-spacing: 0.04em; color: var(--gold); background: var(--ink-3); padding: 7px 11px; white-space: nowrap; border-bottom: 1px solid var(--line); } .msg-ai .msg-body .md-table td { padding: 6px 11px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .msg-ai .msg-body .md-table tbody tr:last-child td { border-bottom: none; } .msg-ai .msg-body .md-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.018); } /* Right-align numeric-looking cells is hard generically; keep left for clarity. */ .msg-content { /* inline wrapper that streams; cursor sits as a sibling */ } /* Blinking caret shown only while a bubble is streaming. */ .msg-body .cursor { color: var(--gold); font-weight: 400; margin-left: 1px; animation: blink 1s steps(2, start) infinite; } .msg-ai:not(.streaming) .msg-body .cursor { display: none; } @keyframes blink { 50% { opacity: 0; } } .intro-prompts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .intro-prompts li { font-family: var(--mono); font-size: 12px; color: var(--gold); cursor: pointer; padding: 7px 9px; border: 1px dashed var(--line); border-radius: var(--r); transition: all 0.15s; } .intro-prompts li:hover { border-color: var(--gold-soft); background: rgba(242,177,52,0.06); } /* tool activity chip — running (spinner) -> done (check) / failed (cross). */ .tool-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-dim); background: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; max-width: 92%; animation: rise 0.25s ease both; transition: border-color 0.2s, color 0.2s; } .tool-chip .tc-text { white-space: nowrap; } /* spinner shown while running */ .tool-chip .tc-spinner { width: 11px; height: 11px; flex: none; border-radius: 50%; border: 2px solid rgba(154,140,255,0.25); border-top-color: var(--violet); animation: tc-spin 0.7s linear infinite; } @keyframes tc-spin { to { transform: rotate(360deg); } } .tool-chip.running { border-color: rgba(154,140,255,0.4); color: var(--text); } /* animated ellipsis on the running label */ .tool-chip .tc-ellip { display: inline-block; width: 1ch; overflow: hidden; vertical-align: bottom; animation: tc-ellip 1.2s steps(4, end) infinite; } @keyframes tc-ellip { 0% { width: 0; } 100% { width: 1ch; } } /* completed / failed mark */ .tool-chip .tc-mark { flex: none; font-weight: 700; line-height: 1; } .tool-chip.done { border-color: rgba(70,200,192,0.45); color: var(--text); background: rgba(70,200,192,0.06); } .tool-chip.done .tc-mark { color: var(--teal); } .tool-chip.failed { border-color: rgba(255,106,138,0.45); color: var(--text); background: rgba(255,106,138,0.06); } .tool-chip.failed .tc-mark { color: var(--rose); } .chat-input { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--ink-2); } .chat-input textarea { flex: 1; resize: none; max-height: 140px; font-family: var(--serif); font-size: 15px; color: var(--text); background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 13px; outline: none; line-height: 1.4; /* No scrollbar until the text wraps past max-height (autosize() flips this to auto). Without this a single line rendered a scrollbar by default. */ overflow-y: hidden; /* Themed scrollbar (Firefox) to match .chat-log when it does appear. */ scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .chat-input textarea:focus { border-color: var(--gold-soft); } .chat-input textarea::placeholder { color: var(--text-faint); } /* Themed scrollbar (WebKit/Chromium) — mirrors the .chat-log treatment so the bar matches every theme instead of the default OS grey. */ .chat-input textarea::-webkit-scrollbar { width: 8px; } .chat-input textarea::-webkit-scrollbar-track { background: transparent; } .chat-input textarea::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .chat-input textarea::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); } .send-btn { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: #14110a; background: var(--gold); border: none; border-radius: var(--r); padding: 0 16px; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s; } .send-btn:hover { box-shadow: 0 4px 16px rgba(242,177,52,0.3); } .send-btn:active { transform: translateY(1px); } .send-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; } /* Per-round token usage readout (below the chat input). */ .token-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 16px; background: var(--ink-3); border-top: 1px solid var(--line); flex: 0 0 auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-dim); } .token-meter.has-data { color: var(--text); } .token-meter .tm-label { letter-spacing: 0.12em; color: var(--text-dim); } .token-meter .tm-cell b { color: var(--text); font-weight: 600; } .token-meter .tm-cache b { color: var(--teal); } .token-meter .tm-cost b { color: var(--gold); } /* ---------------- Map pane ---------------- */ /* Map background is a themable token (--map-bg). Default = the noir dark gradient; light themes override it in themes.css so the map re-skins with the rest of the product instead of staying dark. */ :root { --map-bg: radial-gradient(120% 90% at 70% 10%, #0e1118 0%, #07080b 70%); --map-ink: #ffffff; /* node icon/glyph ink color; light themes override to dark */ /* ---- GLASS (glassmorphism) tokens for floating map overlays ---- Real frosted glass = translucent fill + backdrop blur + a fine bright edge + an inner top highlight. Defaults tuned for DARK themes; light themes override below. These drive the .glass treatment shared by the map overlays. */ --glass-bg: rgba(20, 24, 34, 0.55); /* translucent so the blur reads */ --glass-border: rgba(255, 255, 255, 0.14); /* the lit physical glass edge */ --glass-blur: 14px; --glass-highlight: rgba(255, 255, 255, 0.22);/* inner top sheen */ --glass-shadow: rgba(0, 0, 0, 0.5); --glass-tint: rgba(255, 255, 255, 0.04); /* faint surface gradient tint */ } /* Shared frosted-glass surface for floating overlays on the map. Layered to sell the illusion: a translucent gradient fill, a thin bright top-inset highlight, a fine border, and a soft drop shadow — over a real backdrop blur. */ .glass { background: linear-gradient(180deg, var(--glass-tint), transparent 60%), var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); box-shadow: 0 8px 30px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); } .map-pane { position: relative; background: var(--map-bg); } /* Oversized faded Florida topographic map, sitting at the very back of the map pane — like looking down on the state from high altitude. It is HUGE (so only a region fills the viewport), heavily faded, and below the grid, nebula and the sigma canvas. Purely decorative; never intercepts pointer events. */ .map-florida { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-image: url('/ui/florida-topo.png?v=2026060208'); background-repeat: no-repeat; /* Zoom into the landmass and push the bottom-left LEGEND (US locator + elevation scale) off-screen: enlarge, then anchor toward the upper-right where the peninsula/panhandle sit so the legend overflows out of view. */ background-position: 72% 18%; background-size: 175% auto; opacity: var(--map-florida-opacity, 0.10); filter: saturate(0.7) contrast(0.95) blur(0.4px); /* barely-there softness */ mix-blend-mode: var(--map-florida-blend, normal); } /* DEPTH LAYER 1 — a slow-drifting "money nebula": two big, soft radial glows (gold + violet) that breathe across the field, giving the flat background a sense of depth and motion without competing with the nodes. Tinted via theme tokens so light themes stay subtle. Sits BELOW the sigma canvas (z-index 0). */ .map-pane::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* contain the nebula; does NOT clip sibling overlays */ background: radial-gradient(38% 42% at 22% 30%, var(--map-glow-a, rgba(242,177,52,0.10)) 0%, transparent 60%), radial-gradient(42% 46% at 78% 72%, var(--map-glow-b, rgba(124,108,255,0.10)) 0%, transparent 62%), radial-gradient(50% 50% at 60% 18%, var(--map-glow-c, rgba(70,200,192,0.06)) 0%, transparent 65%); background-size: 150% 150%; filter: blur(8px); animation: mapNebula 38s ease-in-out infinite alternate; } /* DEPTH LAYER 2 — a fine star/dot field + edge vignette: a faint dotted texture that reads as a "deep field" behind the graph, plus a vignette that darkens the corners so the eye settles on the center. Also below the sigma canvas. */ .map-pane::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 58%, var(--map-vignette, rgba(2,3,6,0.55)) 100%), radial-gradient(var(--map-dot, rgba(255,255,255,0.05)) var(--map-dot-size, 0.75px), transparent var(--map-dot-size, 0.75px)); background-size: 100% 100%, var(--map-dot-gap, 26px) var(--map-dot-gap, 26px); background-position: center, center; } @keyframes mapNebula { 0% { background-position: 18% 30%; opacity: 0.85; } 50% { background-position: 70% 64%; opacity: 1; } 100% { background-position: 40% 20%; opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { /* Honor the user's reduced-motion preference everywhere: near-zero all looping and entrance animations (spinners, pulse, blink, nebula, slide/rise). Spinners stay present but effectively static — the standard a11y compromise. */ *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } .map-pane::before { animation: none; } } /* The sigma canvas starts below the map-header. The header is ~36px tall (main row) + optional chips row (~28px). Using top:34px gives the main row its space; the chips row floats over the very top of the canvas (translucent, acceptable). z-index:1 keeps it ABOVE the depth layers above. */ .sigma-host { position: absolute; top: 34px; left: 0; right: 0; bottom: 0; z-index: 1; } /* ===================== Map header bar ===================== */ /* Proper horizontal header spanning the full width of the map pane. Left = stats + Graph Details · Center = search · Right = canvas controls. Second row = TARGET / SELECTED chips (collapses when both hidden). */ .map-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; flex-direction: column; pointer-events: none; } .mh-row { display: flex; align-items: center; pointer-events: none; } .mh-main { padding: 6px 12px; background: color-mix(in srgb, var(--ink-2) 92%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); gap: 10px; pointer-events: auto; } .mh-group { display: flex; align-items: center; } .mh-left { flex: 0 0 auto; } .mh-center { flex: 1 1 auto; justify-content: center; min-width: 0; } .mh-right { flex: 0 0 auto; } .mh-chips { padding: 4px 12px 2px; gap: 8px; flex-wrap: wrap; } /* Bottom-right overlay: the Clear/Fit map controls. */ .map-overlay-br { position: absolute; bottom: 14px; right: 16px; z-index: 5; display: flex; flex-direction: column; gap: 6px; pointer-events: none; align-items: flex-end; } /* TOP-LEFT canvas overlay: the manual search panel lives here (on the canvas itself, not in the header). Sits just inside the canvas top-left corner. */ .map-overlay-tl { position: absolute; top: 44px; left: 14px; z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* ---- Header: live counts + GRAPH DETAILS ---- */ .map-counts { display: flex; align-items: center; gap: 12px; border-radius: var(--r); padding: 2px 0; } .map-counts .mc-stat { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.05em; text-transform: uppercase; } .map-counts .mc-stat b { color: var(--text); font-weight: 700; } .map-counts .mc-details-btn { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; color: var(--accent-contrast); background: var(--gold); border: none; border-radius: var(--r); padding: 4px 9px; cursor: pointer; text-transform: uppercase; } .map-counts .mc-details-btn:hover { filter: brightness(1.08); } .map-counts .mc-details-btn:disabled { opacity: 0.4; cursor: default; } /* LINKS toggle: dimmed when off, purple-accented when on */ .map-counts .mc-toggle { opacity: 0.5; } .map-counts .mc-toggle.on { opacity: 1; color: #b4a0ff; border-color: rgba(180,160,255,0.5); } /* ---- Header: canvas controls ---- */ .canvas-bar { display: flex; align-items: center; gap: 8px; padding: 2px 0; } .canvas-bar .canvas-switcher { font-family: var(--mono); font-size: 10.5px; color: var(--text); background: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; cursor: pointer; max-width: 180px; } .canvas-bar .canvas-name-input { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.04em; max-width: 170px; width: 130px; background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 3px 6px; cursor: text; transition: border-color 0.12s, background 0.12s, color 0.12s; text-overflow: ellipsis; } .canvas-bar .canvas-name-input::placeholder { color: var(--text-faint); font-weight: 500; } .canvas-bar .canvas-name-input:hover { border-color: var(--line); color: var(--text); } .canvas-bar .canvas-name-input:focus { outline: none; border-color: var(--gold); background: var(--ink-3); color: var(--text); } .canvas-bar .canvas-btn { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); background: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; cursor: pointer; text-transform: uppercase; } .canvas-bar .canvas-btn:hover { color: var(--gold); border-color: var(--gold-soft); } .canvas-bar .canvas-btn-danger:hover { color: #ff6a8a; border-color: rgba(255,106,138,0.5); } /* ===================== Graph Details tree ===================== */ .gd-export { display: flex; align-items: center; gap: 8px; } .gd-export-btn { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--text); background: var(--ink-3, rgba(255,255,255,0.06)); border: 1px solid var(--line); border-radius: var(--r); padding: 5px 10px; cursor: pointer; text-transform: uppercase; } .gd-export-btn:hover { border-color: var(--gold); color: var(--gold); } .gd-tree { font-family: var(--mono); font-size: 12px; color: var(--text); } .gd-tree details { border-left: 1px solid var(--line-soft); margin-left: 2px; } .gd-sum { cursor: pointer; padding: 5px 6px; list-style: none; display: flex; align-items: baseline; gap: 8px; border-radius: 4px; } .gd-sum::-webkit-details-marker { display: none; } .gd-sum:hover { background: rgba(255,255,255,0.04); } .gd-chev { display: inline-block; width: 0; height: 0; border-left: 5px solid var(--text-dim); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.12s; flex: none; transform: translateY(2px); } details[open] > .gd-sum > .gd-chev { transform: rotate(90deg) translateX(2px); } .gd-sum-cluster .gd-name { font-weight: 700; color: var(--text); } .gd-tag { color: var(--text-faint); font-size: 10px; letter-spacing: 0.04em; } .gd-tx-count { color: var(--text-dim); } .gd-cluster-body { padding: 2px 0 6px 16px; } .gd-entity { display: flex; justify-content: space-between; gap: 10px; padding: 3px 6px; border-top: 1px solid var(--line-soft); } .gd-entity-center .gd-ename { color: var(--gold); font-weight: 700; } .gd-center-tag { color: var(--text-faint); font-style: normal; font-size: 9px; } .gd-emoney { color: var(--text-dim); font-size: 10.5px; white-space: nowrap; } /* a contributor entity that expands to reveal ITS transactions with the center */ .gd-entity-node { border-top: 1px solid var(--line-soft); } .gd-sum-entity .gd-ename { color: var(--text); font-weight: 600; } .gd-erel { color: var(--gold); font-size: 10.5px; margin-left: auto; white-space: nowrap; } .gd-ent-count { color: var(--text-dim); } .gd-leaves { padding-left: 18px; } .gd-leaf { border-top: 1px solid var(--line-soft); } .gd-leaf-amt { color: var(--gold); font-weight: 700; } .gd-leaf.gd-refund .gd-leaf-amt { color: var(--rose); } .gd-leaf-amt em { font-style: normal; font-size: 9px; color: var(--rose); } .gd-leaf-meta { color: var(--text-faint); font-size: 10px; } /* per-pair (entity ↔ center) drill-down header + controls */ .gd-pair { padding: 4px 0 6px 6px; } .gd-pair-head { font-size: 11px; color: var(--text-dim); margin: 2px 0 4px; } .gd-pair-head b { color: var(--text); } .gd-pair-summary { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; font-size: 10.5px; } .gd-sum-money { color: var(--gold); } .gd-sum-money.gd-sum-ref { color: var(--rose); } .gd-sum-dir { color: var(--text-dim); } .gd-sum-dir.gd-in { color: var(--teal, #46c8c0); } .gd-sum-dir.gd-out { color: var(--rose); } .gd-sum-dir em { font-style: normal; color: var(--text-faint); } .gd-sum-span { color: var(--text-faint); } .gd-pair-controls { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; } .gd-ctl { font-size: 10.5px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; } .gd-ctl select { font-family: var(--mono); font-size: 10.5px; background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; } .gd-dir { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 0 4px; border-radius: 3px; flex: none; } .gd-dir-in-tag { color: var(--teal, #46c8c0); border: 1px solid currentColor; } .gd-dir-out-tag { color: var(--rose); border: 1px solid currentColor; } .gd-leaf.gd-dir-out .gd-leaf-amt { color: var(--rose); } /* entity-row direction chips: IN = money INTO the center (teal), OUT = money OUT of the center (rose) */ .gd-erel .gd-dir-in { color: var(--teal, #46c8c0); border: 1px solid currentColor; } .gd-erel .gd-dir-out { color: var(--rose); border: 1px solid currentColor; } .gd-erel .gd-amt { font-weight: 700; } .gd-source { padding: 6px 10px 8px 22px; background: rgba(255,255,255,0.02); } .gd-src-head { font-size: 10px; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 4px; } .gd-src-grid { display: grid; grid-template-columns: max-content 1fr; gap: 1px 12px; } .gd-src-k { color: var(--text-dim); font-size: 10.5px; } .gd-src-v { color: var(--text); font-size: 10.5px; word-break: break-word; } .gd-source-none { color: var(--text-faint); font-style: italic; } .gd-loadmore { font-family: var(--mono); font-size: 10.5px; color: var(--gold); background: none; border: 1px dashed var(--line); border-radius: 4px; padding: 5px 10px; margin: 6px 0 6px 16px; cursor: pointer; } .gd-loadmore:hover { border-color: var(--gold); } /* SELECTED chip — floating on the canvas, top-right, below the header bar. Clicking the name rolls the detail card down; × deselects. */ /* The chip carries [hidden] when nothing is selected; the display rule below would otherwise override the UA [hidden]{display:none}, leaving it visible. */ .map-selected-chip[hidden] { display: none !important; } .map-selected-chip { position: absolute; top: 44px; right: 14px; z-index: 56; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--glass-tint), transparent 60%), var(--glass-bg); border: 1px solid var(--gold-soft); border-radius: var(--r); padding: 5px 10px 5px 12px; max-width: 300px; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); box-shadow: 0 6px 18px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); } .map-selected-chip .mt-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold); flex: 0 0 auto; } .map-selected-chip .mt-clickable { display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; padding: 0; text-align: left; font-family: var(--sans); font-size: 12px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .map-selected-chip .mt-clickable:hover { color: var(--gold); } .map-target .mt-menu-empty { font-family: var(--mono); font-size: 10px; color: var(--text-faint); padding: 7px 9px; } .map-selected-chip .mt-clear { flex: 0 0 auto; background: none; border: none; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; } .map-selected-chip .mt-clear:hover { color: var(--rose); } .detail-card .dc-btn.dc-primary { background: var(--gold); color: #14110a; border-color: var(--gold); font-weight: 700; } /* LOD rank lens picker */ .map-rank { pointer-events: auto; align-self: flex-start; margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 8px; } .map-rank .mh-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-faint); margin-right: 2px; } .map-rank .rank-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-dim); background: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; cursor: pointer; } .map-rank .rank-btn:hover { color: var(--text); border-color: var(--gold-soft); } .map-rank .rank-btn.active { color: #14110a; background: var(--gold); border-color: var(--gold); font-weight: 700; } /* detail-card section headers + refund tint */ .detail-card .dc-section { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; color: var(--gold); margin: 12px 0 2px; padding-top: 8px; border-top: 1px solid var(--line); } .detail-card .dc-section:first-of-type { border-top: none; } .detail-card .dc-stat .v.refund { color: var(--rose); } .map-legend { position: absolute; bottom: 14px; left: 16px; z-index: 5; display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); background: rgba(7,8,11,0.7); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .legend-row { display: flex; align-items: center; gap: 8px; } .lg-swatch { width: 10px; height: 10px; border-radius: 50%; } .lg-swatch.donor { background: var(--teal); } .lg-swatch.recip { background: var(--rose); } .lg-edge { width: 16px; height: 2px; background: rgba(120,200,210,0.7); } .lg-edge.loop { background: rgba(255,120,90,0.95); } .lg-ico { width: 16px; text-align: center; font-size: 12px; line-height: 1; } .lg-ico.lg-star { color: #ffd65a; } /* collapsible KEY */ .map-legend .lg-toggle { background: transparent; border: 0; color: var(--text-dim); cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; padding: 0; text-align: left; } .map-legend .lg-toggle::before { content: '▸ '; } .map-legend:not(.collapsed) .lg-toggle::before { content: '▾ '; } .map-legend.collapsed .lg-body { display: none; } .map-legend .lg-body { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; } /* [hidden] must win over the display rules below (desktop block; flex on mobile), otherwise closing the card / deselecting leaves it visible. */ .detail-card[hidden] { display: none !important; } .detail-card { /* Rolls down directly under the SELECTED chip (top:44px + chip height ~32px + 4px gap = ~80px). Anchored top-right to align with the chip. */ position: absolute; top: 80px; right: 14px; z-index: 65; width: 280px; max-height: calc(100% - 90px); overflow-y: auto; background: linear-gradient(180deg, var(--glass-tint), transparent 60%), var(--glass-bg); border: 1px solid var(--glass-border); border-top: 2px solid var(--gold); border-radius: var(--r); padding: 16px; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); box-shadow: 0 18px 50px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); animation: slideDown 0.2s ease both; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .detail-card::-webkit-scrollbar { width: 6px; } .detail-card::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .detail-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-faint); font-size: 20px; cursor: pointer; line-height: 1; } .detail-close:hover { color: var(--text); } .detail-card .dc-cycle { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 1px 6px; margin-bottom: 6px; } .detail-card .dc-name { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--text); padding-right: 18px; margin-bottom: 4px; word-break: break-word; } .detail-card .dc-addr { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.03em; margin-bottom: 4px; padding-right: 18px; word-break: break-word; } .detail-card .dc-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.05em; margin-bottom: 12px; } .detail-card .dc-stat { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 13px; } .detail-card .dc-stat .k { color: var(--text-dim); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; } .detail-card .dc-stat .v { font-family: var(--mono); font-weight: 500; color: var(--text); } .detail-card .dc-stat .v.money { color: var(--gold); } .detail-card .dc-link { color: var(--violet, #9a8cff); text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; } .detail-card .dc-link:hover { color: var(--gold); } .detail-card .dc-stat .v .dc-cnt { font-size: 9.5px; color: var(--text-faint); font-weight: 400; margin-left: 4px; } .detail-card .dc-actions { display: flex; gap: 8px; margin-top: 14px; } .detail-card .dc-btn { flex: 1; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--text); background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; cursor: pointer; transition: all 0.15s; } .detail-card .dc-btn:hover { border-color: var(--gold-soft); color: var(--gold); } .detail-card .dc-details { width: 100%; margin: 12px 0 0; } /* ===================== Generic confirm/alert modal ===================== */ .app-modal { position: fixed; inset: 0; z-index: 300; } .app-modal[hidden] { display: none; } /* ===================== AI opt-in / disclaimer gate ===================== */ .ai-disclaimer { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; } .ai-disc-backdrop { position: absolute; inset: 0; background: rgba(4,6,10,0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ai-disc-panel { position: relative; width: min(540px, 92vw); max-height: 88vh; overflow-y: auto; background: var(--ink-2); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,0.6); -webkit-overflow-scrolling: touch; } .ai-disc-head { padding: 18px 22px 8px; border-bottom: 1px solid var(--line); } .ai-disc-head h3 { margin: 0; font-family: var(--editorial, var(--sans)); font-size: 18px; font-weight: 600; color: var(--text); } .ai-disc-body { padding: 16px 22px; font-family: var(--sans); font-size: 13px; color: var(--text-dim); line-height: 1.55; } .ai-disc-body p { margin: 0 0 10px; } .ai-disc-body ul { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; } .ai-disc-body strong { color: var(--text); } .ai-disc-body a { color: var(--gold); } .ai-disc-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text); padding: 10px 0 2px; } .ai-disc-check input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--gold); } .ai-disc-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px 18px; border-top: 1px solid var(--line); } .ai-disc-decline, .ai-disc-accept { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 6px; padding: 10px 16px; cursor: pointer; border: 1px solid var(--line); } .ai-disc-decline { background: var(--ink-3); color: var(--text-dim); } .ai-disc-decline:hover { color: var(--text); border-color: var(--gold-soft); } .ai-disc-accept { background: var(--gold); color: #14110a; border-color: var(--gold); } .ai-disc-accept:disabled { opacity: 0.4; cursor: not-allowed; } .ai-disc-accept:not(:disabled):hover { filter: brightness(1.06); } @media (max-width: 720px) { .ai-disc-panel { width: 94vw; } .ai-disc-foot { position: sticky; bottom: 0; background: var(--ink-2); } } .am-backdrop { position: absolute; inset: 0; background: rgba(4,6,10,0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .am-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,0.6); padding: 20px 22px 18px; } .am-title { font-family: var(--editorial, var(--sans)); font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; line-height: 1.25; } .am-body { font-family: var(--sans); font-size: 13px; color: var(--text-dim); line-height: 1.5; white-space: pre-wrap; margin-bottom: 18px; } .am-actions { display: flex; justify-content: flex-end; gap: 8px; } .am-btn { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 6px; padding: 8px 16px; cursor: pointer; border: 1px solid var(--line); background: var(--ink-3); color: var(--text-dim); transition: all 0.14s; } .am-btn:hover { color: var(--text); border-color: var(--gold-soft); } .am-btn.am-primary { background: var(--gold); color: #14110a; border-color: var(--gold); } .am-btn.am-primary:hover { filter: brightness(1.06); color: #14110a; } .am-btn.am-primary.am-danger { background: #d6485f; border-color: #d6485f; color: #fff; } .am-btn.am-primary.am-danger:hover { background: #e3556c; color: #fff; } /* ===================== Entity DETAILS modal ===================== */ .entity-modal { position: fixed; inset: 0; z-index: 200; } .entity-modal[hidden] { display: none; } .em-backdrop { position: absolute; inset: 0; background: rgba(4,6,10,0.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .em-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(640px, 92vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,0.6); overflow: hidden; } .em-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); } .em-title { font-family: var(--editorial, var(--sans)); font-size: 19px; font-weight: 600; color: var(--text); line-height: 1.2; } .em-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.05em; margin-top: 4px; line-height: 1.5; } .em-meta .em-meta-part { white-space: nowrap; } .em-meta .em-meta-sep { margin: 0 6px; opacity: 0.5; } .em-head .em-title-wrap { flex: 1 1 auto; min-width: 0; } .em-actions { display: flex; gap: 6px; align-items: center; flex: none; } .em-export-btn { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); background: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px; cursor: pointer; } .em-export-btn:hover { color: var(--gold); border-color: var(--gold-soft); } .em-close { font-size: 24px; line-height: 1; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 0 2px; flex: none; } .em-close:hover { color: var(--text); } .em-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--line); } .em-tab { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 10px 9px; cursor: pointer; transition: all 0.15s; text-transform: uppercase; white-space: nowrap; } .em-tab:hover { color: var(--text); } .em-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .em-body { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 120px; } /* the .dc-ftm-* / .dc-ledger-head styles below are reused inside .em-body */ @media (max-width: 560px) { .em-dialog { width: 96vw; max-height: 90vh; } } /* ===================== Node action-ring + Expand popup ===================== */ /* Dim + slight blur over the map when a node is selected, so the action ring reads clearly. Below the ring (z 60) but above the canvas. Click it to deselect. */ .select-dim { position: absolute; inset: 0; z-index: 50; background: rgba(8,8,14,0.3); backdrop-filter: blur(0.4px); -webkit-backdrop-filter: blur(0.4px); transition: opacity 0.15s ease; cursor: default; /* Clickable scrim: clicking it does a SOFT dismiss (hides dim + ring) but keeps the selection + chip + detail card. The chip, card and action ring sit at a HIGHER z-index than this scrim, so they stay fully interactive above it. */ } .select-dim[hidden] { display: none; } .node-actions { position: absolute; z-index: 60; width: 0; height: 0; pointer-events: none; --ring-r: 34px; } .node-actions[hidden] { display: none; } .node-actions .na-btn { position: absolute; pointer-events: auto; cursor: pointer; width: 26px; height: 26px; margin: -13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; background: rgba(16,20,30,0.92); color: #f4f6fb; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,0.5); transition: transform 0.12s, background 0.12s, border-color 0.12s; } .node-actions .na-btn:hover { transform: scale(1.18); border-color: var(--gold); background: rgba(28,34,48,0.98); } /* 4 buttons around the ring at compass points: expand=top, details=right, remove=bottom, move=left. */ .node-actions .na-expand { left: 0; top: calc(-1 * var(--ring-r)); font-size: 15px; } .node-actions .na-details { left: var(--ring-r); top: 0; } .node-actions .na-remove { left: 0; top: var(--ring-r); font-size: 13px; } .node-actions .na-move { left: calc(-1 * var(--ring-r)); top: 0; cursor: grab; } .node-actions .na-move:active { cursor: grabbing; } .node-actions .na-remove:hover { border-color: #ff6a8a; background: rgba(48,24,30,0.98); } .sigma-host.cluster-dragging { cursor: grabbing; } /* ── MANUAL SEARCH drawer ─────────────────────────────────────────────── */ .search-panel { /* Lives in the top-left canvas overlay. The toggle is the visible chip; the body drops down left-aligned beneath it on expand. */ position: relative; z-index: 40; display: flex; flex-direction: column; font-family: 'JetBrains Mono', monospace; } .search-panel .sp-toggle { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--ink-3); color: var(--text); font: inherit; font-size: 12px; } .search-panel .sp-toggle:hover { border-color: var(--gold-soft); } .search-panel .sp-toggle-lbl { letter-spacing: 0.04em; } .search-panel.collapsed .sp-body { display: none; } .search-panel .sp-body { position: absolute; top: 100%; left: 0; width: 320px; max-width: 80vw; margin-top: 6px; display: flex; flex-direction: column; padding: 10px; background: linear-gradient(180deg, var(--glass-tint), transparent 60%), var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); box-shadow: 0 8px 28px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); } .search-panel .sp-head { padding-top: 2px; } .search-panel .sp-input { width: 100%; box-sizing: border-box; padding: 8px 10px; background: rgba(0,0,0,0.35); border: 1px solid var(--line); border-radius: 6px; color: #f4f6fb; font: inherit; font-size: 12.5px; } .search-panel .sp-input:focus { outline: none; border-color: var(--gold); } .search-panel .sp-hint { font-size: 10.5px; color: var(--text-faint); margin: 6px 2px 4px; } .search-panel .sp-results { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; } .search-panel .sp-empty { font-size: 11.5px; color: var(--text-faint); padding: 8px 4px; } .search-panel .sp-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: grab; background: rgba(255,255,255,0.02); border: 1px solid transparent; } .search-panel .sp-row:hover { background: rgba(154,140,255,0.10); border-color: var(--line); } .search-panel .sp-row:active { cursor: grabbing; } .search-panel .sp-g { font-size: 14px; flex: 0 0 auto; } .search-panel .sp-txt { display: flex; flex-direction: column; min-width: 0; } .search-panel .sp-name { font-size: 12px; color: #f4f6fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-panel .sp-sub { font-size: 10px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-panel .sp-money { color: var(--gold); } .search-panel.sp-dragging { opacity: 0.96; } /* "+50 more" button anchored near an expanded cluster (continues the spiral). */ .expand-more { position: absolute; z-index: 55; transform: translate(-50%, -120%); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--text); background: rgba(16,20,30,0.94); border: 1px solid var(--gold-soft); border-radius: 14px; padding: 5px 11px; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.5); transition: all 0.12s; } .expand-more:hover { background: var(--gold); color: #14110a; border-color: var(--gold); } .expand-more[hidden] { display: none; } .expand-popup { position: absolute; z-index: 210; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(340px, 88vw); background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); padding: 16px 18px; } .expand-popup[hidden] { display: none; } .ep-head { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .ep-head span { color: var(--gold); } .ep-sub { font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.45; } .ep-options { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; } .ep-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; cursor: pointer; font-size: 13px; color: var(--text); border-radius: var(--r); border: 1px solid transparent; } .ep-opt:hover { background: var(--ink-3); } .ep-opt input { accent-color: var(--gold); width: 15px; height: 15px; } .ep-opt em { color: var(--text-faint); font-style: normal; font-family: var(--mono); font-size: 10.5px; margin-left: auto; } .ep-actions { display: flex; gap: 8px; margin-top: 14px; } .ep-btn { flex: 1; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--text); background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r); padding: 9px; cursor: pointer; transition: all 0.15s; text-transform: uppercase; } .ep-btn:hover { border-color: var(--gold-soft); color: var(--gold); } .ep-btn.ep-primary { background: var(--gold); color: #14110a; border-color: var(--gold); } /* detail-card TABS (legacy — Follow the money was inline; now in the modal) */ .detail-card .dc-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--line); } .detail-card .dc-tab { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 8px 7px; cursor: pointer; transition: all 0.15s; text-transform: uppercase; } .detail-card .dc-tab:hover { color: var(--text); } .detail-card .dc-tab.active { color: var(--gold); border-bottom-color: var(--gold); } .detail-card .dc-tabbody[hidden] { display: none; } /* FOLLOW THE MONEY tab */ .dc-ftm-intro { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; } .dc-ftm-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .dc-ftm-controls label { font-family: var(--mono); font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; } .dc-ftm-controls input { width: 78px; font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r); padding: 5px 7px; } .dc-ftm-controls .dc-btn { flex: 1; } .dc-ftm-loading { font-family: var(--mono); font-size: 11px; color: var(--text-faint); padding: 10px 0; } .dc-ftm-recon { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; } .dc-ftm-recon .r-main { font-family: var(--mono); font-size: 20px; font-weight: 800; color: var(--gold); line-height: 1.1; } .dc-ftm-recon .r-main span { font-size: 11px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; } .dc-ftm-recon .r-sub { font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-top: 4px; } .dc-ledger-head { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-bottom: 8px; letter-spacing: 0.02em; } .dc-ftm-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; } /* inside the modal the list can use the full dialog height (em-body scrolls) */ .em-body .dc-ftm-list { max-height: none; } .dc-ftm-row { position: relative; display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; text-align: left; width: 100%; background: none; border: none; border-bottom: 1px solid var(--line-soft); padding: 7px 6px; cursor: pointer; overflow: hidden; } .dc-ftm-row:hover { background: var(--ink-3); } .dc-ftm-row .f-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(242,177,52,0.10); z-index: 0; } .dc-ftm-row > span:not(.f-bar) { position: relative; z-index: 1; } .dc-ftm-row .f-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-ftm-row .f-flag { font-style: normal; font-family: var(--mono); font-size: 8.5px; color: var(--gold); letter-spacing: 0.05em; padding: 1px 4px; border: 1px solid var(--gold-soft); border-radius: 3px; } .dc-ftm-row .f-pct { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--gold); } .dc-ftm-row .f-amt { font-family: var(--mono); font-size: 11px; color: var(--text-dim); min-width: 52px; text-align: right; } .dc-ftm-row .f-rev { font-family: var(--mono); font-size: 9px; color: var(--text-faint); min-width: 62px; text-align: right; } /* ---- clickable transaction -> raw source record (entity modal) ---- */ .dc-ftm-txn { border-bottom: 1px solid var(--line-soft); } .dc-ftm-txn > summary { list-style: none; cursor: pointer; } .dc-ftm-txn > summary::-webkit-details-marker { display: none; } /* summary IS the row: 5 columns (dir chip + name + amount + meta), no inner border */ .dc-ftm-txn > summary.dc-ftm-row { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; border-bottom: none; padding: 7px 6px; overflow: hidden; } .dc-ftm-txn[open] > summary.dc-ftm-row { background: var(--ink-3); } .dc-ftm-txn > summary .gd-dir { z-index: 1; } /* the expanded raw-source panel */ .dc-txn-source { padding: 8px 10px 12px; background: var(--ink-1, rgba(0,0,0,0.18)); border-top: 1px solid var(--line-soft); } .dc-src-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; color: var(--gold); margin-bottom: 8px; text-transform: uppercase; } .dc-src-grid { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 3px 12px; } .dc-src-k { font-family: var(--mono); font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .dc-src-v { font-family: var(--mono); font-size: 11px; color: var(--text); word-break: break-word; } /* per-hop money-path tabs (showHopDetail) */ .detail-card .hop-detail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .detail-card .hop-detail[hidden] { display: none; } .detail-card .hop-detail-title { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 8px; } .hop-tabs-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .hop-tab { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-dim); background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r); padding: 5px 8px; cursor: pointer; transition: all 0.15s; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hop-tab:hover { color: var(--text); border-color: var(--gold-soft); } .hop-tab.active { color: var(--gold); border-color: var(--gold-soft); background: var(--ink-2); } .hop-pane { display: none; } .hop-pane.active { display: block; } .hop-loading, .hop-empty { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); padding: 8px 0; } .hop-summary { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; } .hop-sum-amt { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--gold); } .hop-sum-cnt { font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; } .hop-tx-list { max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .hop-tx-list::-webkit-scrollbar { width: 6px; } .hop-tx-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .hop-tx { padding: 5px 0; border-top: 1px solid var(--line-soft); } .hop-tx:first-child { border-top: none; } .hop-tx-top { display: flex; justify-content: space-between; align-items: baseline; } .hop-tx-date { font-family: var(--mono); font-size: 10px; color: var(--text-dim); } .hop-tx-amt { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--gold); } .hop-tx-amt.neg { color: var(--rose); } .hop-tx-detail { font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-top: 2px; word-break: break-word; } .hop-tx-kind { color: var(--teal); font-weight: 700; letter-spacing: 0.04em; } .hop-more { font-family: var(--mono); font-size: 9.5px; color: var(--text-faint); text-align: center; padding-top: 6px; } .tooltip { position: absolute; z-index: 70; pointer-events: none; font-family: var(--mono); font-size: 11px; color: var(--text); background: linear-gradient(180deg, var(--glass-tint), transparent 60%), var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border-radius: var(--r); padding: 7px 10px; max-width: 240px; box-shadow: 0 8px 24px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); } .tooltip .tt-name { font-weight: 700; } .tooltip .tt-sub { color: var(--text-faint); font-size: 10px; margin-top: 2px; } .tooltip .tt-money { color: var(--gold); margin-top: 3px; } .tooltip .tt-money .tt-ctx { color: var(--text-faint); font-weight: 400; } /* ============================================================================ App menu (top-bar) — expanded, obviously-a-menu styling. Extends the base .cf-nav rules from auth.css; these only apply on the explorer header. ========================================================================== */ .cf-appmenu { gap: 14px; } .cf-nav-links { display: flex; align-items: center; gap: 6px; } .cf-nav-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; padding: 7px 11px; border: 1px solid transparent; border-radius: var(--r); transition: color 0.15s, border-color 0.15s, background 0.15s; } .cf-nav-link:hover { color: var(--text); border-color: var(--line); } .cf-nav-link.active { color: var(--gold); border-color: var(--line); background: var(--ink-3); } .cf-nav-link .cf-ico { display: inline-flex; } .cf-logout { display: inline-flex; align-items: center; gap: 6px; } .cf-logout .cf-ico { display: inline-flex; } /* ============================================================================ Mobile bottom nav bar + "More" sheet. Hidden on desktop; shown <=720px. ========================================================================== */ .cf-bottomnav { display: none; } /* The sheet is always in the DOM; it is hidden via opacity/visibility and only becomes visible+interactive when `.open` is added (see .cf-sheet.open rules). Do NOT use display:none here — that nukes the slide-up transition AND, because the .cf-sheet position rule below doesn't restore display, left the sheet permanently hidden so the "More" button appeared to do nothing. */ .cf-sheet:not(.open) { opacity: 0; visibility: hidden; } .cf-sheet.open { opacity: 1; visibility: visible; } .cf-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; /* display toggled to flex in the mobile media query */ align-items: stretch; justify-content: space-around; background: linear-gradient(180deg, var(--ink-3), var(--ink)); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); } .cf-bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; text-decoration: none; cursor: pointer; color: var(--text-dim); font-family: var(--mono); padding: 9px 4px 8px; transition: color 0.15s; } .cf-bn-item:hover { color: var(--text); } .cf-bn-item.active { color: var(--gold); } .cf-bn-ico { display: inline-flex; } .cf-bn-label { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; } .cf-bn-item.active .cf-bn-ico svg { filter: drop-shadow(0 0 6px rgba(242,177,52,0.5)); } /* slide-up sheet for theme + balance + logout */ .cf-sheet { position: fixed; inset: 0; z-index: 90; } .cf-sheet:not(.open) { pointer-events: none; } .cf-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.2s; } .cf-sheet.open .cf-sheet-backdrop { opacity: 1; } .cf-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink-2); border-top: 2px solid var(--gold); border-radius: 12px 12px 0 0; padding: 16px 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform 0.25s ease; box-shadow: 0 -18px 50px rgba(0,0,0,0.55); } .cf-sheet.open .cf-sheet-panel { transform: translateY(0); } .cf-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cf-sheet-title { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); } .cf-sheet-close { background: none; border: none; color: var(--text-faint); font-size: 24px; line-height: 1; cursor: pointer; } .cf-sheet-close:hover { color: var(--text); } .cf-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); min-width: 0; max-width: 100%; } .cf-sheet-row > .cf-sheet-k { flex: 0 0 auto; } /* Canvas sheet slots hold the relocated map-header controls. The controls were styled via `.canvas-bar .x` selectors; moved out of .canvas-bar they fall back to white UA form styles — so RE-APPLY the themed dark styling here. */ .cf-sheet-slot { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; max-width: 100%; justify-content: flex-end; flex-wrap: wrap; overflow: hidden; } .cf-sheet-slot .canvas-switcher { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; font-size: 16px; text-overflow: ellipsis; font-family: var(--mono); color: var(--text); background: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; -webkit-appearance: none; appearance: none; } .cf-sheet-slot .canvas-name-input { flex: 1 1 auto; width: auto; max-width: 100%; min-width: 0; font-size: 16px; font-family: var(--mono); color: var(--text); background: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; } .cf-sheet-slot .canvas-name-input::placeholder { color: var(--text-faint); } .cf-sheet-slot .canvas-btn, .cf-sheet-slot .mc-details-btn { flex: 0 0 auto; padding: 9px 14px; min-height: 40px; font-size: 12px; font-family: var(--mono); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); background: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; } .cf-sheet-slot .canvas-btn-danger { color: var(--rose); border-color: rgba(255,106,138,0.4); } .cf-sheet-slot .mc-details-btn:disabled { opacity: 0.4; } .cf-sheet-slot .mc-toggle { opacity: 1; } .cf-sheet-slot .mc-toggle.on { color: var(--gold); border-color: var(--gold-soft); } .cf-sheet-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); } .cf-sheet-v { font-family: var(--mono); font-size: 12px; color: var(--text); } .cf-sheet-themehost { display: inline-flex; } .cf-sheet-logout { width: 100%; justify-content: center; margin-top: 16px; padding: 12px; } /* The theme picker normally drops DOWN (top:100%). Inside the bottom "More" sheet that pushes it off the bottom of the screen, so flip it to open UPWARD and cap its height so it always stays on-screen + scrolls if needed. */ .cf-sheet .theme-switch-menu { top: auto; bottom: calc(100% + 8px); right: 0; max-height: 60vh; overflow-y: auto; } /* ============================================================================ Responsive breakpoints ========================================================================== */ /* Splitter hidden by default (mobile/tab mode); the wide-desktop media query below turns it on. This base rule MUST come BEFORE the media query — when it came AFTER, equal specificity + later source order made `display:none` ALWAYS win, so the drag bar never appeared and resizing never worked. */ .pane-splitter { display: none; } /* WIDE DESKTOP (>=900px): hide the tab strip and lay the panes side-by-side (the original split). Override the absolute stacking with a grid. */ @media (min-width: 900px) { .tab-strip { display: none; } .layout { position: static; display: grid; grid-template-columns: var(--chat-w, 28%) 6px 1fr; height: calc(100% - 58px); } /* explicit column placement so sigma's pane always gets a real width even before the grid resolves (auto-placement + absolute base rule left the map pane 0-wide -> sigma rendered blank). */ .layout > .chat-pane { position: relative; inset: auto; min-width: 0; grid-column: 1; } .pane-splitter { grid-column: 2; } .layout > .map-pane { position: relative; inset: auto; min-width: 0; grid-column: 3; } /* In split mode both panes are always visible regardless of tab state. */ .layout > .pane-active, .layout > .pane-inactive { visibility: visible; opacity: 1; pointer-events: auto; z-index: auto; } .pane-splitter { display: block; cursor: col-resize; background: var(--line); transition: background 0.15s; position: relative; align-self: stretch; } .pane-splitter:hover, .pane-splitter.dragging { background: var(--gold-soft); } .pane-splitter::after { content: ''; position: absolute; inset: 0 -5px; cursor: col-resize; } } /* MOBILE (<=720px): bottom nav takes over. The top-bar app menu links collapse (balance/theme move into the bottom sheet); the tab strip is replaced by the bottom bar's Analyst/Map buttons. Pad content so the fixed bar never covers it. */ @media (max-width: 720px) { /* MOBILE HEADER = TITLE ONLY. Everything else (status, balance, theme, the Explorer/Account/Logout app menu) lives in the bottom-nav footer + its "More" sheet, so the top bar is just the brand. */ .topbar, .account-bar { height: 52px; padding: 0 12px; max-width: 100vw; overflow: hidden; gap: 8px; } .brand-sub, .auth-sub { display: none; } .brand-mark, .auth-mark { flex: 0 0 auto; } /* logo fixed; only the text truncates */ /* Hide every non-title control in BOTH headers (explorer .topbar + account .account-bar). The footer bottom-nav is the menu on mobile. */ .topbar .topbar-controls, .account-bar > div:last-child, /* the theme + navHost group on the account bar */ .cf-appmenu, #themeHost, #navHost, .status-pill { display: none !important; } /* Tab strip hidden — the bottom bar drives the tabs. */ .tab-strip { display: none; } /* layout height = viewport minus topbar minus bottom nav. */ .layout { height: calc(100% - 52px); } /* Bottom nav + content padding so nothing hides behind the fixed bar. */ .cf-bottomnav { display: flex; } body.has-bottomnav .map-pane, body.has-bottomnav .chat-pane { padding-bottom: 0; } /* Reserve space at the foot of the scrolling chat log + map for the bar. */ body.has-bottomnav .chat-input { margin-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } body.has-bottomnav .map-legend { bottom: calc(14px + 58px + env(safe-area-inset-bottom, 0px)); } body.has-bottomnav .detail-card { right: 10px; left: 10px; width: auto; } /* SCROLLING pages that carry the bottom nav (e.g. account): pad the bottom of the scrolling content so the fixed bar never covers the last controls. */ body.has-bottomnav .account-wrap { padding-bottom: calc(64px + 58px + env(safe-area-inset-bottom, 0px)); } .cycle-field { gap: 6px; } .cycle-label { display: none; } .topbar-controls { gap: 10px; } /* Keep the header on one line and let the brand text truncate rather than push the cycle select / status pill off-screen. */ .topbar { gap: 10px; } .brand { min-width: 0; flex: 1 1 auto; } .brand-text { min-width: 0; } .brand-title { font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-controls { flex: 0 0 auto; } .cycle-select { padding: 7px 8px; } } /* PHONE (<=480px): the brand sub already hides; on the explorer the status pill text is non-essential (the dot conveys state) and the brand can shrink so the cycle select always fits without horizontal scroll. */ @media (max-width: 480px) { .brand-mark { width: 28px; height: 28px; font-size: 18px; } .brand-title { font-size: 12px; } .status-pill { padding: 6px; } .status-pill #statusText { display: none; } .status-pill { gap: 0; } } /* Tablet between the split and mobile bottom nav: keep the tab strip, keep the header menu (it shows above 720px). Nothing extra needed — the default (absolute stacked panes + tab strip) already handles it. */