/* Toasts — the short-lived message at the top of the screen.
   ==========================================================================
   The old one was a Bootstrap toast: square corners, a solid colour slab across
   its top half with a bell and the word SUCCESS in it, and a flat white body
   underneath. It shouted for four seconds and looked a decade old.

   This one belongs to the same family as the floating nav bars — 12px off the
   edges, a 22px corner, glass over whatever is behind, one layered shadow — and
   the colour is tinted rather than solid: the icon sits in a soft wash of its
   own colour instead of a saturated dot, which is what makes the difference
   between an alert pasted on top and a piece of the app.

   Colour appears in three places only: the icon tint, the glyph, and the
   hairline that counts down to the toast leaving. */

.cs-toast {
  position: fixed;
  z-index: 9991;
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  left: 12px;
  right: 12px;
  margin: 0 auto;
  max-width: 440px;

  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 14px 16px;

  border-radius: 22px;
  background: var(--cs-surface, #fff);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);

  /* Three layers: a hairline ring instead of a border, a close shadow for
     weight, and a wide soft one for height off the page. The inset highlight
     along the top edge is what makes glass look like glass. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(16, 16, 30, 0.05),
    0 2px 8px rgba(16, 16, 30, 0.07),
    0 16px 40px -8px rgba(16, 16, 30, 0.28);

  /* Hidden until the script shows it, so a slow stylesheet never flashes a
     finished toast in the corner before it animates. */
  opacity: 0;
  transform: translate3d(0, -18px, 0) scale(0.94);
  pointer-events: none;
  will-change: transform, opacity;
}

/* A little overshoot on the way in: it reads as the toast dropping into place
   rather than a box appearing. On the way out it just lifts and fades, because
   nobody needs a flourish for something they have finished with. */
.cs-toast.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  transition: transform 460ms cubic-bezier(0.17, 1.24, 0.38, 1), opacity 240ms ease-out;
}

.cs-toast.is-out {
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(0.97);
  pointer-events: none;
  transition: transform 220ms ease-in, opacity 200ms ease-in;
}

/* While a finger is on it the toast follows, so a swipe up feels like throwing
   it away rather than waiting for a timer. */
.cs-toast.is-dragging {
  transition: none;
}

/* A tinted square, not a saturated circle. Each kind sets --cs-toast-accent and
   everything else on the card reads from it. */
.cs-toast {
  --cs-toast-accent: #363e5e;
  --cs-toast-wash: rgba(54, 62, 94, 0.16);
}
.cs-toast[data-cs-kind="success"] {
  --cs-toast-accent: #2e9e5b;
  --cs-toast-wash: rgba(46, 158, 91, 0.18);
}
.cs-toast[data-cs-kind="danger"] {
  --cs-toast-accent: #e05038;
  --cs-toast-wash: rgba(224, 80, 56, 0.17);
}
.cs-toast[data-cs-kind="warning"] {
  --cs-toast-accent: #c98b1e;
  --cs-toast-wash: rgba(224, 184, 120, 0.28);
}

.cs-toast-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 16px;
  color: var(--cs-toast-accent);
  background: var(--cs-toast-wash);
}

.cs-toast-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* The kind, not a headline: small, tracked out, quiet. The sentence below is
   what people actually read. */
.cs-toast-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-muted, #6b7085);
}

.cs-toast-text {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--cs-text, #1a1f36);
  overflow-wrap: anywhere;
}

/* Notification toasts put a face and a link in the message. */
.cs-toast-text a { color: inherit; text-decoration: none; }
.cs-toast-text img { border-radius: 50%; }

/* With a face in the message there is no chip, so the message block starts at
   the card's own padding and the picture takes the chip's place. */
.cs-toast-faced .cs-toast-text { padding-top: 1px; }

.cs-toast-close {
  flex: none;
  align-self: flex-start;
  width: 28px;
  height: 28px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--cs-faint, #9a9aa5);
  opacity: 0.6;
  -webkit-tap-highlight-color: transparent;
}

/* The countdown: a short rounded hairline inset from the corners, so it reads
   as part of the card rather than a line stuck to its edge. It is the only
   thing that says the toast will leave on its own, and it stops while a finger
   or a pointer is on the card.

   It empties along a faint track of its own colour (the ::after below), because
   a bar with nothing behind it looks like a stray stub once it is half gone
   rather than like something running out. */
.cs-toast::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: var(--cs-toast-accent);
  opacity: 0.1;
  pointer-events: none;
}

.cs-toast-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  transform: scaleX(1);
  transform-origin: left center;
  background: var(--cs-toast-accent);
  opacity: 0.85;
  z-index: 1;
}

.cs-toast.is-counting .cs-toast-bar {
  animation: cs-toast-countdown linear forwards;
}

.cs-toast.is-held .cs-toast-bar {
  animation-play-state: paused;
}

@keyframes cs-toast-countdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

body.theme-dark .cs-toast {
  background: var(--cs-surface, #1c1f24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 18px 44px -8px rgba(0, 0, 0, 0.6);
}

/* The washes are mixed for a light ground; on a dark one they disappear, so
   each is lifted and the glyph takes a brighter step of the same hue. */
body.theme-dark .cs-toast {
  --cs-toast-accent: #8e9bc8;
  --cs-toast-wash: rgba(142, 155, 200, 0.16);
}
body.theme-dark .cs-toast[data-cs-kind="success"] {
  --cs-toast-accent: #52c07d;
  --cs-toast-wash: rgba(82, 192, 125, 0.16);
}
body.theme-dark .cs-toast[data-cs-kind="danger"] {
  --cs-toast-accent: #f0765f;
  --cs-toast-wash: rgba(240, 118, 95, 0.16);
}
body.theme-dark .cs-toast[data-cs-kind="warning"] {
  --cs-toast-accent: #e0b878;
  --cs-toast-wash: rgba(224, 184, 120, 0.16);
}

body .cs-toast .cs-toast-text { color: var(--cs-text, #1a1f36); }
body.theme-dark .cs-toast .cs-toast-text { color: var(--cs-text, #f4f1ea); }
body .cs-toast .cs-toast-head { color: var(--cs-muted, #6b7085); }
body.theme-dark .cs-toast .cs-toast-head { color: var(--cs-muted, #a9adbe); }
body .cs-toast .cs-toast-text a,
body.theme-dark .cs-toast .cs-toast-text a { color: inherit; }

/* Wide screens: out of the middle and over to the right, where a toast does not
   sit on top of what you were reading. */
@media (min-width: 768px) {
  .cs-toast {
    left: auto;
    right: 18px;
    margin: 0;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
  }
}

/* No sliding, no overshoot, no draining bar — it fades in, waits and fades out.
   The countdown is pure motion and carries no information the toast leaving
   does not already give. */
@media (prefers-reduced-motion: reduce) {
  .cs-toast,
  .cs-toast.is-in,
  .cs-toast.is-out {
    transform: none;
    transition: opacity 140ms linear;
  }
  .cs-toast-bar,
  .cs-toast::after { display: none; }
}