/* ============================================================
   Flash notices · Píldora (VONL-412)
   One look for every server-rendered flash: a dark pill that sits
   top center under the page header on desktop and bottom center
   on a phone, above whatever owns the bottom edge (dock, FAB,
   tab bar, cart bar). Markup: shared/_flashes.html.erb. Behavior:
   controllers/shared/flash_pill_controller.js.

   Loaded by shared/_head, so every layout has it. Tablero's --tb-*
   tokens colour it when present, an org theme's --t-* tokens invert
   the storefront, and plain fallbacks cover the classic dashboard.
   ============================================================ */

/* Status colours the customer theme layer lacked. A theme may set its
   own; :where() keeps this default from ever outranking one. */
:where(:root) {
  --t-danger: #c8372d;
  --t-warn: #b86e00;
  --t-info: #2f6fd6;
}

.fl-region {
  --fl-bg: var(--tb-ink, #12131a);
  --fl-fg: var(--tb-surface, #fff);
  --fl-lift: 0px;
  --fl-top: var(--d-flash-top, 16px);
  --fl-inset-left: 0px;
  --fl-ease: var(--tb-spring, cubic-bezier(0.34, 1.4, 0.64, 1));

  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--fl-lift) + 22px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-family: var(--tb-sans, "Figtree", system-ui, sans-serif);
  pointer-events: none;
}

@media (width >= 1024px) {
  .fl-region {
    left: var(--fl-inset-left);
    top: var(--fl-top);
    bottom: auto;
  }
}

/* ---------- Where the bottom edge is taken (phone) ---------- */
body:has(.tb-dock) .fl-region {
  --fl-lift: var(--tb-dock, 76px);
}

body:has(.tb-dock):has(.tb-fab, .hp-bubble) .fl-region {
  --fl-lift: calc(var(--tb-dock, 76px) + 72px);
}

body:has(.sf-tabbar) .fl-region {
  --fl-lift: 5rem;
}

body:has(.sf-cartbar) .fl-region {
  --fl-lift: 9rem;
}

body:has(.mc-tabbar) .fl-region {
  --fl-lift: 4.5rem;
}

/* ---------- Where the header is (desktop) ---------- */
.tb-body .fl-region {
  --fl-top: 84px;
  --fl-inset-left: var(--tb-side, 268px);
}

.d-body .fl-region {
  --fl-inset-left: var(--d-sidebar-width, 16rem);
}

/* The register terminal is dark and its keypad runs to the bottom edge, so
   the pill takes the top under the bar at every width, a shade lighter than
   the black it sits on. */
.reg-terminal-body .fl-region {
  --fl-top: 64px;
  --fl-bg: #2a2b33;

  top: var(--fl-top);
  bottom: auto;
}

/* An org theme inverts: its heading colour as the pill, its page
   colour as the text, its primary for success. */
body[data-theme] .fl-region {
  --fl-top: 92px;
  --fl-bg: var(--t-text-heading, var(--t-text, #12131a));
  --fl-fg: var(--t-bg-page, var(--t-bg, #fff));
}

/* ---------- Kinds ---------- */
.fl--ok {
  --fl: var(--tb-lime, #9be15d);
  --fl-on: var(--tb-ink, #12131a);
}

.fl--danger {
  --fl: var(--tb-danger, #e5484d);
  --fl-on: #fff;
}

.fl--warn {
  --fl: var(--tb-sun, #ffc53d);
  --fl-on: var(--tb-ink, #12131a);
}

.fl--info {
  --fl: var(--tb-info, #3e7bfa);
  --fl-on: #fff;
}

body[data-theme] .fl {
  --fl-on: var(--fl-fg);
}

body[data-theme] .fl--ok { --fl: var(--t-primary); }
body[data-theme] .fl--danger { --fl: var(--t-danger); }
body[data-theme] .fl--warn { --fl: var(--t-warn); }
body[data-theme] .fl--info { --fl: var(--t-info); }

/* ---------- The pill ---------- */
.fl {
  max-width: min(480px, 100%);
  pointer-events: auto;
  transition:
    transform 280ms var(--fl-ease),
    opacity 200ms ease;
  animation: fl-in 420ms var(--fl-ease) backwards;
}

/* The pile: the newest sits lowest, nearest the thumb; older pills
   step back. */
.fl:not(:last-child) {
  transform: scale(0.96);
}

.fl:not(:last-child):hover,
.fl:not(:last-child):focus-within {
  transform: none;
}

.fl.is-leaving {
  animation: fl-out 220ms ease-in forwards;
}

.fl__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 26px;
  background: var(--fl-bg);
  color: var(--fl-fg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgb(18 19 26 / 6%), 0 24px 60px rgb(18 19 26 / 14%);
}

.fl--stays .fl__card {
  padding-right: 7px;
}

.fl__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--fl);
  color: var(--fl-on);
  font-size: 14px;
}

.fl__body {
  flex: 1;
  min-width: 0;
  padding: 5px 0;
}

.fl__body p {
  margin: 0;
}

.fl__title {
  font-weight: 800;
}

.fl--titled .fl__text {
  color: color-mix(in srgb, var(--fl-fg) 72%, transparent);
  font-size: 14px;
  font-weight: 500;
}

.fl__close {
  flex: none;
  align-self: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fl-fg) 14%, transparent);
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.fl__close:hover {
  background: color-mix(in srgb, var(--fl-fg) 24%, transparent);
}

.fl__close:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

/* A phone rises from below; a desktop pill drops from the header. */
@keyframes fl-in {
  from {
    transform: translateY(32px) scale(0.92);
    opacity: 0;
  }
}

@keyframes fl-out {
  to {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
  }
}

@media (width >= 1024px) {
  @keyframes fl-in {
    from {
      transform: translateY(-24px) scale(0.92);
      opacity: 0;
    }
  }

  @keyframes fl-out {
    to {
      transform: translateY(-16px) scale(0.96);
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl,
  .fl * {
    animation: none !important;
    transition: none !important;
  }
}