/*!
 * Live Notify - frontend styles.
 * Scoped under .lvn-root. Fixed positioning + transform/opacity animation only → zero CLS.
 *
 * Visual source of truth: the Figma "Live Notify" design system (Notification
 * Card component, Atoms, Variables & Tokens). Token values below are the
 * file's Light-mode primitives; presets retheme them.
 */
.lvn-root {
  position: fixed;
  z-index: 9999999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* text: gray/900, gray/500, gray/400 · line: gray/200 */
  --lvn-bg: #fff;
  --lvn-hi: #20212a;
  --lvn-txt: #737783;
  --lvn-meta: #9a9da8;
  --lvn-line: #e7eaf2;
  /* brand */
  --lvn-brand: #1d47ff;
  --lvn-brand-2: #4a6bff;
  --lvn-brand-soft: #eef2ff;
  --lvn-on-brand: #fff;
  /* semantic */
  --lvn-ok: #24b47e;
  --lvn-ok-soft: #e9f9f2;
  --lvn-warn: #f5a623;
  --lvn-warn-2: #f7c55c;
  --lvn-warn-soft: #fef4e4;
  --lvn-err: #e05d5d;
  --lvn-err-soft: #fdeeee;
  --lvn-pink: #e85d9c;
  --lvn-pink-2: #f08bb8;
  --lvn-pink-soft: #fdecf3;
  --lvn-track: #f0f1f6;
  --lvn-close: #c4c7d0;
  /* surface */
  --lvn-radius: 14px;
  --lvn-shadow: 0 2px 10px rgba(32, 33, 42, .05);
  --lvn-border: 1px solid var(--lvn-line);
  --lvn-accent: var(--lvn-ok);
  --lvn-progress: var(--lvn-brand);
  --lvn-w: 340px;
  --lvn-dur: 280ms;
  --lvn-ease: cubic-bezier(.22, .9, .3, 1);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.lvn-root[data-pos="bottom-left"] { left: 18px; bottom: 18px }
.lvn-root[data-pos="bottom-right"] { right: 18px; bottom: 18px }
.lvn-root[data-pos="top-left"] { left: 18px; top: 18px }
.lvn-root[data-pos="top-right"] { right: 18px; top: 18px }

/* ---- Card (Notification Card · Shape=Card) ---- */
.lvn-root .lvn-card {
  pointer-events: auto;
  box-sizing: border-box;
  width: var(--lvn-w);
  max-width: calc(100vw - 36px);
  background: var(--lvn-bg);
  color: var(--lvn-txt);
  border: var(--lvn-border);
  border-radius: var(--lvn-radius);
  box-shadow: var(--lvn-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  position: relative;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  cursor: default;
  transition: transform .18s, box-shadow .18s;
  will-change: transform, opacity;
}
.lvn-root .lvn-card * { box-sizing: border-box; margin: 0; padding: 0 }
.lvn-root .lvn-card.lvn-link { cursor: pointer }
.lvn-root .lvn-card.lvn-link:hover { transform: translateY(-2px) }
.lvn-root .lvn-card:focus-visible { outline: 2px solid var(--lvn-brand); outline-offset: 2px }
.lvn-root .lvn-card svg { display: block }

/* Stat layouts (Stat Notification): 14/18 padding, 14 gap */
.lvn-root .lvn-card.stat { padding: 14px 18px; gap: 14px }
/* Stock Urgency: column card with a meter under the row */
.lvn-root .lvn-card.col { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px }
.lvn-root .lvn-rw { display: flex; align-items: center; gap: 10px; min-width: 0 }

/* ---- Leading slot: Icon Tile / Avatar / Photo / Stat ---- */
.lvn-root .lvn-lead {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--lvn-on-brand);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.lvn-root .lvn-lead svg { width: 20px; height: 20px }
.lvn-root .lvn-lead.s34 { width: 34px; height: 34px; border-radius: 8px }
.lvn-root .lvn-lead.s46 { width: 46px; height: 46px; border-radius: 999px }
.lvn-root .lvn-lead.av { border-radius: 999px }
.lvn-root .lvn-lead.photo { border-radius: 12px }
.lvn-root .lvn-lead.photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block }
/* Icon Tile tones */
.lvn-root .t-grad { background: linear-gradient(135deg, var(--lvn-brand) 14.6%, var(--lvn-brand-2) 85.4%) }
.lvn-root .t-pinkgrad { background: linear-gradient(135deg, var(--lvn-pink) 14.6%, var(--lvn-pink-2) 85.4%) }
.lvn-root .t-soft { background: var(--lvn-brand-soft); color: var(--lvn-brand) }
.lvn-root .t-ok { background: var(--lvn-ok-soft); color: var(--lvn-ok) }
.lvn-root .t-warn { background: var(--lvn-warn-soft); color: var(--lvn-warn) }
.lvn-root .t-err { background: var(--lvn-err-soft); color: var(--lvn-err) }
.lvn-root .t-pink { background: var(--lvn-pink-soft); color: var(--lvn-pink) }
/* Avatar / Initials colour tones (8) */
.lvn-root .a0 { background: linear-gradient(135deg, #1d47ff 14.6%, #4a6bff 85.4%) }
.lvn-root .a1 { background: linear-gradient(135deg, #4a6bff 14.6%, #1d47ff 85.4%) }
.lvn-root .a2 { background: linear-gradient(135deg, #1d47ff 14.6%, #6e8bff 85.4%) }
.lvn-root .a3 { background: linear-gradient(135deg, #f5a623 14.6%, #f7c55c 85.4%) }
.lvn-root .a4 { background: linear-gradient(135deg, #24b47e 14.6%, #5ad3a6 85.4%) }
.lvn-root .a5 { background: linear-gradient(135deg, #2d9cdb 14.6%, #6fc3f0 85.4%) }
.lvn-root .a6 { background: linear-gradient(135deg, #20212a 14.6%, #4a4b58 85.4%) }
.lvn-root .a7 { background: linear-gradient(135deg, #e85d9c 14.6%, #f08bb8 85.4%) }
/* Stat (Divider layout): 20px bold brand number + 1px divider */
.lvn-root .lvn-stat {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--lvn-brand);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.2px;
}
.lvn-root .lvn-stat.err { color: var(--lvn-err) }
.lvn-root .lvn-stat .ic svg { width: 20px; height: 20px }
.lvn-root .lvn-stat i { display: block; width: 1px; height: 34px; background: var(--lvn-line) }

/* ---- Content ---- */
.lvn-root .lvn-body { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px }
.lvn-root .lvn-head { display: flex; flex-wrap: wrap; column-gap: 4px; align-items: baseline; min-width: 0; max-width: 100% }
.lvn-root .lvn-head > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.lvn-root .lvn-head b { color: var(--lvn-hi); font-weight: 600 }
.lvn-root .lvn-head b.big { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.2px }
/* Second row variants */
.lvn-root .lvn-ln { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lvn-hi); font-weight: 600 }
.lvn-root .lvn-ln.brand { color: var(--lvn-brand); font-size: 13px; font-weight: 500 }
.lvn-root .lvn-ln.brand14 { color: var(--lvn-brand) }
.lvn-root .lvn-ln.brandcta { color: var(--lvn-brand); font-size: 12px; font-weight: 600 }
.lvn-root .lvn-ln.sub { color: var(--lvn-meta); font-size: 11px; font-weight: 400; line-height: 1.4 }
.lvn-root .lvn-ln.warn { color: var(--lvn-warn); font-size: 11px; font-weight: 600; line-height: 1.4 }
.lvn-root .lvn-ln.on { color: var(--lvn-txt); font-size: 12px; font-weight: 400 }
.lvn-root .lvn-ln.on b { color: var(--lvn-brand); font-weight: 600 }
/* Status slot: Verified Label / Star Rating / Pill */
.lvn-root .lvn-st { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 11px; line-height: 1.4 }
.lvn-root .lvn-vf { display: inline-flex; align-items: center; gap: 4px; color: var(--lvn-ok); background: none; border: 0; font: inherit; font-size: 11px; font-weight: 500 }
.lvn-root .lvn-vf svg { width: 11px; height: 11px }
.lvn-root .lvn-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--lvn-warn) }
.lvn-root .lvn-stars svg { width: 13px; height: 13px }
.lvn-root .lvn-stars .off { color: var(--lvn-close) }
.lvn-root .lvn-stars-n { margin-left: 2px; font-size: 12px; font-weight: 600; color: var(--lvn-hi) }
.lvn-root .lvn-stars-q { margin-left: 2px; font-size: 12px; font-weight: 400; color: var(--lvn-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lvn-root .lvn-pl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--lvn-ok-soft);
  color: var(--lvn-ok);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.lvn-root .lvn-pl i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: lvn-pulse 2s ease-in-out infinite }
@keyframes lvn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(36, 180, 126, .45) } 50% { box-shadow: 0 0 0 4px rgba(36, 180, 126, 0) } }
/* Meta: 11px tertiary */
.lvn-root .lvn-meta { font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--lvn-meta); max-width: 100% }

/* ---- Trailing slot: Button / Text Link / Pill / Caption ---- */
.lvn-root .lvn-cta-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--lvn-brand);
  color: var(--lvn-on-brand);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s;
}
.lvn-root .lvn-cta-btn:hover { background: var(--lvn-brand-2); color: var(--lvn-on-brand) }
.lvn-root .lvn-cta-btn.amber { background: var(--lvn-warn); color: #20212a }
.lvn-root .lvn-cta-btn.amber:hover { background: var(--lvn-warn-2); color: #20212a }
.lvn-root .lvn-tl { flex: none; color: var(--lvn-brand); font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer }
.lvn-root .lvn-tl:hover { color: var(--lvn-brand-2) }
.lvn-root .lvn-cap { flex: none; align-self: flex-start; padding-top: 2px; font-size: 11px; color: var(--lvn-meta); white-space: nowrap }
.lvn-root .lvn-card > .lvn-pl, .lvn-root .lvn-rw > .lvn-pl { flex: none }

/* Close: 12px glyph, 24px hit area, top-aligned */
.lvn-root .lvn-close {
  flex: none;
  align-self: flex-start;
  width: 24px;
  height: 24px;
  margin: -6px -6px 0 -8px;
  border: 0;
  background: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--lvn-close);
  transition: color .15s;
}
.lvn-root .lvn-close svg { width: 12px; height: 12px }
.lvn-root .lvn-close:hover { color: var(--lvn-txt) }
.lvn-root .lvn-close:focus-visible { outline: 2px solid var(--lvn-brand) }

/* Stock-urgency meter: 5px track, brand→error fill */
.lvn-root .lvn-bar { display: block; width: 100%; height: 5px; border-radius: 999px; background: var(--lvn-track); overflow: hidden }
.lvn-root .lvn-bar i { display: block; height: 100%; width: 86%; border-radius: 999px; background: linear-gradient(90deg, var(--lvn-brand), var(--lvn-err)) }

/* Auto-dismiss timer. Invisible by design (the Figma card has no timer
   bar) but NOT display:none - its CSS animation is the dismiss clock (JS
   listens for animationend) and display:none elements never animate. */
.lvn-root .lvn-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform-origin: left;
  animation: lvn-bar linear forwards;
}
@keyframes lvn-bar { from { transform: scaleX(1) } to { transform: scaleX(0) } }
.lvn-root .lvn-card:hover .lvn-timer, .lvn-root .lvn-card:focus-within .lvn-timer { animation-play-state: paused }

/* ---- Entrance / exit - transform+opacity only ---- */
.lvn-root .lvn-in-slide { animation: lvn-slide-up var(--lvn-dur) var(--lvn-ease) both }
.lvn-root[data-pos^="top"] .lvn-in-slide { animation-name: lvn-slide-down }
.lvn-root .lvn-in-fade { animation: lvn-fade var(--lvn-dur) ease-out both }
.lvn-root .lvn-in-zoom { animation: lvn-zoom var(--lvn-dur) var(--lvn-ease) both }
.lvn-root .lvn-out { animation: lvn-exit 200ms ease-in both !important }
@keyframes lvn-slide-up { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes lvn-slide-down { from { opacity: 0; transform: translateY(-14px) } to { opacity: 1; transform: none } }
@keyframes lvn-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lvn-zoom { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: none } }
@keyframes lvn-exit { to { opacity: 0; transform: translateY(4px) scale(.98) } }

@media (prefers-reduced-motion: reduce) {
  .lvn-root .lvn-pl i { animation: none }
  .lvn-root .lvn-in-slide, .lvn-root .lvn-in-fade, .lvn-root .lvn-in-zoom { animation: lvn-fade 150ms ease-out both }
  .lvn-root .lvn-out { animation: lvn-exit 120ms ease-in both !important }
  .lvn-root .lvn-card.lvn-link:hover { transform: none }
}

/* ---- Shapes ---- */
/* Pill (Shape=Pill): radius/full, 8-24-8-8 padding, circular lead, 13px copy, hugs content */
.lvn-root .lvn-card.pill { border-radius: 999px; padding: 8px 24px 8px 8px; width: auto; max-width: min(440px, calc(100vw - 36px)); font-size: 13px }
.lvn-root .lvn-card.pill .lvn-lead { border-radius: 999px }
.lvn-root .lvn-card.pill .lvn-body { flex: 0 1 auto }
.lvn-root .lvn-card.pill .lvn-close { margin: -2px -14px 0 -4px }
/* Gradient (Shape=Gradient): 1.5px brand gradient border + Elevation/Brand */
.lvn-root .lvn-card.grad {
  border: 1.5px solid transparent;
  border-radius: 15px;
  padding: 12px 16px;
  background: linear-gradient(var(--lvn-bg), var(--lvn-bg)) padding-box,
    linear-gradient(190deg, var(--lvn-brand) 14.6%, var(--lvn-brand-2) 85.4%) border-box;
  box-shadow: 0 4px 14px rgba(29, 71, 255, .16);
}

/* ---- Presets (surface themes; templates pick card / pill / gradient / ink) ---- */
.lvn-preset-minimal { --lvn-radius: 12px; --lvn-shadow: 0 1px 4px rgba(32, 33, 42, .06) }
.lvn-preset-glass { --lvn-bg: rgba(255, 255, 255, .72); --lvn-border: 1px solid rgba(255, 255, 255, .65); --lvn-shadow: 0 12px 36px rgba(32, 33, 42, .14) }
.lvn-preset-glass .lvn-card { backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5) }
.lvn-preset-outline { --lvn-shadow: none; --lvn-border: 1.5px solid #20212a }
/* Ink = Figma Dark mode: every token rethemes (gray/900 surface, gray/800 lines, blue/200 brand) */
.lvn-preset-ink {
  --lvn-bg: #20212a;
  --lvn-hi: #fff;
  --lvn-txt: #9a9da8;
  --lvn-meta: #737783;
  --lvn-line: #33343f;
  --lvn-brand: #9fb3ff;
  --lvn-brand-2: #6e8bff;
  --lvn-brand-soft: #33343f;
  --lvn-ok: #5ad3a6;
  --lvn-ok-soft: #33343f;
  --lvn-warn: #f7c55c;
  --lvn-warn-soft: #33343f;
  --lvn-err-soft: #33343f;
  --lvn-pink-soft: #33343f;
  --lvn-track: #33343f;
  --lvn-close: #5c5e6b;
  --lvn-shadow: 0 4px 14px rgba(32, 33, 42, .18);
}
.lvn-preset-ink .lvn-close:hover { color: #9a9da8 }
.lvn-preset-ink .lvn-cta-btn.amber { background: #f5a623; color: #20212a }
/* preset "custom" gets --lvn-bg / --lvn-radius / --lvn-hi / --lvn-txt / --lvn-meta inline from campaign settings */

/* ---- Mobile compact ---- */
@media (max-width: 640px) {
  .lvn-root { left: 10px !important; right: 10px !important; top: auto !important; bottom: 12px !important; padding-bottom: env(safe-area-inset-bottom, 0) }
  .lvn-root .lvn-card { width: 100%; padding: 10px 12px; font-size: 13px }
  .lvn-root .lvn-lead { width: 36px; height: 36px }
  .lvn-root .lvn-lead svg { width: 18px; height: 18px }
  .lvn-root .lvn-card.pill { width: auto }
}
@media (max-width: 640px) {
  .lvn-root[data-pos^="bar-"] { left: 0 !important; right: 0 !important; width: 100% !important }
  .lvn-root[data-pos="bar-top"] { top: 0 !important; bottom: auto !important }
  .lvn-root[data-pos="bar-bottom"] { bottom: 0 !important; top: auto !important }
}

/* ---- RTL ---- */
[dir="rtl"] .lvn-root .lvn-close { margin: -6px -8px 0 -6px }
[dir="rtl"] .lvn-root .lvn-timer { transform-origin: right }

/* ---- Provenance popover (verified label is the trigger) ---- */
.lvn-root .lvn-badge-btn { cursor: pointer }
.lvn-root .lvn-badge-btn:focus-visible { outline: 2px solid var(--lvn-brand); outline-offset: 2px; border-radius: 4px }
.lvn-root .lvn-prov {
  position: absolute;
  left: 14px;
  bottom: calc(100% - 6px);
  max-width: min(280px, calc(100vw - 40px));
  background: #20212a;
  color: #fff;
  font-size: 11.5px;
  line-height: 1.45;
  padding: 7px 10px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(32, 33, 42, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .14s, transform .14s, visibility .14s;
  pointer-events: none;
  z-index: 1;
}
.lvn-root .lvn-prov-open .lvn-prov { opacity: 1; visibility: visible; transform: none }
.lvn-root[data-pos^="bar-"] .lvn-prov, .lvn-root[data-pos^="top"] .lvn-prov { bottom: auto; top: calc(100% - 6px); transform: translateY(-4px) }
.lvn-root[data-pos^="bar-"] .lvn-prov-open .lvn-prov, .lvn-root[data-pos^="top"] .lvn-prov-open .lvn-prov { transform: none }
@media (prefers-reduced-motion: reduce) { .lvn-root .lvn-prov { transition: none } }

/* ---- Announcement bar (display mode - fixed overlay, zero CLS) ---- */
.lvn-root[data-pos^="bar-"] { left: 0; right: 0; width: 100%; padding: 0; gap: 0 }
.lvn-root[data-pos="bar-top"] { top: 0; bottom: auto }
.lvn-root[data-pos="bar-bottom"] { bottom: 0; top: auto }
.lvn-root[data-pos^="bar-"] .lvn-card {
  width: 100%;
  max-width: none;
  border-radius: 0;
  justify-content: center;
  box-shadow: none;
  border-left: none;
  border-right: none;
  gap: 10px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
.lvn-root[data-pos="bar-top"] .lvn-card { padding-top: max(11px, calc(env(safe-area-inset-top) + 4px)) }
.lvn-root[data-pos="bar-bottom"] .lvn-card { padding-bottom: max(11px, calc(env(safe-area-inset-bottom) + 4px)) }
.lvn-root[data-pos^="bar-"] .lvn-body { flex: 0 1 auto }
.lvn-root[data-pos="bar-top"] .lvn-in-slide { animation-name: lvn-slide-down }