/*
 * Owner, 29 Oct: messages in the site's style, shown where the visitor is looking (front_js/notify.js).
 *  .cy-msg        a message bar inside the open pop-up / sheet, or in the form that was just sent
 *  .cy-msg--card  the same, as a light floating card when there is no pop-up or form to put it in
 * OLD (same day, D-089): toastr restyled as a dark rounded card at the top right; the owner found the dark card out
 * of place. toastr's own container is no longer used (notify.js routes every toastr call here).
 */
.cy-msg {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 11px 14px; border-radius: 14px;
  font-family: var(--cy-font); font-size: 13.5px; line-height: 19px; font-weight: 550; text-align: left;
  animation: cy-msg-in .45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.cy-msg svg { width: 20px; height: 20px; flex: none; margin-top: -1px; }
.cy-msg span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cy-msg--success { background: var(--cy-success-50); color: var(--cy-success-800); box-shadow: inset 0 0 0 1px var(--cy-success-200); }
.cy-msg--error { background: var(--cy-critical-50); color: var(--cy-critical-700); box-shadow: inset 0 0 0 1px var(--cy-critical-200); }
.cy-msg--warning { background: var(--cy-warning-50); color: var(--cy-warning-700); box-shadow: inset 0 0 0 1px var(--cy-warning-200); }
.cy-msg--info { background: var(--cy-info-50); color: var(--cy-info-700); box-shadow: inset 0 0 0 1px var(--cy-info-200); }
.cy-msg.is-out { opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }

.cy-msgs {
  position: fixed; z-index: 1070; top: 92px; right: 16px; width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.cy-msg--card { margin: 0; background: #fff; color: var(--cy-text-primary); pointer-events: auto;
  box-shadow: 0 18px 40px -18px rgba(21, 17, 15, .35), 0 0 0 1px var(--cy-darken-100); }
.cy-msg--card.cy-msg--success { box-shadow: 0 18px 40px -18px rgba(21, 17, 15, .35), inset 3px 0 0 var(--cy-success-600), 0 0 0 1px var(--cy-darken-100); }
.cy-msg--card.cy-msg--error { box-shadow: 0 18px 40px -18px rgba(21, 17, 15, .35), inset 3px 0 0 var(--cy-critical-600), 0 0 0 1px var(--cy-darken-100); }
.cy-msg--card.cy-msg--warning { box-shadow: 0 18px 40px -18px rgba(21, 17, 15, .35), inset 3px 0 0 var(--cy-warning-600), 0 0 0 1px var(--cy-darken-100); }
.cy-msg--card.cy-msg--info { box-shadow: 0 18px 40px -18px rgba(21, 17, 15, .35), inset 3px 0 0 var(--cy-info-600), 0 0 0 1px var(--cy-darken-100); }
@media (max-width: 991.98px) {
  .cy-msgs { top: auto; right: 12px; left: 12px; width: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes cy-msg-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .cy-msg { animation: none; } .cy-msg.is-out { transition: none; } }
/* The login / OTP pop-ups also print errors as a plain red line; hide it while the message bar says the same. */
.modal-content:has(.cy-msg--error) .cy-auth__err, .modal-content:has(.cy-msg--warning) .cy-auth__err { display: none; }

/* ==================================================================================================================
   D-319 (owner, 8 Nov: "alerts should be proper, with proper colours from the design system and micro-animations").
   - Icons in the status tokens (success-600, critical-600, warning-600, info-600), each with its own small motion as the
     message appears: the tick draws itself, the error mark shakes once, the warning mark wiggles, the info dot pulses.
   - A close button on every message; a thin countdown line on messages that close themselves (hover or focus pauses it).
   - Leaving: fade + slide + the height folds away, so what sits under the message closes up instead of jumping.
   ================================================================================================================== */
.cy-msg { position: relative; overflow: hidden; align-items: center; padding-right: 8px; transition: max-height .38s cubic-bezier(.2, 0, 0, 1), opacity .25s ease, transform .3s ease, margin .38s ease, padding .38s ease; }
.cy-msg--success { --msg-c: var(--cy-success-600); --msg-soft: var(--cy-success-100); }
.cy-msg--error { --msg-c: var(--cy-critical-600); --msg-soft: var(--cy-critical-100); }
.cy-msg--warning { --msg-c: var(--cy-warning-600); --msg-soft: var(--cy-warning-100); }
.cy-msg--info { --msg-c: var(--cy-info-600); --msg-soft: var(--cy-info-100); }
.cy-msg .cy-msg__ic { width: 22px; height: 22px; flex: none; margin-top: 0; overflow: visible; }
.cy-msg__dot { fill: var(--msg-c); transform-origin: 11px 11px; animation: cy-msg-dot .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.cy-msg__tick { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; animation: cy-msg-draw .42s .22s cubic-bezier(.2, 0, 0, 1) forwards; }
.cy-msg__mark { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.cy-msg__pt { fill: #fff; }
/* a soft ring that spreads once from the icon */
.cy-msg::before { content: ""; position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--msg-soft); z-index: 0; animation: cy-msg-ring .7s .1s ease-out both; pointer-events: none; }
.cy-msg > * { position: relative; z-index: 1; }
.cy-msg--error { animation: cy-msg-in .45s cubic-bezier(.34, 1.56, .64, 1) both, cy-msg-shake .4s .35s ease both; }
.cy-msg--warning .cy-msg__ic { transform-origin: 11px 20px; animation: cy-msg-wiggle .6s .3s ease both; }
.cy-msg--info .cy-msg__ic { animation: cy-msg-pulse .6s .3s ease both; }
@keyframes cy-msg-dot { from { transform: scale(0); } }
@keyframes cy-msg-draw { to { stroke-dashoffset: 0; } }
@keyframes cy-msg-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@keyframes cy-msg-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes cy-msg-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
@keyframes cy-msg-pulse { 0%, 100% { transform: none; } 40% { transform: scale(1.18); } }
/* close */
.cy-msg__x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; margin: -4px 0 -4px 2px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: currentColor; opacity: .55; cursor: pointer; transition: opacity .15s, background-color .15s, transform .15s; }
.cy-msg__x:hover { opacity: 1; background: rgba(21, 17, 15, .06); }
.cy-msg__x:active { transform: scale(.9); }
.cy-msg__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* countdown line (paused while the pointer or focus is on the message) */
.cy-msg__time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--msg-c); opacity: .55; transform-origin: left; animation: cy-msg-time linear forwards; z-index: 2; }
.cy-msg:hover .cy-msg__time, .cy-msg:focus-within .cy-msg__time { animation-play-state: paused; }
@keyframes cy-msg-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* cards: slide in from the side on desktop, up from the bottom on phones */
.cy-msg--card { animation: cy-msg-card .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.cy-msg--card.cy-msg--error { animation: cy-msg-card .5s cubic-bezier(.34, 1.56, .64, 1) both, cy-msg-shake .4s .4s ease both; }
@keyframes cy-msg-card { from { opacity: 0; transform: translateX(28px) scale(.96); } }
@media (max-width: 991.98px) { @keyframes cy-msg-card { from { opacity: 0; transform: translateY(24px) scale(.96); } } }
/* leaving */
.cy-msg.is-out { opacity: 0; transform: translateY(-6px) scale(.98); margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0; padding-bottom: 0; }
.cy-msg--card.is-out { transform: translateX(24px); }
@media (prefers-reduced-motion: reduce) {
  .cy-msg, .cy-msg--card, .cy-msg--error, .cy-msg::before, .cy-msg__dot, .cy-msg .cy-msg__ic { animation: none !important; }
  .cy-msg__tick { animation: none; stroke-dashoffset: 0; }
  /* the countdown keeps running (it times the message, it is not decoration) */
}