/* 10-NOTIFICATIONS — toast, error pages, spinner */
@layer pages {

  /* ── Error pages ── */
  .error-page {
    min-height: calc(100dvh - var(--headerbar-h) - var(--tabbar-h, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    max-width: 440px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* ── Toast notifications ── */
  #toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: var(--z-modal, 1055);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 320px;
  }

  .toast-item {
    background: var(--clr-berry-900, #1a0510);
    border: 1px solid var(--white-a12);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-md-s);
    color: var(--white-a85);
    pointer-events: all;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    transform: translateX(120%);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
    opacity: 0;
    max-width: 320px;
    word-break: break-word;
  }

  .toast-item.toast-visible {
    transform: translateX(0);
    opacity: 1;
  }

  .toast-success { border-left: 3px solid var(--clr-success); }
  .toast-error { border-left: 3px solid var(--clr-danger); }
  .toast-warning { border-left: 3px solid var(--clr-warning); }
  .toast-info { border-left: 3px solid var(--clr-berry-400); }

  .toast-msg {
    flex: 1;
    line-height: 1.4;
  }

  .toast-close {
    background: none;
    border: none;
    color: var(--white-a35);
    cursor: pointer;
    padding: 0;
    font-size: var(--fs-xl-s);
    line-height: 1;
    flex-shrink: 0;
    margin-top: -1px;
  }

  .toast-close:hover {
    color: var(--white-a75);
  }

  /* ── Confirm toast buttons ── */
  .toast-confirm-yes,
  .toast-confirm-no {
    font-size: var(--fs-base-s);
    padding: 2px 10px;
    border-radius: 3px;
    cursor: pointer;
    border: none;
    margin-left: 6px;
    margin-top: 4px;
  }

  .toast-confirm-yes {
    background: var(--clr-success);
    color: var(--clr-white);
  }

  .toast-confirm-no {
    background: transparent;
    color: var(--white-a50);
    border: 1px solid var(--white-a20) !important;
  }

  .toast-confirm-no:hover {
    color: var(--clr-white);
  }

  /* ── Content spinner overlay ── */
  .content-spinner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-content, 100);
    border-radius: inherit;
    transition: opacity 0.2s ease;
    opacity: 1;
  }

  .content-spinner-overlay.content-spinner-hiding {
    opacity: 0;
  }

  .content-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(var(--clr-berry-400-rgb),0.2);
    border-top-color: var(--clr-berry-400, #c4226e);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

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

} /* end @layer pages */