.viewport {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: var(--z-toast);
  display: flex;
  width: 100%;
  max-width: 420px;
  flex-direction: column-reverse;
  gap: var(--sp-3);
  pointer-events: none;
}

.mobile {
  top: calc(env(safe-area-inset-top, 0px) + var(--sp-3));
  right: 50%;
  bottom: auto;
  left: 50%;
  width: min(calc(100vw - var(--sp-6)), 420px);
  max-width: min(calc(100vw - var(--sp-6)), 420px);
  transform: translateX(-50%);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--surface-overlay-border);
  border-radius: var(--radius-overlay);
  background: var(--material-overlay);
  box-shadow: var(--surface-overlay-shadow);
  pointer-events: auto;
  animation: slideIn var(--duration-slower) var(--ease-out);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.clickable {
  cursor: pointer;
}

.toast:hover {
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xl);
}

.success {
  border-left: 3px solid var(--state-success-text);
}

.error {
  border-left: 3px solid var(--state-error-text);
}

.warning {
  border-left: 3px solid var(--state-warning-text);
}

.info {
  border-left: 3px solid var(--state-info-text);
}

.success .icon {
  color: var(--state-success-icon);
  background: var(--state-success-bg);
}

.error .icon {
  color: var(--state-error-icon);
  background: var(--state-error-bg);
}

.warning .icon {
  color: var(--state-warning-icon);
  background: var(--state-warning-bg);
}

.info .icon {
  color: var(--state-info-icon);
  background: var(--state-info-bg);
}

.icon {
  margin-top: 1px;
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--icon-surface-subtle);
}

.content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-1);
}

.title {
  color: var(--text-primary);
  font-size: var(--type-body-3-size);
  line-height: var(--type-body-3-line-height);
  font-weight: var(--type-body-3-weight);
}

.body {
  color: var(--text-secondary);
  font-size: var(--type-body-5-size);
  line-height: var(--type-body-5-line-height);
  font-weight: var(--type-body-5-weight);
  white-space: pre-line;
  word-break: break-word;
}

.action {
  flex-shrink: 0;
  align-self: center;
  border-radius: var(--radius-sm);
  color: var(--status-info-fg);
  font-size: var(--type-body-3-size);
  line-height: var(--type-body-3-line-height);
  font-weight: var(--type-body-3-weight);
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.action:hover {
  background: var(--surface-hover);
}

.close {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 640px) {
  .viewport {
    right: var(--sp-3);
    bottom: var(--sp-3);
    left: var(--sp-3);
    max-width: none;
  }

  .mobile {
    top: calc(env(safe-area-inset-top, 0px) + var(--sp-3));
    right: 50%;
    bottom: auto;
    left: 50%;
    width: min(calc(100vw - var(--sp-6)), 480px);
    max-width: min(calc(100vw - var(--sp-6)), 480px);
    transform: translateX(-50%);
  }
}
