/* =========================================================
   LIFTRIX Toast System
   Shared Toast Notification UI
========================================================= */

:root {
  --liftrix-toast-z: 10000;
  --liftrix-toast-width: 360px;
  --liftrix-toast-radius: 18px;

  --liftrix-toast-bg: rgba(8, 18, 36, 0.96);
  --liftrix-toast-border: rgba(217, 228, 246, 0.14);
  --liftrix-toast-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);

  --liftrix-toast-title: #f8fbff;
  --liftrix-toast-text: rgba(226, 236, 250, 0.78);

  --liftrix-toast-success: #22c55e;
  --liftrix-toast-error: #ef4444;
  --liftrix-toast-warning: #f59e0b;
  --liftrix-toast-info: #3b82f6;
}

/* =========================================================
   Toast Container
========================================================= */

.liftrixToastStack {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: var(--liftrix-toast-z);

  width: min(var(--liftrix-toast-width), calc(100vw - 32px));

  display: grid;
  gap: 12px;

  pointer-events: none;
}

/* =========================================================
   Toast Base
========================================================= */

.liftrixToast {
  position: relative;
  width: 100%;

  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;

  padding: 15px 14px 15px 14px;

  border: 1px solid var(--liftrix-toast-border);
  border-radius: var(--liftrix-toast-radius);

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--liftrix-toast-bg);

  box-shadow: var(--liftrix-toast-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  color: var(--liftrix-toast-title);

  pointer-events: auto;

  animation: liftrixToastIn 0.22s ease-out both;
}

.liftrixToast::before {
  content: "";
  width: 10px;
  height: 38px;
  border-radius: 999px;
  background: var(--liftrix-toast-info);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.38);
}

/* =========================================================
   Toast Content
========================================================= */

.liftrixToast__content {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.liftrixToast__title {
  margin: 0;

  font-size: 13px;
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: 0.02em;

  color: var(--liftrix-toast-title);
}

.liftrixToast__text {
  margin: 0;

  font-size: 12px;
  line-height: 1.45;
  font-weight: 650;

  color: var(--liftrix-toast-text);
}

/* =========================================================
   Toast Close Button
========================================================= */

.liftrixToast__close {
  appearance: none;
  -webkit-appearance: none;

  width: 30px;
  height: 30px;

  display: inline-grid;
  place-items: center;

  border: 1px solid rgba(217, 228, 246, 0.12);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.055);
  color: rgba(238, 246, 255, 0.82);

  font-size: 16px;
  line-height: 1;
  font-weight: 800;

  cursor: pointer;
}

.liftrixToast__close:hover {
  background: rgba(255, 255, 255, 0.095);
  color: #ffffff;
}

/* =========================================================
   Toast Variants
========================================================= */

.liftrixToast--success::before {
  background: var(--liftrix-toast-success);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.42);
}

.liftrixToast--error::before,
.liftrixToast--danger::before {
  background: var(--liftrix-toast-error);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.42);
}

.liftrixToast--warning::before {
  background: var(--liftrix-toast-warning);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.42);
}

.liftrixToast--info::before {
  background: var(--liftrix-toast-info);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.42);
}

/* =========================================================
   Lightweight Existing Compatibility
========================================================= */

.toast,
.flashMessage,
.flash-message,
.alertMessage,
.alert-message,
.successMessage,
.errorMessage {
  border-radius: var(--liftrix-toast-radius);
  border: 1px solid var(--liftrix-toast-border);

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--liftrix-toast-bg);

  box-shadow: var(--liftrix-toast-shadow);

  color: var(--liftrix-toast-title);
}

/* =========================================================
   Position Helpers
========================================================= */

.liftrixToastStack--topLeft {
  top: 22px;
  right: auto;
  left: 22px;
}

.liftrixToastStack--bottomRight {
  top: auto;
  right: 22px;
  bottom: 22px;
}

.liftrixToastStack--bottomLeft {
  top: auto;
  right: auto;
  bottom: 22px;
  left: 22px;
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 640px) {
  .liftrixToastStack {
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: 12px;
    left: 12px;

    width: auto;
  }

  .liftrixToast {
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: 12px;

    padding: 14px 12px;

    border-radius: 16px;
  }

  .liftrixToast::before {
    width: 8px;
    height: 36px;
  }

  .liftrixToast__title {
    font-size: 13px;
  }

  .liftrixToast__text {
    font-size: 12px;
  }

  .liftrixToast__close {
    width: 28px;
    height: 28px;
  }
}

/* =========================================================
   Animation
========================================================= */

@keyframes liftrixToastIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes liftrixToastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

.liftrixToast.isLeaving {
  animation: liftrixToastOut 0.18s ease-in both;
}

/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .liftrixToast,
  .liftrixToast.isLeaving {
    animation: none;
  }
}
/* =========================================================
   Legacy Top Toast Compatibility
   app_ui.css から移管
========================================================= */

.topToast{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:4000;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  padding:
    calc(env(safe-area-inset-top, 0px) + 8px)
    12px
    0;

  pointer-events:none;
  opacity:0;
  transform:translateY(-18px);
  animation:topToastInOut var(--toast-duration, 1.3s) ease forwards;
  box-sizing:border-box;
}

.topToast__inner{
  width:min(100%, 420px);
  min-height:44px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--toast-border, rgba(63, 169, 255, 0.28));

  background:
    linear-gradient(
      180deg,
      var(--toast-bg-top, rgba(83, 150, 255, 0.98)) 0%,
      var(--toast-bg-bottom, rgba(30, 79, 216, 0.96)) 100%
    );

  color:#F8FBFF;
  font-size:13px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:0.01em;
  text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,0.18);

  box-shadow:
    0 14px 30px rgba(6, 16, 34, 0.28),
    0 6px 18px rgba(10, 24, 52, 0.22);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.topToast.is-success{
  --toast-bg-top:rgba(83, 150, 255, 0.98);
  --toast-bg-bottom:rgba(30, 79, 216, 0.96);
  --toast-border:rgba(63, 169, 255, 0.30);
  --toast-duration:1.25s;
}

.topToast.is-error{
  --toast-bg-top:rgba(196, 69, 80, 0.98);
  --toast-bg-bottom:rgba(176, 54, 64, 0.96);
  --toast-border:rgba(255, 125, 135, 0.28);
  --toast-duration:1.7s;
}

.topToast.is-delete{
  --toast-bg-top:rgba(143, 58, 67, 0.98);
  --toast-bg-bottom:rgba(124, 49, 57, 0.96);
  --toast-border:rgba(255, 125, 135, 0.24);
  --toast-duration:1.3s;
}

.topToast.is-cancel{
  --toast-bg-top:rgba(78, 97, 132, 0.98);
  --toast-bg-bottom:rgba(63, 80, 112, 0.96);
  --toast-border:rgba(159, 176, 203, 0.24);
  --toast-duration:1.3s;
}

.topToast.is-info{
  --toast-bg-top:rgba(54, 78, 124, 0.98);
  --toast-bg-bottom:rgba(42, 63, 102, 0.96);
  --toast-border:rgba(136, 167, 220, 0.24);
  --toast-duration:1.4s;
}

@keyframes topToastInOut{
  0%{
    opacity:0;
    transform:translateY(-18px);
  }
  12%{
    opacity:1;
    transform:translateY(0);
  }
  78%{
    opacity:1;
    transform:translateY(0);
  }
  100%{
    opacity:0;
    transform:translateY(-14px);
  }
}