.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  max-width: 360px;
  border-radius: 8px;
  padding: 14px 16px;
  color: #fff;
  background: var(--deep);
  box-shadow: var(--shadow);
  font-weight: 800;
}

.app-update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100vw - 32px));
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(20, 58, 86, 0.14);
  border-radius: 10px;
  color: #fff;
  background: var(--deep);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.app-update-banner span {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.app-update-banner button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 940px) {
.app-update-banner {
    bottom: calc(68px + var(--safe-bottom));
  }
}

@media (max-width: 430px) {
.app-update-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
  }
}

@media (max-width: 430px) {
.app-update-banner button {
    width: 100%;
  }
}

.toast {
  border-radius: var(--radius);
}

.toast.is-error {
  border-color: rgba(185, 28, 28, 0.35);
  color: #7f1d1d;
  background: #fff1f2;
}

.toast.is-success {
  border-color: rgba(17, 199, 189, 0.34);
  color: #075e59;
  background: #ecfffb;
}

.toast.is-warning {
  border-color: rgba(240, 180, 41, 0.42);
  color: #78350f;
  background: #fff7ed;
}

.toast.has-action {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(420px, calc(100vw - 32px));
  max-width: none;
}

.toast.has-action > span {
  min-width: 0;
  flex: 1;
}

.toast-action {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.toast-action:hover,
.toast-action:focus-visible {
  background: rgba(255, 255, 255, 0.62);
}

@media (max-width: 760px) {
.toast {
    right: max(10px, var(--safe-right));
    bottom: calc(78px + var(--safe-bottom));
    left: max(10px, var(--safe-left));
    max-width: none;
  }
}
.field-notice-rail {
  position: fixed;
  top: calc(88px + var(--safe-top, 0px));
  right: max(12px, var(--safe-right));
  z-index: 95;
  display: grid;
  gap: 8px;
  width: min(560px, calc(100vw - 24px));
  max-height: min(40vh, 300px);
  max-height: min(40dvh, 300px);
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}

.field-notice-rail > :not([hidden]) {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 12px;
  transform: none;
  pointer-events: auto;
}

.field-notice-copy,
.field-notice-rail [data-app-update-copy],
.field-storage-warning p {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  max-height: 20vh;
  max-height: 20dvh;
  overflow: auto;
}

.field-notice-close,
.app-update-banner .field-notice-close {
  flex: 0 0 44px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 8px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.field-notice-close svg { width: 20px; height: 20px; }
.field-notice-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.field-storage-warning { color: #513c06; background: #fff3cd; border: 2px solid #9b7000; border-radius: 10px; }
.field-storage-inline { margin: 6px 0; color: #78350f; font-size: 12px; line-height: 1.4; }

body .global-network-banner,
body .global-action-banner {
  position: relative;
  top: auto;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

body .global-network-banner:not([hidden]) + .global-action-banner:not([hidden]) { top: auto; }

@media (max-width: 760px) {
  .field-notice-rail { top: calc(72px + var(--safe-top, 0px)); right: 12px; }
  .field-notice-rail > :not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
  .field-notice-rail .field-notice-close { grid-column: 2; grid-row: 1; }
  .field-notice-rail .toast-action,
  .field-notice-rail [data-action='apply-app-update'],
  .field-storage-warning > .button { grid-column: 1 / -1; min-height: 44px; width: 100%; }
  body .global-network-banner,
  body .global-action-banner { top: auto; grid-template-columns: auto minmax(0, 1fr) 44px; }
  .global-network-banner .field-notice-close,
  .global-action-banner .field-notice-close { grid-column: 3; grid-row: 1; }
  body .global-network-banner:not([hidden]) + .global-action-banner:not([hidden]) { top: auto; }
}