:root {
  --mt-font: "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mt-radius: 16px;
  --mt-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mt-z: 99990;
}

.mt-dock {
  position: fixed;
  z-index: var(--mt-z);
  display: flex;
  flex-direction: column;
  gap: var(--mt-gap, 12px);
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
  padding: 0;
}

.mt-dock[data-mt-edge="top"] {
  top: max(var(--mt-inset-y, 20px), env(safe-area-inset-top));
}

.mt-dock[data-mt-edge="bottom"] {
  bottom: max(var(--mt-inset-y, 20px), env(safe-area-inset-bottom));
  flex-direction: column-reverse;
}

.mt-dock[data-mt-side="left"] {
  left: max(var(--mt-inset-x, 20px), env(safe-area-inset-left));
}

.mt-dock[data-mt-side="right"] {
  right: max(var(--mt-inset-x, 20px), env(safe-area-inset-right));
}

.mt-dock[data-mt-side="center"] {
  left: 50%;
  transform: translateX(-50%);
}

.mt-item {
  --mt-accent: #6cb6ff;
  --mt-accent-soft: rgba(108, 182, 255, 0.16);
  --mt-card: rgba(20, 20, 26, 0.92);
  --mt-card-solid: #16161c;
  --mt-border: rgba(255, 255, 255, 0.08);
  --mt-text: #f4f4f5;
  --mt-muted: #a1a1aa;
  --mt-ghost: rgba(255, 255, 255, 0.08);
  --mt-ghost-hover: rgba(255, 255, 255, 0.14);
  --mt-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), 0 0 0 1px var(--mt-border);

  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "body close";
  align-items: center;
  gap: 2px 10px;
  padding: 14px 12px 14px 16px;
  border-radius: var(--mt-radius);
  color: var(--mt-text);
  font-family: var(--mt-font);
  -webkit-font-smoothing: antialiased;
  pointer-events: auto;
  background:
    linear-gradient(var(--mt-accent), var(--mt-accent)) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, var(--mt-accent-soft) 0%, transparent 4.25rem),
    var(--mt-card);
  box-shadow: var(--mt-shadow);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: opacity 0.28s var(--mt-ease);
  animation: mt-in-top 0.42s var(--mt-ease) both;
  position: relative;
  overflow: hidden;
}

.mt-item[data-mt-edge="bottom"] {
  animation-name: mt-in-bottom;
}

.mt-item[data-mt-theme="light"] {
  --mt-card: rgba(255, 255, 255, 0.94);
  --mt-card-solid: #fff;
  --mt-border: rgba(24, 24, 32, 0.08);
  --mt-text: #18181b;
  --mt-muted: #71717a;
  --mt-ghost: rgba(24, 24, 32, 0.06);
  --mt-ghost-hover: rgba(24, 24, 32, 0.1);
  --mt-shadow: 0 18px 48px rgba(24, 24, 32, 0.14), 0 0 0 1px var(--mt-border);
}

.mt-item[data-mt-type="success"] {
  --mt-accent: #3ecf8e;
  --mt-accent-soft: rgba(62, 207, 142, 0.16);
}

.mt-item[data-mt-type="error"] {
  --mt-accent: #f07178;
  --mt-accent-soft: rgba(240, 113, 120, 0.16);
}

.mt-item[data-mt-type="warning"] {
  --mt-accent: #f5c15c;
  --mt-accent-soft: rgba(245, 193, 92, 0.16);
}

.mt-item[data-mt-type="info"],
.mt-item[data-mt-type="loading"] {
  --mt-accent: #6cb6ff;
  --mt-accent-soft: rgba(108, 182, 255, 0.16);
}

.mt-item[data-mt-style="bootstrap"] {
  --mt-font: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
  --mt-radius: var(--bs-border-radius, 0.375rem);
  font-family: var(--mt-font);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(var(--mt-accent), var(--mt-accent)) 0 0 / 100% 3px no-repeat,
    var(--mt-card);
  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.mt-item[data-mt-style="bootstrap"][data-mt-theme="light"] {
  --mt-card: var(--bs-body-bg, #fff);
  --mt-card-solid: var(--bs-body-bg, #fff);
  --mt-border: var(--bs-border-color, #dee2e6);
  --mt-text: var(--bs-body-color, #212529);
  --mt-muted: var(--bs-secondary-color, #6c757d);
  --mt-ghost: var(--bs-tertiary-bg, #f8f9fa);
  --mt-ghost-hover: var(--bs-secondary-bg, #e9ecef);
  --mt-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.mt-item[data-mt-style="bootstrap"][data-mt-theme="dark"] {
  --mt-card: #212529;
  --mt-card-solid: #212529;
  --mt-border: rgba(255, 255, 255, 0.15);
  --mt-text: #f8f9fa;
  --mt-muted: #adb5bd;
  --mt-ghost: rgba(255, 255, 255, 0.08);
  --mt-ghost-hover: rgba(255, 255, 255, 0.14);
  --mt-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.45);
}

html[data-bs-theme="dark"] .mt-item[data-mt-style="bootstrap"][data-mt-theme="dark"] {
  --mt-card: var(--bs-body-bg, #212529);
  --mt-card-solid: var(--bs-body-bg, #212529);
  --mt-border: var(--bs-border-color, rgba(255, 255, 255, 0.15));
  --mt-text: var(--bs-body-color, #dee2e6);
  --mt-muted: var(--bs-secondary-color, #adb5bd);
  --mt-ghost: var(--bs-tertiary-bg, rgba(255, 255, 255, 0.08));
  --mt-ghost-hover: var(--bs-secondary-bg, rgba(255, 255, 255, 0.14));
}

.mt-item[data-mt-style="bootstrap"][data-mt-type="success"] {
  --mt-accent: var(--bs-success, #198754);
  --mt-accent-soft: color-mix(in srgb, var(--bs-success, #198754) 16%, transparent);
}

.mt-item[data-mt-style="bootstrap"][data-mt-type="error"] {
  --mt-accent: var(--bs-danger, #dc3545);
  --mt-accent-soft: color-mix(in srgb, var(--bs-danger, #dc3545) 16%, transparent);
}

.mt-item[data-mt-style="bootstrap"][data-mt-type="warning"] {
  --mt-accent: var(--bs-warning, #ffc107);
  --mt-accent-soft: color-mix(in srgb, var(--bs-warning, #ffc107) 16%, transparent);
}

.mt-item[data-mt-style="bootstrap"][data-mt-type="info"],
.mt-item[data-mt-style="bootstrap"][data-mt-type="loading"] {
  --mt-accent: var(--bs-info, #0dcaf0);
  --mt-accent-soft: color-mix(in srgb, var(--bs-info, #0dcaf0) 16%, transparent);
}

.mt-item[data-mt-style="bootstrap"] .mt-action,
.mt-item[data-mt-style="bootstrap"] .mt-close {
  border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.mt-item[data-mt-style="bootstrap"] .mt-action {
  background: var(--mt-accent);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0;
}

.mt-item[data-mt-style="bootstrap"] .mt-action:hover {
  filter: brightness(0.92);
  color: #fff;
}

.mt-item[data-mt-style="bootstrap"][data-mt-type="warning"] .mt-action,
.mt-item[data-mt-style="bootstrap"][data-mt-type="warning"] .mt-action:hover {
  color: #212529;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mt-item {
    background:
      linear-gradient(var(--mt-accent), var(--mt-accent)) 0 0 / 100% 2px no-repeat,
      linear-gradient(180deg, var(--mt-accent-soft) 0%, transparent 4.25rem),
      var(--mt-card-solid);
  }
}

.mt-item.mt-item--link {
  cursor: pointer;
}

.mt-dock[data-mt-recede="on"]:not(:hover) .mt-item:not(:first-child) {
  opacity: 0.42;
}

.mt-item--out {
  animation: mt-out-top 0.2s ease both;
  pointer-events: none;
  transition: none;
}

.mt-item--swap {
  animation: none;
}

.mt-item[data-mt-edge="bottom"].mt-item--out {
  animation-name: mt-out-bottom;
}

.mt-item.mt-item--icon {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon body close";
}

.mt-item.mt-item--action {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "body action close";
}

.mt-item.mt-item--icon.mt-item--action {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "icon body action close";
}

.mt-item.mt-item--action:not(:has(.mt-close)) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "body action";
}

.mt-item.mt-item--icon.mt-item--action:not(:has(.mt-close)) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon body action";
}

.mt-icon {
  grid-area: icon;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--mt-accent);
  background: var(--mt-accent-soft);
}

.mt-svg {
  width: 18px;
  height: 18px;
  display: block;
}

.mt-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--mt-accent-soft);
  border-top-color: var(--mt-accent);
  animation: mt-spin 0.7s linear infinite;
}

.mt-stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mt-draw 0.65s var(--mt-ease) forwards;
}

.mt-stroke--mark {
  animation-delay: 0.18s;
}

.mt-stroke--dot {
  opacity: 0;
  animation: mt-dot 0.28s 0.4s var(--mt-ease) forwards;
}

.mt-body {
  grid-area: body;
  min-width: 0;
  padding-right: 4px;
}

.mt-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.35;
}

.mt-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mt-muted);
  overflow-wrap: anywhere;
}

.mt-title + .mt-text {
  margin-top: 4px;
}

.mt-text p {
  margin: 0 0 0.45em;
}

.mt-text p:last-child {
  margin-bottom: 0;
}

.mt-text a {
  color: var(--mt-accent);
  text-decoration: none;
}

.mt-text a:hover {
  text-decoration: underline;
}

.mt-close {
  appearance: none;
  grid-area: close;
  width: 28px;
  height: 28px;
  margin: 0 -2px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mt-muted);
  cursor: pointer;
}

.mt-close svg {
  width: 14px;
  height: 14px;
  display: block;
}

.mt-close:hover {
  color: var(--mt-text);
  background: var(--mt-ghost-hover);
}

.mt-close:focus-visible {
  outline: 2px solid var(--mt-accent);
  outline-offset: 1px;
}

.mt-action {
  appearance: none;
  grid-area: action;
  display: inline-flex;
  align-items: center;
  margin: 0;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--mt-accent-soft);
  color: var(--mt-accent);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  max-width: 8.5rem;
  cursor: pointer;
}

.mt-action:hover {
  background: var(--mt-accent);
  color: var(--mt-card-solid);
}

.mt-action:focus-visible {
  outline: 2px solid var(--mt-accent);
  outline-offset: 1px;
}

.mt-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--mt-accent);
  transform: scaleX(1);
  transform-origin: left center;
  animation: mt-timer var(--mt-timer, 4s) linear forwards;
  pointer-events: none;
}

.mt-item[data-mt-pause="on"]:hover .mt-progress {
  animation-play-state: paused;
}

@keyframes mt-in-top {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mt-in-bottom {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mt-out-top {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@keyframes mt-out-bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@keyframes mt-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes mt-dot {
  to { opacity: 1; }
}

@keyframes mt-timer {
  to { transform: scaleX(0); }
}

@keyframes mt-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mt-item,
  .mt-item--out,
  .mt-stroke,
  .mt-stroke--dot,
  .mt-progress,
  .mt-spinner {
    animation: none !important;
  }

  .mt-progress {
    display: none;
  }

  .mt-stroke {
    stroke-dashoffset: 0;
  }

  .mt-stroke--dot {
    opacity: 1;
  }

  .mt-dock[data-mt-recede="on"]:not(:hover) .mt-item:not(:first-child) {
    transition: none;
  }
}