Spaces:
Sleeping
Sleeping
| @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"); | |
| :root { | |
| --map-50: #f6f9fc; | |
| --map-75: #f0f5fa; | |
| --map-100: #e7eef6; | |
| --map-150: #dce6f1; | |
| --map-200: #cbd9e8; | |
| --map-300: #9fb5ce; | |
| --map-400: #7f99ba; | |
| --map-500: #5f7faa; | |
| --map-600: #46648d; | |
| --map-700: #304b78; | |
| --map-800: #243a5c; | |
| --map-900: #172338; | |
| --panel-bg: rgba(249, 252, 255, 0.88); | |
| --panel-bg-strong: rgba(255, 255, 255, 0.94); | |
| --panel-bg-soft: rgba(234, 241, 249, 0.72); | |
| --panel-border: rgba(68, 96, 133, 0.18); | |
| --panel-border-strong: rgba(68, 96, 133, 0.28); | |
| --panel-shadow: 0 24px 70px rgba(32, 50, 77, 0.18); | |
| --panel-shadow-soft: 0 14px 38px rgba(32, 50, 77, 0.12); | |
| --text-strong: #172338; | |
| --text: #30445f; | |
| --text-muted: #6f7f94; | |
| --text-soft: #8796aa; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body, | |
| #root { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| overflow: hidden; | |
| background: var(--map-100); | |
| color: var(--text); | |
| font-family: "IBM Plex Sans", system-ui, sans-serif; | |
| } | |
| button, | |
| textarea { | |
| font: inherit; | |
| } | |
| button { | |
| border: 0; | |
| } | |
| button:focus-visible, | |
| textarea:focus-visible { | |
| outline: 2px solid rgba(70, 100, 141, 0.72); | |
| outline-offset: 2px; | |
| } | |
| @keyframes scan-sweep { | |
| 0% { | |
| transform: translateX(-18vw); | |
| opacity: 0; | |
| } | |
| 10%, | |
| 88% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateX(116vw); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes radar-spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 0.4; | |
| transform: scale(0.96); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: -260px 0; | |
| } | |
| 100% { | |
| background-position: 260px 0; | |
| } | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| } | |
| .app-shell { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| background: var(--map-100); | |
| } | |
| .map-canvas, | |
| .mapbox-host { | |
| position: absolute; | |
| inset: 0; | |
| } | |
| .map-canvas { | |
| z-index: 0; | |
| background: var(--map-100); | |
| isolation: isolate; | |
| } | |
| .map-canvas::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| z-index: 4; | |
| pointer-events: none; | |
| background: rgba(95, 127, 170, 0.18); | |
| mix-blend-mode: multiply; | |
| } | |
| .map-canvas::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| z-index: 5; | |
| pointer-events: none; | |
| background: | |
| linear-gradient(90deg, rgba(246, 249, 252, 0.16), transparent 18%, transparent 78%, rgba(246, 249, 252, 0.16)), | |
| linear-gradient(180deg, rgba(246, 249, 252, 0.12), transparent 24%, transparent 78%, rgba(246, 249, 252, 0.16)); | |
| } | |
| .map-canvas .mapboxgl-canvas { | |
| filter: sepia(0.12) saturate(1.34) hue-rotate(174deg) brightness(0.98) contrast(1.04); | |
| } | |
| .map-canvas.is-bright .mapboxgl-canvas, | |
| .map-canvas.is-bright canvas { | |
| filter: brightness(1.04) saturate(1.16); | |
| } | |
| .map-token-missing { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| z-index: 70; | |
| display: flex; | |
| width: min(420px, calc(100vw - 32px)); | |
| transform: translate(-50%, -50%); | |
| flex-direction: column; | |
| gap: 7px; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 12px; | |
| padding: 18px; | |
| background: var(--panel-bg-strong); | |
| box-shadow: var(--panel-shadow); | |
| color: var(--text); | |
| } | |
| .map-token-missing strong { | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 18px; | |
| } | |
| .map-token-missing span { | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| } | |
| .mapboxgl-ctrl-bottom-right { | |
| right: 90px; | |
| bottom: 20px; | |
| } | |
| .map-token-note { | |
| position: absolute; | |
| right: 16px; | |
| bottom: 82px; | |
| z-index: 25; | |
| padding: 7px 10px; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.78); | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| backdrop-filter: blur(12px); | |
| } | |
| .map-controls { | |
| position: absolute; | |
| right: 16px; | |
| bottom: 24px; | |
| z-index: 32; | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .map-controls button, | |
| .top-actions button, | |
| .secondary-action { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| min-width: 42px; | |
| height: 42px; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 9px; | |
| background: rgba(255, 255, 255, 0.84); | |
| color: var(--map-700); | |
| cursor: pointer; | |
| backdrop-filter: blur(14px); | |
| } | |
| .map-controls button:hover, | |
| .top-actions button:hover, | |
| .secondary-action:hover { | |
| border-color: var(--panel-border-strong); | |
| color: var(--map-900); | |
| } | |
| .secondary-action.is-playing { | |
| color: #ffffff; | |
| border-color: var(--map-700); | |
| background: var(--map-700); | |
| animation: speak-pulse 1.4s ease-in-out infinite; | |
| } | |
| .secondary-action.is-generating, | |
| .secondary-action:disabled { | |
| cursor: default; | |
| opacity: 0.78; | |
| } | |
| @keyframes speak-pulse { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(48, 75, 120, 0.35); } | |
| 50% { box-shadow: 0 0 0 5px rgba(48, 75, 120, 0); } | |
| } | |
| .secondary-action .spin { | |
| animation: tts-spin 0.9s linear infinite; | |
| } | |
| @keyframes tts-spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .map-scan-fx { | |
| position: absolute; | |
| inset: 0; | |
| z-index: 20; | |
| pointer-events: none; | |
| overflow: hidden; | |
| } | |
| .map-scan-fx.cascade span { | |
| position: absolute; | |
| top: 9%; | |
| left: 0; | |
| width: 12vw; | |
| height: 82%; | |
| background: linear-gradient(90deg, transparent, rgba(95, 127, 170, 0.28), transparent); | |
| filter: blur(5px); | |
| animation: scan-sweep 2.6s linear infinite; | |
| } | |
| .map-scan-fx.cascade i { | |
| position: absolute; | |
| top: 9%; | |
| left: 0; | |
| width: 2px; | |
| height: 82%; | |
| background: linear-gradient(180deg, transparent, rgba(214, 226, 241, 0.95), transparent); | |
| box-shadow: 0 0 24px 6px rgba(95, 127, 170, 0.45); | |
| animation: scan-sweep 2.6s linear infinite; | |
| } | |
| .map-scan-fx.radar span { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 94vmin; | |
| height: 94vmin; | |
| margin: -47vmin 0 0 -47vmin; | |
| border-radius: 50%; | |
| background: conic-gradient( | |
| from 0deg, | |
| rgba(95, 127, 170, 0), | |
| rgba(95, 127, 170, 0.34), | |
| rgba(159, 181, 206, 0.12), | |
| rgba(95, 127, 170, 0) | |
| ); | |
| animation: radar-spin 2.15s linear infinite; | |
| } | |
| .map-scan-fx.radar i { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 28vmin; | |
| height: 28vmin; | |
| margin: -14vmin 0 0 -14vmin; | |
| border: 1px solid rgba(95, 127, 170, 0.42); | |
| border-radius: 50%; | |
| box-shadow: 0 0 40px rgba(95, 127, 170, 0.18); | |
| animation: pulse 1.2s ease-in-out infinite; | |
| } | |
| .glass-panel { | |
| z-index: 40; | |
| border: 1px solid var(--panel-border); | |
| background: linear-gradient(180deg, var(--panel-bg-strong), var(--panel-bg)); | |
| box-shadow: var(--panel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.74); | |
| backdrop-filter: blur(18px); | |
| } | |
| .brand-lockup { | |
| position: absolute; | |
| left: 24px; | |
| top: 22px; | |
| z-index: 55; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .brand-mark { | |
| display: grid; | |
| width: 42px; | |
| height: 42px; | |
| place-items: center; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.78); | |
| color: var(--map-700); | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 12px 30px rgba(32, 50, 77, 0.1); | |
| backdrop-filter: blur(12px); | |
| } | |
| .tower-logo { | |
| width: 38px; | |
| height: 31px; | |
| overflow: visible; | |
| } | |
| .heartbeat-logo path { | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .heartbeat-logo .heartbeat-wing { | |
| stroke: var(--map-500); | |
| stroke-width: 4.1; | |
| } | |
| .heartbeat-logo .heartbeat-tower-stem, | |
| .heartbeat-logo .heartbeat-tower-side { | |
| stroke: var(--map-800); | |
| stroke-width: 4.35; | |
| } | |
| .heartbeat-logo .heartbeat-tower-deck, | |
| .heartbeat-logo .heartbeat-tower-pod { | |
| stroke: var(--map-800); | |
| stroke-width: 3.4; | |
| } | |
| .heartbeat-logo .heartbeat-tower-base { | |
| stroke: var(--map-600); | |
| stroke-width: 3.2; | |
| } | |
| .heartbeat-logo .heartbeat-tower-pod { | |
| fill: rgba(95, 127, 170, 0.16); | |
| } | |
| .brand-lockup strong { | |
| display: block; | |
| color: var(--text-strong); | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 23px; | |
| line-height: 1; | |
| } | |
| .brand-lockup small { | |
| display: block; | |
| margin-top: 5px; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| } | |
| .command-bar { | |
| position: absolute; | |
| left: 50%; | |
| bottom: 22px; | |
| z-index: 56; | |
| display: flex; | |
| width: min(620px, calc(100vw - 680px)); | |
| min-width: 500px; | |
| min-height: 88px; | |
| transform: translateX(-50%); | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 7px; | |
| padding: 10px; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 26px; | |
| background: rgba(255, 255, 255, 0.92); | |
| box-shadow: 0 20px 54px rgba(32, 50, 77, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78); | |
| backdrop-filter: blur(18px); | |
| } | |
| .composer-label { | |
| display: inline-flex; | |
| width: fit-content; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 0 6px; | |
| color: var(--map-700); | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .command-avatar { | |
| display: grid; | |
| flex: 0 0 auto; | |
| width: 24px; | |
| height: 24px; | |
| place-items: center; | |
| border: 1px solid rgba(68, 96, 133, 0.14); | |
| border-radius: 50%; | |
| background: rgba(231, 238, 246, 0.74); | |
| color: var(--map-700); | |
| } | |
| .composer-suggestions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin-bottom: 2px; | |
| } | |
| .suggestion-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 5px 10px; | |
| border: 1px solid rgba(68, 96, 133, 0.18); | |
| border-radius: 999px; | |
| background: rgba(231, 238, 246, 0.6); | |
| color: var(--map-700); | |
| font-size: 11.5px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.15s ease, border-color 0.15s ease; | |
| } | |
| .suggestion-chip:hover:not(:disabled) { | |
| border-color: var(--map-600); | |
| background: rgba(231, 238, 246, 0.95); | |
| } | |
| .suggestion-chip:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| .composer-input-row { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 10px; | |
| } | |
| .command-bar textarea { | |
| flex: 1; | |
| min-width: 0; | |
| min-height: 42px; | |
| padding: 2px 4px 3px 6px; | |
| resize: none; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| color: var(--text-strong); | |
| font-size: 14px; | |
| line-height: 1.42; | |
| } | |
| .command-bar textarea::placeholder { | |
| color: var(--text-soft); | |
| } | |
| .primary-action { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| min-width: 128px; | |
| height: 48px; | |
| padding: 0 18px; | |
| border-radius: 9px; | |
| background: var(--map-800); | |
| color: #ffffff; | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-weight: 700; | |
| cursor: pointer; | |
| box-shadow: 0 14px 28px rgba(36, 58, 92, 0.2); | |
| } | |
| .command-bar .primary-action { | |
| min-width: 44px; | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 999px; | |
| background: var(--map-800); | |
| padding: 0; | |
| box-shadow: none; | |
| } | |
| .send-action svg { | |
| margin-left: 1px; | |
| } | |
| .send-action.is-running svg { | |
| margin-left: 0; | |
| animation: spin 0.9s linear infinite; | |
| } | |
| .primary-action:hover:not(:disabled) { | |
| background: var(--map-700); | |
| } | |
| .primary-action:disabled { | |
| cursor: default; | |
| opacity: 0.7; | |
| } | |
| .active-layer-chip { | |
| position: absolute; | |
| left: 50%; | |
| top: 24px; | |
| z-index: 52; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| max-width: min(460px, calc(100vw - 420px)); | |
| transform: translateX(-50%); | |
| padding: 7px 13px; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.72); | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| backdrop-filter: blur(12px); | |
| } | |
| .active-layer-chip.running { | |
| background: rgba(255, 255, 255, 0.82); | |
| box-shadow: 0 14px 34px rgba(32, 50, 77, 0.12); | |
| } | |
| .active-layer-chip span { | |
| flex: 0 0 auto; | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--map-700); | |
| box-shadow: 0 0 12px rgba(48, 75, 120, 0.55); | |
| } | |
| .active-layer-chip small { | |
| min-width: 0; | |
| overflow: hidden; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .active-layer-chip strong { | |
| min-width: 0; | |
| overflow: hidden; | |
| color: var(--text-strong); | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .top-actions { | |
| position: absolute; | |
| right: 18px; | |
| top: 24px; | |
| z-index: 55; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .top-actions button { | |
| min-width: 0; | |
| padding: 0 14px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .top-actions b { | |
| display: inline-flex; | |
| min-width: 20px; | |
| height: 20px; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 7px; | |
| background: rgba(95, 127, 170, 0.14); | |
| color: var(--map-700); | |
| font-size: 11px; | |
| } | |
| .collapsed-panel-tab { | |
| position: absolute; | |
| top: 112px; | |
| z-index: 54; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| max-width: 178px; | |
| height: 42px; | |
| padding: 0 12px; | |
| border: 1px solid var(--panel-border); | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.82); | |
| color: var(--map-800); | |
| cursor: pointer; | |
| box-shadow: 0 14px 34px rgba(32, 50, 77, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78); | |
| backdrop-filter: blur(16px); | |
| } | |
| .collapsed-panel-tab:hover { | |
| border-color: var(--panel-border-strong); | |
| background: rgba(255, 255, 255, 0.94); | |
| } | |
| .collapsed-panel-tab.left { | |
| left: 16px; | |
| } | |
| .collapsed-panel-tab.right { | |
| right: 16px; | |
| } | |
| .collapsed-panel-tab span { | |
| overflow: hidden; | |
| font-size: 12px; | |
| font-weight: 800; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .app-shell.map-focus .active-layer-chip { | |
| background: rgba(255, 255, 255, 0.6); | |
| } | |
| .results-panel { | |
| position: absolute; | |
| left: 16px; | |
| top: 104px; | |
| display: flex; | |
| width: 304px; | |
| max-height: calc(100vh - 214px); | |
| flex-direction: column; | |
| border-radius: 12px; | |
| padding: 14px; | |
| } | |
| .panel-title { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .panel-title.compact { | |
| margin-bottom: 10px; | |
| } | |
| .panel-title h2 { | |
| margin: 0; | |
| color: var(--text-strong); | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 15px; | |
| line-height: 1.15; | |
| } | |
| .mode-switcher { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 5px; | |
| margin: -2px 0 12px; | |
| padding: 4px; | |
| border: 1px solid rgba(68, 96, 133, 0.12); | |
| border-radius: 10px; | |
| background: rgba(231, 238, 246, 0.72); | |
| } | |
| .mode-switcher button { | |
| display: grid; | |
| height: 30px; | |
| place-items: center; | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--map-500); | |
| cursor: pointer; | |
| } | |
| .mode-switcher button:hover { | |
| color: var(--map-900); | |
| background: rgba(255, 255, 255, 0.68); | |
| } | |
| .mode-switcher button.active { | |
| color: #ffffff; | |
| background: var(--map-700); | |
| } | |
| .panel-title span, | |
| .panel-title svg { | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| } | |
| .result-list { | |
| display: flex; | |
| min-height: 0; | |
| flex-direction: column; | |
| gap: 8px; | |
| overflow-y: auto; | |
| padding-right: 2px; | |
| } | |
| .result-row { | |
| display: flex; | |
| width: 100%; | |
| flex-direction: column; | |
| gap: 7px; | |
| padding: 11px 10px; | |
| border: 1px solid rgba(68, 96, 133, 0.1); | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.58); | |
| color: var(--text); | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .result-row:hover, | |
| .result-row.hovered { | |
| border-color: rgba(70, 100, 141, 0.3); | |
| background: rgba(244, 248, 252, 0.9); | |
| } | |
| .result-row.selected { | |
| border-color: rgba(48, 75, 120, 0.36); | |
| background: rgba(231, 238, 246, 0.94); | |
| box-shadow: inset 0 0 0 1px rgba(48, 75, 120, 0.08); | |
| } | |
| .result-main, | |
| .result-meta, | |
| .result-bottom { | |
| display: flex; | |
| min-width: 0; | |
| align-items: center; | |
| gap: 9px; | |
| } | |
| .result-main b { | |
| width: 16px; | |
| color: var(--text-soft); | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 12px; | |
| } | |
| .result-main strong { | |
| flex: 1; | |
| min-width: 0; | |
| overflow: hidden; | |
| color: var(--text-strong); | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 14px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .score-badge { | |
| display: inline-flex; | |
| min-width: 34px; | |
| height: 24px; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 7px; | |
| color: #ffffff; | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .trust-badge { | |
| display: inline-flex; | |
| min-width: 76px; | |
| height: 24px; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid rgba(68, 96, 133, 0.18); | |
| border-radius: 7px; | |
| padding: 0 8px; | |
| background: rgba(255, 255, 255, 0.62); | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| font-weight: 800; | |
| } | |
| .trust-badge.sourced { | |
| border-color: rgba(48, 75, 120, 0.28); | |
| background: rgba(231, 238, 246, 0.8); | |
| color: var(--map-800); | |
| } | |
| .compare-grid .trust-badge { | |
| min-width: 58px; | |
| padding: 0 4px; | |
| font-size: 9.5px; | |
| } | |
| .result-meta { | |
| flex-wrap: wrap; | |
| padding-left: 25px; | |
| } | |
| .result-meta small { | |
| display: inline-flex; | |
| min-width: 0; | |
| align-items: center; | |
| gap: 5px; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| line-height: 1.25; | |
| overflow-wrap: anywhere; | |
| } | |
| .result-bottom { | |
| flex-wrap: wrap; | |
| padding-left: 25px; | |
| } | |
| .result-bottom em, | |
| .detail-head span, | |
| .priority-block span { | |
| display: inline-flex; | |
| align-items: center; | |
| border: 1px solid; | |
| border-radius: 7px; | |
| padding: 3px 8px; | |
| font-size: 10.5px; | |
| font-style: normal; | |
| font-weight: 700; | |
| } | |
| .result-bottom em, | |
| .priority-block span { | |
| max-width: 100%; | |
| overflow-wrap: anywhere; | |
| } | |
| .mini-metric { | |
| display: flex; | |
| min-width: 0; | |
| flex: 1; | |
| align-items: center; | |
| gap: 7px; | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| } | |
| .source-needed { | |
| color: var(--text-soft); | |
| font-size: 10.5px; | |
| font-style: normal; | |
| font-weight: 700; | |
| overflow-wrap: anywhere; | |
| } | |
| .mini-metric i, | |
| .compare-bar i { | |
| display: block; | |
| height: 5px; | |
| flex: 1; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: rgba(68, 96, 133, 0.1); | |
| } | |
| .mini-metric span, | |
| .compare-bar span { | |
| display: block; | |
| height: 100%; | |
| border-radius: inherit; | |
| } | |
| .secondary-action { | |
| width: 100%; | |
| margin-top: 12px; | |
| color: var(--map-700); | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .loading-stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| } | |
| .loading-stack > span:not(.loading-line) { | |
| height: 62px; | |
| border-radius: 10px; | |
| background: linear-gradient( | |
| 90deg, | |
| rgba(95, 127, 170, 0.08), | |
| rgba(95, 127, 170, 0.18), | |
| rgba(95, 127, 170, 0.08) | |
| ); | |
| background-size: 260px 100%; | |
| animation: shimmer 1.2s linear infinite; | |
| } | |
| .loading-line { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .loading-line i, | |
| .pulse-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--map-700); | |
| } | |
| .loading-line i, | |
| .pulse-dot.active { | |
| animation: pulse 1s ease-in-out infinite; | |
| } | |
| .layers-panel { | |
| position: absolute; | |
| left: 336px; | |
| bottom: 92px; | |
| width: 220px; | |
| border-radius: 12px; | |
| padding: 14px; | |
| } | |
| .layer-toggle { | |
| display: flex; | |
| width: 100%; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 0; | |
| background: transparent; | |
| color: var(--text); | |
| cursor: pointer; | |
| font-size: 12.5px; | |
| } | |
| .layer-toggle i { | |
| position: relative; | |
| display: block; | |
| width: 38px; | |
| height: 22px; | |
| border-radius: 999px; | |
| background: rgba(68, 96, 133, 0.16); | |
| } | |
| .layer-toggle i.active { | |
| background: var(--map-700); | |
| } | |
| .layer-toggle b { | |
| position: absolute; | |
| left: 3px; | |
| top: 3px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #ffffff; | |
| transition: transform 0.2s ease; | |
| } | |
| .layer-toggle i.active b { | |
| transform: translateX(16px); | |
| } | |
| .run-style { | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid rgba(68, 96, 133, 0.14); | |
| } | |
| .run-style > span { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .run-style div { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4px; | |
| padding: 3px; | |
| border-radius: 10px; | |
| background: rgba(231, 238, 246, 0.74); | |
| } | |
| .run-style button { | |
| height: 30px; | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .run-style button.active { | |
| background: var(--map-700); | |
| color: #ffffff; | |
| } | |
| .detail-stack, | |
| .agent-rail { | |
| position: absolute; | |
| right: 16px; | |
| top: 104px; | |
| z-index: 42; | |
| width: 318px; | |
| } | |
| .detail-stack { | |
| display: flex; | |
| /* Leave room at the bottom-right so the panel never covers the map controls. */ | |
| max-height: calc(100vh - 196px); | |
| flex-direction: column; | |
| gap: 12px; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| /* Fade the scrolled top/bottom edges into the map so the column reads as seamless. */ | |
| padding-block: 18px 22px; | |
| -webkit-mask-image: linear-gradient( | |
| to bottom, | |
| transparent 0, | |
| #000 18px, | |
| #000 calc(100% - 22px), | |
| transparent 100% | |
| ); | |
| mask-image: linear-gradient( | |
| to bottom, | |
| transparent 0, | |
| #000 18px, | |
| #000 calc(100% - 22px), | |
| transparent 100% | |
| ); | |
| } | |
| .safety-panel, | |
| .detail-panel, | |
| .research-panel, | |
| .agent-rail { | |
| border-radius: 12px; | |
| padding: 15px; | |
| } | |
| .safety-panel p, | |
| .tradeoff, | |
| .agent-card p, | |
| .priority-block p { | |
| margin: 0; | |
| color: var(--text-muted); | |
| font-size: 11.5px; | |
| line-height: 1.45; | |
| } | |
| .safety-bar { | |
| position: relative; | |
| height: 9px; | |
| margin-top: 5px; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: linear-gradient(90deg, var(--map-150), var(--map-400) 52%, var(--map-800)); | |
| } | |
| .safety-bar span { | |
| position: absolute; | |
| top: -4px; | |
| width: 4px; | |
| height: 17px; | |
| border-radius: 5px; | |
| background: #ffffff; | |
| box-shadow: 0 0 0 1px rgba(36, 58, 92, 0.18), 0 0 12px rgba(255, 255, 255, 0.8); | |
| } | |
| .safety-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| margin: 7px 0 10px; | |
| color: var(--text-soft); | |
| font-size: 10.5px; | |
| } | |
| .safety-fact { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| margin: 3px 0 9px; | |
| } | |
| .safety-fact strong { | |
| color: var(--text-strong); | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 26px; | |
| line-height: 1; | |
| } | |
| .safety-fact span { | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| line-height: 1.3; | |
| } | |
| .data-gap { | |
| display: flex; | |
| min-width: 0; | |
| align-items: flex-start; | |
| gap: 8px; | |
| border: 1px solid rgba(68, 96, 133, 0.13); | |
| border-radius: 8px; | |
| padding: 9px; | |
| background: rgba(255, 255, 255, 0.48); | |
| color: var(--text-muted); | |
| font-size: 11.5px; | |
| line-height: 1.4; | |
| } | |
| .data-gap svg { | |
| flex: 0 0 auto; | |
| margin-top: 1px; | |
| color: var(--map-700); | |
| } | |
| .data-gap span { | |
| min-width: 0; | |
| overflow-wrap: anywhere; | |
| } | |
| .research-panel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .research-meta { | |
| display: flex; | |
| min-width: 0; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .research-meta span { | |
| max-width: 100%; | |
| overflow: hidden; | |
| border: 1px solid rgba(68, 96, 133, 0.14); | |
| border-radius: 999px; | |
| padding: 4px 8px; | |
| background: rgba(231, 238, 246, 0.64); | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .fact-list { | |
| display: grid; | |
| gap: 7px; | |
| } | |
| .fact-list span { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 2px 10px; | |
| border: 1px solid rgba(68, 96, 133, 0.1); | |
| border-radius: 8px; | |
| padding: 8px; | |
| background: rgba(255, 255, 255, 0.52); | |
| } | |
| .fact-list strong, | |
| .fact-list b { | |
| color: var(--text-strong); | |
| font-size: 12px; | |
| } | |
| .fact-list b { | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| } | |
| .fact-list small { | |
| grid-column: 1 / -1; | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| } | |
| .research-source-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 7px; | |
| } | |
| .research-source-list a { | |
| display: grid; | |
| grid-template-columns: 28px 1fr; | |
| gap: 8px; | |
| align-items: start; | |
| border: 1px solid rgba(68, 96, 133, 0.1); | |
| border-radius: 8px; | |
| padding: 8px; | |
| background: rgba(255, 255, 255, 0.56); | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| .research-source-list a:hover { | |
| border-color: var(--panel-border-strong); | |
| background: rgba(255, 255, 255, 0.76); | |
| } | |
| .research-source-list b { | |
| display: grid; | |
| width: 26px; | |
| height: 24px; | |
| place-items: center; | |
| border-radius: 7px; | |
| background: rgba(95, 127, 170, 0.13); | |
| color: var(--map-700); | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 10px; | |
| } | |
| .research-source-list strong { | |
| display: -webkit-box; | |
| overflow: hidden; | |
| color: var(--text-strong); | |
| font-size: 12px; | |
| line-height: 1.25; | |
| -webkit-box-orient: vertical; | |
| -webkit-line-clamp: 2; | |
| } | |
| .research-source-list small { | |
| display: block; | |
| overflow: hidden; | |
| margin-top: 4px; | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .detail-head { | |
| display: flex; | |
| min-width: 0; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .detail-head > div { | |
| min-width: 0; | |
| } | |
| .detail-head h2, | |
| .agent-head h2, | |
| .compare-head h2 { | |
| min-width: 0; | |
| overflow-wrap: anywhere; | |
| margin: 0; | |
| color: var(--text-strong); | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 22px; | |
| line-height: 1.05; | |
| } | |
| .detail-head span { | |
| max-width: 100%; | |
| margin-top: 8px; | |
| overflow-wrap: anywhere; | |
| } | |
| .detail-panel h3 { | |
| margin: 0 0 10px; | |
| color: var(--text); | |
| font-size: 12.5px; | |
| } | |
| .why-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 9px; | |
| } | |
| .why-list span { | |
| display: flex; | |
| min-width: 0; | |
| align-items: flex-start; | |
| gap: 8px; | |
| color: var(--text); | |
| font-size: 12.5px; | |
| line-height: 1.35; | |
| overflow-wrap: anywhere; | |
| } | |
| .why-list span.good svg { | |
| color: var(--map-700); | |
| } | |
| .why-list span.warn { | |
| color: var(--text-muted); | |
| } | |
| .detail-split { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 9px; | |
| margin: 16px 0 12px; | |
| } | |
| .evidence-metric { | |
| display: flex; | |
| min-width: 0; | |
| flex-direction: column; | |
| gap: 7px; | |
| border: 1px solid rgba(68, 96, 133, 0.12); | |
| border-radius: 8px; | |
| padding: 10px; | |
| background: rgba(255, 255, 255, 0.56); | |
| } | |
| .evidence-metric.sourced { | |
| border-color: rgba(48, 75, 120, 0.18); | |
| background: rgba(255, 255, 255, 0.68); | |
| } | |
| .evidence-metric > div { | |
| display: grid; | |
| min-width: 0; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 8px; | |
| align-items: baseline; | |
| } | |
| .evidence-metric small { | |
| min-width: 0; | |
| overflow: hidden; | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| font-weight: 700; | |
| text-overflow: ellipsis; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .evidence-metric strong { | |
| min-width: 0; | |
| max-width: 128px; | |
| overflow-wrap: anywhere; | |
| color: var(--text-strong); | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 14.5px; | |
| line-height: 1.15; | |
| text-align: right; | |
| } | |
| .evidence-metric p { | |
| margin: 0; | |
| color: var(--text-muted); | |
| font-size: 11.5px; | |
| line-height: 1.4; | |
| overflow-wrap: anywhere; | |
| } | |
| .metric-graphic { | |
| min-width: 0; | |
| } | |
| .metric-graphic svg { | |
| width: 100%; | |
| height: 56px; | |
| } | |
| .tradeoff { | |
| display: flex; | |
| min-width: 0; | |
| gap: 8px; | |
| color: var(--text-muted); | |
| overflow-wrap: anywhere; | |
| } | |
| .tradeoff svg { | |
| flex: 0 0 auto; | |
| margin-top: 1px; | |
| } | |
| .detail-actions { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 9px; | |
| margin-top: 14px; | |
| } | |
| .detail-actions .primary-action, | |
| .detail-actions .secondary-action { | |
| width: 100%; | |
| min-width: 0; | |
| height: 48px; | |
| margin: 0; | |
| padding: 0 12px; | |
| overflow: hidden; | |
| font-size: 12px; | |
| white-space: nowrap; | |
| } | |
| .agent-rail { | |
| display: flex; | |
| /* Leave room at the bottom-right so the panel never covers the map controls. */ | |
| max-height: calc(100vh - 196px); | |
| flex-direction: column; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .agent-head { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 15px; | |
| border-bottom: 1px solid rgba(68, 96, 133, 0.14); | |
| } | |
| .agent-head h2 { | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| font-size: 16px; | |
| } | |
| .agent-head p { | |
| margin: 5px 0 0; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| } | |
| .agent-head button, | |
| .compare-head button { | |
| display: grid; | |
| width: 32px; | |
| height: 32px; | |
| place-items: center; | |
| border: 1px solid rgba(68, 96, 133, 0.16); | |
| border-radius: 9px; | |
| background: rgba(255, 255, 255, 0.56); | |
| color: var(--map-700); | |
| cursor: pointer; | |
| } | |
| .agent-list { | |
| display: flex; | |
| min-height: 0; | |
| flex: 1; | |
| flex-direction: column; | |
| gap: 9px; | |
| overflow-y: auto; | |
| padding: 14px 12px; | |
| /* Soften the scrolled card edges so the list dissolves rather than hard-cutting. */ | |
| -webkit-mask-image: linear-gradient( | |
| to bottom, | |
| transparent 0, | |
| #000 14px, | |
| #000 calc(100% - 16px), | |
| transparent 100% | |
| ); | |
| mask-image: linear-gradient( | |
| to bottom, | |
| transparent 0, | |
| #000 14px, | |
| #000 calc(100% - 16px), | |
| transparent 100% | |
| ); | |
| } | |
| .agent-card { | |
| min-width: 0; | |
| border: 1px solid rgba(68, 96, 133, 0.12); | |
| border-radius: 8px; | |
| padding: 11px; | |
| background: rgba(255, 255, 255, 0.58); | |
| } | |
| .agent-row { | |
| display: grid; | |
| min-width: 0; | |
| grid-template-columns: 34px minmax(0, 1fr) minmax(58px, auto) 28px; | |
| align-items: center; | |
| gap: 9px; | |
| } | |
| .agent-row > span { | |
| display: grid; | |
| width: 32px; | |
| height: 32px; | |
| place-items: center; | |
| border: 1px solid; | |
| border-radius: 8px; | |
| } | |
| .agent-row strong { | |
| overflow: hidden; | |
| color: var(--text-strong); | |
| font-size: 13px; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .agent-row em { | |
| min-width: 0; | |
| overflow: hidden; | |
| border-radius: 7px; | |
| padding: 3px 7px; | |
| font-size: 10px; | |
| font-style: normal; | |
| font-weight: 700; | |
| text-align: center; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .agent-row em.queued { | |
| background: rgba(68, 96, 133, 0.1); | |
| color: var(--text-muted); | |
| } | |
| .agent-row em.scanning { | |
| background: rgba(95, 127, 170, 0.12); | |
| color: var(--map-600); | |
| } | |
| .agent-row em.scoring { | |
| background: rgba(70, 100, 141, 0.13); | |
| color: var(--map-700); | |
| } | |
| .agent-row em.done { | |
| background: rgba(36, 58, 92, 0.12); | |
| color: var(--map-800); | |
| } | |
| .agent-row b { | |
| min-width: 0; | |
| overflow: hidden; | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 14px; | |
| text-align: right; | |
| text-overflow: ellipsis; | |
| } | |
| .agent-source-count { | |
| display: inline-flex; | |
| width: fit-content; | |
| max-width: calc(100% - 43px); | |
| margin: 8px 0 0 43px; | |
| border: 1px solid rgba(68, 96, 133, 0.12); | |
| border-radius: 999px; | |
| padding: 3px 8px; | |
| background: rgba(231, 238, 246, 0.52); | |
| color: var(--text-muted); | |
| font-size: 10px; | |
| font-weight: 800; | |
| overflow-wrap: anywhere; | |
| } | |
| .agent-lines { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| margin-top: 9px; | |
| padding-left: 43px; | |
| } | |
| .agent-lines small { | |
| min-width: 0; | |
| color: var(--text-muted); | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 10.5px; | |
| overflow-wrap: anywhere; | |
| } | |
| .agent-card p { | |
| margin-top: 9px; | |
| padding-left: 43px; | |
| overflow-wrap: anywhere; | |
| } | |
| .agent-progress { | |
| display: block; | |
| height: 3px; | |
| margin-top: 10px; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: rgba(68, 96, 133, 0.1); | |
| } | |
| .agent-progress span { | |
| display: block; | |
| height: 100%; | |
| border-radius: inherit; | |
| transition: width 0.35s ease; | |
| } | |
| .priority-block { | |
| padding: 12px 14px 14px; | |
| border-top: 1px solid rgba(68, 96, 133, 0.14); | |
| } | |
| .priority-block > small { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--text-muted); | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .priority-block div { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .priority-block p { | |
| margin-top: 10px; | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| } | |
| .empty-priority { | |
| color: var(--text-muted); | |
| } | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 80; | |
| display: grid; | |
| place-items: center; | |
| padding: 24px; | |
| background: rgba(23, 35, 56, 0.52); | |
| backdrop-filter: blur(10px); | |
| } | |
| .compare-modal { | |
| display: flex; | |
| width: min(1060px, 100%); | |
| max-height: min(820px, calc(100vh - 48px)); | |
| flex-direction: column; | |
| overflow: hidden; | |
| border-radius: 12px; | |
| } | |
| .compare-head { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 18px; | |
| padding: 18px 20px; | |
| border-bottom: 1px solid rgba(68, 96, 133, 0.14); | |
| } | |
| .compare-head h2 { | |
| font-size: 19px; | |
| } | |
| .compare-head p { | |
| margin: 4px 0 0; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| } | |
| .compare-grid { | |
| display: grid; | |
| grid-template-columns: 210px repeat(7, minmax(76px, 1fr)) 58px; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .compare-header { | |
| padding: 10px 20px; | |
| border-bottom: 1px solid rgba(68, 96, 133, 0.1); | |
| color: var(--text-muted); | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .compare-rows { | |
| overflow: auto; | |
| padding: 8px 14px 16px; | |
| } | |
| .compare-rows button { | |
| width: 100%; | |
| min-width: 920px; | |
| padding: 9px 6px; | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--text); | |
| cursor: pointer; | |
| text-align: left; | |
| } | |
| .compare-rows button:hover, | |
| .compare-rows button.selected { | |
| background: rgba(95, 127, 170, 0.1); | |
| } | |
| .compare-name { | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| color: var(--text-strong); | |
| font-family: "Space Grotesk", system-ui, sans-serif; | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .compare-name b { | |
| width: 18px; | |
| color: var(--text-soft); | |
| font-size: 11px; | |
| } | |
| .compare-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .compare-bar small { | |
| width: 42px; | |
| color: var(--text-muted); | |
| font-size: 10.5px; | |
| text-align: right; | |
| } | |
| @media (max-width: 1220px) { | |
| .command-bar { | |
| width: min(620px, calc(100vw - 420px)); | |
| min-width: 390px; | |
| } | |
| .detail-stack, | |
| .agent-rail { | |
| width: 300px; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| body { | |
| overflow: hidden; | |
| } | |
| .brand-lockup { | |
| left: 14px; | |
| top: 12px; | |
| } | |
| .brand-lockup small, | |
| .top-actions { | |
| display: none; | |
| } | |
| .command-bar { | |
| left: 12px; | |
| right: 12px; | |
| bottom: 12px; | |
| width: auto; | |
| min-width: 0; | |
| transform: none; | |
| } | |
| .active-layer-chip { | |
| top: 68px; | |
| max-width: calc(100vw - 24px); | |
| } | |
| .collapsed-panel-tab { | |
| top: 118px; | |
| } | |
| .collapsed-panel-tab.left { | |
| left: 12px; | |
| } | |
| .collapsed-panel-tab.right { | |
| right: 12px; | |
| } | |
| .results-panel { | |
| left: 12px; | |
| right: 12px; | |
| top: auto; | |
| bottom: 104px; | |
| width: auto; | |
| max-height: 260px; | |
| } | |
| .layers-panel, | |
| .detail-stack, | |
| .agent-rail, | |
| .map-token-note { | |
| display: none; | |
| } | |
| .map-controls { | |
| right: 12px; | |
| bottom: 166px; | |
| flex-direction: column; | |
| } | |
| } | |