/*
  Wortic macOS UI Kit — Toast / Banner / Inline Alert
  wm-toast, wm-banner, wm-alert
  Liquid Glass: toast como cápsula de vidro elevada; banner e alert
  com tinta suave e hairline da própria cor.
*/

@layer components {
  /* Toast — flutuante, canto da tela, transitório */
  .wm-toast-stack {
    position: fixed;
    bottom: var(--wm-space-8);
    right: var(--wm-space-8);
    z-index: var(--wm-z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--wm-space-4);
  }

  .wm-toast {
    --_glass-bg: var(--wm-material-sheet-bg);
    --_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    --_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05),
      0 2px 6px rgba(0, 0, 0, 0.06),
      0 16px 40px -8px rgba(0, 0, 0, 0.24);

    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-5);
    width: 320px;
    padding: var(--wm-space-6) var(--wm-space-6) var(--wm-space-6)
      var(--wm-space-5);
    border-radius: var(--wm-radius-xl);
    background: var(--_glass-bg);
    backdrop-filter: blur(var(--wm-material-blur-heavy, 44px))
      saturate(var(--wm-material-saturate));
    -webkit-backdrop-filter: blur(var(--wm-material-blur-heavy, 44px))
      saturate(var(--wm-material-saturate));
    border: none;
    box-shadow: var(--_inner-light), var(--_float-shadow);
    animation: wm-toast-in var(--wm-duration-slow) var(--wm-ease-spring) both;
  }
  @keyframes wm-toast-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  :root[data-theme="dark"] .wm-toast {
    --_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
      0 2px 8px rgba(0, 0, 0, 0.35),
      0 20px 50px -8px rgba(0, 0, 0, 0.6);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wm-toast {
      --_inner-light: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      --_float-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.35),
        0 20px 50px -8px rgba(0, 0, 0, 0.6);
    }
  }

  .wm-toast__icon {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--wm-info) 85%, #ffffff) 0%,
      var(--wm-info) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 2px 6px -1px color-mix(in srgb, var(--wm-info) 40%, transparent);
  }
  .wm-toast--success .wm-toast__icon {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--wm-success) 85%, #ffffff) 0%,
      var(--wm-success) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 2px 6px -1px color-mix(in srgb, var(--wm-success) 40%, transparent);
  }
  .wm-toast--warning .wm-toast__icon {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--wm-warning) 85%, #ffffff) 0%,
      var(--wm-warning) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 2px 6px -1px color-mix(in srgb, var(--wm-warning) 40%, transparent);
  }
  .wm-toast--error .wm-toast__icon {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--wm-error) 85%, #ffffff) 0%,
      var(--wm-error) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 2px 6px -1px color-mix(in srgb, var(--wm-error) 40%, transparent);
  }
  .wm-toast__icon .wm-icon {
    width: 12px;
    height: 12px;
  }

  .wm-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
  }
  .wm-toast__title {
    display: block;
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
  }
  .wm-toast__message {
    display: block;
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-line-height-normal);
    color: var(--wm-label-secondary);
    margin-top: 2px;
  }
  .wm-toast__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: -2px -2px 0 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--wm-label-tertiary);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-toast__close:hover {
    color: var(--wm-label-primary);
    background: var(--wm-fill-secondary);
  }
  .wm-toast__close:active {
    transform: scale(0.92);
  }

  /* Banner — fixo no topo do conteúdo, não flutuante */
  .wm-banner {
    display: flex;
    align-items: center;
    gap: var(--wm-space-4);
    padding: var(--wm-space-5) var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    background: var(--wm-info-fill);
    box-shadow: inset 0 0 0 0.5px
      color-mix(in srgb, var(--wm-info) 22%, transparent);
    color: var(--wm-label-primary);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-normal);
  }
  .wm-banner--success {
    background: var(--wm-success-fill);
    box-shadow: inset 0 0 0 0.5px
      color-mix(in srgb, var(--wm-success) 22%, transparent);
  }
  .wm-banner--warning {
    background: var(--wm-warning-fill);
    box-shadow: inset 0 0 0 0.5px
      color-mix(in srgb, var(--wm-warning) 22%, transparent);
  }
  .wm-banner--error {
    background: var(--wm-error-fill);
    box-shadow: inset 0 0 0 0.5px
      color-mix(in srgb, var(--wm-error) 22%, transparent);
  }
  .wm-banner__icon {
    flex: none;
    color: var(--wm-info);
  }
  .wm-banner--success .wm-banner__icon { color: var(--wm-success); }
  .wm-banner--warning .wm-banner__icon { color: var(--wm-warning); }
  .wm-banner--error .wm-banner__icon { color: var(--wm-error); }
  .wm-banner__message {
    flex: 1 1 auto;
  }

  /* Inline alert — dentro de forms/dialogs, sem ícone circular */
  .wm-alert {
    display: flex;
    gap: var(--wm-space-3);
    padding: var(--wm-space-4) var(--wm-space-5);
    border-radius: var(--wm-radius-md);
    background: var(--wm-fill-quaternary);
    box-shadow: inset 0 0 0 0.5px var(--wm-separator);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-line-height-normal);
    color: var(--wm-label-secondary);
  }
  .wm-alert--error {
    background: var(--wm-error-fill);
    box-shadow: inset 0 0 0 0.5px
      color-mix(in srgb, var(--wm-error) 25%, transparent);
    color: color-mix(in srgb, var(--wm-error) 88%, var(--wm-label-primary));
  }
  .wm-alert--warning {
    background: var(--wm-warning-fill);
    box-shadow: inset 0 0 0 0.5px
      color-mix(in srgb, var(--wm-warning) 25%, transparent);
    color: color-mix(in srgb, var(--wm-warning) 88%, var(--wm-label-primary));
  }
  .wm-alert--success {
    background: var(--wm-success-fill);
    box-shadow: inset 0 0 0 0.5px
      color-mix(in srgb, var(--wm-success) 25%, transparent);
    color: color-mix(in srgb, var(--wm-success) 88%, var(--wm-label-primary));
  }
  .wm-alert__icon {
    flex: none;
    margin-top: 1px;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-toast {
      animation: none;
    }
    .wm-toast__close {
      transition: none;
    }
  }
}