/*
 * Global toast component.
 *
 * Markup and behavior live in showToast() in assets/js/app.js. Keep all shared
 * toast layout, themes, states, motion and responsive rules in this file.
 */

body[data-interface-theme="atelier"] {
  --toast-surface: rgba(255,253,248,.97);
  --toast-ink: #18312b;
  --toast-muted: #65706b;
  --toast-border: rgba(40,121,103,.22);
  --toast-accent: #287967;
  --toast-accent-soft: #dceee8;
  --toast-shadow: rgba(5,39,31,.25);
}

body[data-interface-theme="graphite"] {
  --toast-surface: rgba(247,249,251,.97);
  --toast-ink: #20282f;
  --toast-muted: #66717a;
  --toast-border: rgba(77,98,113,.24);
  --toast-accent: #526b7c;
  --toast-accent-soft: #e0e7eb;
  --toast-shadow: rgba(20,29,36,.28);
}

body[data-interface-theme="navy"] {
  --toast-surface: rgba(245,249,253,.97);
  --toast-ink: #102b43;
  --toast-muted: #607487;
  --toast-border: rgba(36,97,143,.24);
  --toast-accent: #24618f;
  --toast-accent-soft: #dceaf5;
  --toast-shadow: rgba(4,34,59,.3);
}

body[data-interface-theme="paper"] {
  --toast-surface: rgba(255,253,247,.98);
  --toast-ink: #332d23;
  --toast-muted: #756d60;
  --toast-border: rgba(138,106,53,.23);
  --toast-accent: #8a6a35;
  --toast-accent-soft: #f1e8d6;
  --toast-shadow: rgba(49,39,23,.24);
}

.toast-region {
  position: fixed;
  inset: auto 18px 18px auto;
  z-index: 2147483647;
  width: min(400px, calc(100vw - 36px));
  display: grid;
  gap: 12px;
  justify-items: end;
  pointer-events: none;
}

.toast-center-header {
  order: 2;
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: #fff;
  background: rgba(18,22,21,.94);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
  pointer-events: auto;
}

.toast-center-header[hidden] { display: none; }
.toast-center-header span { font-size: .75rem; font-weight: 750; letter-spacing: .01em; }
.toast-center-header b { color: #9be3d2; }
.toast-center-header button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(142,213,197,.3);
  border-radius: 8px;
  color: #baf1e4;
  background: rgba(15,118,110,.2);
  font: inherit;
  font-size: .7rem;
  font-weight: 850;
  cursor: pointer;
}
.toast-center-header button:hover { color: #062a22; background: #8ed5c5; }

.toast-backdrop {
  position: fixed;
  z-index: 640;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(9,13,12,.12);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: opacity 300ms ease, visibility 300ms ease, backdrop-filter 380ms ease;
}

body.toast-active .toast-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

body.modal-open .toast-backdrop {
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition-duration: 120ms;
}

.app-toast {
  order: 1;
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  grid-template-areas:
    "icon copy close"
    "icon action requirement";
  align-items: center;
  gap: 13px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(23,22,21,.13);
  border-radius: 16px;
  color: #171615;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 58px rgba(0,0,0,.28), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateX(24px) scale(.98);
  transition: opacity 480ms ease, transform 520ms cubic-bezier(.16,1,.3,1);
  pointer-events: auto;
}

.app-toast.is-visible { opacity: 1; transform: translateX(0) scale(1); }
.app-toast.is-leaving { opacity: 0; transform: translateX(18px) scale(.97); transition-duration: 420ms; pointer-events: none; }
.app-toast.is-visible:not(.is-leaving) { animation: toastSlideIn 520ms cubic-bezier(.16,1,.3,1) both; }
.app-toast.is-leaving { animation: toastSlideOut 500ms cubic-bezier(.4,0,.2,1) both; }

.app-toast-icon {
  grid-area: icon;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #0b625a;
  background: #e4f3ef;
}
.app-toast-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.app-toast-copy { grid-area: copy; min-width: 0; display: grid; gap: 2px; }
.app-toast-copy strong { font-size: .94rem; }
.app-toast-copy span { color: #55514c; font-size: .84rem; line-height: 1.35; }
.app-toast-action {
  grid-area: action;
  min-height: 34px;
  justify-self: start;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #062a22;
  background: #8ed5c5;
  font-size: .75rem;
  font-weight: 900;
}
.app-toast-close {
  grid-area: close;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  color: #6c6862;
  background: transparent;
  font-size: 1.2rem;
}
.app-toast-close:hover { color: #171615; background: #eeeae4; }
.app-toast-requirement { grid-area: requirement; color: #55514c; font-size: .74rem; line-height: 1.3; }

.app-toast.is-mandatory {
  grid-template-columns: 46px minmax(0,1fr);
  grid-template-areas:
    "icon copy"
    "icon controls";
}
.app-toast-controls { grid-area: controls; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.app-toast-controls .app-toast-action { flex: 0 0 auto; }
.app-toast-controls .app-toast-requirement { flex: 0 1 auto; min-width: 0; }

body[data-interface-theme] .app-toast {
  position: relative;
  color: var(--toast-ink);
  border-color: var(--toast-border);
  background: var(--toast-surface);
  box-shadow: 0 22px 58px var(--toast-shadow), inset 0 1px 0 rgba(255,255,255,.9);
}
body[data-interface-theme] .app-toast::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 4px;
  border-radius: 0 6px 6px 0;
  background: var(--toast-tone,var(--toast-accent));
  content: "";
}
body[data-interface-theme] .app-toast.is-error { --toast-tone: #b84456; --toast-tone-soft: #f6dfe3; }
body[data-interface-theme] .app-toast.is-success { --toast-tone: var(--toast-accent); --toast-tone-soft: var(--toast-accent-soft); }
body[data-interface-theme] .app-toast-icon { color: var(--toast-tone,var(--toast-accent)); background: var(--toast-tone-soft,var(--toast-accent-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--toast-tone,var(--toast-accent)) 13%,transparent); }
body[data-interface-theme] .app-toast-copy strong { color: var(--toast-ink); }
body[data-interface-theme] .app-toast-copy span { color: var(--toast-muted); }
body[data-interface-theme] .app-toast-action { color: #fff; background: var(--toast-tone,var(--toast-accent)); box-shadow: 0 5px 13px color-mix(in srgb,var(--toast-tone,var(--toast-accent)) 27%,transparent); }
body[data-interface-theme] .app-toast-close { color: var(--toast-muted); }
body[data-interface-theme] .app-toast-close:hover { color: var(--toast-ink); background: var(--toast-accent-soft); }

body[data-interface-theme] .toast-center-header {
  min-height: 46px;
  padding: 6px 8px 6px 14px;
  color: var(--toast-ink);
  border-color: var(--toast-border);
  background: var(--toast-surface);
  box-shadow: 0 14px 38px var(--toast-shadow);
}
body[data-interface-theme] .toast-center-header b { color: var(--toast-accent); }
body[data-interface-theme] .toast-center-header button { color: var(--toast-accent); border-color: var(--toast-border); background: var(--toast-accent-soft); }
body[data-interface-theme] .toast-center-header button:hover { color: #fff; background: var(--toast-accent); }
body[data-interface-theme] .toast-center-header button[data-variant="danger"] {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: .7rem;
  color: color-mix(in srgb,var(--uia-danger) 72%,var(--toast-ink)) !important;
  border-color: color-mix(in srgb,var(--uia-danger) 48%,var(--toast-border)) !important;
  background: color-mix(in srgb,var(--uia-danger) 28%,var(--toast-surface)) !important;
  background-image: none !important;
}
body[data-interface-theme] .toast-center-header button[data-variant="danger"]:hover:not(:disabled) {
  color: #fff !important;
  border-color: var(--uia-danger) !important;
  background: var(--uia-danger) !important;
  box-shadow: 0 5px 14px color-mix(in srgb,var(--uia-danger) 28%,transparent) !important;
  transform: none !important;
}

body[data-interface-theme] .app-toast.is-update {
  --toast-tone: #ffc85c;
  --toast-tone-soft: rgba(255,216,130,.17);
  --toast-ink: #fff9e9;
  --toast-muted: rgba(255,249,233,.76);
  --toast-border: rgba(255,202,92,.58);
  background: radial-gradient(circle at 12% 10%,rgba(255,216,130,.18),transparent 34%), linear-gradient(135deg,rgba(49,34,10,.98),rgba(91,57,12,.98));
  box-shadow: 0 24px 64px rgba(34,20,3,.46), 0 0 0 2px rgba(255,202,92,.18), 0 0 30px rgba(255,185,61,.1), inset 0 1px 0 rgba(255,239,198,.22);
}
body[data-interface-theme] .app-toast.is-update::before { top: 0; bottom: 0; width: 6px; border-radius: 0; box-shadow: 0 0 22px rgba(255,200,92,.72); }
body[data-interface-theme] .app-toast.is-update .app-toast-icon { color: #ffe09a; border: 1px solid rgba(255,224,154,.3); background: rgba(255,224,154,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(20,11,1,.22); animation: toastUpdateIcon 2.4s ease-in-out infinite; }
body[data-interface-theme] .app-toast.is-update .app-toast-action { color: #352207; background: linear-gradient(135deg,#ffe29a,#ffc14d); box-shadow: 0 8px 24px rgba(255,193,77,.3); }
body[data-interface-theme] .app-toast.is-update .app-toast-action:hover { filter: brightness(1.08); transform: translateY(-1px); }
body[data-interface-theme] .app-toast.is-update.is-mandatory .app-toast-requirement { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 4px 8px; border: 1px solid rgba(255,224,154,.25); border-radius: 7px; color: #ffe09a; background: rgba(255,224,154,.09); font-size: .7rem; font-weight: 850; letter-spacing: .02em; }
body[data-interface-theme] .app-toast.is-update.is-mandatory.is-updating .app-toast-requirement { color: #fff4ce; }
body[data-interface-theme] .app-toast.is-update.is-mandatory .app-toast-action:disabled { cursor: wait; opacity: .76; transform: none; }
body.toast-active:has(.app-toast.is-update.is-mandatory) .toast-backdrop { cursor: not-allowed; }
body[data-interface-theme] .app-toast.is-update.is-mandatory.requires-attention { animation: mandatoryUpdateShake .62s cubic-bezier(.36,.07,.19,.97) both !important; }
body[data-interface-theme] .app-toast.is-update .app-toast-close { color: rgba(255,249,233,.7); }
body[data-interface-theme] .app-toast.is-update .app-toast-close:hover { color: #fff; background: rgba(255,255,255,.1); }

@keyframes toastSlideIn {
  0% { opacity: 0; filter: blur(7px); transform: translate3d(42px,14px,0) scale(.94); }
  65% { opacity: 1; filter: blur(0); transform: translate3d(-4px,0,0) scale(1.01); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
}
@keyframes toastSlideOut {
  0% { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
  100% { opacity: 0; filter: blur(5px); transform: translate3d(46px,8px,0) scale(.94); }
}
@keyframes toastMobileIn {
  0% { opacity: 0; transform: translate3d(0,26px,0) scale(.97); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes toastMobileOut {
  0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  100% { opacity: 0; transform: translate3d(0,22px,0) scale(.97); }
}
@keyframes toastUpdateIcon { 50% { color: #fff4ce; background: rgba(255,224,154,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 22px rgba(255,200,92,.22); } }
@keyframes mandatoryUpdateShake { 0%,100% { transform: translateX(0) scale(1); } 15% { transform: translateX(-9px) rotate(-.45deg); } 30% { transform: translateX(8px) rotate(.4deg); } 45% { transform: translateX(-6px) rotate(-.3deg); } 60% { transform: translateX(5px) rotate(.2deg); } 75% { transform: translateX(-3px); } }
@keyframes mandatoryUpdatePulse { 50% { box-shadow: 0 24px 64px rgba(34,20,3,.46), 0 0 0 5px rgba(255,202,92,.42); } }

@media (max-width: 860px) {
  .toast-region {
    inset: auto max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
    width: auto;
  }
  body.toast-active .toast-backdrop { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .app-toast.is-visible:not(.is-leaving) { animation: toastMobileIn 360ms cubic-bezier(.16,1,.3,1) both; }
  .app-toast.is-leaving { animation: toastMobileOut 320ms cubic-bezier(.4,0,.2,1) both; }
}

@media (max-width: 520px) {
  .app-toast { grid-template-columns: 42px minmax(0,1fr) auto; gap: 8px 10px; min-height: 0; padding: 11px; }
  .app-toast-icon { width: 42px; height: 42px; }
  .app-toast-copy strong { font-size: .86rem; }
  .app-toast-copy span { font-size: .76rem; }
  .app-toast-requirement { font-size: .68rem; }
  .app-toast-controls { gap: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-toast.is-visible:not(.is-leaving),
  .app-toast.is-leaving { animation-duration: 1ms; }
  body[data-interface-theme] .app-toast.is-update .app-toast-icon { animation: none; }
  body[data-interface-theme] .app-toast.is-update.is-mandatory.requires-attention { animation: mandatoryUpdatePulse .3s ease 2 !important; }
}