/* Brand accent: #FF5B19 */
:root {
  --primary: 17.6 100% 54.9% !important;
  --primary-foreground: 0 0% 100% !important;
  --control-foreground: 0 0% 100%;
  --ring: 17.6 100% 54.9% !important;
}

.journey-action-button:not(:disabled) {
  border-color: hsl(var(--primary) / 0.48) !important;
  background-color: hsl(var(--primary) / 0.04) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.08) !important;
}

.journey-action-button:not(:disabled) svg {
  color: hsl(var(--primary)) !important;
}

.journey-action-button:not(:disabled):hover {
  border-color: hsl(var(--primary) / 0.78) !important;
  background-color: hsl(var(--primary) / 0.12) !important;
  color: hsl(var(--foreground)) !important;
}

.journey-action-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary) / 0.72) !important;
}

.journey-action-button:disabled {
  border-color: hsl(var(--border)) !important;
  background-color: hsl(var(--muted) / 0.35) !important;
  color: hsl(var(--muted-foreground)) !important;
}

[aria-label="Journey actions"]:has(button:not(:disabled))::after {
  color: hsl(var(--primary)) !important;
}

@keyframes fingerprintBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes fingerprintMarkerReveal {
  from { opacity: 0; transform: scaleY(0.65); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes journeyBarGrow {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes journeyNegativeBarGrow {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0); }
}

@keyframes journeyEventReveal {
  from { opacity: 0; transform: translateX(-50%) scaleY(0.65); }
  to { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

@keyframes journeyHeatmapReveal {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.fingerprint-bar-fill {
  transform-origin: left center;
  animation: fingerprintBarGrow 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fingerprint-cohort-marker {
  transform-origin: center;
  animation: fingerprintMarkerReveal 350ms ease-out both;
  transition: left 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-activity-bar-fill,
.journey-value-bar-positive {
  animation: journeyBarGrow 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.journey-value-bar-negative {
  animation: journeyNegativeBarGrow 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.journey-event-marker {
  transform-origin: center;
  animation: journeyEventReveal 350ms ease-out both;
}

.journey-heatmap-cell {
  transform-origin: center;
  animation: journeyHeatmapReveal 350ms ease-out both;
}

.journey-density-cell {
  transform-origin: center bottom;
  animation: journeyHeatmapReveal 350ms ease-out both;
  transition: opacity 140ms ease, background-color 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.journey-density-active {
  background-color: var(--journey-density-color);
  color: #fff;
}

.journey-density-empty {
  background-color: rgba(148, 163, 184, 0.26);
}

.journey-density-selected {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary));
}

.dark .journey-density-empty {
  background-color: rgba(15, 23, 42, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .fingerprint-bar-fill,
  .fingerprint-cohort-marker,
  .journey-activity-bar-fill,
  .journey-value-bar-positive,
  .journey-value-bar-negative,
  .journey-event-marker,
  .journey-heatmap-cell,
  .journey-density-cell {
    animation: none;
    transition: none;
  }
}

.dark {
  --primary: 17.6 100% 54.9% !important;
  --primary-foreground: 0 0% 100% !important;
  --control-foreground: 0 0% 100%;
  --ring: 17.6 100% 54.9% !important;
}

#message-composer button[type="submit"],
#message-composer button[aria-label*="send" i],
#message-composer button[aria-label*="submit" i],
#message-composer button[aria-label*="stop" i],
#message-composer button[title*="stop" i],
#message-composer button[data-testid*="send" i],
#message-composer button[data-testid*="stop" i],
#message-composer button:has(svg.lucide-arrow-up),
#message-composer button:has(svg.lucide-square),
#message-composer button:has(svg.lucide-square-stop) {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--control-foreground)) !important;
}

#message-composer #chat-submit,
#message-composer #chat-stop,
#message-composer #chat-stop-button {
  background-color: hsl(var(--primary)) !important;
  color: #fff !important;
}

#message-composer button[type="submit"] svg,
#message-composer button[aria-label*="send" i] svg,
#message-composer button[aria-label*="submit" i] svg,
#message-composer button[aria-label*="stop" i] svg,
#message-composer button[title*="stop" i] svg,
#message-composer button[data-testid*="send" i] svg,
#message-composer button[data-testid*="stop" i] svg,
#message-composer button:has(svg.lucide-arrow-up) svg,
#message-composer button:has(svg.lucide-square) svg,
#message-composer button:has(svg.lucide-square-stop) svg {
  color: hsl(var(--control-foreground)) !important;
  stroke: currentColor;
}

#message-composer #chat-submit svg,
#message-composer #chat-stop svg,
#message-composer #chat-stop-button svg,
#message-composer #chat-submit svg *,
#message-composer #chat-stop svg *,
#message-composer #chat-stop-button svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

[role="checkbox"][data-state="checked"],
[role="checkbox"][aria-checked="true"],
button[data-state="checked"][aria-checked="true"] {
  border-color: hsl(var(--primary)) !important;
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--control-foreground)) !important;
}

[role="checkbox"][data-state="checked"] svg,
[role="checkbox"][aria-checked="true"] svg,
button[data-state="checked"][aria-checked="true"] svg {
  color: hsl(var(--control-foreground)) !important;
  stroke: currentColor;
}

#message-composer {
  border: 1px solid hsl(var(--border));
}

#message-composer:focus-within {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.16);
}

[id^="mode-picker-trigger-"] {
  border: 1px solid transparent;
}

[id^="mode-picker-trigger-"]:hover,
[id^="mode-picker-trigger-"]:focus-visible,
[id^="mode-picker-trigger-"][data-state="open"] {
  border-color: hsl(var(--primary) / 0.45);
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

@layer brand-important {
  [id^="mode-picker-popover-"] [cmdk-item][data-selected="true"],
  [id^="mode-picker-popover-"] [cmdk-item][data-highlighted="true"] {
    background-color: hsl(var(--primary) / 0.14) !important;
    background-image: linear-gradient(hsl(var(--primary) / 0.14), hsl(var(--primary) / 0.14)) !important;
    border: 1px solid hsl(var(--primary) / 0.42) !important;
    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.42) !important;
    color: hsl(var(--foreground)) !important;
  }

  [id^="mode-picker-popover-"] [cmdk-item][data-selected="true"] svg,
  [id^="mode-picker-popover-"] [cmdk-item][data-highlighted="true"] svg {
    color: hsl(var(--primary)) !important;
  }
}

[id^="starter-"] {
  border-color: hsl(var(--primary) / 0.28) !important;
}

button img[src*="/public/starters/"] {
  filter: brightness(0) saturate(100%) invert(39%) sepia(95%) saturate(4200%) hue-rotate(15deg) brightness(102%) contrast(103%);
}

[id^="starter-"]:hover,
[id^="starter-"]:focus-visible {
  border-color: hsl(var(--primary) / 0.65) !important;
  background: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--foreground)) !important;
}

a[href^="mailto:"] {
  color: hsl(var(--primary));
  text-decoration-color: hsl(var(--primary) / 0.55);
}

a[href^="mailto:"]:hover,
a[href^="mailto:"]:focus-visible {
  color: hsl(var(--primary));
  text-decoration-color: hsl(var(--primary));
}

/* hide the made with footer */
.watermark {
    visibility: hidden;
  }

/* hide the tasklist title/status row */
.space-y-1\.5.p-6.flex.flex-row.items-center.justify-between {
    visibility: hidden;
}

/* Keep the virtualized message list as the only vertical scroller.
   Only applies when the wrapper has the inner scroller as a direct child; the
   read-only /share/<id> view uses the same wrapper classes but has no inner
   scroller, so hiding its overflow removed the scrollbar. */
main .relative.flex.flex-col.flex-grow.overflow-y-auto:has(> .flex.flex-col.flex-grow.overflow-y-auto) {
  overflow-y: hidden;
}

main .relative.flex.flex-col.flex-grow.overflow-y-auto > .flex.flex-col.flex-grow.overflow-y-auto {
  overflow-y: auto;
}

#context-reference-picker {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 12px 32px rgb(0 0 0 / 24%);
}

#context-reference-picker[hidden] {
  display: none;
}

.context-reference-header,
.context-reference-query,
.context-reference-option,
.context-reference-footer {
  display: flex;
  align-items: center;
}

.context-reference-header {
  gap: 8px;
  border-bottom: 1px solid hsl(var(--border));
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
}

.popup-close-button {
  margin-left: auto;
  border: 0;
  padding: 0 4px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.statistics-opportunity-popup > .popup-close-button,
.exploration-opportunity-popup > .popup-close-button,
.entity-action-menu > .popup-close-button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  margin-left: 0;
}

.context-reference-hint {
  margin-left: auto;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 400;
}

.context-reference-query {
  width: calc(100% - 16px);
  min-height: 36px;
  margin: 8px;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  padding: 0 12px;
  outline: none;
  background: hsl(var(--background));
  font-family: inherit;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
}

.context-reference-results {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}

.context-reference-status {
  padding: 12px;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
}

.context-reference-option {
  width: 100%;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 4px);
  padding: 8px 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.context-reference-favorite,
.entity-context-favorite {
  flex: 0 0 auto;
  border: 0;
  padding: 2px 4px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.context-reference-favorite:hover,
.context-reference-favorite.is-favorite,
.entity-context-favorite:hover,
.entity-context-favorite.is-favorite {
  color: hsl(var(--primary)) !important;
}

.context-reference-favorite[aria-pressed="true"],
.entity-context-favorite[aria-pressed="true"] {
  color: hsl(var(--primary)) !important;
}

.context-reference-section-label {
  border-top: 1px solid hsl(var(--border));
  margin: 4px 4px 2px;
  padding: 8px 6px 4px;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.context-reference-option:hover,
.context-reference-option[data-active="true"] {
  border-color: hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
}

.context-reference-option:disabled {
  opacity: 0.55;
  cursor: default;
}

.context-reference-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.context-reference-avatar.has-icon {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.context-reference-avatar.has-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--context-reference-icon) center / contain no-repeat;
  mask: var(--context-reference-icon) center / contain no-repeat;
}

.context-reference-check {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid hsl(var(--input));
  border-radius: 4px;
}

.context-reference-option[aria-selected="true"] .context-reference-check {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
}

.context-reference-option[aria-selected="true"] .context-reference-check::after {
  display: block;
  width: 4px;
  height: 8px;
  margin: 2px 0 0 5px;
  border: solid hsl(var(--control-foreground));
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

.context-reference-footer {
  gap: 12px;
  justify-content: space-between;
  border-top: 1px solid hsl(var(--border));
  padding: 8px 12px;
}

.context-reference-selection-count {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.context-reference-add {
  min-height: 32px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  padding: 0 12px;
  background: hsl(var(--primary));
  color: #fff !important;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.context-reference-add:disabled {
  opacity: 0.5;
  cursor: default;
}

.context-reference-option-text,
.context-reference-label,
.context-reference-description,
.context-reference-identifier {
  display: block;
  min-width: 0;
}

.context-reference-option-text {
  flex: 1;
}

.context-reference-label,
.context-reference-description,
.context-reference-identifier {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-reference-label {
  font-size: 14px;
  font-weight: 500;
}

.context-reference-description {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.context-reference-identifier {
  margin-top: 2px;
  color: hsl(var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.entity-user-control {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  line-height: 1;
  min-height: 26px;
  margin: 2px 0;
  border: 1px solid hsl(var(--primary) / 0.62);
  border-radius: 999px;
  background: transparent;
  color: hsl(var(--foreground));
  box-shadow: 0 1px 0 hsl(var(--foreground) / 0.08), inset 0 0 0 1px hsl(var(--background) / 0.1);
  white-space: nowrap;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.entity-user-control:hover,
.entity-user-control:focus-within,
.entity-user-control:active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 3px 12px hsl(var(--foreground) / 0.12), inset 0 0 0 1px hsl(var(--background) / 0.12);
}

.entity-user-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 3px;
  border-radius: 50%;
  color: #111;
}

html.dark .entity-user-icon {
  color: #fff;
}

.entity-user-icon {
  -webkit-mask: var(--entity-icon-image) center / 13px 13px no-repeat;
  mask: var(--entity-icon-image) center / 13px 13px no-repeat;
  background-color: currentColor;
}

.entity-user-control > a {
  min-width: 0;
  padding: 3px 8px 3px 6px;
  color: inherit;
  font-weight: 600;
  text-decoration: none !important;
}

.entity-user-control > a:hover {
  color: inherit;
}

.entity-user-control:hover .entity-user-icon,
.entity-user-control:focus-within .entity-user-icon,
.entity-user-control:active .entity-user-icon {
  color: hsl(var(--primary-foreground));
}

.exploration-opportunity-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  margin: 2px 4px;
  padding: 0 7px;
  border: 1px solid hsl(var(--primary) / 0.62);
  border-radius: 999px;
  background: transparent;
  color: #111;
  line-height: 1;
  font-size: 0.92em;
  font-weight: 600;
  text-decoration: none !important;
  vertical-align: middle;
  box-shadow: none;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

html.dark .exploration-opportunity-link {
  color: #fff;
}

.exploration-opportunity-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.exploration-opportunity-link:hover,
.exploration-opportunity-link:focus-visible,
.exploration-opportunity-link:active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 3px 12px hsl(var(--foreground) / 0.12);
}

.statistics-opportunity-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  margin: 2px 4px;
  padding: 0 7px;
  border: 1px solid hsl(var(--primary) / 0.62);
  border-radius: 999px;
  background: transparent;
  color: #111;
  line-height: 1;
  font-size: 0.92em;
  font-weight: 600;
  text-decoration: none !important;
  vertical-align: middle;
  box-shadow: none;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

html.dark .statistics-opportunity-link {
  color: #fff;
}

.statistics-opportunity-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.statistics-opportunity-link:hover,
.statistics-opportunity-link:focus-visible,
.statistics-opportunity-link:active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 3px 12px hsl(var(--foreground) / 0.12);
}

.statistics-opportunity-popup {
  position: fixed;
  z-index: 2147483646;
  display: none;
  width: min(420px, calc(100vw - 20px));
  max-height: min(420px, calc(100vh - 24px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 12px 30px rgb(0 0 0 / 22%);
  font-size: 13px;
}

.statistics-opportunity-popup.is-visible {
  display: block;
  transform-origin: var(--opportunity-popup-origin, 50% 0);
  animation: opportunity-popup-squeeze 280ms cubic-bezier(0.2, 0.85, 0.3, 1.12);
}

@keyframes opportunity-popup-squeeze {
  0% {
    opacity: 0;
    transform: scale(0.72, 0.48);
  }

  68% {
    opacity: 1;
    transform: scale(1.025, 0.985);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@keyframes opportunity-popup-dismiss {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.92);
  }
}

.statistics-opportunity-popup.is-closing,
.exploration-opportunity-popup.is-closing {
  display: block;
  pointer-events: none;
  animation: opportunity-popup-dismiss 180ms ease-in both;
}

.entity-action-menu.is-closing {
  pointer-events: none;
  animation: opportunity-popup-dismiss 180ms ease-in both;
}

.statistics-opportunity-popup .entity-user-control,
.exploration-opportunity-popup .entity-user-control {
  animation: entity-pill-appear 260ms 70ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes entity-pill-appear {
  0% {
    opacity: 0;
    transform: translateY(3px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.statistics-opportunity-popup.is-scalar-summary {
  width: min(540px, calc(100vw - 20px));
}

.statistics-opportunity-popup.is-spread {
  width: min(540px, calc(100vw - 20px));
}

.statistics-opportunity-popup-spread {
  padding: 4px 2px 0;
}

.statistics-opportunity-popup-spread-insight {
  margin-bottom: 10px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.statistics-opportunity-popup-spread.is-skewed .statistics-opportunity-popup-spread-insight {
  color: hsl(var(--primary));
}

.statistics-opportunity-popup-spread-rail {
  padding: 0 2px;
}

.statistics-opportunity-popup-spread-track {
  position: relative;
  height: 34px;
}

.statistics-opportunity-popup-spread-track::before {
  position: absolute;
  top: 13px;
  right: 0;
  left: 0;
  height: 8px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--muted) / 0.5);
  content: '';
}

.statistics-opportunity-popup-spread-range {
  position: absolute;
  top: 13px;
  right: 0;
  left: 0;
  height: 8px;
}

.statistics-opportunity-popup-spread-core,
.statistics-opportunity-popup-spread-tail {
  position: absolute;
  top: 0;
  height: 8px;
}

.statistics-opportunity-popup-spread-core {
  left: 0;
  width: var(--spread-width);
  border-radius: 999px 0 0 999px;
  background: hsl(var(--primary) / 0.42);
}

.statistics-opportunity-popup-spread-tail {
  left: var(--spread-left);
  width: var(--spread-width);
  border-radius: 0 999px 999px 0;
  background: hsl(var(--primary) / 0.18);
}

.statistics-opportunity-popup-spread-box {
  position: absolute;
  top: 8px;
  left: var(--spread-left);
  width: var(--spread-width);
  min-width: 4px;
  height: 18px;
  border: 1px solid hsl(var(--primary));
  border-radius: 4px;
  background: hsl(var(--primary) / 0.28);
}

.statistics-opportunity-popup-spread-median {
  position: absolute;
  top: 4px;
  left: var(--spread-position);
  width: 3px;
  height: 26px;
  border-radius: 3px;
  background: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--popover));
  transform: translateX(-50%);
}

.statistics-opportunity-popup-spread-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid hsl(var(--border));
  font-variant-numeric: tabular-nums;
}

.statistics-opportunity-popup-spread-value {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.statistics-opportunity-popup-spread-value.is-middle {
  align-items: center;
  text-align: center;
}

.statistics-opportunity-popup-spread-value.is-end {
  align-items: flex-end;
  text-align: right;
}

.statistics-opportunity-popup-spread-value span {
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.statistics-opportunity-popup-spread-value strong {
  overflow: hidden;
  color: hsl(var(--popover-foreground));
  font-size: 17px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics-opportunity-popup-title {
  margin: 0;
  color: hsl(var(--popover-foreground));
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.statistics-opportunity-popup-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 2px 14px;
  padding-right: 28px;
}

.statistics-opportunity-popup-heading-copy {
  min-width: 0;
  flex: 1;
}

.statistics-opportunity-popup-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  margin-left: auto;
}

.statistics-opportunity-popup-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--popover-foreground));
  cursor: pointer;
}

.statistics-opportunity-popup-copy:hover,
.statistics-opportunity-popup-copy:focus-visible,
.statistics-opportunity-popup-copy.is-copied {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
  outline: none;
}

.statistics-opportunity-popup-copy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.statistics-opportunity-popup-kind {
  margin-top: 3px;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.opportunity-popup-heading-icon {
  display: inline-flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 50%;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.opportunity-popup-heading-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.statistics-opportunity-popup-results {
  overflow: visible;
}

.statistics-opportunity-popup-description {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: -3px 2px 12px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 1.35;
}

.statistics-opportunity-popup-description-label {
  color: hsl(var(--primary));
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.statistics-opportunity-popup-state {
  color: hsl(var(--muted-foreground));
}

.statistics-opportunity-popup-state.is-error {
  padding: 8px 10px;
  border: 1px solid hsl(var(--primary) / 0.72);
  border-radius: 6px;
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--foreground));
  font-weight: 600;
  line-height: 1.35;
}

.statistics-opportunity-popup-scalars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.statistics-opportunity-popup-scalars.is-count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.statistics-opportunity-popup-scalars.is-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.statistics-opportunity-popup-scalar-card {
  display: flex;
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--primary));
  border-radius: 6px;
  background: hsl(var(--popover));
}

.statistics-opportunity-popup-scalar-card dt,
.statistics-opportunity-popup-scalar-card dd {
  margin: 0;
}

.statistics-opportunity-popup-scalar-card dt {
  overflow: hidden;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics-opportunity-popup-scalar-card dd {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: hsl(var(--popover-foreground));
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.05;
  text-overflow: clip;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .statistics-opportunity-popup-scalars {
    gap: 8px;
  }

  .statistics-opportunity-popup-scalars:not(.is-count-1) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statistics-opportunity-popup-scalar-card {
    min-height: 84px;
    padding: 12px 10px;
  }

  .statistics-opportunity-popup-scalar-card dd {
    font-size: 21px;
  }

  .statistics-opportunity-popup-spread-values {
    gap: 6px;
  }

  .statistics-opportunity-popup-spread-value strong {
    font-size: 15px;
  }
}

.statistics-opportunity-popup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.statistics-opportunity-popup-table th,
.statistics-opportunity-popup-table td {
  max-width: 220px;
  padding: 5px 7px;
  border-bottom: 1px solid hsl(var(--border));
  text-align: left;
  overflow-wrap: anywhere;
}

.statistics-opportunity-popup-table th {
  color: hsl(var(--muted-foreground));
  font-weight: 650;
}

.statistics-opportunity-popup-trend-summary {
  margin-bottom: 6px;
  color: hsl(var(--foreground));
  font-size: 17px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.statistics-opportunity-popup-trend.is-up .statistics-opportunity-popup-trend-summary {
  color: #16834b;
}

.statistics-opportunity-popup-trend.is-down .statistics-opportunity-popup-trend-summary {
  color: #c2413d;
}

.statistics-opportunity-popup-trend-chart {
  display: block;
  width: 100%;
  height: 150px;
  overflow: visible;
  border-bottom: 1px solid hsl(var(--border));
}

.statistics-opportunity-popup-trend-line {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.statistics-opportunity-popup-trend-point {
  fill: hsl(var(--popover));
  stroke: hsl(var(--primary));
  stroke-width: 2;
}

.statistics-opportunity-popup-trend-endpoints {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.statistics-opportunity-popup-trend-endpoints span:last-child {
  text-align: right;
}

.statistics-opportunity-popup-stat-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.exploration-opportunity-popup {
  position: fixed;
  z-index: 2147483646;
  display: none;
  width: min(440px, calc(100vw - 20px));
  max-height: min(320px, calc(100vh - 24px));
  overflow: auto;
  padding: 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 12px 30px rgb(0 0 0 / 22%);
  font-size: 13px;
}

.exploration-opportunity-popup.is-visible {
  display: block;
  transform-origin: var(--opportunity-popup-origin, 50% 0);
  animation: opportunity-popup-squeeze 280ms cubic-bezier(0.2, 0.85, 0.3, 1.12);
}

.exploration-opportunity-popup-prompt {
  max-height: min(220px, calc(100vh - 140px));
  overflow: auto;
}

.exploration-opportunity-popup-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 2px 10px;
  padding-right: 28px;
}

.exploration-opportunity-popup-heading-copy {
  min-width: 0;
  flex: 1;
}

.exploration-opportunity-popup-title {
  color: hsl(var(--popover-foreground));
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.exploration-opportunity-popup-kind {
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.exploration-opportunity-popup-prompt {
  margin: 0;
  color: hsl(var(--popover-foreground));
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.exploration-opportunity-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
}

.exploration-opportunity-popup-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--popover-foreground));
  cursor: pointer;
}

.exploration-opportunity-popup-action:hover,
.exploration-opportunity-popup-action:focus-visible,
.exploration-opportunity-popup-action.is-copied {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
  outline: none;
}

.exploration-opportunity-popup-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

@media (prefers-reduced-motion: reduce) {
  .statistics-opportunity-popup.is-visible,
  .exploration-opportunity-popup.is-visible,
  .entity-action-menu.is-visible,
  .statistics-opportunity-popup .entity-user-control,
  .exploration-opportunity-popup .entity-user-control {
    animation: none;
  }
}

.pill-tooltip {
  position: fixed;
  z-index: 2147483647;
  max-width: min(320px, calc(100vw - 16px));
  padding: 6px 9px;
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 2px);
  transition: opacity 100ms ease, transform 100ms ease;
}

.pill-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.entity-action-menu {
  position: fixed;
  z-index: 2147483647;
  display: flex;
  width: min(300px, calc(100vw - 20px));
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
}

.entity-action-menu.is-visible {
  transform-origin: var(--entity-popup-origin, 50% 0);
  animation: opportunity-popup-squeeze 280ms cubic-bezier(0.2, 0.85, 0.3, 1.12);
}

@media (min-width: 420px) {
  .entity-action-menu--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entity-action-menu--grid .entity-context-card {
    grid-column: 1 / -1;
  }

  .entity-action-menu--grid .entity-action-toolbar {
    grid-column: 1 / -1;
  }
}

.entity-context-card {
  margin: 2px 2px 5px;
  border-bottom: 1px solid hsl(var(--border));
  padding: 3px 33px 9px 5px;
}

.entity-context-heading {
  overflow: hidden;
  color: hsl(var(--popover-foreground));
  font-size: 20px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-context-type {
  margin-top: 2px;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.entity-context-heading-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entity-context-avatar {
  display: inline-flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.entity-context-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entity-context-provider-icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--entity-context-provider-icon) center / contain no-repeat;
  mask: var(--entity-context-provider-icon) center / contain no-repeat;
}

.entity-context-heading-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-context-heading-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.entity-context-heading-row .entity-context-favorite {
  margin-left: auto;
}

.entity-action-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 2px;
  padding: 0 5px 2px;
}

.entity-action-edit {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  padding: 2px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.entity-action-edit:hover,
.entity-action-edit:focus-visible {
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--primary));
  outline: none;
}

.entity-action-edit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.entity-context-tier {
  flex: 0 0 auto;
  border: 1px solid hsl(38 92% 60% / 0.35);
  border-radius: 999px;
  padding: 2px 7px;
  background: hsl(38 92% 60% / 0.12);
  color: hsl(38 92% 70%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.entity-context-status {
  margin-top: 5px;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
}

.entity-context-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 8px;
}

.entity-context-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.entity-context-field-label {
  color: hsl(var(--muted-foreground));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.entity-context-field-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.entity-context-upid {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  min-width: 0;
}

.entity-context-copy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.entity-context-copy:hover,
.entity-context-copy:focus-visible {
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--primary));
  outline: none;
}

.entity-context-copy svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.entity-context-upid-value {
  min-width: 0;
  overflow: visible;
  color: hsl(var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}

.entity-context-field-identifier {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.entity-context-field-badge {
  color: hsl(var(--primary));
  font-weight: 600;
}

.entity-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.entity-action-divider {
  height: 1px;
  margin: 5px 2px 2px;
  background: hsl(var(--border));
}

.entity-action-menu--grid .entity-action-divider {
  grid-column: 1 / -1;
}

.entity-action-menu--grid .entity-action-item {
  min-width: 0;
}

.entity-action-menu--grid .entity-action-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.entity-action-item:hover,
.entity-action-item:focus-visible {
  border-color: hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
  outline: none;
}

.entity-action-item svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: hsl(var(--muted-foreground));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.entity-action-item img {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  filter: var(--entity-action-icon-filter, none);
}

html.dark .entity-action-item img {
  filter: brightness(0) invert(1);
}

.entity-action-item:hover svg,
.entity-action-item:focus-visible svg {
  stroke: hsl(var(--primary));
}