/* What static/js/product-analytics.js puts on screen: the cookie notice and
   PostHog's surveys. Both are the same small card at the bottom, in the theme. */
.flu-consent,
[class^="PostHogSurvey-"] {
  --pa-bg: #1f1b26;
  --pa-ink: #f5f1f8;
  --pa-muted: rgba(245, 241, 248, 0.72);
  --pa-line: rgba(255, 255, 255, 0.12);
  --pa-field: rgba(255, 255, 255, 0.08);
  --pa-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}

body.light-mode .flu-consent,
body.light-mode [class^="PostHogSurvey-"] {
  --pa-bg: #ffffff;
  --pa-ink: #231a26;
  --pa-muted: rgba(35, 26, 38, 0.7);
  --pa-line: rgba(35, 26, 38, 0.12);
  --pa-field: rgba(35, 26, 38, 0.06);
  --pa-shadow: 0 18px 40px -18px rgba(40, 20, 40, 0.35);
}

/* Cookie notice: "Rechazar" and "Aceptar" the same size so neither is the easy way out. */
.flu-consent {
  --consent-pad: 14px;
  position: fixed;
  z-index: 1050;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  width: min(380px, calc(100vw - 32px));
  max-width: 100%;
  padding: var(--consent-pad);
  /* Concentric with its 44 px pill buttons: their radius plus the padding. */
  border-radius: calc(22px + var(--consent-pad));
  background: var(--pa-bg);
  color: var(--pa-ink);
  box-shadow: var(--pa-shadow), inset 0 0 0 1px var(--pa-line);
  animation: flu-consent-in 0.24s cubic-bezier(0.2, 0, 0, 1) both;
}

.flu-consent__text {
  margin: 0 4px 12px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--pa-muted);
}

.flu-consent__text a {
  color: var(--pa-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.flu-consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.flu-consent__btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: var(--pa-field);
  color: var(--pa-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.flu-consent__btn:hover { background: color-mix(in srgb, var(--pa-field) 70%, var(--pa-ink) 12%); }
.flu-consent__btn:active { transform: scale(0.97); }
.flu-consent__btn:focus-visible { outline: 2px solid var(--pa-ink); outline-offset: 2px; }

@keyframes flu-consent-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Surveys: PostHog draws them in a shadow root and sets their colors as inline
   variables on this host, so ours need !important to win. The appearance saved
   in PostHog is the dark one, for its own preview. */
[class^="PostHogSurvey-"] {
  /* The transform makes this zero-height strip the containing block of the
     survey's fixed card, whose bottom: 0 then lands here, off the edge. */
  position: fixed;
  z-index: 1050;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  height: 0;
  transform: translateZ(0);
  --ph-survey-font-family: "Nunito", system-ui, sans-serif !important;
  --ph-survey-max-width: 360px !important;
  --ph-survey-z-index: 1 !important;
  --ph-survey-box-padding: 20px !important;
  /* Concentric with its 6 px submit button: that radius plus the padding. */
  --ph-survey-border-radius: calc(6px + 20px) !important;
  --ph-survey-border-bottom: 1.5px solid var(--pa-line) !important;
  --ph-survey-border-color: var(--pa-line) !important;
  --ph-survey-background-color: var(--pa-bg) !important;
  --ph-survey-box-shadow: var(--pa-shadow) !important;
  --ph-survey-text-primary-color: var(--pa-ink) !important;
  --ph-survey-text-subtle-color: var(--pa-muted) !important;
  --ph-survey-input-background: var(--pa-field) !important;
  --ph-survey-input-text-color: var(--pa-ink) !important;
  --ph-survey-rating-bg-color: var(--pa-field) !important;
  --ph-survey-rating-text-color: var(--pa-ink) !important;
  --ph-survey-rating-active-bg-color: var(--flu-action) !important;
  --ph-survey-rating-active-text-color: #ffffff !important;
  --ph-survey-submit-button-color: var(--flu-action) !important;
  --ph-survey-submit-button-text-color: #ffffff !important;
  --ph-survey-outline-color: var(--flu-action) !important;
  --ph-survey-scrollbar-thumb-color: var(--pa-line) !important;
  --ph-survey-scrollbar-track-color: var(--pa-bg) !important;
}

@media (max-width: 991.98px) {
  /* Inside the app both sit above the nav dock, where the toasts go. */
  body:has(.flu-mobile-nav) .flu-consent,
  body:has(.flu-mobile-nav) [class^="PostHogSurvey-"] {
    bottom: calc(var(--flu-mobile-nav-height) + 12px);
  }
}

@media (max-width: 767.98px) {
  /* A sheet across the bottom. */
  .flu-consent {
    left: 12px;
    right: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flu-consent { animation: none; }
  .flu-consent__btn { transition: none; }
}