/* ==========================================================================
   Telkini Notify v1 — modern dashboard notifications (toasts)
   Self-contained: plain HTML/CSS/JS, no libraries. Works with or without the site.
   - Semantic types: success · error · warning · info · loading
   - Soft layered shadows, tinted icon badge, accent rail, pausable progress bar
   - Sonner-style stack: collapsed deck, fans out on hover / focus
   - Swipe to dismiss (touch + mouse), Esc closes the newest, pause on hover/focus/hidden tab
   - RTL aware (logical properties), dark mode (html.dark or .tkn-dark), reduced motion
   ========================================================================== */

.tkn-region {
  --tkn-top: 84px;                 /* below the floating header */
  --tkn-gap: 10px;
  --tkn-width: 380px;
  --tkn-radius: 16px;
  --tkn-bg: #ffffff;
  --tkn-ink: #0f172a;
  --tkn-muted: #64748b;
  --tkn-line: rgba(15, 23, 42, .08);
  --tkn-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 4px 10px -2px rgba(15, 23, 42, .06),
    0 18px 36px -12px rgba(15, 23, 42, .18);
  --tkn-font: "Cairo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  position: fixed; z-index: 2147483000;   /* above modals and overlays */
  top: var(--tkn-top); inset-inline-end: 20px;
  width: var(--tkn-width); max-width: calc(100vw - 32px);
  margin: 0; padding: 0; list-style: none;
  pointer-events: none;
  font-family: var(--tkn-font);
}
html.dark .tkn-region, .tkn-region.tkn-dark {
  --tkn-bg: #111a2e;
  --tkn-ink: #f1f5f9;
  --tkn-muted: #94a3b8;
  --tkn-line: rgba(148, 163, 184, .16);
  --tkn-shadow:
    0 1px 2px rgba(0, 0, 0, .3),
    0 6px 14px -4px rgba(0, 0, 0, .35),
    0 22px 44px -14px rgba(0, 0, 0, .6);
}

/* ---------- one notification ---------- */
.tkn {
  /* per-type colors (overridden below) */
  --c: #16a34a; --c-soft: rgba(22, 163, 74, .12); --c-ring: rgba(22, 163, 74, .22);
  --i: 0;            /* index in the stack (0 = newest)      */
  --lift: 0px;       /* offset when the deck is expanded     */
  --swipe: 0px;      /* live swipe distance                  */

  position: absolute; top: 0; inset-inline: 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px;
  padding: 14px 14px 16px; border-radius: var(--tkn-radius);
  background: var(--tkn-bg); color: var(--tkn-ink);
  border: 1px solid var(--tkn-line);
  box-shadow: var(--tkn-shadow);
  overflow: hidden; pointer-events: auto; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  transform-origin: top center;

  /* collapsed deck: older toasts tuck behind, smaller and dimmer */
  transform: translate3d(var(--swipe), calc(var(--i) * 10px), 0) scale(calc(1 - var(--i) * .05));
  opacity: calc(1 - var(--i) * .18);
  z-index: calc(50 - var(--i));
  transition:
    transform .45s cubic-bezier(.21, 1.02, .73, 1),
    opacity .35s ease,
    box-shadow .25s ease;
  will-change: transform, opacity;
}
/* accent rail on the start edge */
.tkn::before {
  content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--c);
}
[dir="rtl"] .tkn::before, .tkn[dir="rtl"]::before { border-radius: 3px 0 0 3px; }

/* only the 3 newest are visible in the deck */
.tkn[data-hidden="true"] { opacity: 0; pointer-events: none; }
/* collapsed deck: cards behind take the front card's height, so only a thin edge peeks out */
.tkn-region:not([data-expanded="true"]) .tkn:not([data-front="true"]) { height: var(--front-h, auto); }
/* only the front toast shows its content when collapsed */
.tkn:not([data-front="true"]) > * { opacity: 0; transition: opacity .2s ease; }

/* expanded deck (hover / keyboard focus): toasts fan out as a list */
.tkn-region[data-expanded="true"] .tkn {
  transform: translate3d(var(--swipe), var(--lift), 0) scale(1);
  opacity: 1;
}
.tkn-region[data-expanded="true"] .tkn > * { opacity: 1; }
.tkn-region[data-expanded="true"] .tkn[data-hidden="true"] { opacity: 0; pointer-events: none; }

/* enter / exit */
.tkn[data-state="enter"] { transform: translate3d(0, -14px, 0) scale(.96); opacity: 0; }
.tkn[data-state="exit"]  { transform: translate3d(var(--swipe), -10px, 0) scale(.96) !important; opacity: 0 !important; transition-duration: .3s; }
.tkn[data-swiping="true"] { transition: none; }
.tkn[data-swipe-out="true"] {
  transform: translate3d(calc(var(--swipe) * 3), var(--lift), 0) !important;
  opacity: 0 !important; transition: transform .28s ease-out, opacity .28s ease-out;
}

/* ---------- parts ---------- */
.tkn-icon {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--c-soft); color: var(--c);
  box-shadow: inset 0 0 0 1px var(--c-ring);
}
.tkn-icon svg, .tkn-icon i, .tkn-icon .tk-mi { width: 19px !important; height: 19px !important; }
.tkn-body { min-width: 0; padding-top: 1px; }
.tkn-title {
  margin: 0; font-size: 14px; font-weight: 800; line-height: 1.45; color: var(--tkn-ink);
  overflow-wrap: anywhere;
}
.tkn-msg {
  margin: 2px 0 0; font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--tkn-muted);
  overflow-wrap: anywhere;
}
.tkn-title + .tkn-msg:empty { display: none; }
.tkn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tkn-btn {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  height: 30px; padding: 0 12px; border-radius: 9px;
  font-size: 12.5px; font-weight: 800;
  background: var(--c); color: #fff;
  box-shadow: 0 4px 12px -6px var(--c);
  transition: filter .2s ease, transform .15s ease;
}
.tkn-btn:hover { filter: brightness(1.07); }
.tkn-btn:active { transform: scale(.97); }
.tkn-btn.tkn-btn-ghost { background: transparent; color: var(--tkn-muted); box-shadow: inset 0 0 0 1px var(--tkn-line); }
.tkn-close {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  width: 28px; height: 28px; margin: -4px -4px 0 0; border-radius: 9px;
  display: grid; place-items: center; color: var(--tkn-muted);
  transition: background .2s ease, color .2s ease;
}
[dir="rtl"] .tkn-close { margin: -4px 0 0 -4px; }
.tkn-close:hover { background: rgba(100, 116, 139, .12); color: var(--tkn-ink); }
.tkn-close svg { width: 15px; height: 15px; }
.tkn-btn:focus-visible, .tkn-close:focus-visible, .tkn:focus-visible {
  outline: 3px solid var(--c-ring); outline-offset: 2px;
}

/* progress bar = time left (pauses with the timer) */
.tkn-progress {
  position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--c); opacity: .35;
  transform-origin: left center; transform: scaleX(1);
}
[dir="rtl"] .tkn-progress, .tkn[dir="rtl"] .tkn-progress { transform-origin: right center; }
.tkn-progress[data-run="true"] { animation: tkn-bar var(--dur, 5000ms) linear forwards; }
.tkn[data-paused="true"] .tkn-progress { animation-play-state: paused; }
@keyframes tkn-bar { to { transform: scaleX(0); } }

/* loading spinner */
.tkn-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--c-ring); border-top-color: var(--c); animation: tkn-rot .8s linear infinite; }
@keyframes tkn-rot { to { transform: rotate(360deg); } }

/* success check draws itself */
.tkn-draw path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: tkn-draw .5s .12s ease forwards; }
@keyframes tkn-draw { to { stroke-dashoffset: 0; } }

/* ---------- semantic colors ---------- */
.tkn[data-type="success"] { --c: #16a34a; --c-soft: rgba(22, 163, 74, .12); --c-ring: rgba(22, 163, 74, .24); }
.tkn[data-type="error"]   { --c: #dc2626; --c-soft: rgba(220, 38, 38, .10); --c-ring: rgba(220, 38, 38, .22); }
.tkn[data-type="warning"] { --c: #d97706; --c-soft: rgba(217, 119, 6, .12); --c-ring: rgba(217, 119, 6, .24); }
.tkn[data-type="info"]    { --c: #2563eb; --c-soft: rgba(37, 99, 235, .10); --c-ring: rgba(37, 99, 235, .22); }
.tkn[data-type="loading"] { --c: #64748b; --c-soft: rgba(100, 116, 139, .10); --c-ring: rgba(100, 116, 139, .22); }
html.dark .tkn[data-type="success"], .tkn-dark .tkn[data-type="success"] { --c: #4ade80; --c-soft: rgba(74, 222, 128, .13); --c-ring: rgba(74, 222, 128, .26); }
html.dark .tkn[data-type="error"],   .tkn-dark .tkn[data-type="error"]   { --c: #f87171; --c-soft: rgba(248, 113, 113, .13); --c-ring: rgba(248, 113, 113, .26); }
html.dark .tkn[data-type="warning"], .tkn-dark .tkn[data-type="warning"] { --c: #fbbf24; --c-soft: rgba(251, 191, 36, .13); --c-ring: rgba(251, 191, 36, .26); }
html.dark .tkn[data-type="info"],    .tkn-dark .tkn[data-type="info"]    { --c: #60a5fa; --c-soft: rgba(96, 165, 250, .13); --c-ring: rgba(96, 165, 250, .26); }
html.dark .tkn[data-type="loading"], .tkn-dark .tkn[data-type="loading"] { --c: #94a3b8; }
html.dark .tkn-btn, .tkn-dark .tkn-btn { color: #0b1220; }
html.dark .tkn-btn.tkn-btn-ghost, .tkn-dark .tkn-btn.tkn-btn-ghost { color: var(--tkn-muted); }

/* screen-reader only live regions */
.tkn-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- phones: full width at the top, under the header ---------- */
@media (max-width: 640px) {
  .tkn-region { --tkn-top: 74px; inset-inline: 12px; width: auto; max-width: none; }
  .tkn { padding: 12px 12px 14px; gap: 10px; }
  .tkn-icon { width: 32px; height: 32px; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .tkn, .tkn[data-swipe-out="true"] { transition: opacity .2s linear !important; }
  .tkn[data-state="enter"], .tkn[data-state="exit"] { transform: none !important; }
  .tkn-draw path { animation: none; stroke-dashoffset: 0; }
  .tkn-spin { animation-duration: 1.6s; }
}