/* Hearth — Update Banner. Vanilla DOM, scoped to #hearth-update-banner. */
#hearth-update-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 10000;
  background: #2D412D;
  color: #FAF7F2;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transform: translateY(150%);
  transition: transform 0.3s ease-out;
}

#hearth-update-banner.visible {
  transform: translateY(0);
}

#hearth-update-banner .msg {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

#hearth-update-banner button {
  background: #D88033;
  color: #FFFFFF;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

#hearth-update-banner button:hover {
  background: #C96828;
}

#hearth-update-banner button:disabled {
  opacity: 0.7;
  cursor: default;
}

@media (min-width: 600px) {
  #hearth-update-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 380px;
  }
}