/* Live notification popups. Bottom-right on desktop (out of the way of the nav
   and the work), full-width top on mobile (where the phone already owns the
   bottom edge with the tab bar). Light + dark from the start. */
.ln-host{
  position:fixed; right:18px; bottom:18px; z-index:5500;
  display:flex; flex-direction:column; gap:10px;
  width:min(380px, calc(100vw - 36px));
  pointer-events:none;                      /* the host never eats clicks */
}
.ln-host > *{ pointer-events:auto; }

.ln-card{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:12px;
  padding:13px 14px;
  background:#fff; color:#0f172a;
  border:1px solid #e2e8f0; border-left-width:4px;
  border-radius:14px;
  box-shadow:0 12px 34px rgba(15,37,64,.16);
  animation:lnIn .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lnIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.ln-card.ln-out{ animation:lnOut .18s ease-in both; }
@keyframes lnOut{ to{ opacity:0; transform:translateX(12px); } }
/* a repeat lands on an existing card — pulse so it's noticed without stacking */
.ln-card.ln-pulse{ animation:lnPulse .4s ease; }
@keyframes lnPulse{ 50%{ transform:scale(1.02); } }

.ln-ico{
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.ln-ico svg{ width:18px; height:18px; }

.ln-main{ min-width:0; }                     /* lets long text truncate, not overflow */
.ln-title{
  font-weight:800; font-size:13.5px; line-height:1.25;
  display:flex; align-items:center; gap:7px;
}
.ln-body{
  margin-top:2px; font-size:12.5px; color:#64748b; line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ln-count{
  background:#0f172a; color:#fff; font-size:10px; font-weight:800;
  border-radius:999px; padding:1px 6px; min-width:18px; text-align:center;
}
.ln-x{
  background:none; border:0; cursor:pointer; color:#94a3b8;
  font-size:20px; line-height:1; padding:0 2px; align-self:start;
}
.ln-x:hover{ color:#0f172a; }
.ln-clickable{ cursor:pointer; }
.ln-clickable:hover{ box-shadow:0 16px 40px rgba(15,37,64,.22); transform:translateY(-1px); }

/* Per-kind accent: the colour IS the category, so it's recognisable before it's read. */
.ln-order    { border-left-color:#0284c7; } .ln-order    .ln-ico{ background:#e0f2fe; color:#0369a1; }
.ln-po       { border-left-color:#7c3aed; } .ln-po       .ln-ico{ background:#ede9fe; color:#6d28d9; }
.ln-vendor   { border-left-color:#f59e0b; } .ln-vendor   .ln-ico{ background:#fef3c7; color:#b45309; }
.ln-stock    { border-left-color:#dc2626; } .ln-stock    .ln-ico{ background:#fee2e2; color:#b91c1c; }
.ln-message  { border-left-color:#0d9488; } .ln-message  .ln-ico{ background:#ccfbf1; color:#0f766e; }
.ln-container{ border-left-color:#16a34a; } .ln-container.ln-ico, .ln-container .ln-ico{ background:#dcfce7; color:#15803d; }
.ln-info     { border-left-color:#64748b; } .ln-info     .ln-ico{ background:#eef2f7; color:#475569; }

/* Dark — same palette as dark.css. Built in, not retrofitted. */
html[data-theme="dark"] .ln-card{
  background:#0f1e2e; color:#e6edf6;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 16px 44px rgba(0,0,0,.55);
}
html[data-theme="dark"] .ln-body{ color:#a9b8cc; }
html[data-theme="dark"] .ln-x{ color:#7f8ea3; }
html[data-theme="dark"] .ln-x:hover{ color:#e6edf6; }
html[data-theme="dark"] .ln-count{ background:#e6edf6; color:#0f1e2e; }
html[data-theme="dark"] .ln-order    .ln-ico{ background:rgba(2,132,199,.18);  color:#7dd3fc; }
html[data-theme="dark"] .ln-po       .ln-ico{ background:rgba(124,58,237,.18); color:#c4b5fd; }
html[data-theme="dark"] .ln-vendor   .ln-ico{ background:rgba(245,158,11,.18); color:#fcd34d; }
html[data-theme="dark"] .ln-stock    .ln-ico{ background:rgba(220,38,38,.18);  color:#fca5a5; }
html[data-theme="dark"] .ln-message  .ln-ico{ background:rgba(13,148,136,.18); color:#5eead4; }
html[data-theme="dark"] .ln-container .ln-ico{ background:rgba(22,163,74,.18); color:#86efac; }
html[data-theme="dark"] .ln-info     .ln-ico{ background:rgba(255,255,255,.08); color:#a9b8cc; }

/* Mobile: the bottom edge belongs to the tab bar, so come from the top instead. */
@media (max-width: 1180px){
  .ln-host{
    right:8px; left:8px; bottom:auto; top:calc(8px + env(safe-area-inset-top));
    width:auto;
  }
  @keyframes lnIn{ from{ opacity:0; transform:translateY(-8px) scale(.98); } to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion: reduce){
  .ln-card, .ln-card.ln-out, .ln-card.ln-pulse{ animation:none; }
  .ln-clickable:hover{ transform:none; }
}