/* ==============================================================
   ITALY LIONS — LION MESSENGER NOTIFICATION SURFACES

   The in-app flash card (§7) and the notification permission card
   (§11). Italy Lions black and gold, matching il-design.css.

   POSITIONING NOTE
   Both are `position: fixed` and neither is inside a transformed
   ancestor — a `transform` on a parent makes `fixed` resolve against
   that parent instead of the viewport, which is how the drawer work
   already went wrong once (see il-drawer.css). They are appended to
   <body> in JS for exactly this reason; do not move them into a
   page wrapper.
   ============================================================== */

:root {
  --il-flash-gold: #C9A227;
  --il-flash-gold-lt: #E8CC6A;
  --il-flash-ink: #0B0B0C;
}

/* ── Flash card host ─────────────────────────────────────────── */
.il-flash-host {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483000;          /* above the drawer, the modals and the navbar */
  width: min(420px, calc(100vw - 20px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;         /* the strip itself never eats taps */
}

.il-flash {
  pointer-events: auto;
  cursor: pointer;
  background: linear-gradient(150deg, #17171A 0%, #0B0B0C 100%);
  border: 1px solid rgba(201, 162, 39, .42);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  color: #fff;
  overflow: hidden;
  /* Slides DOWN from above the viewport, and is invisible until it does. */
  transform: translateY(-140%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.18, .89, .32, 1.15), opacity .2s ease;
}
.il-flash.on { transform: translateY(0); opacity: 1; }

.il-flash-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(201, 162, 39, .07);
}
.il-flash-logo {
  width: 20px; height: 20px;
  border-radius: 5px;
  object-fit: cover;
  flex: none;
}
.il-flash-app {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .13em;
  color: var(--il-flash-gold-lt);
  text-transform: uppercase;
  flex: 1;
}
.il-flash-x {
  flex: none;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .5);
  font-size: 1.15rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 6px;
}
.il-flash-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.il-flash-body { padding: 9px 12px 11px; }
.il-flash-who {
  font-weight: 700;
  font-size: .9rem;
  color: var(--il-flash-gold-lt);
  margin-bottom: 2px;
}
.il-flash-msg {
  font-size: .85rem;
  color: rgba(255, 255, 255, .9);
  /* Two lines maximum: a flash card previews a message, it does not
     display one. The conversation is one tap away. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.il-flash-ref {
  margin-top: 6px;
  font-size: .7rem;
  color: rgba(255, 255, 255, .55);
  border-left: 2px solid rgba(201, 162, 39, .5);
  padding-left: 7px;
}
.il-flash-wait {
  margin-top: 7px;
  font-size: .7rem;
  font-weight: 700;
  color: #F0C548;
}

/* ── Permission card ─────────────────────────────────────────── */
.il-notifask {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translate(-50%, 160%);
  z-index: 2147482000;
  width: min(460px, calc(100vw - 20px));
  background: linear-gradient(150deg, #17171A 0%, #0B0B0C 100%);
  border: 1px solid rgba(201, 162, 39, .42);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
  color: #fff;
  opacity: 0;
  transition: transform .3s cubic-bezier(.18, .89, .32, 1.1), opacity .22s ease;
}
.il-notifask.on { transform: translate(-50%, 0); opacity: 1; }

.il-notifask-in {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  padding: 14px 15px;
  align-items: start;
}
.il-notifask-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.il-notifask-tx { display: flex; flex-direction: column; gap: 3px; }
.il-notifask-tx strong { font-size: .95rem; color: var(--il-flash-gold-lt); }
.il-notifask-tx span { font-size: .82rem; color: rgba(255, 255, 255, .74); line-height: 1.45; }

.il-notifask-btns {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.il-notifask-btns button {
  border-radius: 10px;
  padding: 9px 16px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.il-notifask-no {
  background: transparent;
  color: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .16);
}
.il-notifask-no:hover { color: #fff; border-color: rgba(255, 255, 255, .32); }
.il-notifask-yes {
  background: linear-gradient(135deg, var(--il-flash-gold-lt), var(--il-flash-gold));
  color: var(--il-flash-ink);
}
.il-notifask-yes:hover { filter: brightness(1.08); }

/* A member who has asked their system for less motion gets the card without
   the travel — it still appears, it just does not fly. */
@media (prefers-reduced-motion: reduce) {
  .il-flash, .il-notifask { transition: opacity .2s ease; transform: none; }
  .il-flash.on { transform: none; }
  .il-notifask { transform: translateX(-50%); }
  .il-notifask.on { transform: translateX(-50%); }
}